@zanichelli/albe-web-components 13.0.0 → 13.1.0-rc1

package/dist/collection/deprecated/z-table-deprecated/z-table-header/index.js

@@ -0,0 +1,227 @@
+import { h, Host } from "@stencil/core";
+import { ButtonSize, ButtonVariant, PopoverPosition } from "../../../beans";
+import { getElementTree } from "../../../utils/utils";
+/**
+ * @deprecated
+ */
+export class ZTableHeader {
+    constructor() {
+        this.columnId = undefined;
+        this.padding = "medium";
+        this.sortable = undefined;
+        this.showButton = undefined;
+        this.defaultSortDirection = "asc";
+        this.sortDirection = "none";
+        this.emitOnSort = this.emitOnSort.bind(this);
+    }
+    emitOnSort() {
+        this.sort.emit({
+            columnId: this.columnId,
+            sortDirection: this.sortDirection,
+        });
+    }
+    handleSort() {
+        if (!this.sortable) {
+            return;
+        }
+        this.sortDirection = (() => {
+            switch (this.sortDirection) {
+                case "asc":
+                    return "desc";
+                case "desc":
+                    return "asc";
+                case "none":
+                    return this.defaultSortDirection;
+                default:
+                    return "none";
+            }
+        })();
+        this.emitOnSort();
+    }
+    handleMenuClick() {
+        this.popover.open = !this.popover.open;
+    }
+    handleOutsideClick(e) {
+        const tree = getElementTree(e.target);
+        const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
+        if (!parent && this.popover) {
+            this.popover.open = false;
+        }
+    }
+    handleClickHeaders(e) {
+        const target = e.target;
+        const parent = getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-table-header");
+        if (!this.sortable || !parent) {
+            return;
+        }
+        const parentColumnId = parent.attributes.getNamedItem("column-id").value;
+        const isSortable = target.parentNode.sortable || target.sortable;
+        if (parentColumnId !== this.columnId && isSortable) {
+            this.sortDirection = "none";
+        }
+    }
+    componentWillRender() {
+        this.host.setAttribute("role", "columnheader");
+    }
+    render() {
+        return (h(Host, { key: 'c67ac7a04f00b5252e3c988a46b80843dc911d2e', class: {
+                sortable: this.sortable,
+            }, onClick: () => this.handleSort() }, h("div", { key: 'f569e12c8d7ae2bc30884f11bf1b2636cf66e8d9', class: "container" }, h("slot", { key: 'c524c4ec78be5a6aded8bd4e92018fe16147561f' }), this.sortable && this.sortDirection !== "none" && (h("z-icon", { name: this.sortDirection === "asc" ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPosition.BOTTOM, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
+    }
+    static get is() { return "z-table-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column ID"
+                },
+                "attribute": "column-id",
+                "reflect": false
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"special\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"special\" | \"x-small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set padding size of cell, if special 0px padding will be set"
+                },
+                "attribute": "padding",
+                "reflect": true,
+                "defaultValue": "\"medium\""
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[Optional] Make the header sortable"
+                },
+                "attribute": "sortable",
+                "reflect": false
+            },
+            "showButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[Optional] Show contextual menu button"
+                },
+                "attribute": "show-button",
+                "reflect": false
+            },
+            "defaultSortDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"asc\" | \"desc\" | \"none\"",
+                    "resolved": "\"asc\" | \"desc\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[Optional] Default sort order"
+                },
+                "attribute": "default-sort-direction",
+                "reflect": false,
+                "defaultValue": "\"asc\""
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"asc\" | \"desc\" | \"none\"",
+                    "resolved": "\"asc\" | \"desc\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sort direction"
+                },
+                "attribute": "sort-direction",
+                "reflect": false,
+                "defaultValue": "\"none\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sort",
+                "name": "sort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[Optional] callback for sorting"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "body",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClickHeaders",
+                "target": "body",
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/deprecated/z-table-deprecated/z-table-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/deprecated/z-table-deprecated/z-table-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Listen, Prop} from \"@stencil/core\";\nimport {ButtonSize, ButtonVariant, PopoverPosition} from \"../../../beans\";\nimport {getElementTree} from \"../../../utils/utils\";\n\n/**\n * @deprecated\n */\n@Component({\n  tag: \"z-table-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTableHeader {\n  @Element() host: HTMLZTableHeaderElement;\n\n  /** Column ID */\n  @Prop()\n  columnId: string;\n\n  /** Set padding size of cell, if special 0px padding will be set */\n  @Prop({reflect: true})\n  padding: \"x-small\" | \"small\" | \"medium\" | \"large\" | \"special\" = \"medium\";\n\n  /** [Optional] Make the header sortable */\n  @Prop()\n  sortable?: boolean;\n\n  /** [Optional] Show contextual menu button */\n  @Prop()\n  showButton?: boolean;\n\n  /** [Optional] Default sort order */\n  @Prop()\n  defaultSortDirection?: \"asc\" | \"desc\" | \"none\" = \"asc\";\n\n  /** Sort direction */\n  @Prop({mutable: true})\n  sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\n\n  private popover?: HTMLZPopoverElement;\n\n  private triggerButton?: HTMLZButtonElement;\n\n  constructor() {\n    this.emitOnSort = this.emitOnSort.bind(this);\n  }\n\n  /** [Optional] callback for sorting */\n  @Event()\n  sort: EventEmitter;\n\n  private emitOnSort(): void {\n    this.sort.emit({\n      columnId: this.columnId,\n      sortDirection: this.sortDirection,\n    });\n  }\n\n  private handleSort(): void {\n    if (!this.sortable) {\n      return;\n    }\n\n    this.sortDirection = (() => {\n      switch (this.sortDirection) {\n        case \"asc\":\n          return \"desc\";\n        case \"desc\":\n          return \"asc\";\n        case \"none\":\n          return this.defaultSortDirection;\n        default:\n          return \"none\";\n      }\n    })();\n\n    this.emitOnSort();\n  }\n\n  private handleMenuClick(): void {\n    this.popover.open = !this.popover.open;\n  }\n\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    const tree = getElementTree(e.target as Element);\n    const parent = tree.find((elem: Element) => elem.nodeName.toLowerCase() === \"z-popover\");\n\n    if (!parent && this.popover) {\n      this.popover.open = false;\n    }\n  }\n\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleClickHeaders(e: MouseEvent): void {\n    const target = e.target as HTMLElement;\n    const parent = getElementTree(target).find((elem: Element) => elem.nodeName.toLowerCase() === \"z-table-header\");\n\n    if (!this.sortable || !parent) {\n      return;\n    }\n\n    const parentColumnId = parent.attributes.getNamedItem(\"column-id\").value;\n    const isSortable =\n      (target.parentNode as HTMLZTableHeaderElement).sortable || (target as HTMLZTableHeaderElement).sortable;\n\n    if (parentColumnId !== this.columnId && isSortable) {\n      this.sortDirection = \"none\";\n    }\n  }\n\n  componentWillRender(): void {\n    this.host.setAttribute(\"role\", \"columnheader\");\n  }\n\n  render(): HTMLZTableHeaderElement {\n    return (\n      <Host\n        class={{\n          sortable: this.sortable,\n        }}\n        onClick={() => this.handleSort()}\n      >\n        <div class=\"container\">\n          <slot />\n          {this.sortable && this.sortDirection !== \"none\" && (\n            <z-icon\n              name={this.sortDirection === \"asc\" ? \"arrow-up\" : \"arrow-down\"}\n              class=\"arrow\"\n            />\n          )}\n        </div>\n\n        {this.showButton && (\n          <div class=\"popover-container\">\n            <z-button\n              ref={(el) => (this.triggerButton = el as HTMLZButtonElement)}\n              class=\"contextual-popover-button\"\n              icon=\"contextual-menu\"\n              variant={ButtonVariant.TERTIARY}\n              size={ButtonSize.X_SMALL}\n              onClick={() => this.handleMenuClick()}\n            ></z-button>\n\n            <z-popover\n              ref={(el) => (this.popover = el as HTMLZPopoverElement)}\n              position={PopoverPosition.BOTTOM}\n              center={true}\n              bindTo={this.triggerButton as HTMLElement}\n            >\n              <div>\n                <slot name=\"contextual-menu\" />\n              </div>\n            </z-popover>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/deprecated/z-table-deprecated/z-table-header/index.spec.js

@@ -0,0 +1,227 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZTableHeader } from "./index";
+describe("Suite test ZTableHeader", () => {
+    it("Test render ZTableHeader con slot", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header><span>Test</span></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header padding="medium" role="columnheader">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+        <span>
+          Test
+        </span>
+      </z-table-header>
+    `);
+    });
+    it("Test render ZTableHeader con role columnheader", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header></z-table-header>`,
+        });
+        expect(page.root.getAttribute("role")).toEqual("columnheader");
+    });
+    it("Test render without icon when sortable is true and sort-direction is not defined", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header sortable="true"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header class="sortable" padding="medium" role="columnheader" sortable="true">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render z-popover icon when showButton is true", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header show-button="true"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header padding="medium" role="columnheader" show-button="true">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+          <div class="popover-container">
+          <z-button class="contextual-popover-button" icon="contextual-menu" size="x-small" variant="tertiary"></z-button>
+          <z-popover center="" position="bottom">
+            <div>
+              <slot name="contextual-menu"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render ZTableHeader with correct size when size is x-small", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header padding="x-small"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header padding="x-small" role="columnheader">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render ZTableHeader with correct size when size is small", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header padding="small"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header padding="small" role="columnheader">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render ZTableHeader with correct size when size is medium", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header size="medium"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header padding="medium" role="columnheader" size="medium">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render ZTableHeader with correct size when size is large", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header padding="large"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header padding="large" role="columnheader">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render ZTableHeader with correct size when size is special", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header padding="special"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header padding="special" role="columnheader">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render correct arrow after click on header", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header sortable="true" column-id="col-1"></z-table-header>`,
+        });
+        page.root.click();
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-table-header class="sortable" padding="medium" role="columnheader" sortable="true"  column-id="col-1">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+            <z-icon class="arrow" name="arrow-up"></z-icon>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render correct arrow after click twice on header", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header sortable="true" column-id="col-1"></z-table-header>`,
+        });
+        page.root.click();
+        await page.waitForChanges();
+        page.root.click();
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <z-table-header class="sortable" padding="medium" role="columnheader" sortable="true" column-id="col-1">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+            <z-icon class="arrow" name="arrow-down"></z-icon>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render without arrow when sort-direction is none", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header sortable="true" sort-direction="none" column-id="col-1"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header class="sortable" padding="medium" role="columnheader" sortable="true" sort-direction="none"  column-id="col-1">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render correct arrow when sort-direction is asc", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header sortable="true" sort-direction="asc" column-id="col-1"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header class="sortable" padding="medium" role="columnheader" sortable="true" sort-direction="asc" column-id="col-1">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+            <z-icon class="arrow" name="arrow-up"></z-icon>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+    it("Test render correct arrow when sort-direction is desc", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeader],
+            html: `<z-table-header sortable="true" sort-direction="desc" column-id="col-1"></z-table-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header class="sortable" padding="medium" role="columnheader" sortable="true" sort-direction="desc" column-id="col-1">
+        <mock:shadow-root>
+          <div class="container">
+            <slot></slot>
+            <z-icon class="arrow" name="arrow-down"></z-icon>
+          </div>
+        </mock:shadow-root>
+      </z-table-header>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/deprecated/z-table-deprecated/z-table-header/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/deprecated/z-table-deprecated/z-table-header/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZTableHeader} from \"./index\";\n\ndescribe(\"Suite test ZTableHeader\", () => {\n  it(\"Test render ZTableHeader con slot\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header><span>Test</span></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header padding=\"medium\" role=\"columnheader\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n        <span>\n          Test\n        </span>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render ZTableHeader con role columnheader\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header></z-table-header>`,\n    });\n\n    expect(page.root.getAttribute(\"role\")).toEqual(\"columnheader\");\n  });\n\n  it(\"Test render without icon when sortable is true and sort-direction is not defined\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header sortable=\"true\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header class=\"sortable\" padding=\"medium\" role=\"columnheader\" sortable=\"true\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render z-popover icon when showButton is true\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header show-button=\"true\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header padding=\"medium\" role=\"columnheader\" show-button=\"true\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n          <div class=\"popover-container\">\n          <z-button class=\"contextual-popover-button\" icon=\"contextual-menu\" size=\"x-small\" variant=\"tertiary\"></z-button>\n          <z-popover center=\"\" position=\"bottom\">\n            <div>\n              <slot name=\"contextual-menu\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render ZTableHeader with correct size when size is x-small\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header padding=\"x-small\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header padding=\"x-small\" role=\"columnheader\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render ZTableHeader with correct size when size is small\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header padding=\"small\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header padding=\"small\" role=\"columnheader\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render ZTableHeader with correct size when size is medium\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header size=\"medium\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header padding=\"medium\" role=\"columnheader\" size=\"medium\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render ZTableHeader with correct size when size is large\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header padding=\"large\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header padding=\"large\" role=\"columnheader\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render ZTableHeader with correct size when size is special\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header padding=\"special\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header padding=\"special\" role=\"columnheader\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render correct arrow after click on header\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header sortable=\"true\" column-id=\"col-1\"></z-table-header>`,\n    });\n\n    page.root.click();\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header class=\"sortable\" padding=\"medium\" role=\"columnheader\" sortable=\"true\"  column-id=\"col-1\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n            <z-icon class=\"arrow\" name=\"arrow-up\"></z-icon>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render correct arrow after click twice on header\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header sortable=\"true\" column-id=\"col-1\"></z-table-header>`,\n    });\n\n    page.root.click();\n    await page.waitForChanges();\n    page.root.click();\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header class=\"sortable\" padding=\"medium\" role=\"columnheader\" sortable=\"true\" column-id=\"col-1\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n            <z-icon class=\"arrow\" name=\"arrow-down\"></z-icon>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render without arrow when sort-direction is none\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header sortable=\"true\" sort-direction=\"none\" column-id=\"col-1\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header class=\"sortable\" padding=\"medium\" role=\"columnheader\" sortable=\"true\" sort-direction=\"none\"  column-id=\"col-1\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render correct arrow when sort-direction is asc\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header sortable=\"true\" sort-direction=\"asc\" column-id=\"col-1\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header class=\"sortable\" padding=\"medium\" role=\"columnheader\" sortable=\"true\" sort-direction=\"asc\" column-id=\"col-1\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n            <z-icon class=\"arrow\" name=\"arrow-up\"></z-icon>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n\n  it(\"Test render correct arrow when sort-direction is desc\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeader],\n      html: `<z-table-header sortable=\"true\" sort-direction=\"desc\" column-id=\"col-1\"></z-table-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header class=\"sortable\" padding=\"medium\" role=\"columnheader\" sortable=\"true\" sort-direction=\"desc\" column-id=\"col-1\">\n        <mock:shadow-root>\n          <div class=\"container\">\n            <slot></slot>\n            <z-icon class=\"arrow\" name=\"arrow-down\"></z-icon>\n          </div>\n        </mock:shadow-root>\n      </z-table-header>\n    `);\n  });\n});\n"]}

package/dist/collection/deprecated/z-table-deprecated/z-table-header/styles.css

@@ -0,0 +1,71 @@
+:host {
+  position: relative;
+  display: table-cell;
+  border-bottom: var(--border-size-medium) solid var(--gray200);
+  background-color: var(--gray50);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  text-align: start;
+}
+
+.container {
+  display: flex;
+  align-items: flex-end;
+}
+
+:host(.sortable) {
+  cursor: pointer;
+}
+
+:host([padding="x-small"]) {
+  padding: calc(var(--space-unit) * 0.5);
+}
+
+:host([padding="small"]) {
+  padding: calc(var(--space-unit));
+}
+
+:host([padding="medium"]) {
+  padding: calc(var(--space-unit) * 2);
+}
+
+:host([padding="large"]) {
+  padding: calc(var(--space-unit) * 2.5);
+}
+
+:host([padding="special"]) {
+  padding: 0;
+}
+
+/*
+Sorting arrow
+*/
+.arrow {
+  padding-left: var(--space-unit);
+  opacity: 1;
+}
+
+/*
+Contextual menu
+*/
+.popover-container {
+  position: absolute;
+  top: var(--space-unit);
+  right: var(--space-unit);
+  display: none;
+}
+
+.popover-container z-popover {
+  --z-popover-theme--surface: var(--gray200);
+
+  position: relative;
+  z-index: 1;
+}
+
+.popover-container.visible {
+  display: block;
+}
+
+:host(:hover) .popover-container {
+  display: block;
+}

package/dist/collection/deprecated/z-table-deprecated/z-table-header-row/index.js

@@ -0,0 +1,48 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @deprecated
+ */
+export class ZTableHeaderRow {
+    constructor() {
+        this.expandable = undefined;
+    }
+    renderExpandHeader() {
+        return h("z-table-header", null);
+    }
+    render() {
+        return (h(Host, { key: '640d060798684dee3641fef5c3778e263acfbd8d', role: "row" }, this.expandable && this.renderExpandHeader(), h("slot", { key: '42d15bfd63e021a96c2394d5bc91c185bcee55b8' })));
+    }
+    static get is() { return "z-table-header-row"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row expandable flag"
+                },
+                "attribute": "expandable",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/deprecated/z-table-deprecated/z-table-header-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/deprecated/z-table-deprecated/z-table-header-row/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;GAEG;AAMH,MAAM,OAAO,eAAe;;;;IAKlB,kBAAkB;QACxB,OAAO,yBAAiC,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK;YACb,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC7C,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, Host, h} from \"@stencil/core\";\n\n/**\n * @deprecated\n */\n@Component({\n  tag: \"z-table-header-row\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZTableHeaderRow {\n  /** Row expandable flag */\n  @Prop({reflect: true})\n  expandable?: boolean;\n\n  private renderExpandHeader(): HTMLZTableHeaderElement {\n    return <z-table-header></z-table-header>;\n  }\n\n  render(): HTMLZTableHeaderRowElement {\n    return (\n      <Host role=\"row\">\n        {this.expandable && this.renderExpandHeader()}\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/deprecated/z-table-deprecated/z-table-header-row/index.spec.js

@@ -0,0 +1,28 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZTableHeaderRow } from "./index";
+describe("Suite test ZTableHeaderRow", () => {
+    it("Test prop expandable = false", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeaderRow],
+            html: `<z-table-header-row expandable="false"><z-table-header/></z-table-header-row>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header-row expandable="false" role="row">
+        <z-table-header></z-table-header>
+      </z-table-header-row>
+    `);
+    });
+    it("Test prop expandable = true", async () => {
+        const page = await newSpecPage({
+            components: [ZTableHeaderRow],
+            html: `<z-table-header-row expandable="true"><z-table-header/></z-table-header-row>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-table-header-row role="row" expandable>
+        <z-table-header></z-table-header>
+        <z-table-header></z-table-header>
+      </z-table-header-row>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/deprecated/z-table-deprecated/z-table-header-row/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/deprecated/z-table-deprecated/z-table-header-row/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC1C,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,+EAA+E;SACtF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,8EAA8E;SACrF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZTableHeaderRow} from \"./index\";\n\ndescribe(\"Suite test ZTableHeaderRow\", () => {\n  it(\"Test prop expandable = false\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeaderRow],\n      html: `<z-table-header-row expandable=\"false\"><z-table-header/></z-table-header-row>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header-row expandable=\"false\" role=\"row\">\n        <z-table-header></z-table-header>\n      </z-table-header-row>\n    `);\n  });\n\n  it(\"Test prop expandable = true\", async () => {\n    const page = await newSpecPage({\n      components: [ZTableHeaderRow],\n      html: `<z-table-header-row expandable=\"true\"><z-table-header/></z-table-header-row>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-table-header-row role=\"row\" expandable>\n        <z-table-header></z-table-header>\n        <z-table-header></z-table-header>\n      </z-table-header-row>\n    `);\n  });\n});\n"]}