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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAOhF,MAAM,OAAO,UAAU;;oBAOH,QAAQ,CAAC,MAAM;2BAMD,eAAe,CAAC,IAAI;2BAMxB,WAAW,CAAC,KAAK;4BAMrB,SAAS;wBAMX,QAAQ,CAAC,IAAI;;oBAY5B,OAAO;;IAId,gBAAgB;QACd,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,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;gBAC3D,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC/D,CAAC;YACD,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,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACtE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,+BAA+B,EAAE,IAAI;oBACrC,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY;oBAClD,0BAA0B,EAAE,IAAI,CAAC,YAAY;iBAC9C;gBAED,6DAAM,IAAI,EAAC,cAAc,GAAG;gBAC3B,IAAI,CAAC,WAAW,KAAK,eAAe,CAAC,MAAM,IAAI,CAC9C,kEACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,GACtB,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\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] check for tree items in grouped lists\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  /**\n   * Sets element role.\n   */\n  @Prop({reflect: true})\n  role = \"group\";\n\n  private hasHeader: boolean;\n\n  componentDidLoad(): void {\n    const children = this.host.children;\n    for (let i = 0; i < children.length; i++) {\n      if (children.length - 1 > i) {\n        children[i].setAttribute(\"divider-type\", this.dividerType);\n        children[i].setAttribute(\"divider-size\", this.dividerSize);\n        children[i].setAttribute(\"divider-color\", this.dividerColor);\n      }\n      children[i].setAttribute(\"size\", this.size);\n      children[i].setAttribute(\"list-type\", this.listType);\n      children[i].setAttribute(\"list-element-position\", i.toString());\n    }\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host>\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader && !this.hasTreeItems,\n            \"grouped-tree-list-header\": this.hasTreeItems,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-list-group/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZListGroup} from \".\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\nimport {getColorTokenArgConfig} from \"../../../utils/storybook-utils\";\nimport \"../z-list-element/index\";\nimport \"../z-list/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZList/ZListGroup\",\n  component: \"z-list-group\",\n  argTypes: {\n    size: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListSize),\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    dividerColor: getColorTokenArgConfig(),\n    listType: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(ListType),\n    },\n  },\n  args: {\n    size: ListSize.SMALL,\n    dividerType: ListDividerType.HEADER,\n    dividerSize: DividerSize.SMALL,\n    dividerColor: \"gray200\",\n    listType: ListType.NONE,\n    role: \"group\",\n  },\n} satisfies Meta<ZListGroup>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) => html`\n    <z-list>\n      <z-list-group\n        size=${args.size}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        divider-color=${args.dividerColor}\n        list-type=${args.listType}\n        role=${args.role}\n      >\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n      <z-list-group\n        size=${args.size}\n        divider-type=${args.dividerType}\n        divider-size=${args.dividerSize}\n        divider-color=${args.dividerColor}\n        list-type=${args.listType}\n        role=${args.role}\n      >\n        <div slot=\"header-title\">Gruppo 1</div>\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 1</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 2</z-list-element\n        >\n        <z-list-element\n          size=${args.size}\n          list-type=${args.listType}\n          divider-type=${args.dividerType}\n          divider-size=${args.dividerSize}\n          divider-color=${args.dividerColor}\n          >Elemento 3</z-list-element\n        >\n      </z-list-group>\n    </z-list>\n  `,\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-tree-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n  tag: \"z-tree-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTreeList {\n  @Element() host: HTMLZTreeListElement;\n\n  /** Items to render, if they have the url property they will be rendered as clickable links */\n  @Prop()\n  items: TreeListItem[] | string = [];\n\n  /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n  @Prop({reflect: true})\n  htmlAriaLabelledby: string;\n\n  /** Used for aria-label attribute, sets name in \"tree\" */\n  @Prop({reflect: true})\n  htmlSectionTitle: string;\n\n  /** Emitted on item click, it return the id, name and url of the clicked item */\n  @Event()\n  treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n  private parsedItems: TreeListItem[] = [];\n\n  private htmlTag: string;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  private handleClick(item: TreeListItem): void {\n    this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n  }\n\n  private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n    let ancestor: HTMLElement | null = element;\n\n    for (let i = 0; i < levels; i++) {\n      ancestor = ancestor?.parentElement;\n      if (!ancestor) {\n        return;\n      }\n    }\n\n    return ancestor;\n  }\n\n  private handleArrowNav(event: KeyboardEvent): void {\n    if (event.code === KeyboardCode.TAB) {\n      event.preventDefault();\n\n      return;\n    }\n\n    const focusableElements = this.getFocusableElements();\n    const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n    if (currentIndex === -1) {\n      return;\n    }\n\n    if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n      event.preventDefault();\n\n      const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n      if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n        return;\n      }\n\n      focusableElements[nextIndex].focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_LEFT) {\n      event.preventDefault();\n      const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n      if (\n        !ancestor ||\n        !ancestor.children[0] ||\n        (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n      ) {\n        return;\n      }\n\n      (ancestor.children[0] as HTMLElement).focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_RIGHT) {\n      event.preventDefault();\n\n      const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n      if (!parentElm) {\n        return;\n      }\n\n      const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n      if (!childrenContainer) {\n        return;\n      }\n\n      const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n      if (!firstChild) {\n        return;\n      }\n\n      firstChild.focus();\n    }\n  }\n\n  private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n    this.htmlTag = item.url ? \"a\" : \"span\";\n\n    const treeListContent = (\n      <z-list-element\n        id={key}\n        class={!item.icon ? \"no-icon-elm\" : \"\"}\n        clickable={Boolean(item.url)}\n        hasTreeItems={true}\n        role=\"none\"\n        aria-hidden={undefined}\n      >\n        <this.htmlTag\n          class={{\n            \"list-element\": true,\n            \"z-link\": Boolean(item.url),\n            \"link-clickable\": Boolean(item.url),\n          }}\n          tabIndex={item.url ? 0 : -1}\n          onClick={() => this.handleClick(item)}\n          onKeyUp={(event: KeyboardEvent) => {\n            if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n              this.handleClick(item);\n            }\n          }}\n          onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n          role={item.url ? \"treeitem\" : undefined}\n          aria-hidden={item.url ? undefined : \"true\"}\n          aria-expanded={item.children?.length > 0 && true}\n          aria-level={level}\n          aria-label={item.name}\n          href={item.url}\n        >\n          <span class=\"item ellipsis\">\n            {item.icon && (\n              <z-icon\n                width={16}\n                height={16}\n                fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class={{\n                \"item-label\": true,\n                \"no-icon-label\": !item.icon,\n                \"bold-item\": item.bold,\n              }}\n              title={item.name}\n            >\n              {item.name}\n            </span>\n          </span>\n        </this.htmlTag>\n        {item.children?.length > 0 && (\n          <z-list role=\"group\">\n            <div class=\"children-node\">\n              {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n            </div>\n          </z-list>\n        )}\n      </z-list-element>\n    );\n\n    return treeListContent;\n  }\n\n  render(): HTMLZTreeListElement {\n    const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n    return (\n      <Host\n        class=\"tree-list\"\n        role={hasClickableItems ? \"navigation\" : \"none\"}\n        aria-hidden={hasClickableItems ? undefined : \"true\"}\n        aria-labelledby={this.htmlAriaLabelledby}\n      >\n        <div\n          tabIndex={-1}\n          role={hasClickableItems ? \"tree\" : \"none\"}\n          aria-hidden={hasClickableItems ? undefined : \"true\"}\n          aria-label={this.htmlSectionTitle}\n        >\n          {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-tree-list/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,IAAI,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,SAAS,CAAC;AAEjB,MAAM,WAAW,GAAG;IAClB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;IACrB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;SACF;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAC,OAAO,EAAE,QAAQ,EAAC;KAC3B;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACa,CAAC;AAEjB,eAAe,SAAS,CAAC;AAEzB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE;IACxC,OAAO,IAAI,CAAA,sBAAsB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAa;IACjC,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;KACtB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {TemplateResult, html} from \"lit\";\nimport \"./index\";\n\nconst sampleItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n      },\n    ],\n  },\n];\n\nconst clickableItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    url: \"#\",\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n        url: \"#\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    url: \"#\",\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n        url: \"#\",\n      },\n    ],\n  },\n];\n\nconst boldItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    bold: true,\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    bold: true,\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n      },\n    ],\n  },\n];\n\nconst StoryMeta = {\n  title: \"ZList/ZTreeList\",\n  component: \"z-tree-list\",\n  argTypes: {\n    items: {control: \"object\"},\n  },\n  args: {\n    items: sampleItems,\n  },\n} satisfies Meta;\n\nexport default StoryMeta;\n\nconst Template = (args): TemplateResult => {\n  return html`<z-tree-list items=${JSON.stringify(args.items)}></z-tree-list>`;\n};\n\nexport const Base: StoryObj = {\n  args: {\n    items: sampleItems,\n  },\n  render: Template,\n};\n\nexport const Bold: StoryObj = {\n  args: {\n    items: boldItems,\n  },\n  render: Template,\n};\n\nexport const Clickable: StoryObj = {\n  args: {\n    items: clickableItems,\n  },\n  render: Template,\n};\n"]}

package/dist/collection/components/table/cells/z-td/index.js

@@ -6,23 +6,10 @@ import { ButtonVariant, ControlSize, PopoverPosition } from "../../../../beans";
  */
 export class ZTd {
     constructor() {
-        /**
-         * Whether the cell should stick.
-         */
+        this.colspan = undefined;
         this.sticky = false;
-        /**
-         * Enables the contextual menu.
-         * Can be set to "hover" or "always" to show the button only on cell hover or always.
-         * Set a nullish value to hide the menu button.
-         */
         this.showMenu = null;
-        /**
-         * Set the popover position, the default is "auto".
-         */
         this.popoverPosition = PopoverPosition.AUTO;
-        /**
-         * Store the open state of the menu.
-         */
         this.isMenuOpen = false;
     }
     updateColspan() {
@@ -42,7 +29,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '65102becbf97d8f480c9e9c140965963e1b829a3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'a91b370f73c8684038a75db6483ec88dd8b3f4d6', class: "cell--content" }, h("slot", { key: '2a9451f11c23f2dae4047b360d8af92606ce3e76' }), this.showMenu && (h("div", { key: '0a4f91d75fce51604253ada3775f06ec9c230ce0', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'fe6623726d645f2796ff88246bd887b2e5ec9396', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '1ce2729d0209e5218515c52f4425c3f02b05c1bd', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b060d20d5e15380360f8bab9d502f85eb70a7995', name: "contextual-menu" })))))));
+        return (h(Host, { key: '293116a05abf815d72c5febe88387a672bc44a32', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '2edc2b6dcc67342e33dbb9dd7115ecc851c3fc73', class: "cell--content" }, h("slot", { key: 'a5bb48ca5dc5e37ce0b152c02c697cc421b60989' }), this.showMenu && (h("div", { key: 'e72f327a63b7b76e99b50b1ca8d9a971bd731ce3', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'cf6c1dc39f04221e9a96e405ad44e2e089e5787e', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '149e73ef108f4c4e02c254a047dd1f500049015a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '115d26fe844d42fd2de0cbf2e241be44ae35e46d', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }
@@ -72,10 +59,8 @@ export class ZTd {
                     "tags": [],
                     "text": "Number of columns that the cell should span."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "colspan"
+                "attribute": "colspan",
+                "reflect": false
             },
             "sticky": {
                 "type": "boolean",
@@ -91,10 +76,8 @@ export class ZTd {
                     "tags": [],
                     "text": "Whether the cell should stick."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "sticky",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "showMenu": {
@@ -107,8 +90,7 @@ export class ZTd {
                         "VisibilityCondition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::VisibilityCondition",
-                            "referenceLocation": "VisibilityCondition"
+                            "id": "src/beans/index.tsx::VisibilityCondition"
                         }
                     }
                 },
@@ -118,10 +100,8 @@ export class ZTd {
                     "tags": [],
                     "text": "Enables the contextual menu.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the menu button."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "show-menu",
+                "reflect": true,
                 "defaultValue": "null"
             },
             "popoverPosition": {
@@ -134,8 +114,7 @@ export class ZTd {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition",
-                            "referenceLocation": "PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition"
                         }
                     }
                 },
@@ -145,10 +124,8 @@ export class ZTd {
                     "tags": [],
                     "text": "Set the popover position, the default is \"auto\"."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "popover-position",
+                "reflect": false,
                 "defaultValue": "PopoverPosition.AUTO"
             }
         };
@@ -184,3 +161,4 @@ export class ZTd {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/cells/z-td/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/table/cells/z-td/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU;YAE1B,4DAAK,KAAK,EAAC,eAAe;gBACxB,8DAAa;gBACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;oBAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;oBACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe;wBAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTd {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/cells/z-th/index.js

@@ -7,33 +7,13 @@ import { ButtonVariant, ControlSize, PopoverPosition, SortDirection } from "../.
  */
 export class ZTh {
     constructor() {
-        /**
-         * Enables the contextual menu.
-         * Can be set to "hover" or "always" to show the button only on cell hover or always.
-         * Set a nullish value to hide the menu button.
-         */
+        this.colspan = undefined;
         this.showMenu = null;
-        /**
-         * Enables the sorting button.
-         * Can be set to "hover" or "always" to show the button only on cell hover or always.
-         * Set a nullish value to hide the sort button.
-         */
         this.showSorting = null;
-        /**
-         * Whether the cell should stick.
-         */
         this.sticky = false;
-        /**
-         * Sorted state of the column.
-         */
+        this.sortDirection = undefined;
         this.sorted = false;
-        /**
-         * Set popover position.
-         */
         this.popoverPosition = PopoverPosition.AUTO;
-        /**
-         * Store the open state of the menu.
-         */
         this.isMenuOpen = false;
     }
     /**
@@ -70,7 +50,7 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '326c1c5968ebd22021f5bc88d3c98cd558c31783', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '935a692b283f76362fe5e3cc7cc2f8e38424f407', class: "cell--content" }, h("slot", { key: 'cce03a04640d1ee72e2e202f7526203136f4bb50' }), this.showSorting && (h("button", { key: 'c161a473f0b4e6d6b1a478ad0530c6d0938fc1a1', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '4b9b3aab3b0ce9f14c2a181860c834098077dee3', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'cd3b0e8a851c8a414229f4976b8a227d99981ce0', class: "cell--menu-container" }, h("z-button", { key: '3d37441174ff3ea540c0aec582bc91c7c644c818', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '59de83e276e82705588041660e7612080b6636e8', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c92e8e0a5c617251dc6741ff4d9cbe943f224111', name: "contextual-menu" })))))));
+        return (h(Host, { key: '03fc52e539b5d4b353707a3065be9d522c0aed93', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '2253ed45163efb0508ef0c291d33f386c53d8fbb', class: "cell--content" }, h("slot", { key: '3d17a384cb6d39c3672eb2c6c44a0e491214ed50' }), this.showSorting && (h("button", { key: 'e32ce07f7193628e19e0e20bcc56fe309c48c6f3', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '6a96bf249ecb191f6f0b71ce8b5186ee1e109a91', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'a490f573b3d07dc6ca74190cb81be4075fc85d97', class: "cell--menu-container" }, h("z-button", { key: 'ae1cd376be6fb4e13674277ab927d9542a469bbc', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'bb9ee43bf68dce8a8046b88bf9bf993ff519816d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b1d46d09c33c4f957ea1d6984428b2ba55763e66', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }
@@ -100,10 +80,8 @@ export class ZTh {
                     "tags": [],
                     "text": "Number of columns that the cell should span."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "colspan"
+                "attribute": "colspan",
+                "reflect": false
             },
             "showMenu": {
                 "type": "string",
@@ -115,8 +93,7 @@ export class ZTh {
                         "VisibilityCondition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::VisibilityCondition",
-                            "referenceLocation": "VisibilityCondition"
+                            "id": "src/beans/index.tsx::VisibilityCondition"
                         }
                     }
                 },
@@ -126,10 +103,8 @@ export class ZTh {
                     "tags": [],
                     "text": "Enables the contextual menu.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the menu button."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "show-menu",
+                "reflect": true,
                 "defaultValue": "null"
             },
             "showSorting": {
@@ -142,8 +117,7 @@ export class ZTh {
                         "VisibilityCondition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::VisibilityCondition",
-                            "referenceLocation": "VisibilityCondition"
+                            "id": "src/beans/index.tsx::VisibilityCondition"
                         }
                     }
                 },
@@ -153,10 +127,8 @@ export class ZTh {
                     "tags": [],
                     "text": "Enables the sorting button.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the sort button."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "show-sorting",
+                "reflect": true,
                 "defaultValue": "null"
             },
             "sticky": {
@@ -173,10 +145,8 @@ export class ZTh {
                     "tags": [],
                     "text": "Whether the cell should stick."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "sticky",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "sortDirection": {
@@ -189,8 +159,7 @@ export class ZTh {
                         "SortDirection": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::SortDirection",
-                            "referenceLocation": "SortDirection"
+                            "id": "src/beans/index.tsx::SortDirection"
                         }
                     }
                 },
@@ -200,10 +169,8 @@ export class ZTh {
                     "tags": [],
                     "text": "Current sorting direction."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "sort-direction"
+                "attribute": "sort-direction",
+                "reflect": false
             },
             "sorted": {
                 "type": "boolean",
@@ -219,10 +186,8 @@ export class ZTh {
                     "tags": [],
                     "text": "Sorted state of the column."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "sorted",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "popoverPosition": {
@@ -235,8 +200,7 @@ export class ZTh {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition",
-                            "referenceLocation": "PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition"
                         }
                     }
                 },
@@ -246,10 +210,8 @@ export class ZTh {
                     "tags": [],
                     "text": "Set popover position."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "popover-position",
+                "reflect": false,
                 "defaultValue": "PopoverPosition.AUTO"
             }
         };
@@ -285,3 +247,4 @@ export class ZTh {
             }];
     }
 }
+//# sourceMappingURL=index.js.map