@oiz/stzh-components 0.0.0-pretest

package/dist/components/stzh-checkbox.js

@@ -0,0 +1,176 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h as hasSlot } from './utils.js';
+import { f as fetchTranslations } from './translation-utils.js';
+import { S as StzhInputDescription } from './stzh-input-description.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-popover2.js';
+
+const Check = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const stzhCheckboxCss = ".sc-stzh-checkbox-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-checkbox-h{display:none}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-checkbox-h{display:inline-block;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-checkbox-h .sc-stzh-checkbox-s>stzh-text{--color:inherit}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-popover[open].sc-stzh-checkbox:not([open=false]) .stzh-checkbox__description-long-button.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox__description-long-button.sc-stzh-checkbox:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{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-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-checkbox__mark.sc-stzh-checkbox{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:var(--stzh-form-input-border-radius);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-checkbox__check.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;opacity:0;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__check.sc-stzh-checkbox path.sc-stzh-checkbox{vector-effect:var(--stzh-base-vector-effect)}.stzh-checkbox__label.sc-stzh-checkbox{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-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:focus:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:focus~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey61)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-grey5)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-grey5)}";
+
+let checkboxCounter = 0;
+const StzhCheckbox$1 = /*@__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 checkbox is disabled */
+    this.disabled = false;
+    /** Name of the input element */
+    this.name = "";
+    /** Value of the input element */
+    this.value = "";
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /** Checked status */
+    this.checked = false;
+    /** Label */
+    this.label = "";
+    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+    this.showMarker = false;
+    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
+    this.a11yDescribedby = "";
+    this.onInput = (event) => {
+      this.checked = this.input.checked;
+      this.stzhChange.emit({
+        component: "stzh-checkbox",
+        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-checkbox",
+        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-checkbox",
+        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-checkbox-${checkboxCounter++}`;
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'checkbox');
+    }
+  }
+  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-checkbox": true,
+      "stzh-checkbox--has-description": descriptionUsed,
+      "stzh-checkbox--has-description-long": descriptionLongUsed,
+      "stzh-checkbox--has-error": errorUsed,
+      "stzh-checkbox--is-required": this.required,
+      "stzh-checkbox--is-invalid": this.invalid,
+      "stzh-checkbox--is-disabled": this.disabled
+    };
+    return (h("div", { class: classes }, h("label", { class: "stzh-checkbox__field-wrapper" }, h("input", { class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", 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-checkbox__mark" }, h("div", { class: "stzh-checkbox__check", innerHTML: Check })), h("div", { class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
+      h("span", { class: "stzh-checkbox__marker" }, h("span", { class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-checkbox__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-checkbox", 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 stzhCheckboxCss; }
+}, [6, "stzh-checkbox", {
+    "localization": [16],
+    "disabled": [516],
+    "name": [513],
+    "value": [1025],
+    "invalid": [516],
+    "required": [516],
+    "checked": [1540],
+    "label": [1],
+    "description": [1],
+    "descriptionLong": [1, "description-long"],
+    "showMarker": [516, "show-marker"],
+    "error": [1],
+    "a11yDescribedby": [1, "a11y-describedby"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-checkbox", "stzh-icon", "stzh-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhCheckbox$1);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhCheckbox = StzhCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhCheckbox, defineCustomElement };

package/dist/components/stzh-checkboxgroup.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhCheckboxgroup extends Components.StzhCheckboxgroup, HTMLElement {}
+export const StzhCheckboxgroup: {
+  prototype: StzhCheckboxgroup;
+  new (): StzhCheckboxgroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-checkboxgroup.js

@@ -0,0 +1,208 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { h as hasSlot } from './utils.js';
+import { c as camelCase } from './string-utils.js';
+import { f as fetchTranslations } from './translation-utils.js';
+import { S as StzhInputDescription } from './stzh-input-description.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-popover2.js';
+
+const stzhCheckboxgroupCss = ".sc-stzh-checkboxgroup-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-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-checkboxgroup-h[direction=vertical] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-checkboxgroup-h[direction=horizontal] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{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-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-popover[open].sc-stzh-checkboxgroup:not([open=false]) .stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{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-checkboxgroup__description-long-button.sc-stzh-checkboxgroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxsmall)}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{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-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{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-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{-ms-flex-direction:row;flex-direction:row}";
+
+let checkboxgroupCounter = 0;
+const StzhCheckboxgroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Whether the element is disabled or not */
+    this.disabled = false;
+    /** Hide legend to show only for screenreaders */
+    this.hideLegend = false;
+    /** Invalid status */
+    this.invalid = false;
+    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+    this.showMarker = false;
+    /** Select a checkbox by value */
+    this.value = "";
+    this._value = [];
+    /** Direction */
+    this.direction = "vertical";
+    /** Current checked checkbox elements (readonly) */
+    this.checkedCheckbox = null;
+    /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */
+    this.preventUpdateProperties = [];
+    this.init = () => {
+      this.checkboxes = Array.from(this.element.querySelectorAll("stzh-checkbox"));
+      this.updateCheckboxesProperty("a11y-describedby", `${this.checkboxgroupId}-description`);
+      this.watchValue(this.value);
+      this.watchName(this.name);
+      this.watchDisabled(this.disabled);
+      this.watchInvalid(this.invalid);
+      this.watchShowMarker(this.showMarker);
+    };
+  }
+  watchName(newValue) {
+    this.updateCheckboxesProperty("name", newValue);
+  }
+  watchDisabled(newValue) {
+    this.updateCheckboxesProperty("disabled", newValue);
+  }
+  watchInvalid(newValue) {
+    this.updateCheckboxesProperty("invalid", newValue);
+  }
+  watchShowMarker(newValue) {
+    this.updateCheckboxesProperty("showMarker", newValue);
+  }
+  watchValue(newValue) {
+    if (typeof newValue === "string") {
+      this._value = JSON.parse(newValue);
+    }
+    else {
+      this._value = newValue;
+    }
+    this.updateCheckedCheckboxByValue(this._value);
+  }
+  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;
+  }
+  onChange(event) {
+    if (event.detail.checked) {
+      this._value.push(event.detail.value);
+    }
+    else {
+      this._value = this._value.filter(value => value !== event.detail.value);
+    }
+    this.value = this._value;
+  }
+  updateCheckboxesProperty(prop, value) {
+    this.checkboxes.forEach((checkbox) => {
+      if (prop === "name"
+        || (this.preventUpdateProperties.indexOf(prop) === -1
+          && checkbox.getAttribute(prop) === null)) {
+        checkbox[camelCase(prop)] = value;
+      }
+    });
+  }
+  updateCheckedCheckboxByValue(value) {
+    this.checkedCheckbox = this.checkboxes.filter(checkbox => value.indexOf(checkbox.value) > -1);
+    this.checkboxes.forEach(checkbox => checkbox.checked = value.indexOf(checkbox.value) > -1);
+  }
+  async componentWillLoad() {
+    this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'checkboxgroup');
+    }
+  }
+  componentShouldUpdate(_newValue, _oldValue, prop) {
+    return prop !== "checkedCheckbox";
+  }
+  componentDidRender() {
+    this.init();
+  }
+  connectedCallback() {
+    if (!this.value.length) {
+      this.checkboxes = Array.from(this.element.querySelectorAll("stzh-checkbox"));
+      // try to find checkboxes that might have checked set to true
+      this.value = this.checkboxes
+        .filter(checkbox => checkbox.checked)
+        .map(checkbox => checkbox.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-checkboxgroup": true,
+      "stzh-checkboxgroup--has-description": descriptionUsed,
+      "stzh-checkboxgroup--has-description-long": descriptionLongUsed,
+      "stzh-checkboxgroup--has-error": errorUsed,
+      "stzh-checkboxgroup--is-disabled": this.disabled,
+      "stzh-checkboxgroup--is-invalid": this.invalid,
+      "stzh-checkboxgroup--hide-legend": this.hideLegend,
+      [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction
+    };
+    return (h("fieldset", { class: classes }, this.legend &&
+      h("legend", { class: "stzh-checkboxgroup__legend" }, this.legend), h("div", { class: "stzh-checkboxgroup__fields" }, h("slot", null)), h(StzhInputDescription, { classPrefix: "stzh-checkboxgroup", id: `${this.checkboxgroupId}-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 {
+    "name": ["watchName"],
+    "disabled": ["watchDisabled"],
+    "invalid": ["watchInvalid"],
+    "showMarker": ["watchShowMarker"],
+    "value": ["watchValue"],
+    "error": ["errorWatcher"]
+  }; }
+  static get style() { return stzhCheckboxgroupCss; }
+}, [6, "stzh-checkboxgroup", {
+    "localization": [16],
+    "disabled": [516],
+    "name": [513],
+    "legend": [1],
+    "hideLegend": [516, "hide-legend"],
+    "invalid": [516],
+    "showMarker": [516, "show-marker"],
+    "value": [1025],
+    "direction": [513],
+    "description": [1],
+    "descriptionLong": [1, "description-long"],
+    "error": [1],
+    "checkedCheckbox": [16],
+    "preventUpdateProperties": [16]
+  }, [[0, "stzhChange", "onChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-checkboxgroup", "stzh-icon", "stzh-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-checkboxgroup":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhCheckboxgroup$1);
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhCheckboxgroup = StzhCheckboxgroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhCheckboxgroup, defineCustomElement };

package/dist/components/stzh-chip-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhChipSelect extends Components.StzhChipSelect, HTMLElement {}
+export const StzhChipSelect: {
+  prototype: StzhChipSelect;
+  new (): StzhChipSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-chip-select.js

@@ -0,0 +1,107 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './stzh-chip2.js';
+import { d as defineCustomElement$4 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-popover2.js';
+
+const stzhChipSelectCss = ".sc-stzh-chip-select-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-chip-select-h{display:none}.sc-stzh-chip-select-h *.sc-stzh-chip-select,.sc-stzh-chip-select-h *.sc-stzh-chip-select::before,.sc-stzh-chip-select-h *.sc-stzh-chip-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-chip-select__chips.sc-stzh-chip-select{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2)}@media screen and (max-width: 1023px){.stzh-chip-select__chips.sc-stzh-chip-select{display:none}}.stzh-chip-select__chip.sc-stzh-chip-select{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}@media screen and (min-width: 1024px){.stzh-chip-select__dropdown.sc-stzh-chip-select{display:none}}";
+
+const StzhChipSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    /** Data */
+    this.data = [];
+    this._data = [];
+    this._dataDropdown = [];
+    /** Label */
+    this.label = "";
+    /** Value */
+    this.value = "";
+    this.chipClick = (data) => {
+      this.value = data.value;
+      this.stzhChange.emit({
+        component: "stzh-chip-select",
+        value: this.value
+      });
+    };
+    this.onDropdownChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-chip-select",
+        value: this.value
+      });
+    };
+  }
+  dataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._data = JSON.parse(newValue);
+    }
+    else {
+      this._data = newValue;
+    }
+    this._dataDropdown = this._data.map((data) => {
+      return {
+        text: `${data.label} (${data.counter})`,
+        value: data.value
+      };
+    });
+  }
+  async componentWillLoad() {
+    this.dataWatcher(this.data);
+  }
+  render() {
+    const classes = {
+      "stzh-chip-select": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-chip-select__chips" }, this._data.map((data) => (h("stzh-chip", { class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, active: this.value === data.value, onClick: () => this.chipClick(data) })))), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "data": ["dataWatcher"]
+  }; }
+  static get style() { return stzhChipSelectCss; }
+}, [2, "stzh-chip-select", {
+    "data": [1],
+    "label": [1],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-chip-select", "stzh-chip", "stzh-dropdown", "stzh-icon", "stzh-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-chip-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhChipSelect$1);
+      }
+      break;
+    case "stzh-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhChipSelect = StzhChipSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhChipSelect, defineCustomElement };

package/dist/components/stzh-chip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhChip extends Components.StzhChip, HTMLElement {}
+export const StzhChip: {
+  prototype: StzhChip;
+  new (): StzhChip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-chip.js

@@ -0,0 +1,6 @@
+import { S as StzhChip$1, d as defineCustomElement$1 } from './stzh-chip2.js';
+
+const StzhChip = StzhChip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhChip, defineCustomElement };