@oiz/stzh-components 1.5.0-alpha → 2.0.0

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,6 +1,9 @@
 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() {
@@ -12,6 +15,14 @@ export class StzhChipSelect {
     this.label = "";
     /** Value */
     this.value = "";
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /** Whether the element is disabled or not */
+    this.disabled = false;
+    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.a11yDescribedby = "";
     this.chipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
@@ -41,14 +52,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" }, 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 }))));
+    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 +111,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 +154,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 +206,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 +360,9 @@ export class StzhChipSelect {
     return [{
         "propName": "data",
         "methodName": "dataWatcher"
+      }, {
+        "propName": "error",
+        "methodName": "errorWatcher"
       }];
   }
 }