xv-webcomponents 0.1.39 → 0.1.42

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-data-table-cell.js","sourceRoot":"","sources":["../../../../src/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,OAAO,eAAe;IAW1B,UAAU;QACR,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO;QACpC,IAAI,IAAI,GAAqB,IAAI,CAAC,IAAI,CAAC;QACvC,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;YAAE,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC;QAE9C,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC;YACrC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC;YAC1C,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;QAExC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;YAC/C,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAAA,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAC5B,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBACvC,CAAC,UAAU,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;aACvC,IAEA,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,eAAQ,CAAC,CAAC,CAAC,CACrD,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,EAAE;YAC5E,eAAQ,CACJ,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Element, h, Host, Listen, Prop } from '@stencil/core';\nimport { forEach, uidGenerator } from '../../../utils/utils';\nimport { XV_SORT_DIR } from '../../../types/enum';\n\n@Component({\n  tag: 'xv-data-table-cell',\n  styleUrl: 'xv-data-table-cell.scss',\n  shadow: true,\n})\nexport class XvDataTableCell {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) name?: string;\n  @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\n  @Prop() multiline: number;\n  @Prop() width?: string;\n  @Prop() align?: 'left' | 'right' | 'center';\n\n  @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<XV_SORT_DIR>;\n\n  @Listen('click')\n  handleSort() {\n    if (this.sort === undefined) return;\n    let sort: XV_SORT_DIR | '' = this.sort;\n    if (this.sort === '') sort = XV_SORT_DIR.NONE;\n\n    this.sort = sort === XV_SORT_DIR.NONE ?\n      XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?\n        XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;\n\n    forEach(this.el.parentElement.children, (cell) => {\n      if (cell !== this.el && cell.hasAttribute('sort')) {\n        cell.setAttribute('sort', 'none');\n      }\n    });\n\n    if (!this.name) this.name = uidGenerator();\n    this.sortChange.emit(this.sort);\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"cell\"\n        style={{ width: this.width }}\n        class={{\n          multiline: this.multiline !== undefined,\n          [`align--${this.align}`]: !!this.align\n        }}\n      >\n        {!this.multiline || isNaN(this.multiline) ? <slot /> : (\n          <div class=\"line-clamp\" style={{ ['-webkit-line-clamp']: `${this.multiline}` }}>\n            <slot />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,7 @@
+:host([collapsed]) {
+  display: none;
+}
+
+:host([expanded]) {
+  display: contents;
+}

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

@@ -0,0 +1,101 @@
+import { Host, h } from "@stencil/core";
+import { XV_DATA_TABLE_ROW_TAG, XV_DATA_TABLE_TAG } from "../_vars";
+export class XvDataTableCollapse {
+    constructor() {
+        this.collapsed = false;
+    }
+    async setCollapsed(collapsed) {
+        this.collapsed = collapsed;
+        this.collapsedChange.emit(this.collapsed);
+        return this.collapsed;
+    }
+    componentWillLoad() {
+        const table = this.el.closest(XV_DATA_TABLE_TAG);
+        const rows = table.querySelectorAll(XV_DATA_TABLE_ROW_TAG);
+        rows.forEach((row) => row === null || row === void 0 ? void 0 : row.setAttribute('collapsable', ''));
+    }
+    render() {
+        return (h(Host, { key: '7704e9d073c449d3efd35bada4f632129378308e', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, h("slot", { key: 'a9684bbe4c0bf29fdf12c81344236d1b38865fd3' })));
+    }
+    static get is() { return "xv-data-table-collapse"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-data-table-collapse.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-data-table-collapse.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "collapsed": {
+                "type": "boolean",
+                "attribute": "collapsed",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "collapsedChange",
+                "name": "collapsedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setCollapsed": {
+                "complexType": {
+                    "signature": "(collapsed: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "collapsed",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-data-table-collapse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-data-table-collapse.js","sourceRoot":"","sources":["../../../../src/components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAOpE,MAAM,OAAO,mBAAmB;IALhC;QAO0C,cAAS,GAAY,KAAK,CAAC;KA4BpE;IAxBC,KAAK,CAAC,YAAY,CAAC,SAAkB;QACnC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,iBAAiB;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjD,MAAM,IAAI,GAAG,KAAK,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;QAC3D,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EACd,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,SAAS,EACxB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;YAC7B,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Method, Event, EventEmitter } from '@stencil/core';\nimport { XV_DATA_TABLE_ROW_TAG, XV_DATA_TABLE_TAG } from '../_vars';\n\n@Component({\n  tag: 'xv-data-table-collapse',\n  styleUrl: 'xv-data-table-collapse.scss',\n  shadow: true,\n})\nexport class XvDataTableCollapse {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n  @Event({ eventName: 'collapsedChange' }) collapsedChange: EventEmitter<boolean>;\n\n  @Method()\n  async setCollapsed(collapsed: boolean): Promise<boolean> {\n    this.collapsed = collapsed;\n    this.collapsedChange.emit(this.collapsed);\n\n    return this.collapsed;\n  }\n\n  componentWillLoad() {\n    const table = this.el.closest(XV_DATA_TABLE_TAG);\n    const rows = table.querySelectorAll(XV_DATA_TABLE_ROW_TAG);\n    rows.forEach((row) => row?.setAttribute('collapsable', ''));\n  }\n\n  render() {\n    return (\n      <Host id={this.el.id}\n            part=\"xv-collapse\"\n            class={this.el.className}\n            collapsed={this.collapsed}\n            expanded={!this.collapsed}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,71 @@
+:host {
+  display: table-row;
+  background-color: var(--xv-data-table-row-bg, transparent);
+  transition: 0.2s ease-in-out background-color;
+}
+:host .cell-control {
+  font-size: 8px;
+  max-width: 16px;
+  position: relative;
+  padding-left: calc(var(--xv-data-table-padding-x) + var(--xv-data-table-padding-x) + 10px + 1em);
+  overflow: visible;
+}
+:host .cell-control_collapse {
+  font-size: inherit;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  overflow: visible;
+  background-color: transparent;
+  outline: none;
+  top: calc(50% - 0.7em);
+  left: var(--xv-data-table-padding-x);
+  display: inline-flex;
+  border-top: none;
+  border-left: none;
+  border-right: 2px solid var(--icon-primary, #333);
+  border-bottom: 2px solid var(--icon-primary, #333);
+  transform: rotate(45deg);
+  transform-origin: center center;
+  transition: 0.2s ease-in-out transform, 0.2s ease-in-out opacity;
+  cursor: pointer;
+  box-sizing: content-box;
+}
+:host .cell-control_collapse:active {
+  opacity: 0.4;
+}
+:host .cell-control_collapse.open {
+  transform: rotate(-135deg);
+}
+:host .cell-control_checkbox {
+  display: flex;
+}
+
+:host(.hover:not([header]):hover) {
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+
+:host([header]) {
+  background-color: var(--layer-accent-01, #F7F7F7);
+}
+
+:host(.checked) {
+  background-color: var(--layer-selected-01, #E3E3E3);
+}
+
+:host(.hover.checked:hover) {
+  background-color: var(--layer-selected-hover-01, #DADADA);
+}
+
+:host([footer]),
+:host([footer]:hover),
+:host([footer].hover),
+:host([footer].hover:hover) {
+  background-color: var(--layer-accent-02, #E3E3E3);
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,354 @@
+import { h, Host } from "@stencil/core";
+import { uidGenerator } from "../../../utils/utils";
+import { XV_DATA_TABLE_TAG } from "../_vars";
+export class XvDataTableRow {
+    constructor() {
+        this.checked = false;
+        this.partial = false;
+        this.hover = false;
+        this.header = false;
+        this.footer = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.collapsed = false;
+        this.collapseClick = async () => {
+            var _a;
+            if (!this.collapse || !this.collapseEl)
+                return;
+            this.collapsed = !this.collapsed;
+            await ((_a = this.collapseEl) === null || _a === void 0 ? void 0 : _a.setCollapsed(this.collapsed));
+        };
+        this.setInitialState = () => {
+            var _a;
+            if (this.collapse && !this.collapseEl) {
+                this.collapseEl = this.el.parentElement.querySelector(`xv-data-table-collapse${this.collapse}`);
+                this.collapsed = (_a = this.collapseEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('collapsed');
+            }
+            if (!this.hover) {
+                const table = this.el.closest(XV_DATA_TABLE_TAG);
+                this.hover = table.hasAttribute('hover');
+            }
+        };
+        this.checkedChangeHandle = ({ detail: checked }) => {
+            if (!checked && this.partial)
+                this.partial = checked;
+            if (!this.name)
+                this.name = uidGenerator();
+            this.check.emit({
+                checked,
+                name: this.name,
+                value: this.value,
+                partial: this.partial,
+                header: this.header,
+                footer: this.footer,
+                expandable: !!this.collapseEl,
+            });
+        };
+    }
+    render() {
+        return (h(Host, { key: '4e452026f2b03d8d54811cb1de7342bc0a4d38b1', role: "row", part: "xv-row", class: { checked: this.checked, hover: this.hover } }, (!!this.variant || this.collapsable) && (h("xv-data-table-cell", { key: '28d1bb41ac6c4de32701315e1a201892041d4b42', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (h("button", { key: 'b7d4c5d1e8121ce9797ca292d7367df734b356fe', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '6095d07a8626988bb863317284fb3ebd137ef58a', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, readonly: this.readonly, required: this.required, onEventChange: this.checkedChangeHandle, class: "cell-control_checkbox" })))), h("slot", { key: '0ae007a4595a3cc854246c2e46d058df0f596b17', onSlotchange: this.setInitialState })));
+    }
+    static get is() { return "xv-data-table-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-data-table-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-data-table-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'checkbox'",
+                    "resolved": "\"checkbox\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "collapse": {
+                "type": "string",
+                "attribute": "collapse",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "collapsable": {
+                "type": "boolean",
+                "attribute": "collapsable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "partial": {
+                "type": "boolean",
+                "attribute": "partial",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hover": {
+                "type": "boolean",
+                "attribute": "hover",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "header": {
+                "type": "boolean",
+                "attribute": "header",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "footer": {
+                "type": "boolean",
+                "attribute": "footer",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number | object",
+                    "resolved": "number | object | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "collapsed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "check",
+                "name": "check",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XvDataTableCheck",
+                    "resolved": "XvDataTableCheck",
+                    "references": {
+                        "XvDataTableCheck": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-data-table/_vars.ts::XvDataTableCheck"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-data-table-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-data-table-row.js","sourceRoot":"","sources":["../../../../src/components/xv-data-table/xv-data-table-row/xv-data-table-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop, Element, State, Event, EventEmitter } from '@stencil/core';\nimport { uidGenerator } from '../../../utils/utils';\nimport { XV_DATA_TABLE_TAG, XvDataTableCheck } from '../_vars';\n\n@Component({\n  tag: 'xv-data-table-row',\n  styleUrl: 'xv-data-table-row.scss',\n  shadow: true,\n})\nexport class XvDataTableRow {\n  @Element() el: HTMLElement;\n  @Prop() variant?: 'checkbox';\n  @Prop({ mutable: true }) name?: string;\n  @Prop() collapse?: string;\n  @Prop({ reflect: true }) collapsable?: boolean;\n  @Prop({ mutable: true }) checked: boolean = false;\n  @Prop({ mutable: true }) partial: boolean = false;\n  @Prop({ mutable: true }) hover: boolean = false;\n  @Prop() header: boolean = false;\n  @Prop() footer: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n  @Prop() required: boolean = false;\n  @Prop() value?: string | number | object;\n\n  @Event() check: EventEmitter<XvDataTableCheck>;\n\n  @State() collapsed: boolean = false;\n\n  private collapseEl?: HTMLXvDataTableCollapseElement;\n\n  private collapseClick = async () => {\n    if (!this.collapse || !this.collapseEl) return;\n\n    this.collapsed = !this.collapsed;\n    await this.collapseEl?.setCollapsed(this.collapsed);\n  }\n\n  private setInitialState = () => {\n    if (this.collapse && !this.collapseEl) {\n      this.collapseEl = this.el.parentElement.querySelector(`xv-data-table-collapse${this.collapse}`);\n      this.collapsed = this.collapseEl?.hasAttribute('collapsed');\n    }\n\n    if (!this.hover) {\n      const table = this.el.closest(XV_DATA_TABLE_TAG);\n      this.hover = table.hasAttribute('hover');\n    }\n  }\n\n  private checkedChangeHandle = ({ detail: checked }: CustomEvent<boolean>) => {\n    if (!checked && this.partial) this.partial = checked;\n    if (!this.name) this.name = uidGenerator();\n    this.check.emit({\n      checked,\n      name: this.name,\n      value: this.value,\n      partial: this.partial,\n      header: this.header,\n      footer: this.footer,\n      expandable: !!this.collapseEl,\n    });\n  };\n\n  render() {\n    return (\n      <Host role=\"row\" part=\"xv-row\" class={{ checked: this.checked, hover: this.hover }}>\n        {(!!this.variant || this.collapsable) && (\n          <xv-data-table-cell width={!!this.variant ? '16px' : '0'} class=\"cell-control\">\n            {!!this.collapse && (\n              <button class={{ 'cell-control_collapse': true, open: !this.collapsed }} onClick={this.collapseClick}></button>\n            )}\n            {this.variant === 'checkbox' && (\n              <xv-checkbox-v2\n                name={this.name}\n                partial={this.partial}\n                checked={this.checked || this.partial}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                required={this.required}\n                onEventChange={this.checkedChangeHandle}\n                class=\"cell-control_checkbox\"></xv-checkbox-v2>\n            )}\n          </xv-data-table-cell>\n        )}\n        <slot onSlotchange={this.setInitialState} />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,104 @@
+:host {
+  --xv-data-table-border-width: 1px;
+  --xv-data-table-border-color: var(--border-subtle-01, #D1D1D1);
+  --xv-data-table-padding-x: var(--spacing-05, 16px);
+  --xv-data-table-padding-y: var(--spacing-05, 16px);
+  --xv-data-table-row-bg: transparent;
+  width: inherit;
+  text-align: left;
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 18px;
+  letter-spacing: 0.16px;
+}
+@media screen and (max-width: 980px) {
+  :host {
+    display: block;
+    position: relative;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--layer-accent-03) transparent;
+  }
+  :host ::slotted([slot=title]), :host > table {
+    min-width: 1000px;
+  }
+}
+:host .bar {
+  position: sticky;
+  left: 0;
+}
+:host .bar_batch {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: unset;
+  user-select: unset;
+  z-index: 2;
+  background-color: var(--interactive-01, #273435);
+  color: var(--text-on-color, #fff);
+  border-radius: 3px 3px 0 0;
+  display: flex;
+  align-items: center;
+}
+:host .bar_toolbar {
+  z-index: 1;
+  border-radius: 3px 3px 0 0;
+}
+:host ::slotted([slot=title]) {
+  margin: 0 !important;
+  color: var(--text-primary, #333) !important;
+  font-family: var(--ff-heading, "Gill Sans") !important;
+  font-size: var(--fz-xl, 21px) !important;
+  text-align: left;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: normal !important;
+  padding: var(--spacing-05) var(--spacing-05) var(--spacing-06) !important;
+}
+:host ::slotted([slot=toolbar]) {
+  margin-bottom: var(--spacing-03);
+}
+:host > table {
+  width: inherit;
+  border-collapse: collapse;
+  table-layout: fixed;
+  border-left: 1px solid var(--xv-data-table-border-color);
+  border-right: 1px solid var(--xv-data-table-border-color);
+}
+:host > caption {
+  display: contents;
+}
+
+:host([block]) {
+  width: 100%;
+}
+:host([block]) > table {
+  table-layout: fixed;
+}
+
+:host([size=xs]) {
+  --xv-data-table-padding-x: var(--spacing-02, 4px);
+  --xv-data-table-padding-y: var(--spacing-02, 4px);
+}
+
+:host([size=sm]) {
+  --xv-data-table-padding-x: var(--spacing-04, 12px);
+  --xv-data-table-padding-y: var(--spacing-03, 8px);
+}
+
+:host([size=md]) {
+  --xv-data-table-padding-x: var(--spacing-05, 16px);
+  --xv-data-table-padding-y: var(--spacing-05, 16px);
+}
+
+:host([size=lg]) {
+  --xv-data-table-padding-x: var(--spacing-05, 16px);
+  --xv-data-table-padding-y: var(--spacing-06, 24px);
+}
+
+:host([size=xl]) {
+  --xv-data-table-padding-x: var(--spacing-06, 24px);
+  --xv-data-table-padding-y: var(--spacing-07, 32px);
+}