xv-webcomponents 0.1.26 → 0.1.28

package/dist/collection/components/xv-table/xv-table-toolbar/xv-table-toolbar.js

@@ -0,0 +1,78 @@
+import { Host, h } from "@stencil/core";
+export class XvTableToolbar {
+    constructor() {
+        this.selected = 0;
+    }
+    async setSelectedItems(selected) {
+        let count = 0;
+        selected.forEach(row => {
+            var _a, _b, _c;
+            // not count header
+            if (row.name === 'header')
+                return;
+            // count row if it's not group
+            if (!((_a = row.group) === null || _a === void 0 ? void 0 : _a.isMainRow)) {
+                count++;
+                return;
+            }
+            // count selected group rows
+            count += (((_c = (_b = row.group) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length) || 0);
+        });
+        this.selected = count;
+    }
+    render() {
+        return (h(Host, { key: 'ff7f4169161d758dc2d9ecac906fe8f80e1aa0cc', class: { active: !!this.selected } }, h("div", { key: '687aacbb14767fc360a5ebd77333e5cc7d4991e2', class: "toolbar" }, h("slot", { key: '4eb52c981bd1193fb0c4f5c9b2f541329fafe010' })), h("div", { key: 'eb51c8c6d54629623fbf52d930b230067d2199de', class: "butch-editing" }, h("div", { key: '68fea62d37eb5b82ff3536a7bc2117c1d3b40ac7', class: "butch-editing_content" }, h("slot", { key: '513837fd458c511472704e11313345882845e33e', name: "actions" })), h("div", { key: '4e81903ecd38b1c84cede6c0ab64725b47d19dd6', class: "butch-editing_selected" }, this.selected, " ", this.selected === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'))));
+    }
+    static get is() { return "xv-table-v2-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-toolbar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-toolbar.css"]
+        };
+    }
+    static get states() {
+        return {
+            "selected": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setSelectedItems": {
+                "complexType": {
+                    "signature": "(selected: Map<string, TableSelectionEventData>) => Promise<void>",
+                    "parameters": [{
+                            "name": "selected",
+                            "type": "Map<string, TableSelectionEventData>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Map": {
+                            "location": "global",
+                            "id": "global::Map"
+                        },
+                        "TableSelectionEventData": {
+                            "location": "import",
+                            "path": "../defs",
+                            "id": "src/components/xv-table/defs.ts::TableSelectionEventData"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-table-toolbar.js.map

package/dist/collection/components/xv-table/xv-table-toolbar/xv-table-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-toolbar.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-toolbar/xv-table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,cAAc;IAL3B;QAMW,aAAQ,GAAW,CAAC,CAAC;KAqC/B;IAlCC,KAAK,CAAC,gBAAgB,CAAC,QAA8C;QACnE,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;;YACrB,mBAAmB;YACnB,IAAI,GAAG,CAAC,IAAI,KAAK,QAAQ;gBAAE,OAAO;YAElC,8BAA8B;YAC9B,IAAI,CAAC,CAAA,MAAA,GAAG,CAAC,KAAK,0CAAE,SAAS,CAAA,EAAE,CAAC;gBAC1B,KAAK,EAAE,CAAC;gBACR,OAAO;YACT,CAAC;YAED,4BAA4B;YAC5B,KAAK,IAAI,CAAC,CAAA,MAAA,MAAA,GAAG,CAAC,KAAK,0CAAE,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;YACtC,4DAAK,KAAK,EAAC,SAAS;gBAAC,8DAAQ,CAAM;YAEnC,4DAAK,KAAK,EAAC,eAAe;gBACxB,4DAAK,KAAK,EAAC,uBAAuB;oBAAC,6DAAM,IAAI,EAAC,SAAS,GAAG,CAAM;gBAChE,4DAAK,KAAK,EAAC,wBAAwB;oBAChC,IAAI,CAAC,QAAQ;;oBAAG,IAAI,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,CAClF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, State, Method } from '@stencil/core';\nimport { TableSelectionEventData } from '../defs';\n\n@Component({\n  tag: 'xv-table-v2-toolbar',\n  styleUrl: 'xv-table-toolbar.scss',\n  shadow: true,\n})\nexport class XvTableToolbar {\n  @State() selected: number = 0;\n\n  @Method()\n  async setSelectedItems(selected: Map<string, TableSelectionEventData>) {\n    let count = 0;\n\n    selected.forEach(row => {\n      // not count header\n      if (row.name === 'header') return;\n\n      // count row if it's not group\n      if (!row.group?.isMainRow) {\n        count++;\n        return;\n      }\n\n      // count selected group rows\n      count += (row.group?.data?.length || 0);\n    });\n\n    this.selected = count;\n  }\n\n  render() {\n    return (\n      <Host class={{ active: !!this.selected }}>\n        <div class=\"toolbar\"><slot /></div>\n\n        <div class=\"butch-editing\">\n          <div class=\"butch-editing_content\"><slot name=\"actions\" /></div>\n          <div class=\"butch-editing_selected\">\n            {this.selected} {this.selected === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-table/xv-table.css

@@ -0,0 +1,165 @@
+:host {
+  position: relative;
+  --xv-table-row-bg-color: var(--layer-02, #FFF);
+  --xv-table-first-col-size: 0px;
+  --xv-table-padding: 16px;
+}
+:host ::slotted(xv-table-v2-header-row[cols="1"]),
+:host ::slotted(xv-table-v2-row[cols="1"]),
+:host ::slotted(xv-table-v2-expand[cols="1"]) {
+  --xv-table-cols: 1;
+}
+:host ::slotted(xv-table-v2-header-row[cols="2"]),
+:host ::slotted(xv-table-v2-row[cols="2"]),
+:host ::slotted(xv-table-v2-expand[cols="2"]) {
+  --xv-table-cols: 2;
+}
+:host ::slotted(xv-table-v2-header-row[cols="3"]),
+:host ::slotted(xv-table-v2-row[cols="3"]),
+:host ::slotted(xv-table-v2-expand[cols="3"]) {
+  --xv-table-cols: 3;
+}
+:host ::slotted(xv-table-v2-header-row[cols="4"]),
+:host ::slotted(xv-table-v2-row[cols="4"]),
+:host ::slotted(xv-table-v2-expand[cols="4"]) {
+  --xv-table-cols: 4;
+}
+:host ::slotted(xv-table-v2-header-row[cols="5"]),
+:host ::slotted(xv-table-v2-row[cols="5"]),
+:host ::slotted(xv-table-v2-expand[cols="5"]) {
+  --xv-table-cols: 5;
+}
+:host ::slotted(xv-table-v2-header-row[cols="6"]),
+:host ::slotted(xv-table-v2-row[cols="6"]),
+:host ::slotted(xv-table-v2-expand[cols="6"]) {
+  --xv-table-cols: 6;
+}
+:host ::slotted(xv-table-v2-header-row[cols="7"]),
+:host ::slotted(xv-table-v2-row[cols="7"]),
+:host ::slotted(xv-table-v2-expand[cols="7"]) {
+  --xv-table-cols: 7;
+}
+:host ::slotted(xv-table-v2-header-row[cols="8"]),
+:host ::slotted(xv-table-v2-row[cols="8"]),
+:host ::slotted(xv-table-v2-expand[cols="8"]) {
+  --xv-table-cols: 8;
+}
+:host ::slotted(xv-table-v2-header-row[cols="9"]),
+:host ::slotted(xv-table-v2-row[cols="9"]),
+:host ::slotted(xv-table-v2-expand[cols="9"]) {
+  --xv-table-cols: 9;
+}
+:host ::slotted(xv-table-v2-header-row[cols="10"]),
+:host ::slotted(xv-table-v2-row[cols="10"]),
+:host ::slotted(xv-table-v2-expand[cols="10"]) {
+  --xv-table-cols: 10;
+}
+:host ::slotted(xv-table-v2-header-row[cols="11"]),
+:host ::slotted(xv-table-v2-row[cols="11"]),
+:host ::slotted(xv-table-v2-expand[cols="11"]) {
+  --xv-table-cols: 11;
+}
+:host ::slotted(xv-table-v2-header-row[cols="12"]),
+:host ::slotted(xv-table-v2-row[cols="12"]),
+:host ::slotted(xv-table-v2-expand[cols="12"]) {
+  --xv-table-cols: 12;
+}
+:host ::slotted(xv-table-v2-header-row[cols="13"]),
+:host ::slotted(xv-table-v2-row[cols="13"]),
+:host ::slotted(xv-table-v2-expand[cols="13"]) {
+  --xv-table-cols: 13;
+}
+:host ::slotted(xv-table-v2-header-row[cols="14"]),
+:host ::slotted(xv-table-v2-row[cols="14"]),
+:host ::slotted(xv-table-v2-expand[cols="14"]) {
+  --xv-table-cols: 14;
+}
+:host ::slotted(xv-table-v2-header-row[cols="15"]),
+:host ::slotted(xv-table-v2-row[cols="15"]),
+:host ::slotted(xv-table-v2-expand[cols="15"]) {
+  --xv-table-cols: 15;
+}
+:host ::slotted(xv-table-v2-header-row[cols="16"]),
+:host ::slotted(xv-table-v2-row[cols="16"]),
+:host ::slotted(xv-table-v2-expand[cols="16"]) {
+  --xv-table-cols: 16;
+}
+:host ::slotted(xv-table-v2-header-row[cols="17"]),
+:host ::slotted(xv-table-v2-row[cols="17"]),
+:host ::slotted(xv-table-v2-expand[cols="17"]) {
+  --xv-table-cols: 17;
+}
+:host ::slotted(xv-table-v2-header-row[cols="18"]),
+:host ::slotted(xv-table-v2-row[cols="18"]),
+:host ::slotted(xv-table-v2-expand[cols="18"]) {
+  --xv-table-cols: 18;
+}
+:host ::slotted(xv-table-v2-header-row[cols="19"]),
+:host ::slotted(xv-table-v2-row[cols="19"]),
+:host ::slotted(xv-table-v2-expand[cols="19"]) {
+  --xv-table-cols: 19;
+}
+:host ::slotted(xv-table-v2-header-row[cols="20"]),
+:host ::slotted(xv-table-v2-row[cols="20"]),
+:host ::slotted(xv-table-v2-expand[cols="20"]) {
+  --xv-table-cols: 20;
+}
+:host .caption {
+  padding: 16px 16px 18px;
+}
+:host .caption_title, :host .caption_description {
+  color: var(--text-primary, #333);
+  margin: 0;
+}
+:host .caption_title {
+  font-family: var(--ff-heading, "Gill Sans");
+  font-size: 21px;
+}
+:host .caption_description {
+  font-family: var(--ff-body, Tahoma);
+  font-size: 14px;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+
+:host([expandable]) {
+  --xv-table-first-col-size: 48px;
+}
+
+:host([selectable]) {
+  --xv-table-first-col-size: 50px;
+}
+
+:host([expandable][selectable]) {
+  --xv-table-first-col-size: 98px;
+}
+
+:host([size=xs]) {
+  --xv-table-padding: 2px;
+}
+
+:host([size=sm]) {
+  --xv-table-padding: 8px;
+}
+
+:host([size=md]) {
+  --xv-table-padding: 16px;
+}
+
+:host([size=lg]) {
+  --xv-table-padding: 18px;
+}
+
+:host([size=xl]) {
+  --xv-table-padding: 20px;
+}
+
+:host([hoverable]) ::slotted(xv-table-v2-row:hover),
+:host([hoverable]) ::slotted(xv-table-v2-expand:hover) {
+  --xv-table-row-bg-color: var(--layer-hover-01, #E3E3E3);
+}
+
+:host(xv-table-v2) ::slotted(xv-table-v2-row[odd]),
+:host(xv-table-v2) ::slotted(xv-table-v2-expand[odd]) {
+  --xv-table-row-bg-color: var(--layer-selected-01, #E3E3E3);
+}

package/dist/collection/components/xv-table/xv-table.js

@@ -0,0 +1,284 @@
+import { Host, h } from "@stencil/core";
+import { TABLE_COLOR_SCHEMA, TABLE_SIZE, TABLE_TAG } from "./defs";
+import { debounce, forEach, setAttr } from "../../utils/utils";
+export class XvTable {
+    constructor() {
+        /**
+         * Set current color schema type of enum TABLE_COLOR_SCHEMA
+         * Possible options 'zebra'
+         */
+        this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
+        /**
+         * If table is expandable fields
+         */
+        this.expandable = false;
+        /**
+         * Table size
+         * enum TABLE_SIZE
+         */
+        this.size = TABLE_SIZE.MEDIUM;
+        /**
+         * Add checkbox selection to the table
+         */
+        this.selectable = false;
+        this.selectedRows = new Map();
+        this.debouncedChangeSelection = debounce(async () => {
+            var _a;
+            const results = Array.from(this.selectedRows.values());
+            const toolbar = this.el.querySelector(TABLE_TAG.TOOLBAR);
+            await ((_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.setSelectedItems) === null || _a === void 0 ? void 0 : _a.call(toolbar, this.selectedRows));
+            const header = this.el.querySelector(TABLE_TAG.HEADER);
+            let partial = false;
+            forEach(this.el.querySelectorAll(TABLE_TAG.ROW), (row) => {
+                if (!row.hasAttribute('checked'))
+                    partial = true;
+            });
+            setAttr(header, 'checked', !!this.selectedRows.size);
+            setAttr(header, 'partial', partial);
+            this.changeSelection.emit(results);
+        }, 150);
+        this.handleCheckedChange = async (e) => {
+            const { name, checked } = e.detail;
+            if (checked) {
+                this.selectedRows.set(name, e.detail);
+            }
+            else {
+                this.selectedRows.delete(name);
+            }
+            this.debouncedChangeSelection();
+        };
+        this.setRowProps = () => {
+            const rows = Array
+                .from(this.el.childNodes)
+                .filter((node) => node.nodeType === Node.ELEMENT_NODE && ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` ||
+                (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW` ||
+                (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-EXPAND`));
+            let visualIndex = 0;
+            rows.forEach((node, i) => {
+                const row = node;
+                const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
+                if (isHeaderRow)
+                    return;
+                switch (this.colorSchema) {
+                    case TABLE_COLOR_SCHEMA.ZEBRA:
+                        const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
+                        if (row.hasAttribute('expandable') && rows[i + 1]) {
+                            row.setAttribute(stripe, '');
+                        }
+                        else {
+                            visualIndex++;
+                            row.setAttribute(stripe, '');
+                        }
+                        break;
+                    default:
+                        row.removeAttribute('odd');
+                        row.removeAttribute('even');
+                }
+            });
+        };
+    }
+    handleSetColorSchema() {
+        this.setRowProps();
+    }
+    listenSelectableHandle() {
+        if (this.selectable) {
+            this.el.addEventListener('checkedChange', this.handleCheckedChange);
+        }
+        else {
+            this.el.removeEventListener('checkedChange', this.handleCheckedChange);
+        }
+        const rows = Array
+            .from(this.el.querySelectorAll(`${TABLE_TAG.ROW}, ${TABLE_TAG.HEADER}`))
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE && ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` ||
+            (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
+        rows.forEach((row, i) => {
+            const isExists = row.hasAttribute('selection-name');
+            if (this.selectable && row.tagName === TABLE_TAG.HEADER && !isExists) {
+                return row.setAttribute('selection-name', 'header');
+            }
+            if (!this.selectable && isExists) {
+                return row.removeAttribute('selection-name');
+            }
+            if (this.selectable && !isExists) {
+                row.setAttribute('selection-name', row.getAttribute('name') || `${i}`);
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: '9ffbb8ebef0ef99b71bbc76fce633be86d17f9e8', role: "table", size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (h("div", { key: '96ffe17490215156040b472910f04f36c96d7808', class: "caption" }, this.el.title && h("h5", { key: '2760ff5ac6073315238736dbe9b55f0546b0886a', class: "caption_title" }, this.el.title), this.description && h("p", { key: '7e335e60883615bbe5af66394686944673644f4f', class: "caption_description" }, this.description))), h("slot", { key: 'b28fe0ffe51ea20464b8114830127023e1ccca47', name: "header" }), h("slot", { key: 'd8dcbbe05dadda66b20b4c56adcbb08dfbe7c0db' })));
+    }
+    componentWillLoad() {
+        this.setRowProps();
+        this.listenSelectableHandle();
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('checkedChange', this.handleCheckedChange);
+    }
+    static get is() { return "xv-table-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table caption description"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false
+            },
+            "colorSchema": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABLE_COLOR_SCHEMA",
+                    "resolved": "TABLE_COLOR_SCHEMA.DEF | TABLE_COLOR_SCHEMA.ZEBRA",
+                    "references": {
+                        "TABLE_COLOR_SCHEMA": {
+                            "location": "import",
+                            "path": "./defs",
+                            "id": "src/components/xv-table/defs.ts::TABLE_COLOR_SCHEMA"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set current color schema type of enum TABLE_COLOR_SCHEMA\nPossible options 'zebra'"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color-schema",
+                "reflect": false,
+                "defaultValue": "TABLE_COLOR_SCHEMA.DEF"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If table is expandable fields"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expandable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TABLE_SIZE",
+                    "resolved": "TABLE_SIZE.EXTRA_LARGE | TABLE_SIZE.EXTRA_SMALL | TABLE_SIZE.LARGE | TABLE_SIZE.MEDIUM | TABLE_SIZE.SMALL",
+                    "references": {
+                        "TABLE_SIZE": {
+                            "location": "import",
+                            "path": "./defs",
+                            "id": "src/components/xv-table/defs.ts::TABLE_SIZE"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table size\nenum TABLE_SIZE"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "TABLE_SIZE.MEDIUM"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add checkbox selection to the table"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selectable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedRows": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeSelection",
+                "name": "changeSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TableSelectionEventData[]",
+                    "resolved": "TableSelectionEventData[]",
+                    "references": {
+                        "TableSelectionEventData": {
+                            "location": "import",
+                            "path": "./defs",
+                            "id": "src/components/xv-table/defs.ts::TableSelectionEventData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colorSchema",
+                "methodName": "handleSetColorSchema"
+            }, {
+                "propName": "selectable",
+                "methodName": "listenSelectableHandle"
+            }];
+    }
+}
+//# sourceMappingURL=xv-table.js.map

package/dist/collection/components/xv-table/xv-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table.js","sourceRoot":"","sources":["../../../src/components/xv-table/xv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State } from '@stencil/core';\nimport { TABLE_COLOR_SCHEMA, TABLE_SIZE, TABLE_TAG, TableSelectionEvent, TableSelectionEventData } from './defs';\nimport { XvTableToolbar } from './xv-table-toolbar/xv-table-toolbar';\nimport { debounce, forEach, setAttr } from '../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2',\n  styleUrl: 'xv-table.scss',\n  shadow: true,\n})\nexport class XvTable {\n  @Element() el: HTMLElement;\n  /**\n   * Table caption description\n   */\n  @Prop() description: string;\n  /**\n   * Set current color schema type of enum TABLE_COLOR_SCHEMA\n   * Possible options 'zebra'\n   */\n  @Prop({ attribute: 'color-schema' }) colorSchema: TABLE_COLOR_SCHEMA = TABLE_COLOR_SCHEMA.DEF;\n  /**\n   * If table is expandable fields\n   */\n  @Prop({ reflect: true }) expandable: boolean = false;\n  /**\n   * Table size\n   * enum TABLE_SIZE\n   */\n  @Prop() size: TABLE_SIZE = TABLE_SIZE.MEDIUM;\n  /**\n   * Add checkbox selection to the table\n   */\n  @Prop() selectable: boolean = false;\n\n  @State() selectedRows = new Map<string, TableSelectionEventData>();\n\n  @Event() changeSelection: EventEmitter<TableSelectionEventData[]>;\n\n  @Watch('colorSchema')\n  handleSetColorSchema() {\n    this.setRowProps();\n  }\n\n  @Watch('selectable')\n  listenSelectableHandle() {\n    if (this.selectable) {\n      this.el.addEventListener('checkedChange', this.handleCheckedChange);\n    } else {\n      this.el.removeEventListener('checkedChange', this.handleCheckedChange);\n    }\n\n    const rows = Array\n      .from(this.el.querySelectorAll(`${TABLE_TAG.ROW}, ${TABLE_TAG.HEADER}`))\n      .filter((node) =>\n          node.nodeType === Node.ELEMENT_NODE && (\n            (node as any)?.tagName === `${this.el.tagName}-ROW` ||\n            (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`\n          )\n      );\n\n    rows.forEach((row, i) => {\n      const isExists = row.hasAttribute('selection-name');\n\n      if (this.selectable && row.tagName === TABLE_TAG.HEADER && !isExists) {\n        return row.setAttribute('selection-name', 'header');\n      }\n\n      if (!this.selectable && isExists) {\n        return row.removeAttribute('selection-name');\n      }\n\n      if(this.selectable && !isExists) {\n        row.setAttribute('selection-name', row.getAttribute('name') || `${i}`);\n      }\n    })\n  }\n\n  private debouncedChangeSelection = debounce(async () => {\n    const results = Array.from(this.selectedRows.values());\n    const toolbar = this.el.querySelector(TABLE_TAG.TOOLBAR) as unknown as XvTableToolbar;\n    await toolbar?.setSelectedItems?.(this.selectedRows);\n    const header = this.el.querySelector(TABLE_TAG.HEADER);\n    let partial = false;\n\n    forEach(this.el.querySelectorAll(TABLE_TAG.ROW), (row) => {\n      if (!row.hasAttribute('checked')) partial = true;\n    })\n\n    setAttr(header, 'checked', !!this.selectedRows.size);\n    setAttr(header, 'partial', partial);\n\n    this.changeSelection.emit(results);\n  }, 150);\n\n  private handleCheckedChange = async (e: TableSelectionEvent) => {\n    const { name, checked } = e.detail;\n\n    if (checked) {\n      this.selectedRows.set(name, e.detail);\n    } else {\n      this.selectedRows.delete(name);\n    }\n\n    this.debouncedChangeSelection();\n  };\n\n  private setRowProps = () => {\n    const rows = Array\n      .from(this.el.childNodes)\n      .filter((node) =>\n          node.nodeType === Node.ELEMENT_NODE && (\n            (node as any)?.tagName === `${this.el.tagName}-ROW` ||\n            (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW` ||\n            (node as any)?.tagName === `${this.el.tagName}-EXPAND`\n          )\n      );\n    let visualIndex = 0;\n\n    rows.forEach((node, i) => {\n      const row = (node as HTMLElement);\n      const isHeaderRow = (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`;\n\n      if (isHeaderRow) return;\n\n      switch (this.colorSchema) {\n        case TABLE_COLOR_SCHEMA.ZEBRA:\n          const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';\n          if (row.hasAttribute('expandable') && rows[i + 1]) {\n            row.setAttribute(stripe, '');\n          } else {\n            visualIndex++;\n            row.setAttribute(stripe, '');\n          }\n          break;\n        default:\n          row.removeAttribute('odd');\n          row.removeAttribute('even');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host role=\"table\" size={this.size} selectable={this.selectable}>\n        {(this.el.title || this.description) && (\n          <div class=\"caption\">\n            {this.el.title && <h5 class=\"caption_title\">{this.el.title}</h5>}\n            {this.description && <p class=\"caption_description\">{this.description}</p>}\n          </div>\n        )}\n        <slot name=\"header\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setRowProps();\n    this.listenSelectableHandle();\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('checkedChange', this.handleCheckedChange);\n  }\n}\n"]}

package/dist/collection/components/xv-tabs/_vars.js

@@ -0,0 +1,11 @@
+export var TAB_TAGS;
+(function (TAB_TAGS) {
+    TAB_TAGS["TABS"] = "xv-tabs-v2";
+    TAB_TAGS["TAB"] = "xv-tab-v2";
+})(TAB_TAGS || (TAB_TAGS = {}));
+export var TABS_VATIANT;
+(function (TABS_VATIANT) {
+    TABS_VATIANT["DEFAULT"] = "";
+    // other variants will be here
+})(TABS_VATIANT || (TABS_VATIANT = {}));
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-tabs/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/_vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,+BAAmB,CAAA;IACnB,6BAAiB,CAAA;AACnB,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,4BAAY,CAAA;IACZ,8BAA8B;AAChC,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB","sourcesContent":["export enum TAB_TAGS {\n  TABS = 'xv-tabs-v2',\n  TAB = 'xv-tab-v2'\n}\n\nexport enum TABS_VATIANT {\n  DEFAULT = '',\n  // other variants will be here\n}\n"]}

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js

@@ -0,0 +1,65 @@
+import { Host, h } from "@stencil/core";
+export class XvTab {
+    constructor() {
+        this.disabled = false;
+    }
+    render() {
+        return h(Host, { key: 'b3991bf63fb73f2c39670477652dfa5b40630126', disabled: this.disabled }, h("slot", { key: 'a5dd5a983a13e97be7d925de669461226dc296c0' }));
+    }
+    static get is() { return "xv-tab-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-tab.js.map

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tab.js","sourceRoot":"","sources":["../../../../src/components/xv-tabs/xv-tab/xv-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,KAAK;IALlB;QAOU,aAAQ,GAAY,KAAK,CAAC;KAKnC;IAHC,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAAE,8DAAQ,CAAO,CAAC;IACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xv-tab-v2',\n  styleUrl: 'xv-tab.scss',\n  shadow: true,\n})\nexport class XvTab {\n  @Prop() label: string;\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return <Host disabled={this.disabled}><slot /></Host>;\n  }\n}\n"]}