xv-webcomponents 0.1.20 → 0.1.23

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

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class XvTableHeaderRow {
+    constructor() {
+        /**
+         * Checkbox row checked
+         */
+        this.checked = false;
+        this.cols = 1;
+        this.slotChangeHandle = () => {
+            this.cols = this.el.childElementCount;
+        };
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+            this.checkedChange.emit({
+                name: this.selectionName,
+                checked: e.detail
+            });
+        };
+    }
+    render() {
+        return (h(Host, { key: '08a4252f72db12f1006c3e7b2b8599fd08e00248', cols: this.cols }, h("div", { key: 'aeb1d8480c24e100d24c429e0a4d06c4dbd1781b', class: "left-container" }, this.selectionName !== undefined && (h("xv-checkbox-v2", { key: '0942e1f66cb81d8eac082eca22b578ecf82b628b', partial: true, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: 'fca6a4ad89bac04fe9cc68bd039a23bc58fa153e', onSlotchange: this.slotChangeHandle })));
+    }
+    static get is() { return "xv-table-v2-header-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-header-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-header-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectionName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selection-name",
+                "reflect": true
+            },
+            "partial": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row selected partially"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "partial",
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row checked"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cols": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string, value?: string; checked: boolean }",
+                    "resolved": "{ name: string; value?: string; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-table-header-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-header-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-header-row/xv-table-header-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,gBAAgB;IAL7B;QAeE;;WAEG;QACqC,YAAO,GAAa,KAAK,CAAC;QAEzD,SAAI,GAAW,CAAC,CAAC;QAIlB,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QACxC,CAAC,CAAA;QAEO,mBAAc,GAAG,CAAC,CAAuB,EAAE,EAAE;YACnD,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,OAAO,EAAE,CAAC,CAAC,MAAM;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;KAmBF;IAjBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACnB,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,CACnC,uEACE,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,cAAc,GAClC,CACH,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC7C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-header-row',\r\n  styleUrl: 'xv-table-header-row.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableHeaderRow {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Checkbox row name\r\n   */\r\n  @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\r\n  /**\r\n   * Checkbox row selected partially\r\n   */\r\n  @Prop({ reflect: true }) partial?: boolean;\r\n  /**\r\n   * Checkbox row checked\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\r\n\r\n  @State() cols: number = 1;\r\n\r\n  @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\r\n\r\n  private slotChangeHandle = () => {\r\n    this.cols = this.el.childElementCount;\r\n  }\r\n\r\n  private checkboxChange = (e: CustomEvent<boolean>) => {\r\n    this.checked = e.detail;\r\n    this.checkedChange.emit({\r\n      name: this.selectionName,\r\n      checked: e.detail\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host cols={this.cols}>\r\n        <div class=\"left-container\">\r\n          {this.selectionName !== undefined && (\r\n            <xv-checkbox-v2\r\n              partial={true}\r\n              name={this.selectionName}\r\n              checked={this.checked}\r\n              onEventChange={this.checkboxChange}\r\n            />\r\n          )}\r\n        </div>\r\n        <slot onSlotchange={this.slotChangeHandle}></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,53 @@
+:host(xv-table-v2-row) {
+  display: grid;
+  padding: 16px;
+  align-items: center;
+  transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;
+  background: var(--layer-02, #FFF);
+  box-shadow: 0 0 0 1px #E3E3E3 inset;
+}
+:host(xv-table-v2-row) .left-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 0 16px;
+}
+:host(xv-table-v2-row) .expand-btn {
+  outline: none;
+  background-color: transparent;
+  display: block;
+  margin: 0 auto;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  padding: 5px;
+  transform: rotate(45deg);
+  cursor: pointer;
+  transition: opacity 300ms ease-in-out, transform 200ms ease-in-out;
+}
+:host(xv-table-v2-row) .expand-btn:active {
+  opacity: 0.5;
+}
+:host(xv-table-v2-row) .expand-btn.expanded {
+  transform: rotate(225deg);
+}
+
+:host([expanded]) {
+  block-size: auto;
+}
+
+:host([collapsed]) {
+  block-size: 0;
+  overflow: hidden;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+:host([odd]) {
+  background-color: var(--layer-selected-01, #E3E3E3);
+}
+
+:host([even]) {
+  background-color: #fff;
+}

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

@@ -0,0 +1,299 @@
+import { Host, h } from "@stencil/core";
+import { uidGenerator } from "../../../utils/utils";
+export class XvTableRow {
+    constructor() {
+        /**
+         * Is row will be expandable
+         * If it's true then the next row will be collapsed
+         */
+        this.expandable = false;
+        /**
+         * Default state of expandable
+         */
+        this.expanded = false;
+        this.prevRowExpanded = false;
+        this.cols = 1;
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+            this.checkedChange.emit({
+                name: this.selectionName,
+                value: this.value,
+                checked: e.detail
+            });
+        };
+    }
+    /**
+     * Called from outside (From expandable row)
+     */
+    async setExpandRelation(id, expanded) {
+        this.expandId = id;
+        this.prevRowExpanded = !!expanded;
+        return this.prevRowExpanded;
+    }
+    /**
+     * Called from outside (From expandable row)
+     * to change then expand or collapse
+     */
+    async toggleExpand(id, expanded) {
+        if (this.expandId !== id)
+            return;
+        this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;
+    }
+    /**
+     * Watch for expandable
+     * When it's false needs to remove unnecessary properties
+     */
+    setExpandableRelationHandle() {
+        const nextEl = this.el.nextElementSibling;
+        if (!nextEl || nextEl.tagName !== this.el.tagName)
+            this.expandable = false;
+        if (!this.expandable)
+            return;
+        if (!this.id)
+            this.id = this.el.id || uidGenerator();
+        return nextEl.setExpandRelation(this.id, this.expanded);
+    }
+    /**
+     * When user press on the expand button
+     */
+    changeExpandHandle() {
+        const nextRow = this.el.nextElementSibling;
+        if (!nextRow || nextRow.tagName !== this.el.tagName)
+            return;
+        this.expanded = !this.expanded;
+        // Call method from new row
+        nextRow.toggleExpand(this.id, this.expanded);
+    }
+    /**
+     * Highlight the expanded row on hover
+     */
+    hoverHandle(active) {
+        const prevRow = this.el.previousElementSibling;
+        const nextRow = this.el.nextElementSibling;
+        if ((nextRow === null || nextRow === void 0 ? void 0 : nextRow.tagName) === this.el.tagName && this.expandable) {
+            if (active) {
+                nextRow.setAttribute('highlighted', '');
+            }
+            else {
+                nextRow.removeAttribute('highlighted');
+            }
+        }
+        if ((prevRow === null || prevRow === void 0 ? void 0 : prevRow.tagName) === this.el.tagName && prevRow.hasAttribute('expandable')) {
+            if (active) {
+                prevRow.setAttribute('highlighted', '');
+            }
+            else {
+                prevRow.removeAttribute('highlighted');
+            }
+        }
+    }
+    async componentWillLoad() {
+        this.id = this.el.id;
+        this.cols = this.el.childElementCount;
+        await this.setExpandableRelationHandle();
+    }
+    render() {
+        return (h(Host, { key: '0b57254472bbc02e1eebe702c76a7fd4356600e6', onMouseEnter: () => this.hoverHandle(true), onMouseLeave: () => this.hoverHandle(false), cols: this.cols, expanded: this.expandId && this.prevRowExpanded, collapsed: this.expandId && !this.prevRowExpanded }, h("div", { key: '0eedb50558cd916adf235771905215a94bca7f77', class: "left-container" }, this.expandable && (h("button", { key: 'fe5a9e4d0c13ea53e986bcbabad388f73cb800c4', class: `expand-btn ${this.expanded ? 'expanded' : ''}`, onClick: () => this.changeExpandHandle() })), this.selectionName && (h("xv-checkbox-v2", { key: 'a9c2cd165c789985a5f932936b0e9e56f0420d82', name: this.selectionName, value: this.value, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '9b057636cd6f129857b4864ba37c0f6e3b3787a7' })));
+    }
+    static get is() { return "xv-table-v2-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expandable": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is row will be expandable\r\nIf it's true then the next row will be collapsed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default state of expandable"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expanded",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "selectionName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selection-name",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "prevRowExpanded": {},
+            "expandId": {},
+            "id": {},
+            "cols": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string, value?: string; checked: boolean }",
+                    "resolved": "{ name: string; value?: string; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setExpandRelation": {
+                "complexType": {
+                    "signature": "(id?: string, expanded?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "expanded",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Called from outside (From expandable row)",
+                    "tags": []
+                }
+            },
+            "toggleExpand": {
+                "complexType": {
+                    "signature": "(id?: string, expanded?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "expanded",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Called from outside (From expandable row)\r\nto change then expand or collapse",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expandable",
+                "methodName": "setExpandableRelationHandle"
+            }];
+    }
+}
+//# sourceMappingURL=xv-table-row.js.map

package/dist/{xv-webcomponents/xv-table-v2-row.entry.js.map → collection/components/xv-table/xv-table-row/xv-table-row.js.map}

@@ -1 +1 @@
-{"file":"xv-table-v2-row.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-table/xv-table-row/xv-table-row.scss?tag=xv-table-v2-row&encapsulation=shadow","src/components/xv-table/xv-table-row/xv-table-row.tsx"],"sourcesContent":["@import \"../vars\";\r\n\r\n:host(#{$tag-name}-row) {\r\n  display: grid;\r\n  padding: $space-md;\r\n  align-items: center;\r\n  transition: height .15s cubic-bezier(.2,0,.38,.9), padding .15s ease-in-out, background-color 0.2ms ease-in-out;\r\n  background: var(--layer-02, #FFF);\r\n  box-shadow: 0 0 0 1px #E3E3E3 inset;\r\n\r\n  .left-container {\r\n    @include left-container-styles;\r\n  }\r\n\r\n  .expand-btn {\r\n    @include expand-btn-styles;\r\n  }\r\n}\r\n\r\n:host([expanded]) {\r\n  block-size: auto;\r\n}\r\n\r\n:host([collapsed]) {\r\n  block-size: 0;\r\n  overflow: hidden;\r\n  padding-top: 0;\r\n  padding-bottom: 0;\r\n}\r\n\r\n:host([odd]) {\r\n  background-color: var(--layer-selected-01, #E3E3E3);\r\n}\r\n\r\n:host([even]) {\r\n  background-color: #fff;\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Watch, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-row',\r\n  styleUrl: 'xv-table-row.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableRow {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Is row will be expandable\r\n   * If it's true then the next row will be collapsed\r\n   */\r\n  @Prop({ mutable: true }) expandable: boolean = false;\r\n  /**\r\n   * Default state of expandable\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\r\n  /**\r\n   * Checkbox row name\r\n   */\r\n  @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\r\n  /**\r\n   * Checkbox row value\r\n   */\r\n  @Prop({ reflect: true }) value?: string;\r\n  /**\r\n   * Checkbox row status\r\n   */\r\n  @Prop({ reflect: true, mutable: true  }) checked?: boolean;\r\n\r\n  @State() prevRowExpanded: boolean = false;\r\n  @State() expandId?: string;\r\n  @State() id?: string;\r\n  @State() cols: number = 1;\r\n\r\n  @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\r\n\r\n  /**\r\n   * Called from outside (From expandable row)\r\n   */\r\n  @Method()\r\n  async setExpandRelation(id?: string, expanded?: boolean) {\r\n    this.expandId = id;\r\n    this.prevRowExpanded = !!expanded;\r\n    return this.prevRowExpanded;\r\n  }\r\n\r\n  /**\r\n   * Called from outside (From expandable row)\r\n   * to change then expand or collapse\r\n   */\r\n  @Method()\r\n  async toggleExpand(id?: string, expanded?: boolean) {\r\n    if (this.expandId !== id) return;\r\n    this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;\r\n  }\r\n\r\n  /**\r\n   * Watch for expandable\r\n   * When it's false needs to remove unnecessary properties\r\n   */\r\n  @Watch('expandable')\r\n  setExpandableRelationHandle(): Promise<any> {\r\n    const nextEl = this.el.nextElementSibling;\r\n\r\n    if (!nextEl || nextEl.tagName !== this.el.tagName) this.expandable = false;\r\n\r\n    if (!this.expandable) return;\r\n\r\n    if (!this.id) this.id = this.el.id || uidGenerator();\r\n\r\n    return (nextEl as any).setExpandRelation(this.id, this.expanded);\r\n  }\r\n\r\n  /**\r\n   * When user press on the expand button\r\n   */\r\n  private changeExpandHandle() {\r\n    const nextRow = this.el.nextElementSibling;\r\n\r\n    if (!nextRow || nextRow.tagName !== this.el.tagName) return;\r\n\r\n    this.expanded = !this.expanded;\r\n    // Call method from new row\r\n    (nextRow as any).toggleExpand(this.id, this.expanded);\r\n  }\r\n\r\n  /**\r\n   * Highlight the expanded row on hover\r\n   */\r\n  private hoverHandle(active: boolean) {\r\n    const prevRow = this.el.previousElementSibling as HTMLElement | null;\r\n    const nextRow = this.el.nextElementSibling as HTMLElement | null;\r\n\r\n    if (nextRow?.tagName === this.el.tagName && this.expandable) {\r\n      if (active) {\r\n        nextRow.setAttribute('highlighted', '');\r\n      } else {\r\n        nextRow.removeAttribute('highlighted');\r\n      }\r\n    }\r\n\r\n    if (prevRow?.tagName === this.el.tagName && prevRow.hasAttribute('expandable')) {\r\n      if (active) {\r\n        prevRow.setAttribute('highlighted', '');\r\n      } else {\r\n        prevRow.removeAttribute('highlighted');\r\n      }\r\n    }\r\n  }\r\n\r\n  private checkboxChange = (e: CustomEvent<boolean>) => {\r\n    this.checked = e.detail;\r\n    this.checkedChange.emit({\r\n      name: this.selectionName,\r\n      value: this.value,\r\n      checked: e.detail\r\n    });\r\n  }\r\n\r\n  async componentWillLoad(){\r\n    this.id = this.el.id;\r\n    this.cols = this.el.childElementCount;\r\n    await this.setExpandableRelationHandle();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onMouseEnter={() => this.hoverHandle(true)}\r\n        onMouseLeave={() => this.hoverHandle(false)}\r\n        cols={this.cols}\r\n        expanded={this.expandId && this.prevRowExpanded}\r\n        collapsed={this.expandId && !this.prevRowExpanded}\r\n      >\r\n        <div class=\"left-container\">\r\n          {this.expandable && (\r\n            <button\r\n              class={`expand-btn ${this.expanded ? 'expanded' : ''}`}\r\n              onClick={() => this.changeExpandHandle()}\r\n            />\r\n          )}\r\n          {this.selectionName && (\r\n            <xv-checkbox-v2\r\n              name={this.selectionName}\r\n              value={this.value}\r\n              checked={this.checked}\r\n              onEventChange={this.checkboxChange}\r\n            />\r\n          )}\r\n        </div>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"version":3,"file":"xv-table-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-row/xv-table-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { uidGenerator } from '../../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-table-v2-row',\r\n  styleUrl: 'xv-table-row.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTableRow {\r\n  @Element() el: HTMLElement;\r\n  /**\r\n   * Is row will be expandable\r\n   * If it's true then the next row will be collapsed\r\n   */\r\n  @Prop({ mutable: true }) expandable: boolean = false;\r\n  /**\r\n   * Default state of expandable\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\r\n  /**\r\n   * Checkbox row name\r\n   */\r\n  @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\r\n  /**\r\n   * Checkbox row value\r\n   */\r\n  @Prop({ reflect: true }) value?: string;\r\n  /**\r\n   * Checkbox row status\r\n   */\r\n  @Prop({ reflect: true, mutable: true  }) checked?: boolean;\r\n\r\n  @State() prevRowExpanded: boolean = false;\r\n  @State() expandId?: string;\r\n  @State() id?: string;\r\n  @State() cols: number = 1;\r\n\r\n  @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\r\n\r\n  /**\r\n   * Called from outside (From expandable row)\r\n   */\r\n  @Method()\r\n  async setExpandRelation(id?: string, expanded?: boolean) {\r\n    this.expandId = id;\r\n    this.prevRowExpanded = !!expanded;\r\n    return this.prevRowExpanded;\r\n  }\r\n\r\n  /**\r\n   * Called from outside (From expandable row)\r\n   * to change then expand or collapse\r\n   */\r\n  @Method()\r\n  async toggleExpand(id?: string, expanded?: boolean) {\r\n    if (this.expandId !== id) return;\r\n    this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;\r\n  }\r\n\r\n  /**\r\n   * Watch for expandable\r\n   * When it's false needs to remove unnecessary properties\r\n   */\r\n  @Watch('expandable')\r\n  setExpandableRelationHandle(): Promise<any> {\r\n    const nextEl = this.el.nextElementSibling;\r\n\r\n    if (!nextEl || nextEl.tagName !== this.el.tagName) this.expandable = false;\r\n\r\n    if (!this.expandable) return;\r\n\r\n    if (!this.id) this.id = this.el.id || uidGenerator();\r\n\r\n    return (nextEl as any).setExpandRelation(this.id, this.expanded);\r\n  }\r\n\r\n  /**\r\n   * When user press on the expand button\r\n   */\r\n  private changeExpandHandle() {\r\n    const nextRow = this.el.nextElementSibling;\r\n\r\n    if (!nextRow || nextRow.tagName !== this.el.tagName) return;\r\n\r\n    this.expanded = !this.expanded;\r\n    // Call method from new row\r\n    (nextRow as any).toggleExpand(this.id, this.expanded);\r\n  }\r\n\r\n  /**\r\n   * Highlight the expanded row on hover\r\n   */\r\n  private hoverHandle(active: boolean) {\r\n    const prevRow = this.el.previousElementSibling as HTMLElement | null;\r\n    const nextRow = this.el.nextElementSibling as HTMLElement | null;\r\n\r\n    if (nextRow?.tagName === this.el.tagName && this.expandable) {\r\n      if (active) {\r\n        nextRow.setAttribute('highlighted', '');\r\n      } else {\r\n        nextRow.removeAttribute('highlighted');\r\n      }\r\n    }\r\n\r\n    if (prevRow?.tagName === this.el.tagName && prevRow.hasAttribute('expandable')) {\r\n      if (active) {\r\n        prevRow.setAttribute('highlighted', '');\r\n      } else {\r\n        prevRow.removeAttribute('highlighted');\r\n      }\r\n    }\r\n  }\r\n\r\n  private checkboxChange = (e: CustomEvent<boolean>) => {\r\n    this.checked = e.detail;\r\n    this.checkedChange.emit({\r\n      name: this.selectionName,\r\n      value: this.value,\r\n      checked: e.detail\r\n    });\r\n  }\r\n\r\n  async componentWillLoad(){\r\n    this.id = this.el.id;\r\n    this.cols = this.el.childElementCount;\r\n    await this.setExpandableRelationHandle();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        onMouseEnter={() => this.hoverHandle(true)}\r\n        onMouseLeave={() => this.hoverHandle(false)}\r\n        cols={this.cols}\r\n        expanded={this.expandId && this.prevRowExpanded}\r\n        collapsed={this.expandId && !this.prevRowExpanded}\r\n      >\r\n        <div class=\"left-container\">\r\n          {this.expandable && (\r\n            <button\r\n              class={`expand-btn ${this.expanded ? 'expanded' : ''}`}\r\n              onClick={() => this.changeExpandHandle()}\r\n            />\r\n          )}\r\n          {this.selectionName && (\r\n            <xv-checkbox-v2\r\n              name={this.selectionName}\r\n              value={this.value}\r\n              checked={this.checked}\r\n              onEventChange={this.checkboxChange}\r\n            />\r\n          )}\r\n        </div>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

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