npm - @zanichelli/albe-web-components - Versions diffs - 19.2.2 → 19.2.3-RC1 - Mend

@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1546) hide show

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

@@ -11,33 +11,71 @@ export class ZListElement {
      * Constructor.
      */
     constructor() {
-        this.openElementConfig = {
-            accordion: {
-                open: "minus-circled",
-                close: "plus-circled",
-            },
-            menu: {
-                open: "chevron-up",
-                close: "chevron-down",
-            },
-        };
+        /**
+         * [optional] Align expandable button left or right.
+         */
         this.alignButton = ExpandableListButtonAlign.LEFT;
+        /**
+         * [optional] Sets element clickable.
+         */
         this.clickable = false;
+        /**
+         * [optional] Sets the divider color.
+         */
         this.dividerColor = "color-surface03";
+        /**
+         * [optional] Sets the position where to insert the divider.
+         */
         this.dividerType = ListDividerType.NONE;
+        /**
+         * [optional] Sets the divider size.
+         */
         this.dividerSize = DividerSize.SMALL;
+        /**
+         * [optional] Sets element as expandable.
+         */
         this.expandable = false;
+        /**
+         * [optional] Sets expandable style to element.
+         */
         this.expandableStyle = ExpandableListStyle.ACCORDION;
-        this.listElementId = undefined;
+        /**
+         * [optional] Sets size of inside elements.
+         */
         this.size = ListSize.MEDIUM;
+        /**
+         * [optional] Sets text color of the element.
+         */
         this.color = "none";
+        /**
+         * [optional] Sets disabled style of the element.
+         */
         this.disabled = false;
+        /**
+         * [optional] position of the list element inside the list or the group
+         */
         this.listElementPosition = "0";
+        /**
+         * [optional] type of the list marker for each element
+         */
         this.listType = ListType.NONE;
-        this.hasTreeItems = undefined;
+        /**
+         * Sets element role.
+         */
         this.role = "listitem";
+        /** set tabindex to Host tag (optional). Defaults to 0. */
         this.htmlTabindex = 0;
         this.showInnerContent = false;
+        this.openElementConfig = {
+            accordion: {
+                open: "minus-circled",
+                close: "plus-circled",
+            },
+            menu: {
+                open: "chevron-up",
+                close: "chevron-down",
+            },
+        };
         this.handleClick = this.handleClick.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
     }
@@ -119,7 +157,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: '09936377d5e836f011cac004f095e0d4f243c64a', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '9ba1d277209e3d02c1ad34cfb92e5979aa7f2df1', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '8c53a9715bb89aa6f7f7c8746352ce90679f8bba', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '0ca76d1b451f74ccafe0d00985b7d33e3f1cde59', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '565d88705b517e78e6b9c05f5923903704472751', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '6a1ccb7af0b9455e52e4b0b7699722a2f2e98f01', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '64a7d40c04afdb7cd9fc1f090926d7de10341ef4', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'e781e6f655bd4a7d0987fef33d8b426caa7ed0aa', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }
@@ -145,7 +183,8 @@ export class ZListElement {
                         "ExpandableListButtonAlign": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ExpandableListButtonAlign"
+                            "id": "src/beans/index.tsx::ExpandableListButtonAlign",
+                            "referenceLocation": "ExpandableListButtonAlign"
                         }
                     }
                 },
@@ -155,8 +194,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Align expandable button left or right."
                 },
-                "attribute": "align-button",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "align-button",
                 "defaultValue": "ExpandableListButtonAlign.LEFT"
             },
             "clickable": {
@@ -173,8 +214,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets element clickable."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "clickable",
                 "defaultValue": "false"
             },
             "dividerColor": {
@@ -191,8 +234,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets the divider color."
                 },
-                "attribute": "divider-color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "divider-color",
                 "defaultValue": "\"color-surface03\""
             },
             "dividerType": {
@@ -205,7 +250,8 @@ export class ZListElement {
                         "ListDividerType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListDividerType"
+                            "id": "src/beans/index.tsx::ListDividerType",
+                            "referenceLocation": "ListDividerType"
                         }
                     }
                 },
@@ -215,8 +261,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets the position where to insert the divider."
                 },
-                "attribute": "divider-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "divider-type",
                 "defaultValue": "ListDividerType.NONE"
             },
             "dividerSize": {
@@ -229,7 +277,8 @@ export class ZListElement {
                         "DividerSize": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::DividerSize"
+                            "id": "src/beans/index.tsx::DividerSize",
+                            "referenceLocation": "DividerSize"
                         }
                     }
                 },
@@ -239,8 +288,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets the divider size."
                 },
-                "attribute": "divider-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "divider-size",
                 "defaultValue": "DividerSize.SMALL"
             },
             "expandable": {
@@ -257,8 +308,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets element as expandable."
                 },
-                "attribute": "expandable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "expandable",
                 "defaultValue": "false"
             },
             "expandableStyle": {
@@ -271,7 +324,8 @@ export class ZListElement {
                         "ExpandableListStyle": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ExpandableListStyle"
+                            "id": "src/beans/index.tsx::ExpandableListStyle",
+                            "referenceLocation": "ExpandableListStyle"
                         }
                     }
                 },
@@ -281,8 +335,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets expandable style to element."
                 },
-                "attribute": "expandable-style",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "expandable-style",
                 "defaultValue": "ExpandableListStyle.ACCORDION"
             },
             "listElementId": {
@@ -299,8 +355,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] List element id."
                 },
-                "attribute": "list-element-id",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "list-element-id"
             },
             "size": {
                 "type": "string",
@@ -312,7 +370,8 @@ export class ZListElement {
                         "ListSize": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListSize"
+                            "id": "src/beans/index.tsx::ListSize",
+                            "referenceLocation": "ListSize"
                         }
                     }
                 },
@@ -322,8 +381,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets size of inside elements."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ListSize.MEDIUM"
             },
             "color": {
@@ -340,8 +401,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets text color of the element."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "color",
                 "defaultValue": "\"none\""
             },
             "disabled": {
@@ -358,8 +421,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets disabled style of the element."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "listElementPosition": {
@@ -376,8 +441,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] position of the list element inside the list or the group"
                 },
-                "attribute": "list-element-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "list-element-position",
                 "defaultValue": "\"0\""
             },
             "listType": {
@@ -390,7 +457,8 @@ export class ZListElement {
                         "ListType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListType"
+                            "id": "src/beans/index.tsx::ListType",
+                            "referenceLocation": "ListType"
                         }
                     }
                 },
@@ -400,8 +468,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] type of the list marker for each element"
                 },
-                "attribute": "list-type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "list-type",
                 "defaultValue": "ListType.NONE"
             },
             "hasTreeItems": {
@@ -418,8 +488,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets element as tree item."
                 },
-                "attribute": "has-tree-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-tree-items"
             },
             "role": {
                 "type": "string",
@@ -435,8 +507,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "Sets element role."
                 },
-                "attribute": "role",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "role",
                 "defaultValue": "\"listitem\""
             },
             "htmlTabindex": {
@@ -453,8 +527,10 @@ export class ZListElement {
                     "tags": [],
                     "text": "set tabindex to Host tag (optional). Defaults to 0."
                 },
-                "attribute": "html-tabindex",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-tabindex",
                 "defaultValue": "0"
             }
         };
@@ -523,4 +599,3 @@ export class ZListElement {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -125,4 +125,3 @@ export const Default = {
       >
     </z-list>`,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/list/z-list-group/index.js CHANGED Viewed

@@ -2,12 +2,29 @@ import { h, Host } from "@stencil/core";
 import { DividerSize, ListDividerType, ListSize, ListType } from "../../../beans";
 export class ZListGroup {
     constructor() {
+        /**
+         * [optional] Sets size of inside elements.
+         */
         this.size = ListSize.MEDIUM;
+        /**
+         * [optional] Sets the position where to insert the divider.
+         */
         this.dividerType = ListDividerType.NONE;
+        /**
+         * [optional] Sets the divider size.
+         */
         this.dividerSize = DividerSize.SMALL;
+        /**
+         * [optional] Sets the divider color.
+         */
         this.dividerColor = "gray200";
+        /**
+         * [optional] type of the list marker for each element
+         */
         this.listType = ListType.NONE;
-        this.hasTreeItems = undefined;
+        /**
+         * Sets element role.
+         */
         this.role = "group";
     }
     componentDidLoad() {
@@ -27,11 +44,11 @@ export class ZListGroup {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: 'eb976f8eb7debf81cb301e170056c02bbed5853f' }, h("div", { key: 'd71a93d31cab634e928d8879de85564a1e191d25', class: {
+        return (h(Host, { key: 'a2b30a3071d35ba28d8e485ff92a88e537a85290' }, h("div", { key: '528f17bfa6de4ccb252e86ec424b388f3d6d4ff0', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: 'b1afdab0fabab372b38a3dc056e2056eb303d3d1', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '130b8e1ac5bf520cb33768e53a11ef74536a8945', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '03e1c20792d9da3dfc7dbcf93a5def856d88fd65' })));
+            } }, h("slot", { key: '318ed932865eef9943a0f7ff7ae87e02a2ce968e', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '3d6d1ea46c42420c86b4f5f22bf5d5bcb1c5268f', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'f02a9b862b895d421be12ba4eb9625269f086e03' })));
     }
     static get is() { return "z-list-group"; }
     static get encapsulation() { return "shadow"; }
@@ -57,7 +74,8 @@ export class ZListGroup {
                         "ListSize": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListSize"
+                            "id": "src/beans/index.tsx::ListSize",
+                            "referenceLocation": "ListSize"
                         }
                     }
                 },
@@ -67,8 +85,10 @@ export class ZListGroup {
                     "tags": [],
                     "text": "[optional] Sets size of inside elements."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "ListSize.MEDIUM"
             },
             "dividerType": {
@@ -81,7 +101,8 @@ export class ZListGroup {
                         "ListDividerType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListDividerType"
+                            "id": "src/beans/index.tsx::ListDividerType",
+                            "referenceLocation": "ListDividerType"
                         }
                     }
                 },
@@ -91,8 +112,10 @@ export class ZListGroup {
                     "tags": [],
                     "text": "[optional] Sets the position where to insert the divider."
                 },
-                "attribute": "divider-type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "divider-type",
                 "defaultValue": "ListDividerType.NONE"
             },
             "dividerSize": {
@@ -105,7 +128,8 @@ export class ZListGroup {
                         "DividerSize": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::DividerSize"
+                            "id": "src/beans/index.tsx::DividerSize",
+                            "referenceLocation": "DividerSize"
                         }
                     }
                 },
@@ -115,8 +139,10 @@ export class ZListGroup {
                     "tags": [],
                     "text": "[optional] Sets the divider size."
                 },
-                "attribute": "divider-size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "divider-size",
                 "defaultValue": "DividerSize.SMALL"
             },
             "dividerColor": {
@@ -133,8 +159,10 @@ export class ZListGroup {
                     "tags": [],
                     "text": "[optional] Sets the divider color."
                 },
-                "attribute": "divider-color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "divider-color",
                 "defaultValue": "\"gray200\""
             },
             "listType": {
@@ -147,7 +175,8 @@ export class ZListGroup {
                         "ListType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListType"
+                            "id": "src/beans/index.tsx::ListType",
+                            "referenceLocation": "ListType"
                         }
                     }
                 },
@@ -157,8 +186,10 @@ export class ZListGroup {
                     "tags": [],
                     "text": "[optional] type of the list marker for each element"
                 },
-                "attribute": "list-type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "list-type",
                 "defaultValue": "ListType.NONE"
             },
             "hasTreeItems": {
@@ -175,8 +206,10 @@ export class ZListGroup {
                     "tags": [],
                     "text": "[optional] check for tree items in grouped lists"
                 },
-                "attribute": "has-tree-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-tree-items"
             },
             "role": {
                 "type": "string",
@@ -192,12 +225,13 @@ export class ZListGroup {
                     "tags": [],
                     "text": "Sets element role."
                 },
-                "attribute": "role",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "role",
                 "defaultValue": "\"group\""
             }
         };
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-list-group/index.stories.js CHANGED Viewed

@@ -118,4 +118,3 @@ export const Default = {
     </z-list>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/list/z-tree-list/index.js CHANGED Viewed

@@ -2,10 +2,9 @@ import { Host, h } from "@stencil/core";
 import { KeyboardCode } from "../../../beans";
 export class ZTreeList {
     constructor() {
-        this.parsedItems = [];
+        /** Items to render, if they have the url property they will be rendered as clickable links */
         this.items = [];
-        this.htmlAriaLabelledby = undefined;
-        this.htmlSectionTitle = undefined;
+        this.parsedItems = [];
     }
     watchItems() {
         this.parsedItems = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -94,7 +93,7 @@ export class ZTreeList {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: '2dec1105883f67ec44180943079ad9bc3386102a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'bbe5bf141b17412719b230c4848a5aa2385a8adc', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: 'ca5b846e86140efd7a98028001e646349cc5683a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'eac955c253173abb6e5f0992d356311dc52f9ee6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     static get is() { return "z-tree-list"; }
     static get encapsulation() { return "shadow"; }
@@ -120,7 +119,8 @@ export class ZTreeList {
                         "TreeListItem": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::TreeListItem"
+                            "id": "src/beans/index.tsx::TreeListItem",
+                            "referenceLocation": "TreeListItem"
                         }
                     }
                 },
@@ -130,8 +130,10 @@ export class ZTreeList {
                     "tags": [],
                     "text": "Items to render, if they have the url property they will be rendered as clickable links"
                 },
-                "attribute": "items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "items",
                 "defaultValue": "[]"
             },
             "htmlAriaLabelledby": {
@@ -148,8 +150,10 @@ export class ZTreeList {
                     "tags": [],
                     "text": "Used for aria-labelledby attribute, sets name in \"navigation\""
                 },
-                "attribute": "html-aria-labelledby",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "html-aria-labelledby"
             },
             "htmlSectionTitle": {
                 "type": "string",
@@ -165,8 +169,10 @@ export class ZTreeList {
                     "tags": [],
                     "text": "Used for aria-label attribute, sets name in \"tree\""
                 },
-                "attribute": "html-section-title",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "html-section-title"
             }
         };
     }
@@ -196,4 +202,3 @@ export class ZTreeList {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-tree-list/index.stories.js CHANGED Viewed

@@ -117,4 +117,3 @@ export const Clickable = {
     },
     render: Template,
 };
-//# sourceMappingURL=index.stories.js.map