@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/collection/components/stzh-checkboxgroup/stzh-checkboxgroup.js

@@ -1,450 +1,448 @@
-import { h, } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
-import { camelCase } from "../../utils/string-utils";
-import { fetchTranslations } from "../../utils/translation-utils";
-import { StzhInputDescription } from "../stzh-input/stzh-input-description";
-let checkboxgroupCounter = 0;
-/**
- * @slot - Slot for `stzh-checkbox` elements
- * @slot description - Slot for description
- * @slot description-long - Slot for long description (in popover)
- * @slot error - Slot for error
- */
-export class StzhCheckboxgroup {
-  constructor() {
-    /** 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 })));
-  }
-  static get is() { return "stzh-checkboxgroup"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-checkboxgroup.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-checkboxgroup.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhLocaleComponent",
-          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
-          "references": {
-            "StzhLocaleComponent": {
-              "location": "import",
-              "path": "../../utils/translation-utils"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings"
-        }
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the element is disabled or not"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the input checkbox elements"
-        },
-        "attribute": "name",
-        "reflect": true
-      },
-      "legend": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The legend"
-        },
-        "attribute": "legend",
-        "reflect": false
-      },
-      "hideLegend": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hide legend to show only for screenreaders"
-        },
-        "attribute": "hide-legend",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Invalid status"
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showMarker": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
-        },
-        "attribute": "show-marker",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string[] | string",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Select a checkbox by value"
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"vertical\" | \"horizontal\"",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Direction"
-        },
-        "attribute": "direction",
-        "reflect": true,
-        "defaultValue": "\"vertical\""
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Description message (use description slot as alternative)"
-        },
-        "attribute": "description",
-        "reflect": false
-      },
-      "descriptionLong": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
-        },
-        "attribute": "description-long",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "One or multiple error message (use error slot as alternative)"
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "checkedCheckbox": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLStzhCheckboxElement[] | null",
-          "resolved": "HTMLStzhCheckboxElement[]",
-          "references": {
-            "HTMLStzhCheckboxElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Current checked checkbox elements (readonly)"
-        },
-        "defaultValue": "null"
-      },
-      "preventUpdateProperties": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid)"
-        },
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "name",
-        "methodName": "watchName"
-      }, {
-        "propName": "disabled",
-        "methodName": "watchDisabled"
-      }, {
-        "propName": "invalid",
-        "methodName": "watchInvalid"
-      }, {
-        "propName": "showMarker",
-        "methodName": "watchShowMarker"
-      }, {
-        "propName": "value",
-        "methodName": "watchValue"
-      }, {
-        "propName": "error",
-        "methodName": "errorWatcher"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "stzhChange",
-        "method": "onChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h, } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+import { camelCase } from "../../utils/string-utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { StzhInputDescription } from "../stzh-input/stzh-input-description";
+let checkboxgroupCounter = 0;
+/**
+ * @slot - Slot for `stzh-checkbox` elements
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot error - Slot for error
+ */
+export class StzhCheckboxgroup {
+  constructor() {
+    /** 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[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 })));
+  }
+  static get is() { return "stzh-checkboxgroup"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-checkboxgroup.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-checkboxgroup.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is disabled or not"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the input checkbox elements"
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "legend": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The legend"
+        },
+        "attribute": "legend",
+        "reflect": false
+      },
+      "hideLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide legend to show only for screenreaders"
+        },
+        "attribute": "hide-legend",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status"
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showMarker": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        "attribute": "show-marker",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string[] | string",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Select a checkbox by value"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction"
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "descriptionLong": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        "attribute": "description-long",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message (use error slot as alternative)"
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "checkedCheckbox": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLStzhCheckboxElement[] | null",
+          "resolved": "HTMLStzhCheckboxElement[]",
+          "references": {
+            "HTMLStzhCheckboxElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current checked checkbox elements (readonly)"
+        },
+        "defaultValue": "null"
+      },
+      "preventUpdateProperties": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid)"
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "name",
+        "methodName": "watchName"
+      }, {
+        "propName": "disabled",
+        "methodName": "watchDisabled"
+      }, {
+        "propName": "invalid",
+        "methodName": "watchInvalid"
+      }, {
+        "propName": "showMarker",
+        "methodName": "watchShowMarker"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
+      }, {
+        "propName": "error",
+        "methodName": "errorWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "stzhChange",
+        "method": "onChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}