@oiz/stzh-components 2.0.0 → 2.1.0-beta

package/dist/esm/stzh-datatable.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-84f71a43.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-2915b467.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-ba3f0406.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 
@@ -43,26 +43,6 @@ const stzhDatatableCss = ":host{font-family:var(--stzh-font-family-regular);font
 const StzhDatatable = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** Label */
-    this.label = "";
-    /** Sort by given column key */
-    this.sortBy = "";
-    /** Sort direction */
-    this.sortDirection = "asc";
-    /** Tokenize type */
-    this.tokenize = "forward";
-    /** ID field */
-    this.idField = "id";
-    /** Rows */
-    this.rows = [];
-    /** Columns */
-    this.columns = [];
-    this.query = "";
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateScrollStates = () => {
       if (!this.tableWrapper) {
         return;
@@ -105,6 +85,20 @@ const StzhDatatable = class {
     this.onInputChange = () => {
       this.query = this.input.value;
     };
+    this.localization = undefined;
+    this.label = "";
+    this.sortBy = "";
+    this.sortDirection = "asc";
+    this.tokenize = "forward";
+    this.idField = "id";
+    this.rows = [];
+    this.columns = [];
+    this.query = "";
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   /** Toggle sort by a given column key like when clicking on a column header */
   async toggleSort(columnKey) {

package/dist/esm/stzh-datepicker_3.entry.js

@@ -0,0 +1,425 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-2915b467.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
+import { a as printISODate, p as parseISODate } from './date-utils-be83fff1.js';
+import { c as createGlobalAdapter } from './date-adapter-cbc340fa.js';
+import { h as hasSlot } from './utils-68a28fce.js';
+import { S as StzhInputDescription } from './stzh-input-description-e87e6697.js';
+import { c as camelCase } from './string-utils-f98ee4e8.js';
+
+const stzhDatepickerCss = ".sc-stzh-datepicker-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-datepicker-h{display:none}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-datepicker-h{width:100%}.stzh-datepicker__popover.sc-stzh-datepicker{--padding:var(--stzh-space-medium);--width:auto}.stzh-datepicker__actions.sc-stzh-datepicker{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){margin-top:var(--stzh-space-xsmall)}";
+
+const StzhDatepicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    this.onInputChange = () => {
+      const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
+      if (this.input.value === "" || parsedDate) {
+        const isoDate = printISODate(parsedDate);
+        if (this.calendar) {
+          this.calendar.value = isoDate;
+        }
+        this.value = isoDate;
+        this.stzhChange.emit({
+          component: "stzh-datepicker",
+          value: this.value,
+          valueAsDate: parsedDate,
+        });
+      }
+    };
+    this.onCalendarChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-datepicker",
+        value: this.value,
+        valueAsDate: event.detail.valueAsDate,
+      });
+      if (this.input) {
+        this.input.value = event.detail.valueAsDate
+          && this.dateAdapter.format(event.detail.valueAsDate, "inputdate");
+      }
+      if (this.popover) {
+        this.popover.hide();
+      }
+    };
+    this.calendarMin = "";
+    this.calendarMax = "";
+    this.calendarIsDateDisabled = () => false;
+    this.name = "";
+    this.value = "";
+    this.label = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.inline = false;
+    this.dateAdapter = undefined;
+    this.localization = undefined;
+    this.buttonLabel = undefined;
+  }
+  createDateFormatters() {
+    if (this.localization) {
+      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      });
+    }
+  }
+  /** Update calendar and input when value prop has changed */
+  valueWatcher(newValue) {
+    const date = parseISODate(newValue);
+    if (this.calendar) {
+      this.calendar.value = newValue;
+    }
+    if (this.input) {
+      this.input.value = this.dateAdapter.format(date, "inputdate");
+    }
+    this.updateButtonAccessibleLabel();
+  }
+  /** Set value by a JS Date object */
+  async setDate(date) {
+    this.value = printISODate(date);
+  }
+  /** Return internal popover element */
+  async getPopover() {
+    return this.popover;
+  }
+  updateButtonAccessibleLabel() {
+    if (!this.localization) {
+      return;
+    }
+    try {
+      const valueAsDate = parseISODate(this.value);
+      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;
+    }
+    catch (err) {
+      this.buttonLabel = this.localization.buttonLabel;
+    }
+  }
+  connectedCallback() {
+    this.createDateFormatters();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "datepicker");
+    }
+    if (!this.dateAdapter) {
+      this.dateAdapter = createGlobalAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
+  componentDidLoad() {
+    this.valueWatcher(this.value);
+  }
+  render() {
+    const classes = {
+      "stzh-datepicker": true,
+      "stzh-datepicker--inline": this.inline
+    };
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
+      h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
+      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "localization": ["createDateFormatters"],
+    "value": ["valueWatcher"]
+  }; }
+};
+StzhDatepicker.style = stzhDatepickerCss;
+
+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.5rem;height:0.5rem;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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    this.stzhFocus = createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    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
+      });
+    };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.checked = false;
+    this.label = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
+  }
+  /** 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 getElement(this); }
+  static get watchers() { return {
+    "error": ["errorWatcher"]
+  }; }
+};
+StzhRadio.style = stzhRadioCss;
+
+const stzhRadiogroupCss = ".sc-stzh-radiogroup-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-radiogroup-h{display:none}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-radiogroup-h[direction=vertical] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-radiogroup-h[direction=horizontal] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{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-radiogroup__description-wrapper.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-popover[open].sc-stzh-radiogroup:not([open=false]) .stzh-radiogroup__description-long-button.sc-stzh-radiogroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{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-radiogroup__description-long-button.sc-stzh-radiogroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{-ms-flex-direction:row;flex-direction:row}";
+
+const SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';
+let radiogroupCounter = 0;
+const StzhRadiogroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._preventUpdateProperties = [];
+    this.init = () => {
+      // update radios
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
+      this.updateRadiosProperty("show-marker", false);
+      this.updateRadiosProperty("a11y-describedby", `${this.radiogroupId}-description`);
+      this.watchValue(this.value);
+      this.watchName(this.name);
+      this.watchDisabled(this.disabled);
+      this.watchInvalid(this.invalid);
+      this.watchRequired(this.required);
+    };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedRadio = null;
+    this.preventUpdateProperties = [];
+  }
+  watchName(newValue) {
+    this.updateRadiosProperty("name", newValue);
+  }
+  watchDisabled(newValue) {
+    this.updateRadiosProperty("disabled", newValue);
+  }
+  watchInvalid(newValue) {
+    this.updateRadiosProperty("invalid", newValue);
+  }
+  watchRequired(newValue) {
+    this.updateRadiosProperty("required", newValue);
+  }
+  watchValue(newValue) {
+    this.updateCheckedRadioByValue(newValue);
+  }
+  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;
+  }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
+  onChange(event) {
+    this.value = event.detail.value;
+  }
+  updateRadiosProperty(prop, value) {
+    this.radios.forEach((radio) => {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
+        radio[camelCase(prop)] = value;
+      }
+    });
+  }
+  updateCheckedRadioByValue(value) {
+    this.checkedRadio = this.radios.find(radio => radio.value === value);
+    if (this.checkedRadio) {
+      this.checkedRadio.checked = true;
+    }
+    this.uncheckRadios();
+  }
+  uncheckRadios() {
+    // make sure that no other radios are checked than the current one or no one
+    this.radios.forEach((radio) => {
+      if (!this.checkedRadio || radio !== this.checkedRadio) {
+        radio.checked = false;
+      }
+    });
+  }
+  async componentWillLoad() {
+    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
+    this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'radiogroup');
+    }
+  }
+  componentShouldUpdate(_newValue, _oldValue, prop) {
+    return prop !== "checkedRadio";
+  }
+  componentDidRender() {
+    this.init();
+  }
+  connectedCallback() {
+    if (!this.value) {
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
+      // try to find a checkbox that might has checked set to true
+      const checkedRadio = this.radios.find(radio => radio.checked);
+      if (checkedRadio) {
+        this.value = checkedRadio.value;
+      }
+    }
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  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-radiogroup": true,
+      "stzh-radiogroup--has-description": descriptionUsed,
+      "stzh-radiogroup--has-description-long": descriptionLongUsed,
+      "stzh-radiogroup--has-error": errorUsed,
+      "stzh-radiogroup--is-required": this.required,
+      "stzh-radiogroup--is-disabled": this.disabled,
+      "stzh-radiogroup--is-invalid": this.invalid,
+      "stzh-radiogroup--hide-legend": this.hideLegend,
+      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction
+    };
+    return (h("fieldset", { class: classes }, this.legend &&
+      h("legend", { class: "stzh-radiogroup__legend" }, this.legend, this.showMarker &&
+        h("span", { class: "stzh-radiogroup__marker" }, h("span", { class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
+          ? this.localization.$globals.requiredFieldMarker
+          : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radiogroup__marker-text" }, this.required
+          ? this.localization.$globals.requiredFieldText
+          : this.localization.$globals.optionalFieldText))), h("div", { class: "stzh-radiogroup__fields" }, h("slot", null)), h(StzhInputDescription, { classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "name": ["watchName"],
+    "disabled": ["watchDisabled"],
+    "invalid": ["watchInvalid"],
+    "required": ["watchRequired"],
+    "value": ["watchValue"],
+    "error": ["errorWatcher"],
+    "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]
+  }; }
+};
+StzhRadiogroup.style = stzhRadiogroupCss;
+
+export { StzhDatepicker as stzh_datepicker, StzhRadio as stzh_radio, StzhRadiogroup as stzh_radiogroup };

package/dist/esm/stzh-dialog.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84f71a43.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-2915b467.js';
 import { s as setPropsIfNull } from './utils-68a28fce.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
 import { c as createFocusTrap } from './focus-trap.esm-074705a3.js';
@@ -16,24 +16,6 @@ const StzhDialog = class {
     registerInstance(this, hostRef);
     this.stzhOpen = createEvent(this, "stzhOpen", 7);
     this.stzhClose = createEvent(this, "stzhClose", 7);
-    /** Close dialog when pressing ESC */
-    this.closeOnEscapeKey = false;
-    /** Close dialog when clicking outside of it */
-    this.closeOnBackdropClick = false;
-    /** Open status */
-    this.open = false;
-    /** Stay in original position (true) or move to body (false) */
-    this.stay = true;
-    /** Size */
-    this.size = "default";
-    /** Whether to hide close button */
-    this.hideClose = false;
-    /** Heading text */
-    this.heading = "";
-    /** Accessibility role */
-    this.a11yRole = "alertdialog";
-    /** Accessible label for dialog (use if no heading is used) */
-    this.a11yLabel = "";
     this.handleDialogClick = (event) => {
       const target = event.target;
       if (target.dataset.stzhDialogClose) {
@@ -58,6 +40,16 @@ const StzhDialog = class {
         });
       }
     };
+    this.localization = undefined;
+    this.closeOnEscapeKey = false;
+    this.closeOnBackdropClick = false;
+    this.open = false;
+    this.stay = true;
+    this.size = "default";
+    this.hideClose = false;
+    this.heading = "";
+    this.a11yRole = "alertdialog";
+    this.a11yLabel = "";
   }
   handleOutsideClick(event) {
     if (!this.open || !this.closeOnBackdropClick) {

package/dist/esm/stzh-dropdown.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-84f71a43.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-2915b467.js';
 import { h as hasSlot } from './utils-68a28fce.js';
 import { f as fetchTranslations } from './translation-utils-2623783f.js';
-import { S as StzhInputDescription } from './stzh-input-description-8c477f97.js';
+import { S as StzhInputDescription } from './stzh-input-description-e87e6697.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-ba3f0406.js';
 
 var tomSelect_base = createCommonjsModule(function (module, exports) {
@@ -4658,69 +4658,43 @@ const StzhDropdown = class {
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
     this.stzhInit = createEvent(this, "stzhInit", 7);
-    /**
-     * An array of property names to analyze when filtering options.
-     * Weights can be given to each field to improve search result:
-     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
-     */
+    this.options = undefined;
+    this.optgroups = undefined;
+    this.items = undefined;
     this.searchField = ["text"];
-    /** Whether multiple items option can be selected */
     this.multiple = false;
-    /** Show inline (auto width) */
     this.inline = false;
-    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
     this.maxOptions = 50;
-    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
     this.searchConjunction = "and";
-    /**  If true, any options with a "" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */
     this.allowEmptyOption = false;
-    /** Show the dropdown immediately when the control receives focus. */
     this.openOnFocus = true;
-    /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */
     this.closeAfterSelect = null;
-    /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */
     this.load = null;
-    /** Minimum of characters required to execute the `load` function */
     this.minCharacters = 3;
-    /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */
     this.loadThrottle = 300;
-    /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */
     this.preload = false;
-    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
     this.labelField = "text";
-    /** The name of the property to use as the value when an item is selected. */
     this.valueField = "value";
-    /** The name of the property to group items by. */
     this.optgroupField = "optgroup";
-    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
     this.optgroupLabelField = "label";
-    /** The name of the option group property that serves as its unique identifier. */
     this.optgroupValueField = "value";
-    /** Name of hidden select element */
+    this.lockOptgroupOrder = undefined;
     this.name = "";
-    /** Variant */
     this.variant = "default";
-    /** Size variant */
     this.size = "default";
-    /** Whether the dropdown is disabled */
     this.disabled = false;
-    /** Popover placement */
     this.popoverPlacement = "bottom";
-    /** Label */
     this.label = "";
-    /** Icon (use instead of icon slot) */
     this.icon = "";
-    /** Prevent option search */
     this.noSearch = false;
-    /** Prevent backspace delete */
     this.noBackspaceDelete = false;
-    /** Invalid status */
     this.invalid = false;
-    /** Required status */
     this.required = false;
-    /** Show text in label depending if field is optional/required */
     this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.localization = undefined;
     this.a11yDescribedby = "";
   }
   optionsWatcher(newValue) {
@@ -4821,7 +4795,7 @@ const StzhDropdown = class {
     this.searchFieldWatcher(this.searchField);
     this.errorWatcher(this.error);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'dropdown');
+      this.localization = await fetchTranslations(this.element, "dropdown");
     }
   }
   async componentWillUpdate() {
@@ -5053,6 +5027,12 @@ const StzhDropdown = class {
       tomSelectOptions.items = this._items;
     }
     this.tomSelect = new tomSelect_base(this.select, tomSelectOptions);
+    if (!this.openOnFocus) {
+      // we still want to enable opening the dropdown by click
+      this.tomSelect.control.addEventListener("click", () => {
+        this.tomSelect.open();
+      });
+    }
   }
   disconnectedCallback() {
     if (this.tomSelect) {