@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/collection/components/inputs/z-input-message/styles.css

@@ -1,24 +1,24 @@
 :host {
   display: flex;
-  align-items: start;
   min-height: calc(var(--space-unit) * 2.5);
+  align-items: start;
   margin-top: var(--space-unit);
   color: var(--color-text05);
-  fill: currentColor;
+  fill: currentcolor;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-2);
   letter-spacing: 0.16px;
 }
 
-:host([status='success']) {
+:host([status="success"]) {
   color: var(--color-text-success);
 }
 
-:host([status='error']) {
+:host([status="error"]) {
   color: var(--color-text-error);
 }
 
-:host([status='warning']) {
+:host([status="warning"]) {
   color: var(--color-warning02);
 }
 

package/dist/collection/components/inputs/z-select/index.js

@@ -1,6 +1,6 @@
-import { h, } from "@stencil/core";
-import { ListDividerType, KeyboardCodeEnum, } from "../../../beans";
-import { randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean, } from "../../../utils/utils";
+import { h } from "@stencil/core";
+import { ListDividerType, KeyboardCode } from "../../../beans";
+import { randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean } from "../../../utils/utils";
 export class ZSelect {
   constructor() {
     /** the id of the input element */
@@ -83,9 +83,7 @@ export class ZSelect {
         return item.name.toUpperCase().includes(searchString.toUpperCase());
       })
         .map((item) => {
-        const start = item.name
-          .toUpperCase()
-          .indexOf(searchString.toUpperCase());
+        const start = item.name.toUpperCase().indexOf(searchString.toUpperCase());
         const end = start + searchString.length;
         const newName = item.name.substring(0, start) +
           `<strong>${item.name.substring(start, end)}</strong>` +
@@ -100,49 +98,57 @@ export class ZSelect {
   }
   handleInputChange(e) {
     this.searchString = e.detail.value;
-    if (!this.isOpen)
+    if (!this.isOpen) {
       this.toggleSelectUl();
+    }
   }
   selectItem(item, selected) {
-    if (item && item.disabled)
+    if (item && item.disabled) {
       return;
+    }
     this.itemsList = this.mapSelectedItemToItemsArray();
     this.itemsList = this.itemsList.map((i) => {
       i.selected = false;
-      if (i.id === (item ? item.id : null))
+      if (i.id === (item === null || item === void 0 ? void 0 : item.id)) {
         i.selected = selected;
+      }
       return i;
     });
     this.selectedItem = this.itemsList.find((item) => item.selected);
     this.emitOptionSelect();
-    if (this.searchString)
+    if (this.searchString) {
       this.searchString = null;
+    }
   }
   arrowsSelectNav(e, key) {
-    const arrows = [KeyboardCodeEnum.ARROW_DOWN, KeyboardCodeEnum.ARROW_UP];
-    if (!arrows.includes(e.key))
+    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+    if (!arrows.includes(e.key)) {
       return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    if (!this.isOpen)
+    if (!this.isOpen) {
       this.toggleSelectUl();
+    }
     let index;
-    if (e.key === KeyboardCodeEnum.ARROW_DOWN) {
+    if (e.key === KeyboardCode.ARROW_DOWN) {
       index = key + 1 === this.itemsList.length ? 0 : key + 1;
     }
-    else if (e.key === KeyboardCodeEnum.ARROW_UP) {
+    else if (e.key === KeyboardCode.ARROW_UP) {
       index = key <= 0 ? this.itemsList.length - 1 : key - 1;
     }
     this.focusSelectItem(index);
   }
   focusSelectItem(index) {
     const focusElem = this.element.querySelector(`#${this.htmlid}_${index}`);
-    if (focusElem)
+    if (focusElem) {
       focusElem.focus();
+    }
   }
   toggleSelectUl(selfFocusOnClose = false) {
-    if (this.disabled || this.readonly)
+    if (this.disabled || this.readonly) {
       return;
+    }
     if (!this.isOpen) {
       document.addEventListener("click", this.handleSelectFocus);
       document.addEventListener("keyup", this.handleSelectFocus);
@@ -158,7 +164,7 @@ export class ZSelect {
   }
   handleInputClick(e) {
     const cp = e.composedPath();
-    const clearIcon = cp.find((item) => item.classList && item.classList.contains("resetIcon"));
+    const clearIcon = cp.find((item) => item.classList && item.classList.contains("reset-icon"));
     if (clearIcon) {
       e.stopPropagation();
       return;
@@ -166,19 +172,16 @@ export class ZSelect {
     this.toggleSelectUl();
   }
   handleSelectFocus(e) {
-    if (e instanceof KeyboardEvent && e.key === KeyboardCodeEnum.ESC) {
+    if (e instanceof KeyboardEvent && e.key === KeyboardCode.ESC) {
       e.stopPropagation();
       return this.toggleSelectUl(true);
     }
-    if (e instanceof KeyboardEvent &&
-      e.key !== KeyboardCodeEnum.TAB &&
-      e.key !== KeyboardCodeEnum.ENTER) {
+    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {
       return;
     }
     const tree = getElementTree(getClickedElement());
     const parent = tree.find((elem) => {
-      return (elem.nodeName.toLowerCase() === "z-input" &&
-        elem.id === `${this.htmlid}_input`);
+      return elem.nodeName.toLowerCase() === "z-input" && elem.id === `${this.htmlid}_input`;
     });
     if (!parent) {
       this.toggleSelectUl(e instanceof MouseEvent ? true : false);
@@ -186,17 +189,17 @@ export class ZSelect {
   }
   scrollToLetter(letter) {
     const foundItem = this.itemsList.find((item) => item.name.charAt(0) === letter);
-    if (foundItem)
+    if (foundItem) {
       this.focusSelectItem(this.itemsList.indexOf(foundItem));
+    }
   }
   renderInput() {
-    return (h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem
-        ? this.selectedItem.name.replace(/<[^>]+>/g, "")
-        : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, onClick: (e) => {
+    return (h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, onClick: (e) => {
         this.handleInputClick(e);
       }, onKeyUp: (e) => {
-        if (e.keyCode !== 13)
+        if (e.keyCode !== 13) {
           e.preventDefault();
+        }
         handleKeyboardSubmit(e, this.toggleSelectUl);
       }, onKeyDown: (e) => {
         return this.arrowsSelectNav(e, this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : -1);
@@ -211,31 +214,32 @@ export class ZSelect {
   }
   renderSelectUl() {
     var _a;
-    return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: "ulScrollWrapper", tabindex: "-1" }, h("z-list", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id, "aria-multiselectable": false, class: {
+    return (h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, h("div", { class: "ul-scroll-wrapper", tabindex: "-1" }, h("z-list", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id, "aria-multiselectable": false, class: {
         disabled: this.disabled,
         readonly: this.readonly,
         filled: !!this.selectedItem,
-        [`input_${this.status}`]: !this.isOpen && !!this.status,
-        input_default: this.isOpen || !this.status,
+        [`input-${this.status}`]: !this.isOpen && !!this.status,
       } }, this.renderSelectUlItems()))));
   }
   renderSelectUlItems() {
-    if (!this.itemsList.length)
+    if (!this.itemsList.length) {
       return this.renderNoSearchResults();
+    }
     return this.itemsList.map((item, key) => {
-      return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: ListDividerType.element, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
     });
   }
   renderNoSearchResults() {
-    return (h("z-list-element", { color: "blue500", class: "noResults" }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
+    return (h("z-list-element", { color: "blue500", class: "no-results" }, h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
   }
   renderMessage() {
-    if (boolean(this.message) === false)
+    if (boolean(this.message) === false) {
       return;
+    }
     return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status }));
   }
   render() {
-    return (h("div", { class: "selectWrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+    return (h("div", { class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
   }
   static get is() { return "z-select"; }
   static get encapsulation() { return "scoped"; }
@@ -273,10 +277,10 @@ export class ZSelect {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "SelectItemBean[] | string",
-          "resolved": "SelectItemBean[] | string",
+          "original": "SelectItem[] | string",
+          "resolved": "SelectItem[] | string",
           "references": {
-            "SelectItemBean": {
+            "SelectItem": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -416,10 +420,10 @@ export class ZSelect {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputStatusBean",
-          "resolved": "\"error\" | \"success\" | \"warning\"",
+          "original": "InputStatus",
+          "resolved": "InputStatus.ERROR | InputStatus.SUCCESS | InputStatus.WARNING",
           "references": {
-            "InputStatusBean": {
+            "InputStatus": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -519,18 +523,18 @@ export class ZSelect {
     return {
       "getSelectedItem": {
         "complexType": {
-          "signature": "() => Promise<SelectItemBean>",
+          "signature": "() => Promise<SelectItem>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             },
-            "SelectItemBean": {
+            "SelectItem": {
               "location": "import",
               "path": "../../../beans"
             }
           },
-          "return": "Promise<SelectItemBean>"
+          "return": "Promise<SelectItem>"
         },
         "docs": {
           "text": "get the input selected options",
@@ -564,7 +568,7 @@ export class ZSelect {
             "Promise": {
               "location": "global"
             },
-            "SelectItemBean": {
+            "SelectItem": {
               "location": "import",
               "path": "../../../beans"
             }

package/dist/collection/components/inputs/z-select/styles.css

@@ -1,89 +1,84 @@
 :host {
   display: inline-block;
   width: inherit;
+  color: var(--color-text02);
   font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
   font-size: var(--font-size-3);
-  color: var(--color-text02);
+  font-weight: var(--font-rg);
 }
 
-.selectWrapper > z-input {
+.select-wrapper > z-input {
   width: 100%;
 }
 
-.selectWrapper > div {
+.select-wrapper > div {
   position: relative;
 }
 
-.selectWrapper > div.closed {
-  height: 0;
+.select-wrapper > div.closed {
   overflow: hidden;
+  height: 0;
 }
 
-.selectWrapper .ulScrollWrapper {
-  background: var(--color-surface01);
+.select-wrapper .ul-scroll-wrapper {
   position: absolute;
+  width: 100%;
+  box-sizing: border-box;
   padding: calc(var(--space-unit) * 0.5) var(--space-unit);
   border: var(--border-size-small) solid var(--gray200);
   border-top: none;
-  width: 100%;
-  box-sizing: border-box;
+  background: var(--color-surface01);
   outline: none;
 }
 
-.selectWrapper .closed .ulScrollWrapper {
+.select-wrapper .closed .ul-scroll-wrapper {
   z-index: 10;
 }
 
-.selectWrapper .open .ulScrollWrapper {
+.select-wrapper .open .ul-scroll-wrapper {
   z-index: 20;
 }
 
-.selectWrapper .ulScrollWrapper > z-list {
+.select-wrapper .ul-scroll-wrapper > z-list {
   position: relative;
-  padding: calc(var(--space-unit) * 0.5);
-  max-height: 240px;
   overflow: auto;
+  max-height: 240px;
+  padding: calc(var(--space-unit) * 0.5);
   outline: none;
 
   /* Firefox scrollbar */
   scrollbar-color: var(--color-primary01) transparent;
 }
 
-.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar {
-  background: linear-gradient(
-    to right,
-    transparent 0 3px,
-    var(--gray200) 3px 7px,
-    transparent 7px 10px
-  );
+.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar {
   width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
-.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-track {
+.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
-.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-thumb {
+.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb {
   width: 10px;
   background-color: var(--color-primary01);
   border-radius: var(--border-radius);
 }
 
-.selectWrapper .ulScrollWrapper > z-list::-webkit-scrollbar-thumb:hover {
+.select-wrapper .ul-scroll-wrapper > z-list::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-hover-primary);
 }
 
-.selectWrapper .ulScrollWrapper z-list z-list-element span {
+.select-wrapper .ul-scroll-wrapper z-list z-list-element span {
   display: block;
   padding: 0 calc(var(--space-unit) * 1.5);
 }
 
-.selectWrapper .ulScrollWrapper z-list z-list-element span.selected {
+.select-wrapper .ul-scroll-wrapper z-list z-list-element span.selected {
   font-weight: bold;
 }
 
-.selectWrapper .ulScrollWrapper .noResults z-icon {
+.select-wrapper .ul-scroll-wrapper .no-results z-icon {
   margin-right: var(--space-unit);
 }

package/dist/collection/components/list/z-list/index.js

@@ -5,7 +5,7 @@ export class ZList {
     /**
      * [optional] Sets size of inside elements.
      */
-    this.size = ListSize.medium;
+    this.size = ListSize.MEDIUM;
   }
   setChildrenSizeType() {
     const children = this.host.children;
@@ -38,7 +38,7 @@ export class ZList {
         "mutable": false,
         "complexType": {
           "original": "ListSize",
-          "resolved": "(typeof ListSize)[\"x-large\"] | ListSize.large | ListSize.medium | ListSize.small",
+          "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
           "references": {
             "ListSize": {
               "location": "import",
@@ -54,7 +54,7 @@ export class ZList {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "ListSize.medium"
+        "defaultValue": "ListSize.MEDIUM"
       }
     };
   }

package/dist/collection/components/list/z-list/styles.css

@@ -1,7 +1,6 @@
 :host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-
   display: flex;
   flex-direction: column;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
 }

package/dist/collection/components/list/z-list-element/index.js

@@ -1,5 +1,5 @@
-import { h, Host, } from "@stencil/core";
-import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, KeyboardKeys, ListDividerType, ListSize, } from "../../../beans";
+import { h, Host } from "@stencil/core";
+import { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, KeyboardCode, ListDividerType, ListSize, } from "../../../beans";
 export class ZListElement {
   /**
    * Constructor.
@@ -8,7 +8,7 @@ export class ZListElement {
     /**
      * [optional] Align expandable button left or right.
      */
-    this.alignButton = ExpandableListButtonAlign.left;
+    this.alignButton = ExpandableListButtonAlign.LEFT;
     /**
      * [optional] Sets element clickable.
      */
@@ -20,11 +20,11 @@ export class ZListElement {
     /**
      * [optional] Sets the position where to insert the divider.
      */
-    this.dividerType = ListDividerType.none;
+    this.dividerType = ListDividerType.NONE;
     /**
      * [optional] Sets the divider size.
      */
-    this.dividerSize = DividerSize.small;
+    this.dividerSize = DividerSize.SMALL;
     /**
      * [optional] Sets element as expandable.
      */
@@ -32,11 +32,11 @@ export class ZListElement {
     /**
      * [optional] Sets expandable style to element.
      */
-    this.expandableStyle = ExpandableListStyle.accordion;
+    this.expandableStyle = ExpandableListStyle.ACCORDION;
     /**
      * [optional] Sets size of inside elements.
      */
-    this.size = ListSize.medium;
+    this.size = ListSize.MEDIUM;
     /**
      * [optional] Sets text color of the element.
      */
@@ -87,17 +87,17 @@ export class ZListElement {
     return "container";
   }
   handleKeyDown(event) {
-    const expandByKey = event.code === KeyboardKeys.ENTER;
+    const expandByKey = event.code === KeyboardCode.ENTER;
     switch (event.code) {
-      case KeyboardKeys.ARROW_DOWN:
+      case KeyboardCode.ARROW_DOWN:
         event.preventDefault();
         this.accessibleFocus.emit(this.listElementId + 1);
         break;
-      case KeyboardKeys.ARROW_UP:
+      case KeyboardCode.ARROW_UP:
         event.preventDefault();
         this.accessibleFocus.emit(this.listElementId - 1);
         break;
-      case KeyboardKeys.ENTER:
+      case KeyboardCode.ENTER:
         event.preventDefault();
         this.clickItem.emit(this.listElementId);
         break;
@@ -131,11 +131,11 @@ export class ZListElement {
     }
     return (h("div", { class: {
         "z-list-element-inner-container": true,
-        expanded: this.showInnerContent,
+        "expanded": this.showInnerContent,
       } }, h("slot", { name: "inner-content" })));
   }
   render() {
-    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.element && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
   }
   static get is() { return "z-list-element"; }
   static get encapsulation() { return "shadow"; }
@@ -156,7 +156,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ExpandableListButtonAlign",
-          "resolved": "ExpandableListButtonAlign.left | ExpandableListButtonAlign.right",
+          "resolved": "ExpandableListButtonAlign.LEFT | ExpandableListButtonAlign.RIGHT",
           "references": {
             "ExpandableListButtonAlign": {
               "location": "import",
@@ -172,7 +172,7 @@ export class ZListElement {
         },
         "attribute": "align-button",
         "reflect": true,
-        "defaultValue": "ExpandableListButtonAlign.left"
+        "defaultValue": "ExpandableListButtonAlign.LEFT"
       },
       "clickable": {
         "type": "boolean",
@@ -215,7 +215,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ListDividerType",
-          "resolved": "ListDividerType.element | ListDividerType.header | ListDividerType.none",
+          "resolved": "ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE",
           "references": {
             "ListDividerType": {
               "location": "import",
@@ -231,14 +231,14 @@ export class ZListElement {
         },
         "attribute": "divider-type",
         "reflect": false,
-        "defaultValue": "ListDividerType.none"
+        "defaultValue": "ListDividerType.NONE"
       },
       "dividerSize": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "DividerSize",
-          "resolved": "DividerSize.large | DividerSize.medium | DividerSize.small",
+          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
           "references": {
             "DividerSize": {
               "location": "import",
@@ -254,7 +254,7 @@ export class ZListElement {
         },
         "attribute": "divider-size",
         "reflect": false,
-        "defaultValue": "DividerSize.small"
+        "defaultValue": "DividerSize.SMALL"
       },
       "expandable": {
         "type": "boolean",
@@ -279,7 +279,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ExpandableListStyle",
-          "resolved": "ExpandableListStyle.accordion | ExpandableListStyle.menu",
+          "resolved": "ExpandableListStyle.ACCORDION | ExpandableListStyle.MENU",
           "references": {
             "ExpandableListStyle": {
               "location": "import",
@@ -295,7 +295,7 @@ export class ZListElement {
         },
         "attribute": "expandable-style",
         "reflect": false,
-        "defaultValue": "ExpandableListStyle.accordion"
+        "defaultValue": "ExpandableListStyle.ACCORDION"
       },
       "listElementId": {
         "type": "number",
@@ -309,7 +309,7 @@ export class ZListElement {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "[optional] List element id."
         },
         "attribute": "list-element-id",
         "reflect": true
@@ -319,7 +319,7 @@ export class ZListElement {
         "mutable": false,
         "complexType": {
           "original": "ListSize",
-          "resolved": "(typeof ListSize)[\"x-large\"] | ListSize.large | ListSize.medium | ListSize.small",
+          "resolved": "ListSize.LARGE | ListSize.MEDIUM | ListSize.SMALL | ListSize.X_LARGE",
           "references": {
             "ListSize": {
               "location": "import",
@@ -335,7 +335,7 @@ export class ZListElement {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "ListSize.medium"
+        "defaultValue": "ListSize.MEDIUM"
       },
       "color": {
         "type": "string",