@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

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

@@ -12,23 +12,8 @@ let checkboxgroupCounter = 0;
  */
 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._preventUpdateProperties = [];
     this.init = () => {
       this.checkboxes = Array.from(this.element.querySelectorAll("stzh-checkbox"));
       this.updateCheckboxesProperty("a11y-describedby", `${this.checkboxgroupId}-description`);
@@ -38,6 +23,20 @@ export class StzhCheckboxgroup {
       this.watchInvalid(this.invalid);
       this.watchShowMarker(this.showMarker);
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedCheckbox = null;
+    this.preventUpdateProperties = [];
   }
   watchName(newValue) {
     this.updateCheckboxesProperty("name", newValue);
@@ -82,6 +81,14 @@ export class StzhCheckboxgroup {
     }
     this.invalid = this._error.length > 0;
   }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
   onChange(event) {
     if (event.detail.checked) {
       this._value.push(event.detail.value);
@@ -93,7 +100,7 @@ export class StzhCheckboxgroup {
   }
   updateCheckboxesProperty(prop, value) {
     this.checkboxes.forEach((checkbox) => {
-      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
         checkbox[camelCase(prop)] = value;
       }
     });
@@ -105,6 +112,7 @@ export class StzhCheckboxgroup {
   async componentWillLoad() {
     this.checkboxgroupId = `stzh-checkboxgroup-${checkboxgroupCounter++}`;
     this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, 'checkboxgroup');
     }
@@ -397,11 +405,11 @@ export class StzhCheckboxgroup {
         "defaultValue": "null"
       },
       "preventUpdateProperties": {
-        "type": "unknown",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string[] | string",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
@@ -410,6 +418,8 @@ export class StzhCheckboxgroup {
           "tags": [],
           "text": "Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid)"
         },
+        "attribute": "prevent-update-properties",
+        "reflect": false,
         "defaultValue": "[]"
       }
     };
@@ -434,6 +444,9 @@ export class StzhCheckboxgroup {
       }, {
         "propName": "error",
         "methodName": "errorWatcher"
+      }, {
+        "propName": "preventUpdateProperties",
+        "methodName": "preventUpdatePropertiesWatcher"
       }];
   }
   static get listeners() {

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

@@ -5,28 +5,6 @@ import { Host, h } from "@stencil/core";
  */
 export class StzhChip {
   constructor() {
-    /** Label */
-    this.label = "";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Whether remove button should be shown */
-    this.removable = false;
-    /** Variant */
-    this.variant = "tag";
-    /** Size */
-    this.size = "default";
-    /** Type */
-    this.type = "default";
-    /** Counter */
-    this.counter = "";
-    /** Label of remove button for screenreaders */
-    this.removeLabel = "";
-    /** Active */
-    this.active = false;
-    /** Disabled */
-    this.disabled = false;
-    /** Invert (only available for tag variant) */
-    this.invert = false;
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -63,6 +41,19 @@ export class StzhChip {
         originalEvent: event
       });
     };
+    this.label = "";
+    this.icon = "";
+    this.removable = false;
+    this.variant = "tag";
+    this.size = "default";
+    this.type = "default";
+    this.counter = "";
+    this.removeLabel = "";
+    this.active = false;
+    this.disabled = false;
+    this.invert = false;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus menu item */
   async setFocus() {
@@ -80,7 +71,7 @@ export class StzhChip {
       [`stzh-chip--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, h("div", { class: classes }, this.removable &&
-      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button" }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
+      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
@@ -297,6 +288,41 @@ export class StzhChip {
         "attribute": "invert",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "a11yLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible label for screen readers to replace visible text"
+        },
+        "attribute": "a11y-label",
+        "reflect": false
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the button"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/components/stzh-chip-select/stzh-chip-select.css

@@ -94,6 +94,78 @@
   box-sizing: border-box;
 }
 
+.stzh-chip-select__marker-symbol {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+.stzh-chip-select__marker-text {
+  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-chip-select__description-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.stzh-chip-select__error, .stzh-chip-select__description {
+  font-size: var(--stzh-font-micro-font-size);
+  line-height: var(--stzh-font-micro-text-line-height);
+  color: var(--stzh-base-color);
+}
+.stzh-chip-select__error {
+  color: var(--stzh-color-error);
+}
+.stzh-chip-select__error-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.stzh-chip-select__description {
+  display: flex;
+  align-items: flex-start;
+}
+.stzh-chip-select__description-long {
+  margin-left: var(--stzh-space-xxsmall);
+  margin-top: 0.1875rem;
+}
+.stzh-chip-select__description-long-popover {
+  --width: auto;
+  --max-width: 27.3125rem;
+}
+.stzh-chip-select__description-long-popover[open]:not([open=false]) .stzh-chip-select__description-long-button {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-chip-select__description-long-button {
+  display: flex;
+  justify-content: 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;
+  transition: color var(--stzh-base-transition-animation-speed);
+  color: var(--stzh-base-lead-color);
+}
+.stzh-chip-select__description-long-button:hover {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-chip-select stzh-icon.stzh-chip-select__description-long-icon {
+  --size: var(--stzh-icon-size-xsmall);
+}
+.stzh-chip-select--has-error .stzh-chip-select__error, .stzh-chip-select--has-description .stzh-chip-select__description {
+  margin-top: var(--stzh-space-xxsmall);
+}
 .stzh-chip-select__chips {
   display: flex;
   align-items: center;
@@ -112,4 +184,12 @@
   .stzh-chip-select__dropdown {
     display: none;
   }
+}
+@media screen and (max-width: 1023px) {
+  .stzh-chip-select__description-wrapper {
+    display: none;
+  }
+}
+.stzh-chip-select--has-error .stzh-chip-select__error, .stzh-chip-select--has-description .stzh-chip-select__description {
+  margin-top: var(--stzh-space-xsmall);
 }

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

@@ -1,17 +1,14 @@
 import { Host, h } from "@stencil/core";
+import { StzhInputDescription } from "../stzh-input/stzh-input-description";
+// import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+let chipSelectCounter = 0;
 /**
- *
  */
 export class StzhChipSelect {
   constructor() {
-    /** Data */
-    this.data = [];
     this._data = [];
     this._dataDropdown = [];
-    /** Label */
-    this.label = "";
-    /** Value */
-    this.value = "";
     this.chipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
@@ -26,6 +23,18 @@ export class StzhChipSelect {
         value: this.value
       });
     };
+    this.localization = undefined;
+    this.data = [];
+    this.name = undefined;
+    this.label = "";
+    this.value = "";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.disabled = false;
+    this.a11yDescribedby = "";
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -41,14 +50,50 @@ export class StzhChipSelect {
       };
     });
   }
+  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-chip-select-${chipSelectCounter++}`;
     this.dataWatcher(this.data);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "chip-select");
+    }
   }
   render() {
+    const descriptionUsed = !!this.description;
+    const descriptionLongUsed = !!this.descriptionLong;
+    const errorUsed = !!this.error;
     const classes = {
-      "stzh-chip-select": true
+      "stzh-chip-select": true,
+      "stzh-chip-select--has-description": descriptionUsed,
+      "stzh-chip-select--has-description-long": descriptionLongUsed,
+      "stzh-chip-select--has-error": errorUsed,
+      "stzh-chip-select--is-invalid": this.invalid,
+      "stzh-chip-select--is-disabled": this.disabled,
+      "stzh-chip-select--is-required": this.required
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-chip-select__chips", role: "list" }, this._data.map((data) => (h("stzh-chip", { role: "listitem", 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 }))));
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox" }, this._data.map((data) => (h("stzh-chip", { role: "option", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : null, a11yDescribedby: `${this.inputId}-description ${this.a11yDescribedby}`, onClick: () => this.chipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
   }
   static get is() { return "stzh-chip-select"; }
   static get encapsulation() { return "scoped"; }
@@ -64,6 +109,26 @@ export class StzhChipSelect {
   }
   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"
+        }
+      },
       "data": {
         "type": "string",
         "mutable": false,
@@ -87,6 +152,23 @@ export class StzhChipSelect {
         "reflect": false,
         "defaultValue": "[]"
       },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the input element"
+        },
+        "attribute": "name",
+        "reflect": true
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -122,6 +204,129 @@ export class StzhChipSelect {
         "attribute": "value",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "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
+      },
+      "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"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Required status"
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "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"
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }
@@ -153,6 +358,9 @@ export class StzhChipSelect {
     return [{
         "propName": "data",
         "methodName": "dataWatcher"
+      }, {
+        "propName": "error",
+        "methodName": "errorWatcher"
       }];
   }
 }