@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

package/dist/components/stzh-progressbar.js

@@ -5,152 +5,152 @@ import { d as defineCustomElement$2 } from './stzh-progressbar-item2.js';
 
 const stzhProgressbarCss = ".sc-stzh-progressbar-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-progressbar-h{display:none}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0}";
 
-const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /**
-     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
-     *
-     * ```
-     * {
-     *   "label": "Step Label"
-     *   "icon": "clock"
-     * }
-     * ```
-     */
-    this.data = [];
-    /** Index of the item that be active */
-    this.index = 0;
-    /** Number of steps to show below small breakpoint */
-    this.steps = 5;
-    /** Number of steps to show above small breakpoint */
-    this.stepsSmall = 6;
-    /** Number of steps to show above medium breakpoint */
-    this.stepsMedium = 0;
-    /** Number of steps to show above large breakpoint */
-    this.stepsLarge = 0;
-    /** Number of steps to show above ultra breakpoint */
-    this.stepsUltra = 0;
-    this.setCurrentSteps = () => {
-      if (media("ultra").matches && this.stepsUltra) {
-        this.currentSteps = this.stepsUltra;
-      }
-      else if (media("large").matches && this.stepsLarge) {
-        this.currentSteps = this.stepsLarge;
-      }
-      else if (media("medium").matches && this.stepsMedium) {
-        this.currentSteps = this.stepsMedium;
-      }
-      else if (media("small").matches && this.stepsSmall) {
-        this.currentSteps = this.stepsSmall;
-      }
-      else {
-        this.currentSteps = this.steps;
-      }
-      this.element.style.setProperty("--steps", this.currentSteps.toString());
-    };
-  }
-  dataWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._data = JSON.parse(newValue);
-    }
-    else {
-      this._data = newValue;
-    }
-    this.lastItemIndex = this._data.length - 1;
-    this.maxStepIndex = this.currentSteps - 1;
-    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;
-  }
-  getItemAttributes(itemIndex) {
-    const item = {};
-    item.step = itemIndex + 1;
-    item.first = itemIndex === 0;
-    item.last = itemIndex === this.lastItemIndex;
-    item.current = itemIndex === this.index;
-    item.passed = itemIndex < this.index;
-    // hide overflowings if more items than max steps in DOM
-    if (this._data.length > this.currentSteps) {
-      // add dots to last item if current index is below the last few items
-      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {
-        item.dotted = true;
-      }
-      if (this.index < 2) {
-        // hide overflowing items on the right
-        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;
-      }
-      else {
-        // add dots to first item if current item is third or above
-        if (itemIndex === 0) {
-          item.dotted = true;
-        }
-        let substract = this.index;
-        // if is within the last elements, calculate how much previous
-        // should be shown to stay on 5 visible elements
-        if (this.withinLastFewSteps) {
-          substract = this._data.length - this.maxStepIndex;
-        }
-        // hide overflowing items on left and right side
-        item.hide = itemIndex > 0 && itemIndex < substract
-          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;
-      }
-    }
-    return item;
-  }
-  componentWillLoad() {
-    this.dataWatcher(this.data);
-  }
-  connectedCallback() {
-    this.setCurrentSteps();
-    addMediaChangeListener(this.setCurrentSteps);
-  }
-  disconnectedCallback() {
-    removeMediaChangeListener(this.setCurrentSteps);
-  }
-  render() {
-    const classes = {
-      "stzh-progressbar": true,
-      [`stzh-progressbar--index-${this.index}`]: !!this.index
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, class: "stzh-progressbar__item" }), step.label))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "data": ["dataWatcher"]
-  }; }
-  static get style() { return stzhProgressbarCss; }
-}, [2, "stzh-progressbar", {
-    "data": [1],
-    "index": [2],
-    "steps": [2],
-    "stepsSmall": [2, "steps-small"],
-    "stepsMedium": [2, "steps-medium"],
-    "stepsLarge": [2, "steps-large"],
-    "stepsUltra": [2, "steps-ultra"],
-    "currentSteps": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-progressbar", "stzh-icon", "stzh-progressbar-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-progressbar":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhProgressbar$1);
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-progressbar-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
+     *
+     * ```
+     * {
+     *   "label": "Step Label"
+     *   "icon": "clock"
+     * }
+     * ```
+     */
+    this.data = [];
+    /** Index of the item that be active */
+    this.index = 0;
+    /** Number of steps to show below small breakpoint */
+    this.steps = 5;
+    /** Number of steps to show above small breakpoint */
+    this.stepsSmall = 6;
+    /** Number of steps to show above medium breakpoint */
+    this.stepsMedium = 0;
+    /** Number of steps to show above large breakpoint */
+    this.stepsLarge = 0;
+    /** Number of steps to show above ultra breakpoint */
+    this.stepsUltra = 0;
+    this.setCurrentSteps = () => {
+      if (media("ultra").matches && this.stepsUltra) {
+        this.currentSteps = this.stepsUltra;
+      }
+      else if (media("large").matches && this.stepsLarge) {
+        this.currentSteps = this.stepsLarge;
+      }
+      else if (media("medium").matches && this.stepsMedium) {
+        this.currentSteps = this.stepsMedium;
+      }
+      else if (media("small").matches && this.stepsSmall) {
+        this.currentSteps = this.stepsSmall;
+      }
+      else {
+        this.currentSteps = this.steps;
+      }
+      this.element.style.setProperty("--steps", this.currentSteps.toString());
+    };
+  }
+  dataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._data = JSON.parse(newValue);
+    }
+    else {
+      this._data = newValue;
+    }
+    this.lastItemIndex = this._data.length - 1;
+    this.maxStepIndex = this.currentSteps - 1;
+    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;
+  }
+  getItemAttributes(itemIndex) {
+    const item = {};
+    item.step = itemIndex + 1;
+    item.first = itemIndex === 0;
+    item.last = itemIndex === this.lastItemIndex;
+    item.current = itemIndex === this.index;
+    item.passed = itemIndex < this.index;
+    // hide overflowings if more items than max steps in DOM
+    if (this._data.length > this.currentSteps) {
+      // add dots to last item if current index is below the last few items
+      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {
+        item.dotted = true;
+      }
+      if (this.index < 2) {
+        // hide overflowing items on the right
+        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;
+      }
+      else {
+        // add dots to first item if current item is third or above
+        if (itemIndex === 0) {
+          item.dotted = true;
+        }
+        let substract = this.index;
+        // if is within the last elements, calculate how much previous
+        // should be shown to stay on 5 visible elements
+        if (this.withinLastFewSteps) {
+          substract = this._data.length - this.maxStepIndex;
+        }
+        // hide overflowing items on left and right side
+        item.hide = itemIndex > 0 && itemIndex < substract
+          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;
+      }
+    }
+    return item;
+  }
+  componentWillLoad() {
+    this.dataWatcher(this.data);
+  }
+  connectedCallback() {
+    this.setCurrentSteps();
+    addMediaChangeListener(this.setCurrentSteps);
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.setCurrentSteps);
+  }
+  render() {
+    const classes = {
+      "stzh-progressbar": true,
+      [`stzh-progressbar--index-${this.index}`]: !!this.index
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, class: "stzh-progressbar__item" }), step.label))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "data": ["dataWatcher"]
+  }; }
+  static get style() { return stzhProgressbarCss; }
+}, [2, "stzh-progressbar", {
+    "data": [1],
+    "index": [2],
+    "steps": [2],
+    "stepsSmall": [2, "steps-small"],
+    "stepsMedium": [2, "steps-medium"],
+    "stepsLarge": [2, "steps-large"],
+    "stepsUltra": [2, "steps-ultra"],
+    "currentSteps": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-progressbar", "stzh-icon", "stzh-progressbar-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-progressbar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhProgressbar$1);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-progressbar-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const StzhProgressbar = StzhProgressbar$1;

package/dist/components/stzh-radio2.js

@@ -7,162 +7,162 @@ import { d as defineCustomElement$1 } from './stzh-popover2.js';
 
 const stzhRadioCss = ".sc-stzh-radio-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-radio-h{display:inline-block;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-radio-h .sc-stzh-radio-s>stzh-text{--color:inherit}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.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:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radio__description-long.sc-stzh-radio{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-popover[open].sc-stzh-radio:not([open=false]) .stzh-radio__description-long-button.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__description-long-button.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radio__description-long-button.sc-stzh-radio:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.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-xxsmall)}.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:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-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}.stzh-radio__mark.sc-stzh-radio{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);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-primary, var(--stzh-color-zueriblue));width:0.375rem;height:0.375rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);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-symbol.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.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,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:focus:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:focus~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.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-error)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error)}.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,.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-grey61)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey5)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey5)}";
 
-let radioCounter = 0;
-const StzhRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhChange = createEvent(this, "stzhChange", 7);
-    this.stzhFocus = createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = createEvent(this, "stzhBlur", 7);
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** The name of the input element */
-    this.name = "";
-    /** The value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
-    this.onInput = (event) => {
-      this.checked = this.input.checked;
-      this.stzhChange.emit({
-        component: "stzh-radio",
-        originalEvent: event,
-        value: this.value,
-        checked: this.checked
-      });
-    };
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent('focus', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-radio",
-        originalEvent: event
-      });
-    };
-    this.onBlur = (event) => {
-      const blurEvent = new FocusEvent('blur', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-radio",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus input field */
-  async setFocus() {
-    this.input.focus();
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  async componentWillLoad() {
-    this.inputId = `stzh-radio-${radioCounter++}`;
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'radio');
-    }
-  }
-  render() {
-    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-radio": true,
-      "stzh-radio--has-description": descriptionUsed,
-      "stzh-radio--has-description-long": descriptionLongUsed,
-      "stzh-radio--has-error": errorUsed,
-      "stzh-radio--is-required": this.required,
-      "stzh-radio--is-invalid": this.invalid,
-      "stzh-radio--is-disabled": this.disabled
-    };
-    return (h("div", { class: classes }, h("label", { class: "stzh-radio__field-wrapper" }, h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-radio__mark" }, h("div", { class: "stzh-radio__check" })), h("div", { class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
-      h("span", { class: "stzh-radio__marker" }, h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radio__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "error": ["errorWatcher"]
-  }; }
-  static get style() { return stzhRadioCss; }
-}, [6, "stzh-radio", {
-    "localization": [16],
-    "disabled": [516],
-    "name": [513],
-    "value": [1025],
-    "invalid": [516],
-    "required": [516],
-    "showMarker": [516, "show-marker"],
-    "checked": [1540],
-    "label": [1],
-    "description": [1],
-    "descriptionLong": [1, "description-long"],
-    "error": [1],
-    "a11yDescribedby": [1, "a11y-describedby"],
-    "setFocus": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-radio", "stzh-icon", "stzh-popover"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-radio":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhRadio);
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "stzh-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+let radioCounter = 0;
+const StzhRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    this.stzhFocus = createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    /** Whether the element is disabled or not */
+    this.disabled = false;
+    /** The name of the input element */
+    this.name = "";
+    /** The value of the input element */
+    this.value = "";
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+    this.showMarker = false;
+    /** Checked status */
+    this.checked = false;
+    /** Label */
+    this.label = "";
+    /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.a11yDescribedby = "";
+    this.onInput = (event) => {
+      this.checked = this.input.checked;
+      this.stzhChange.emit({
+        component: "stzh-radio",
+        originalEvent: event,
+        value: this.value,
+        checked: this.checked
+      });
+    };
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent('focus', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-radio",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent('blur', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-radio",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus input field */
+  async setFocus() {
+    this.input.focus();
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  async componentWillLoad() {
+    this.inputId = `stzh-radio-${radioCounter++}`;
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'radio');
+    }
+  }
+  render() {
+    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-radio": true,
+      "stzh-radio--has-description": descriptionUsed,
+      "stzh-radio--has-description-long": descriptionLongUsed,
+      "stzh-radio--has-error": errorUsed,
+      "stzh-radio--is-required": this.required,
+      "stzh-radio--is-invalid": this.invalid,
+      "stzh-radio--is-disabled": this.disabled
+    };
+    return (h("div", { class: classes }, h("label", { class: "stzh-radio__field-wrapper" }, h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-radio__mark" }, h("div", { class: "stzh-radio__check" })), h("div", { class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
+      h("span", { class: "stzh-radio__marker" }, h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radio__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "error": ["errorWatcher"]
+  }; }
+  static get style() { return stzhRadioCss; }
+}, [6, "stzh-radio", {
+    "localization": [16],
+    "disabled": [516],
+    "name": [513],
+    "value": [1025],
+    "invalid": [516],
+    "required": [516],
+    "showMarker": [516, "show-marker"],
+    "checked": [1540],
+    "label": [1],
+    "description": [1],
+    "descriptionLong": [1, "description-long"],
+    "error": [1],
+    "a11yDescribedby": [1, "a11y-describedby"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-radio", "stzh-icon", "stzh-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhRadio);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
 }
 
 export { StzhRadio as S, defineCustomElement as d };