xv-webcomponents 0.1.23 → 0.1.25

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

@@ -1,122 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,53 +0,0 @@
-: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

@@ -1,299 +0,0 @@
-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/collection/components/xv-table/xv-table-row/xv-table-row.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,154 +0,0 @@
-: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);
-}