xv-webcomponents 0.1.26 → 0.1.28

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js

@@ -0,0 +1,157 @@
+import { Host, h } from "@stencil/core";
+import { PROGRESS_ITEM_STATUS, PROGRESS_VARIANTS } from "./_vars";
+import { SIZE_VAR } from "../../types/enum";
+import { forEach } from "../../utils/utils";
+export class XvProgressIndicator {
+    constructor() {
+        /**
+         * Current progress
+         * from 0 to 100
+         */
+        this.progress = 0;
+        /**
+         * Progress variant
+         * enum PROGRESS_VARIANTS
+         * possible option `horizontal`
+         */
+        this.variant = PROGRESS_VARIANTS.DEFAULT;
+        /**
+         * Size of progress
+         * enum SIZE_VAR
+         * possible options `XS | SM | MD | LG | XL`
+         */
+        this.size = SIZE_VAR.MD;
+    }
+    // Update 'xv-progress-indicator-item' done status
+    updateChildItems() {
+        const items = this.el.children;
+        const itemsCount = this.el.childElementCount;
+        const progressPerItem = 100 / itemsCount;
+        if (!items.length || !itemsCount)
+            return;
+        forEach(items, (item, index) => {
+            var _a;
+            const itemProgressStart = index * progressPerItem;
+            let status;
+            const localProgress = Math.min(Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1) * 100;
+            if (localProgress >= 100) {
+                status = PROGRESS_ITEM_STATUS.DONE;
+            }
+            else if (localProgress > 0) {
+                status = PROGRESS_ITEM_STATUS.IN_PROGRESS;
+            }
+            else {
+                status = PROGRESS_ITEM_STATUS.NO_STARTED;
+            }
+            // Set item current status
+            item.setAttribute('status', status);
+            // Update progress line
+            const line = (_a = item === null || item === void 0 ? void 0 : item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.line');
+            if (line)
+                line.style.width = `${localProgress}%`;
+        });
+    }
+    // Load initial done status
+    componentDidLoad() {
+        this.updateChildItems();
+    }
+    render() {
+        return (h(Host, { key: 'be4d8e9691b1421a5e6c50f9737b0f0e72182bdc', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '59631a2651175f2ccd94c2120df900160812b2fb' })));
+    }
+    static get is() { return "xv-progress-indicator-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-progress-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-progress-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current progress\nfrom 0 to 100"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "progress",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PROGRESS_VARIANTS",
+                    "resolved": "PROGRESS_VARIANTS.DEFAULT | PROGRESS_VARIANTS.HORIZONTAL",
+                    "references": {
+                        "PROGRESS_VARIANTS": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-progress-indicator/_vars.ts::PROGRESS_VARIANTS"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress variant\nenum PROGRESS_VARIANTS\npossible option `horizontal`"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "PROGRESS_VARIANTS.DEFAULT"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of progress\nenum SIZE_VAR\npossible options `XS | SM | MD | LG | XL`"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "progress",
+                "methodName": "updateChildItems"
+            }];
+    }
+}
+//# sourceMappingURL=xv-progress-indicator.js.map

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator.js","sourceRoot":"","sources":["../../../src/components/xv-progress-indicator/xv-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,OAAO,mBAAmB;IALhC;QAOE;;;WAGG;QACK,aAAQ,GAAW,CAAC,CAAC;QAC7B;;;;WAIG;QACK,YAAO,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAC/D;;;;WAIG;QACK,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;KA+CtC;IA7CC,kDAAkD;IAElD,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QAC7C,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;QAEzC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE,OAAO;QAEzC,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC7B,MAAM,iBAAiB,GAAG,KAAK,GAAG,eAAe,CAAC;YAClD,IAAI,MAA4B,CAAC;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CACtE,GAAG,GAAG,CAAC;YAER,IAAI,aAAa,IAAI,GAAG,EAAE,CAAC;gBACzB,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;YACrC,CAAC;iBAAM,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;gBAC7B,MAAM,GAAG,oBAAoB,CAAC,WAAW,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACN,MAAM,GAAG,oBAAoB,CAAC,UAAU,CAAC;YAC3C,CAAC;YAED,0BAA0B;YACzB,IAAoB,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAErD,uBAAuB;YACvB,MAAM,IAAI,GAAG,MAAC,IAAoB,aAApB,IAAI,uBAAJ,IAAI,CAAkB,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAgB,CAAC;YACtF,IAAI,IAAI;gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,aAAa,GAAG,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B;IAC3B,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE;YACpF,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\nimport { PROGRESS_ITEM_STATUS, PROGRESS_VARIANTS } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\nimport { forEach } from '../../utils/utils';\n\n@Component({\n  tag: 'xv-progress-indicator-v2',\n  styleUrl: 'xv-progress-indicator.scss',\n  shadow: true,\n})\nexport class XvProgressIndicator {\n  @Element() el: HTMLElement;\n  /**\n   * Current progress\n   * from 0 to 100\n   */\n  @Prop() progress: number = 0;\n  /**\n   * Progress variant\n   * enum PROGRESS_VARIANTS\n   * possible option `horizontal`\n   */\n  @Prop() variant: PROGRESS_VARIANTS = PROGRESS_VARIANTS.DEFAULT;\n  /**\n   * Size of progress\n   * enum SIZE_VAR\n   * possible options `XS | SM | MD | LG | XL`\n   */\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n\n  // Update 'xv-progress-indicator-item' done status\n  @Watch('progress')\n  updateChildItems() {\n    const items = this.el.children;\n    const itemsCount = this.el.childElementCount;\n    const progressPerItem = 100 / itemsCount;\n\n    if (!items.length || !itemsCount) return;\n\n    forEach(items, (item, index) => {\n      const itemProgressStart = index * progressPerItem;\n      let status: PROGRESS_ITEM_STATUS;\n      const localProgress = Math.min(\n        Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1\n      ) * 100;\n\n      if (localProgress >= 100) {\n        status = PROGRESS_ITEM_STATUS.DONE;\n      } else if (localProgress > 0) {\n        status = PROGRESS_ITEM_STATUS.IN_PROGRESS;\n      } else {\n        status = PROGRESS_ITEM_STATUS.NO_STARTED;\n      }\n\n      // Set item current status\n      (item as HTMLElement).setAttribute('status', status);\n\n      // Update progress line\n      const line = (item as HTMLElement)?.shadowRoot?.querySelector('.line') as HTMLElement;\n      if (line) line.style.width = `${localProgress}%`;\n    });\n  }\n\n  // Load initial done status\n  componentDidLoad() {\n    this.updateChildItems()\n  }\n\n  render() {\n    return (\n      <Host variant={this.variant} size={this.size} class={{ 'xv-progress-indicator': true }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,28 @@
+export var TABLE_COLOR_SCHEMA;
+(function (TABLE_COLOR_SCHEMA) {
+    TABLE_COLOR_SCHEMA["DEF"] = "";
+    TABLE_COLOR_SCHEMA["ZEBRA"] = "zebra";
+})(TABLE_COLOR_SCHEMA || (TABLE_COLOR_SCHEMA = {}));
+export var TABLE_SIZE;
+(function (TABLE_SIZE) {
+    TABLE_SIZE["EXTRA_SMALL"] = "xs";
+    TABLE_SIZE["SMALL"] = "sm";
+    TABLE_SIZE["MEDIUM"] = "md";
+    TABLE_SIZE["LARGE"] = "lg";
+    TABLE_SIZE["EXTRA_LARGE"] = "xl";
+})(TABLE_SIZE || (TABLE_SIZE = {}));
+export var TABLE_TAG;
+(function (TABLE_TAG) {
+    TABLE_TAG["TABLE"] = "XV-TABLE-V2";
+    TABLE_TAG["EXPAND"] = "XV-TABLE-V2-EXPAND";
+    TABLE_TAG["ROW"] = "XV-TABLE-V2-ROW";
+    TABLE_TAG["HEADER"] = "XV-TABLE-V2-HEADER-ROW";
+    TABLE_TAG["TOOLBAR"] = "XV-TABLE-V2-TOOLBAR";
+})(TABLE_TAG || (TABLE_TAG = {}));
+export var SORT_DIR;
+(function (SORT_DIR) {
+    SORT_DIR["ASC"] = "asc";
+    SORT_DIR["DESC"] = "desc";
+    SORT_DIR["NONE"] = "none";
+})(SORT_DIR || (SORT_DIR = {}));
+//# sourceMappingURL=defs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defs.js","sourceRoot":"","sources":["../../../src/components/xv-table/defs.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,8BAAQ,CAAA;IACR,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,UAMX;AAND,WAAY,UAAU;IACpB,gCAAkB,CAAA;IAClB,0BAAY,CAAA;IACZ,2BAAa,CAAA;IACb,0BAAY,CAAA;IACZ,gCAAkB,CAAA;AACpB,CAAC,EANW,UAAU,KAAV,UAAU,QAMrB;AAED,MAAM,CAAN,IAAY,SAMX;AAND,WAAY,SAAS;IACnB,kCAAqB,CAAA;IACrB,0CAA6B,CAAA;IAC7B,oCAAuB,CAAA;IACvB,8CAAiC,CAAA;IACjC,4CAA+B,CAAA;AACjC,CAAC,EANW,SAAS,KAAT,SAAS,QAMpB;AAED,MAAM,CAAN,IAAY,QAIX;AAJD,WAAY,QAAQ;IAClB,uBAAW,CAAA;IACX,yBAAa,CAAA;IACb,yBAAa,CAAA;AACf,CAAC,EAJW,QAAQ,KAAR,QAAQ,QAInB","sourcesContent":["export enum TABLE_COLOR_SCHEMA {\n  DEF = '',\n  ZEBRA = 'zebra',\n}\n\nexport enum TABLE_SIZE {\n  EXTRA_SMALL = 'xs',\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n  EXTRA_LARGE = 'xl',\n}\n\nexport enum TABLE_TAG {\n  TABLE = 'XV-TABLE-V2',\n  EXPAND = 'XV-TABLE-V2-EXPAND',\n  ROW = 'XV-TABLE-V2-ROW',\n  HEADER = 'XV-TABLE-V2-HEADER-ROW',\n  TOOLBAR = 'XV-TABLE-V2-TOOLBAR'\n}\n\nexport enum SORT_DIR {\n  ASC = 'asc',\n  DESC = 'desc',\n  NONE = 'none'\n}\n\nexport type TableSelectionEventData = {\n  name: string;\n  checked: boolean;\n  value?: string;\n  group?: {\n    isMainRow?: boolean;\n    id: string;\n    data?: TableSelectionEventData[];\n  };\n};\n\nexport type TableSelectionEvent = CustomEvent<TableSelectionEventData>;\n\nexport interface TableSortData {\n  dir: SORT_DIR;\n  name: string;\n}\n"]}

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

@@ -0,0 +1,13 @@
+:host {
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 14px;
+  padding-left: var(--xv-table-padding, 16px);
+  padding-right: var(--xv-table-padding, 16px);
+  letter-spacing: 0.16px;
+  text-overflow: ellipsis;
+  align-content: center;
+  max-height: 32px;
+  height: 32px;
+  overflow: hidden;
+}

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

@@ -0,0 +1,111 @@
+import { Host, h } from "@stencil/core";
+import { SORT_DIR } from "../defs";
+export class XvTableCol {
+    handleClick() {
+        if (this.sort === undefined)
+            return;
+        if (this.sort === '')
+            this.sort = SORT_DIR.NONE;
+        this.sort = this.sort === SORT_DIR.NONE ?
+            SORT_DIR.ASC : this.sort === SORT_DIR.ASC ?
+            SORT_DIR.DESC : SORT_DIR.NONE;
+        this.sortColChange.emit({ dir: this.sort, name: this.sortName });
+    }
+    render() {
+        return (h(Host, { key: '9b1f74330fbdf33ee631f897b2bec11972ef6323', role: "cell", class: "xv-table-col", sort: this.sort }, h("slot", { key: '80960f0602ed615dceb0aa1f484319bfffc00887' })));
+    }
+    static get is() { return "xv-table-v2-col"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-col.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-col.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sort": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SORT_DIR | ''",
+                    "resolved": "\"\" | SORT_DIR.ASC | SORT_DIR.DESC | SORT_DIR.NONE",
+                    "references": {
+                        "SORT_DIR": {
+                            "location": "import",
+                            "path": "../defs",
+                            "id": "src/components/xv-table/defs.ts::SORT_DIR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sort",
+                "reflect": true
+            },
+            "sortName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sort-name",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortColChange",
+                "name": "sortColChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TableSortData",
+                    "resolved": "TableSortData",
+                    "references": {
+                        "TableSortData": {
+                            "location": "import",
+                            "path": "../defs",
+                            "id": "src/components/xv-table/defs.ts::TableSortData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-table-col.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-col.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-col/xv-table-col.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAiB,MAAM,SAAS,CAAC;AAOlD,MAAM,OAAO,UAAU;IAOrB,WAAW;QACT,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO;QACpC,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;YAAE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QAEhD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC;YACvC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,GAAG,CAAC,CAAC;YACzC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;QAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACpD,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SORT_DIR, TableSortData } from '../defs';\n\n@Component({\n  tag: 'xv-table-v2-col',\n  styleUrl: 'xv-table-col.scss',\n  shadow: true,\n})\nexport class XvTableCol {\n  @Prop({ reflect: true, mutable: true }) sort?: SORT_DIR | '';\n  @Prop({ attribute: 'sort-name' }) sortName?: string;\n\n  @Event() sortColChange: EventEmitter<TableSortData>;\n\n  @Listen('click')\n  handleClick() {\n    if (this.sort === undefined) return;\n    if (this.sort === '') this.sort = SORT_DIR.NONE;\n\n    this.sort = this.sort === SORT_DIR.NONE ?\n      SORT_DIR.ASC : this.sort === SORT_DIR.ASC ?\n        SORT_DIR.DESC : SORT_DIR.NONE;\n    this.sortColChange.emit({ dir: this.sort, name: this.sortName });\n  }\n\n  render() {\n    return (\n      <Host role=\"cell\" class=\"xv-table-col\" sort={this.sort}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,116 @@
+: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(xv-table-v2-expand) ::slotted(xv-table-v2-row) {
+  block-size: auto;
+  overflow: hidden;
+  grid-template-columns: var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr);
+}
+
+:host(xv-table-v2-expand:not([expanded])) ::slotted(xv-table-v2-row:not(:first-of-type)) {
+  padding-top: 0;
+  padding-bottom: 0;
+  block-size: 0;
+}
+
+:host(xv-table-v2-expand[expanded]) ::slotted(xv-table-v2-row:not(:first-of-type)) {
+  block-size: auto;
+}

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

@@ -0,0 +1,199 @@
+import { h, Host } from "@stencil/core";
+import { TABLE_TAG } from "../defs";
+import { debounce, forEach, uidGenerator } from "../../../utils/utils";
+export class XvTableExpand {
+    constructor() {
+        this.expanded = false;
+        this.cols = 1;
+        this.hovered = false;
+        this.checkedGroup = new Map();
+        this.selectedRows = new Set();
+        // Expand group ID
+        this.groupId = uidGenerator();
+        this.setExpandAttrs = (expanded) => {
+            forEach(this.el.children, (row, i) => {
+                // set group id
+                this.setAttr(row, 'group-id', this.groupId);
+                // If it's Main selection row
+                if (!i) {
+                    this.setAttr(row, 'expandable', true);
+                    this.setAttr(row, 'expanded', expanded);
+                    return;
+                }
+            });
+        };
+        this.onSlotChange = () => {
+            this.cols = this.el.firstElementChild.childElementCount;
+            this.setExpandAttrs(this.expanded);
+        };
+        this.emitChangeSelectionEvent = debounce(() => {
+            var _a, _b;
+            return this.checkedChange.emit(Object.assign(Object.assign({ name: ((_a = this.mainRowData) === null || _a === void 0 ? void 0 : _a.name) || this.el.firstElementChild.getAttribute('selection-name') }, (this.mainRowData || {})), { checked: !!this.selectedRows.size, group: Object.assign(Object.assign({ id: this.groupId }, (((_b = this.mainRowData) === null || _b === void 0 ? void 0 : _b.group) || {})), { data: Array.from(this.selectedRows.values()) }) }));
+        }, 100);
+        this.handleCheckedChange = (e) => {
+            const { group, checked, name } = e.detail;
+            if ((group === null || group === void 0 ? void 0 : group.id) !== this.groupId)
+                return;
+            if (group === null || group === void 0 ? void 0 : group.isMainRow) {
+                this.mainRowData = e.detail;
+                // clear group selection
+                if (!checked)
+                    this.selectedRows.clear();
+                // Change all group except first row
+                forEach(this.el.children, (row, i) => {
+                    if (!i || row.hasAttribute('disabled'))
+                        return;
+                    this.setAttr(row, 'checked', checked);
+                });
+            }
+            else {
+                if (checked) {
+                    this.selectedRows.add(e.detail);
+                }
+                else {
+                    this.selectedRows
+                        .forEach(item => item.name === name && this.selectedRows.delete(item));
+                }
+            }
+            const isNoSelected = !this.selectedRows.size;
+            const isAllSelected = this.selectedRows.size == this.el.childElementCount - 1;
+            const isPartialSelected = !isNoSelected && (this.selectedRows.size < this.el.childElementCount - 1);
+            if (isAllSelected) {
+                this.setAttr(this.el.firstElementChild, 'checked', true);
+            }
+            else if (isNoSelected) {
+                this.setAttr(this.el.firstElementChild, 'checked', false);
+            }
+            this.setAttr(this.el.firstElementChild, 'partial', isPartialSelected);
+            this.emitChangeSelectionEvent();
+        };
+    }
+    async toggleExpand(expanded) {
+        this.expanded = !!expanded;
+    }
+    setAttr(node, name, value) {
+        if (typeof value === 'string') {
+            !node.hasAttribute(name) && node.setAttribute(name, value);
+            return;
+        }
+        if (value) {
+            !node.hasAttribute(name) && node.setAttribute(name, '');
+        }
+        else {
+            node.hasAttribute(name) && node.removeAttribute(name);
+        }
+    }
+    setInitialExpandStatus() {
+        const table = this.el.parentElement;
+        if (table.tagName === TABLE_TAG.TABLE)
+            this.setAttr(table, 'expandable', true);
+    }
+    render() {
+        return (h(Host, { key: '3e6cfb2feacf723e53db6b256ae0adf1e2a93032', role: "rowgroup", cols: this.cols, expanded: this.expanded, hovered: this.hovered }, h("slot", { key: '56082d65ca6f46eb064383b203b51265ae699b8c', onSlotchange: this.onSlotChange })));
+    }
+    componentWillLoad() {
+        this.setInitialExpandStatus();
+    }
+    connectedCallback() {
+        this.el.childNodes.forEach(row => row.addEventListener('checkedGroupChange', this.handleCheckedChange));
+    }
+    disconnectedCallback() {
+        this.el.childNodes.forEach(row => row.removeEventListener('checkedGroupChange', this.handleCheckedChange));
+    }
+    static get is() { return "xv-table-v2-expand"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-expand.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-expand.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expanded",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cols": {},
+            "hovered": {},
+            "checkedGroup": {},
+            "selectedRows": {},
+            "mainRowData": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TableSelectionEventData",
+                    "resolved": "{ name: string; checked: boolean; value?: string; group?: { isMainRow?: boolean; id: string; data?: TableSelectionEventData[]; }; }",
+                    "references": {
+                        "TableSelectionEventData": {
+                            "location": "import",
+                            "path": "../defs",
+                            "id": "src/components/xv-table/defs.ts::TableSelectionEventData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleExpand": {
+                "complexType": {
+                    "signature": "(expanded: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "expanded",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-table-expand.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-expand.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { TABLE_TAG, TableSelectionEvent, TableSelectionEventData } from '../defs';\nimport { debounce, forEach, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-expand',\n  styleUrl: 'xv-table-expand.scss',\n  shadow: true,\n})\nexport class XvTableExpand {\n  @Element() el: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n\n  @State() cols: number = 1;\n  @State() hovered: boolean = false;\n  @State() checkedGroup: Map<string, any> = new Map();\n  @State() selectedRows = new Set<TableSelectionEventData>();\n  @State() mainRowData: TableSelectionEventData;\n\n  @Event() checkedChange: EventEmitter<TableSelectionEventData>;\n\n  // Expand group ID\n  private groupId: string = uidGenerator();\n\n  @Method()\n  async toggleExpand(expanded: boolean) {\n    this.expanded = !!expanded;\n  }\n\n  private setAttr(node: Element, name: string, value: string | boolean) {\n    if (typeof value === 'string') {\n      !node.hasAttribute(name) && node.setAttribute(name, value);\n      return;\n    }\n\n    if (value) {\n      !node.hasAttribute(name) && node.setAttribute(name, '');\n    } else {\n      node.hasAttribute(name) && node.removeAttribute(name);\n    }\n  }\n\n  private setExpandAttrs = (expanded: boolean) => {\n    forEach(this.el.children, (row, i) => {\n      // set group id\n      this.setAttr(row, 'group-id', this.groupId);\n\n      // If it's Main selection row\n      if (!i) {\n        this.setAttr(row, 'expandable', true);\n        this.setAttr(row, 'expanded', expanded);\n        return;\n      }\n    });\n  }\n\n  private onSlotChange = () => {\n    this.cols = this.el.firstElementChild.childElementCount;\n    this.setExpandAttrs(this.expanded);\n  }\n\n  private setInitialExpandStatus() {\n    const table = this.el.parentElement;\n\n    if (table.tagName === TABLE_TAG.TABLE) this.setAttr(table, 'expandable', true);\n  }\n\n  private emitChangeSelectionEvent = debounce(() => this.checkedChange.emit({\n    name: this.mainRowData?.name || this.el.firstElementChild.getAttribute('selection-name'),\n    ...(this.mainRowData || {}),\n    checked: !!this.selectedRows.size,\n    group: {\n      id: this.groupId,\n      ...(this.mainRowData?.group || {}),\n      data: Array.from(this.selectedRows.values()),\n    }\n  }), 100);\n\n  private handleCheckedChange = (e: TableSelectionEvent) => {\n    const { group, checked, name } = e.detail;\n\n    if (group?.id !== this.groupId) return;\n\n    if (group?.isMainRow) {\n      this.mainRowData = e.detail;\n      // clear group selection\n      if (!checked) this.selectedRows.clear();\n      // Change all group except first row\n      forEach(this.el.children, (row, i) => {\n        if (!i || row.hasAttribute('disabled')) return;\n        this.setAttr(row, 'checked', checked);\n      })\n    } else {\n      if (checked) {\n        this.selectedRows.add(e.detail);\n      } else {\n        this.selectedRows\n          .forEach(item => item.name === name && this.selectedRows.delete(item));\n      }\n    }\n\n    const isNoSelected = !this.selectedRows.size;\n    const isAllSelected = this.selectedRows.size == this.el.childElementCount - 1;\n    const isPartialSelected = !isNoSelected && (this.selectedRows.size < this.el.childElementCount - 1);\n\n    if (isAllSelected) {\n      this.setAttr(this.el.firstElementChild, 'checked', true);\n    } else if (isNoSelected) {\n      this.setAttr(this.el.firstElementChild, 'checked', false);\n    }\n\n    this.setAttr(this.el.firstElementChild, 'partial', isPartialSelected);\n\n    this.emitChangeSelectionEvent();\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"rowgroup\"\n        cols={this.cols}\n        expanded={this.expanded}\n        hovered={this.hovered}\n      >\n        <slot onSlotchange={this.onSlotChange} />\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setInitialExpandStatus();\n  }\n\n  connectedCallback() {\n    this.el.childNodes.forEach(row => row.addEventListener('checkedGroupChange', this.handleCheckedChange));\n  }\n\n  disconnectedCallback() {\n    this.el.childNodes.forEach(row => row.removeEventListener('checkedGroupChange', this.handleCheckedChange));\n  }\n}\n"]}