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

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

@@ -2,17 +2,8 @@ import { Host, h } from "@stencil/core";
 import { ListSize, ListType } from "../../../beans";
 export class ZList {
     constructor() {
-        /**
-         * [optional] Sets size of inside elements.
-         */
         this.size = ListSize.MEDIUM;
-        /**
-         * [optional] type of the list marker for each element
-         */
         this.listType = ListType.NONE;
-        /**
-         * Sets role of the element.
-         */
         this.role = "list";
     }
     setChildrenSizeType() {
@@ -27,7 +18,7 @@ export class ZList {
         this.setChildrenSizeType();
     }
     render() {
-        return (h(Host, { key: 'f34729eb14ef690bf0aeb7da4b406e955a66fbf7' }, h("slot", { key: '82b4a9c72937797bb8f7e4141f7a4c609908c702' })));
+        return (h(Host, { key: '004f6ec917edd3b8a3f0f50809543a7cb357daba' }, h("slot", { key: '6f55271632a504df1e044da28be26cf2e5e7fb1b' })));
     }
     static get is() { return "z-list"; }
     static get encapsulation() { return "shadow"; }
@@ -53,8 +44,7 @@ export class ZList {
                         "ListSize": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListSize",
-                            "referenceLocation": "ListSize"
+                            "id": "src/beans/index.tsx::ListSize"
                         }
                     }
                 },
@@ -64,10 +54,8 @@ export class ZList {
                     "tags": [],
                     "text": "[optional] Sets size of inside elements."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "size",
+                "reflect": true,
                 "defaultValue": "ListSize.MEDIUM"
             },
             "listType": {
@@ -80,8 +68,7 @@ export class ZList {
                         "ListType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListType",
-                            "referenceLocation": "ListType"
+                            "id": "src/beans/index.tsx::ListType"
                         }
                     }
                 },
@@ -91,10 +78,8 @@ export class ZList {
                     "tags": [],
                     "text": "[optional] type of the list marker for each element"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "list-type",
+                "reflect": true,
                 "defaultValue": "ListType.NONE"
             },
             "role": {
@@ -111,13 +96,12 @@ export class ZList {
                     "tags": [],
                     "text": "Sets role of the element."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "role",
+                "reflect": true,
                 "defaultValue": "\"list\""
             }
         };
     }
     static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOlD,MAAM,OAAO,KAAK;;oBAOE,QAAQ,CAAC,MAAM;wBAMX,QAAQ,CAAC,IAAI;oBAM5B,MAAM;;IAEL,mBAAmB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * Sets role of the element.\n   */\n  @Prop({reflect: true})\n  role = \"list\";\n\n  private setChildrenSizeType(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", (i + 1).toString());\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setChildrenSizeType();\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -182,3 +182,4 @@ export const OrderedIndex = {
         listType: ListType.ORDERED,
     },
 };
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZList} from \".\";\nimport {ListSize, ListType} from \"../../../beans\";\nimport \"../z-list-element/index\";\nimport \"../z-list-group/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZList/ZList\",\n  component: \"z-list\",\n  argTypes: {\n    size: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ListSize),\n    },\n    listType: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ListType),\n    },\n  },\n  args: {\n    size: ListSize.MEDIUM,\n    listType: ListType.NONE,\n  },\n  render: (args) => html`\n    <z-list\n      .listType=${args.listType}\n      size=${args.size}\n    >\n      <z-list-element\n        .listType=${args.listType}\n        size=${args.size}\n        >Elemento 1</z-list-element\n      >\n      <z-list-element\n        .listType=${args.listType}\n        size=${args.size}\n        >Elemento 2</z-list-element\n      >\n      <z-list-element\n        .listType=${args.listType}\n        size=${args.size}\n        >Elemento 3</z-list-element\n      >\n    </z-list>\n  `,\n} satisfies Meta<ZList>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZList>;\n\nexport const Default = {} satisfies Story;\n\nexport const HeaderDivider = {\n  render: (args) =>\n    html`<z-list>\n      <z-list-group divider-type=\"header\">\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n      <z-list-group divider-type=\"header\">\n        <div slot=\"header-title\">Gruppo 2</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const ElementDivider = {\n  render: (args) =>\n    html`<z-list>\n      <z-list-group divider-type=\"element\">\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n      <z-list-group divider-type=\"element\">\n        <div slot=\"header-title\">Gruppo 2</div>\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          .listType=${args.listType}\n          size=${args.size}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const ClickableElements = {\n  render: () =>\n    html`<z-list>\n      <z-list-group>\n        <z-list-element clickable>Elemento 1</z-list-element>\n        <z-list-element clickable>Elemento 2</z-list-element>\n        <z-list-element clickable>Elemento 3</z-list-element>\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const ExpandableElements = {\n  render: () =>\n    html`<z-list size=\"large\">\n      <z-list-group divider-type=\"element\">\n        <z-list-element\n          expandable\n          align-button=\"left\"\n          expandable-style=\"accordion\"\n          ><span>Elemento 1</span><span slot=\"inner-content\">INNER CONTENT 1 BUTTON LEFT</span></z-list-element\n        >\n        <z-list-element\n          expandable\n          align-button=\"right\"\n          expandable-style=\"menu\"\n          ><span>Elemento 2</span><span slot=\"inner-content\">INNER CONTENT 2</span></z-list-element\n        >\n        <z-list-element\n          expandable\n          align-button=\"right\"\n          expandable-style=\"menu\"\n          ><span>Elemento 3</span><span slot=\"inner-content\">INNER CONTENT 3</span></z-list-element\n        >\n      </z-list-group>\n    </z-list>`,\n} satisfies Story;\n\nexport const UnorderedIndex = {\n  parameters: {\n    controls: {\n      exclude: [\"size\", \"listType\"],\n    },\n  },\n  args: {\n    listType: ListType.UNORDERED,\n  },\n} satisfies Story;\n\nexport const OrderedIndex = {\n  parameters: {\n    controls: {\n      exclude: [\"size\", \"listType\"],\n    },\n  },\n  args: {\n    listType: ListType.ORDERED,\n  },\n} satisfies Story;\n"]}

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

@@ -11,71 +11,33 @@ export class ZListElement {
      * Constructor.
      */
     constructor() {
-        /**
-         * [optional] Align expandable button left or right.
-         */
+        this.openElementConfig = {
+            accordion: {
+                open: "minus-circled",
+                close: "plus-circled",
+            },
+            menu: {
+                open: "chevron-up",
+                close: "chevron-down",
+            },
+        };
         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;
-        /**
-         * [optional] Sets size of inside elements.
-         */
+        this.listElementId = undefined;
         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;
-        /**
-         * Sets element role.
-         */
+        this.hasTreeItems = undefined;
         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);
     }
@@ -157,7 +119,7 @@ export class ZListElement {
         }
     }
     render() {
-        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 }))));
+        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 }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }
@@ -183,8 +145,7 @@ export class ZListElement {
                         "ExpandableListButtonAlign": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ExpandableListButtonAlign",
-                            "referenceLocation": "ExpandableListButtonAlign"
+                            "id": "src/beans/index.tsx::ExpandableListButtonAlign"
                         }
                     }
                 },
@@ -194,10 +155,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Align expandable button left or right."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "align-button",
+                "reflect": true,
                 "defaultValue": "ExpandableListButtonAlign.LEFT"
             },
             "clickable": {
@@ -214,10 +173,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets element clickable."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "clickable",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "dividerColor": {
@@ -234,10 +191,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets the divider color."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "divider-color",
+                "reflect": false,
                 "defaultValue": "\"color-surface03\""
             },
             "dividerType": {
@@ -250,8 +205,7 @@ export class ZListElement {
                         "ListDividerType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListDividerType",
-                            "referenceLocation": "ListDividerType"
+                            "id": "src/beans/index.tsx::ListDividerType"
                         }
                     }
                 },
@@ -261,10 +215,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets the position where to insert the divider."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "divider-type",
+                "reflect": false,
                 "defaultValue": "ListDividerType.NONE"
             },
             "dividerSize": {
@@ -277,8 +229,7 @@ export class ZListElement {
                         "DividerSize": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::DividerSize",
-                            "referenceLocation": "DividerSize"
+                            "id": "src/beans/index.tsx::DividerSize"
                         }
                     }
                 },
@@ -288,10 +239,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets the divider size."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "divider-size",
+                "reflect": false,
                 "defaultValue": "DividerSize.SMALL"
             },
             "expandable": {
@@ -308,10 +257,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets element as expandable."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "expandable",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "expandableStyle": {
@@ -324,8 +271,7 @@ export class ZListElement {
                         "ExpandableListStyle": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ExpandableListStyle",
-                            "referenceLocation": "ExpandableListStyle"
+                            "id": "src/beans/index.tsx::ExpandableListStyle"
                         }
                     }
                 },
@@ -335,10 +281,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets expandable style to element."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "expandable-style",
+                "reflect": false,
                 "defaultValue": "ExpandableListStyle.ACCORDION"
             },
             "listElementId": {
@@ -355,10 +299,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] List element id."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "list-element-id"
+                "attribute": "list-element-id",
+                "reflect": true
             },
             "size": {
                 "type": "string",
@@ -370,8 +312,7 @@ export class ZListElement {
                         "ListSize": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListSize",
-                            "referenceLocation": "ListSize"
+                            "id": "src/beans/index.tsx::ListSize"
                         }
                     }
                 },
@@ -381,10 +322,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets size of inside elements."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "size",
+                "reflect": true,
                 "defaultValue": "ListSize.MEDIUM"
             },
             "color": {
@@ -401,10 +340,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets text color of the element."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "color",
+                "reflect": true,
                 "defaultValue": "\"none\""
             },
             "disabled": {
@@ -421,10 +358,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets disabled style of the element."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "disabled",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "listElementPosition": {
@@ -441,10 +376,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] position of the list element inside the list or the group"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "list-element-position",
+                "reflect": true,
                 "defaultValue": "\"0\""
             },
             "listType": {
@@ -457,8 +390,7 @@ export class ZListElement {
                         "ListType": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ListType",
-                            "referenceLocation": "ListType"
+                            "id": "src/beans/index.tsx::ListType"
                         }
                     }
                 },
@@ -468,10 +400,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] type of the list marker for each element"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "list-type",
+                "reflect": true,
                 "defaultValue": "ListType.NONE"
             },
             "hasTreeItems": {
@@ -488,10 +418,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "[optional] Sets element as tree item."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "has-tree-items"
+                "attribute": "has-tree-items",
+                "reflect": false
             },
             "role": {
                 "type": "string",
@@ -507,10 +435,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "Sets element role."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "role",
+                "reflect": true,
                 "defaultValue": "\"listitem\""
             },
             "htmlTabindex": {
@@ -527,10 +453,8 @@ export class ZListElement {
                     "tags": [],
                     "text": "set tabindex to Host tag (optional). Defaults to 0."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "html-tabindex",
+                "reflect": false,
                 "defaultValue": "0"
             }
         };
@@ -599,3 +523,4 @@ export class ZListElement {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State} from \"@stencil/core\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  KeyboardCode,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-element\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListElement {\n  @Element() host: HTMLZListElementElement;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"accessibleFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  accessibleFocus: EventEmitter<number>;\n\n  /** set parent aria-activedescendant on focus event, returns filterid */\n  @Event({\n    eventName: \"ariaDescendantFocus\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  ariaDescendantFocus: EventEmitter<number>;\n\n  /** remove filter click event, returns filterid */\n  @Event({\n    eventName: \"clickItem\",\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  clickItem: EventEmitter;\n\n  @Listen(\"accessibleFocus\", {target: \"document\"})\n  accessibleFocusHandler(e: CustomEvent): void {\n    if (this.listElementId === e.detail) {\n      const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n      toFocus.focus();\n    }\n  }\n\n  /**\n   * [optional] Align expandable button left or right.\n   */\n  @Prop({reflect: true})\n  alignButton?: ExpandableListButtonAlign = ExpandableListButtonAlign.LEFT;\n\n  /**\n   * [optional] Sets element clickable.\n   */\n  @Prop({reflect: true})\n  clickable?: boolean = false;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop()\n  dividerColor?: string = \"color-surface03\";\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop()\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop()\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets element as expandable.\n   */\n  @Prop({reflect: true})\n  expandable?: boolean = false;\n\n  /**\n   * [optional] Sets expandable style to element.\n   */\n  @Prop()\n  expandableStyle?: ExpandableListStyle = ExpandableListStyle.ACCORDION;\n\n  /**\n   * [optional] List element id.\n   */\n  @Prop({reflect: true})\n  listElementId?: number;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets text color of the element.\n   */\n  @Prop({reflect: true})\n  color?: string = \"none\";\n\n  /**\n   * [optional] Sets disabled style of the element.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * [optional] position of the list element inside the list or the group\n   */\n  @Prop({reflect: true})\n  listElementPosition?: string = \"0\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] Sets element as tree item.\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"listitem\";\n\n  /** set tabindex to Host tag (optional). Defaults to 0. */\n  @Prop()\n  htmlTabindex?: number | null = 0;\n\n  @State()\n  showInnerContent = false;\n\n  private openElementConfig = {\n    accordion: {\n      open: \"minus-circled\",\n      close: \"plus-circled\",\n    },\n    menu: {\n      open: \"chevron-up\",\n      close: \"chevron-down\",\n    },\n  };\n\n  /**\n   * Constructor.\n   */\n  constructor() {\n    this.handleClick = this.handleClick.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  /**\n   * Handler for click on element. If element is expandable, change state.\n   * @returns void\n   */\n  private handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.clickItem.emit(this.listElementId);\n    if (!this.expandable) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  private handleKeyDown(event): void {\n    const expandByKey = event.code === KeyboardCode.ENTER;\n    switch (event.code) {\n      case KeyboardCode.ARROW_DOWN:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId + 1);\n        break;\n      case KeyboardCode.ARROW_UP:\n        event.preventDefault();\n        this.accessibleFocus.emit(this.listElementId - 1);\n        break;\n      case KeyboardCode.ENTER:\n        event.preventDefault();\n        this.clickItem.emit(this.listElementId);\n        break;\n      default:\n        break;\n    }\n\n    if (!this.expandable || !expandByKey) {\n      return;\n    }\n    this.showInnerContent = !this.showInnerContent;\n  }\n\n  /**\n   * Renders button to expand element.\n   * @returns expadable button\n   */\n  private renderExpandableButton(): HTMLZIconElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <z-icon\n        name={\n          this.showInnerContent\n            ? this.openElementConfig[this.expandableStyle].open\n            : this.openElementConfig[this.expandableStyle].close\n        }\n      />\n    );\n  }\n\n  /**\n   * Renders expanded content if element is expandable.\n   * @returns expanded content\n   */\n  private renderExpandedContent(): HTMLDivElement {\n    if (!this.expandable) {\n      return null;\n    }\n\n    return (\n      <div\n        class={{\n          \"z-list-element-inner-container\": true,\n          \"expanded\": this.showInnerContent,\n        }}\n      >\n        <slot name=\"inner-content\" />\n      </div>\n    );\n  }\n\n  /**\n   * Renders content of the z-list-element\n   * @returns list content\n   */\n  private renderContent(): HTMLDivElement {\n    if (this.listType === ListType.NONE) {\n      return <slot />;\n    }\n\n    if (this.listType === ListType.ORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <div>{this.listElementPosition}.&emsp;</div>\n          <slot />\n        </div>\n      );\n    }\n\n    if (this.listType === ListType.UNORDERED) {\n      return (\n        <div class=\"z-list-content-container\">\n          <span>&bull;&emsp;</span>\n          <slot />\n        </div>\n      );\n    }\n  }\n\n  render(): HTMLZListElementElement {\n    return (\n      <Host\n        aria-expanded={this.expandable ? this.showInnerContent : null}\n        onClick={this.handleClick}\n        onFocus={() => this.ariaDescendantFocus.emit(this.listElementId)}\n        onKeyDown={this.handleKeyDown}\n        clickable={this.clickable && !this.disabled}\n        tabIndex={this.hasTreeItems ? undefined : this.htmlTabindex}\n        role={this.hasTreeItems ? \"none\" : this.role}\n      >\n        <div\n          class={this.hasTreeItems ? \"tree-element-container\" : \"container\"}\n          style={!this.disabled && {color: `var(--${this.color})`}}\n          tabindex=\"-1\"\n          id={`z-list-element-id-${this.listElementId}`}\n          part=\"list-item-container\"\n        >\n          <div class=\"z-list-element-container\">\n            {this.renderExpandableButton()}\n            {this.renderContent()}\n          </div>\n          {this.renderExpandedContent()}\n        </div>\n        {this.dividerType === ListDividerType.ELEMENT && (\n          <z-divider\n            class={{\"z-tree-list-divider\": this.hasTreeItems}}\n            color={this.dividerColor}\n            size={this.dividerSize}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-element/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListElement} from \".\";\nimport {\n  DividerSize,\n  ExpandableListButtonAlign,\n  ExpandableListStyle,\n  ListDividerType,\n  ListSize,\n  ListType,\n} from \"../../../beans\";\nimport {getColorTokens} from \"../../../utils/storybook-utils\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZList/ZListElement\",\n  component: \"z-list-element\",\n  argTypes: {\n    alignButton: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ExpandableListButtonAlign),\n    },\n    dividerColor: {\n      control: {\n        type: \"select\",\n      },\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n    },\n    dividerType: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListDividerType),\n    },\n    dividerSize: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(DividerSize),\n    },\n    expandableStyle: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ExpandableListStyle),\n    },\n    size: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListSize),\n    },\n    color: {\n      control: {\n        type: \"select\",\n      },\n      options: getColorTokens().map((token) => token.replace(\"--\", \"\")),\n    },\n    listType: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListType),\n    },\n  },\n  args: {\n    alignButton: ExpandableListButtonAlign.LEFT,\n    clickable: false,\n    dividerColor: \"color-surface03\",\n    dividerType: ListDividerType.NONE,\n    dividerSize: DividerSize.SMALL,\n    expandable: false,\n    expandableStyle: ExpandableListStyle.ACCORDION,\n    listElementId: 0,\n    size: ListSize.MEDIUM,\n    color: \"color-default-text\",\n    disabled: true,\n    listElementPosition: \"0\",\n    listType: ListType.NONE,\n  },\n} satisfies Meta<ZListElement>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-list>\n      <z-list-element\n        align-button=${args.alignButton}\n        .clickable=${args.clickable}\n        divider-color=${args.dividerColor}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        .expandable=${args.expandable}\n        expandable-style=${args.expandableStyle}\n        list-element-id=${args.listElementId}\n        size=${args.size}\n        color=${args.color}\n        .disabled=${args.disabled}\n        list-element-position=${args.listElementPosition}\n        list-type=${args.listType}\n        ><span>Elemento 1</span><span slot=\"inner-content\">Inner content</span></z-list-element\n      >\n      <z-list-element\n        align-button=${args.alignButton}\n        .clickable=${args.clickable}\n        divider-color=${args.dividerColor}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        .expandable=${args.expandable}\n        expandable-style=${args.expandableStyle}\n        list-element-id=${args.listElementId}\n        size=${args.size}\n        color=${args.color}\n        .disabled=${args.disabled}\n        list-element-position=${args.listElementPosition}\n        list-type=${args.listType}\n        >Elemento 2</z-list-element\n      >\n      <z-list-element\n        align-button=${args.alignButton}\n        .clickable=${args.clickable}\n        divider-color=${args.dividerColor}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        .expandable=${args.expandable}\n        expandable-style=${args.expandableStyle}\n        list-element-id=${args.listElementId}\n        size=${args.size}\n        color=${args.color}\n        .disabled=${args.disabled}\n        list-element-position=${args.listElementPosition}\n        list-type=${args.listType}\n        >Elemento 3</z-list-element\n      >\n    </z-list>`,\n} satisfies StoryObj<ZListElement>;\n"]}