xv-webcomponents 0.1.31 → 0.1.35

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

@@ -5,7 +5,7 @@ export class XvProgressIndicatorItem {
         this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
     }
     render() {
-        return (h(Host, { key: '2298819d5ff22c59545a1eb19539f9f61e9224dd', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '4d9c5325746cf1b88fe64bfcc81b9a79aaef30de', class: "line" }), h("span", { key: 'e9ef0a957c1fe89d3ea6a204f65ae274867b773a', class: "icon" }, h("svg", { key: 'e7a77f7ecbc69aa8a304a8cfc5d09dd9ebb8a10b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '438cab4fd260cf07bf3392faac03107fab7b0adb', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '5cc4069d5d3862237d7deb1c4c06063e2175f8e1', class: "label" }, h("slot", { key: '393bd83d59a4f17c603c8fcdcb9fc649500850c5' }))));
+        return (h(Host, { key: '79acb016d3774423ebc4b4fca110a2ac450358ff', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'da650032b1e038635c5bbbbdabcf8de3d510c162', class: "line" }), h("span", { key: 'b3cfcdca102ea9d180b711a90a3a735b1faf0296', class: "icon" }, h("svg", { key: 'ad92853715e40b74c291867a158759cfd13ff9af', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '955f05d5ffcebd9dee12fd89ae34cdf94d68f668', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '9c47e82f96314c2e0868c6c67ff9c0b4b66eec4f', class: "label" }, h("slot", { key: '5730d018f363e84fb299877ee854360eb42b06ce' }))));
     }
     static get is() { return "xv-progress-indicator-v2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,7 +56,7 @@ export class XvProgressIndicator {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: '8f050bb2255b64fbaae593053ac4cc9c912f538a', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: 'c311395c02fa84b73746bd5d2a7074f315f220d3' })));
+        return (h(Host, { key: '00ad521136d02deaedb3984ff711d23ff0853062', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '054dbfebd8387688975665058d9bba3903a768fc' })));
     }
     static get is() { return "xv-progress-indicator-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-table/_vars.ts"],"names":[],"mappings":"AASA,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,4BAAa,CAAA;IACb,4BAAa,CAAA;AACf,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC9C,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC","sourcesContent":["export interface SelectRowDto {\n  name: string;\n  checked: boolean;\n  value?: string | number | object;\n  partial?: boolean;\n  header?: boolean;\n  expandable?: boolean;\n}\n\nexport enum XV_SORT_DIR {\n  ASC = 'asc',\n  DESC = 'desc',\n  NONE = 'none'\n}\n\nexport const XV_EXPANDABLE_KEY = 'expandable';\nexport const XV_TABLE_TAG = 'xv-table-v2';\n"]}
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-table/_vars.ts"],"names":[],"mappings":"AASA,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,4BAAa,CAAA;IACb,4BAAa,CAAA;AACf,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC9C,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC","sourcesContent":["export interface SelectRowDto {\n  name: string;\n  checked: boolean;\n  value?: string | number | object;\n  partial?: boolean;\n  header?: boolean;\n  expandable?: boolean;\n}\n\nexport enum XV_SORT_DIR {\n  ASC = 'asc',\n  DESC = 'desc',\n  NONE = 'none'\n}\n\nexport const XV_EXPANDABLE_KEY = 'expandable';\nexport const XV_TABLE_TAG = 'xv-table-v2';\n\nexport interface XVTableSortDto {\n  name?: string;\n  value: XV_SORT_DIR;\n}\n"]}

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

@@ -1,8 +1,5 @@
 @charset "UTF-8";
 :host {
-  /*display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;*/
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -17,6 +14,16 @@
   transition: 0.25s ease-in-out background-color;
 }
 
+:host([multiline]) {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: initial;
+  padding-bottom: 1px;
+  padding-top: 0;
+  line-height: 1.2;
+}
+
 :host([align=left]) {
   text-align: left;
 }

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

@@ -22,7 +22,7 @@ export class XvTableCell {
     }
     ;
     render() {
-        return (h(Host, { key: 'f48b63c8ec367c6d1e90c64237c29064ad5e6372', style: { width: this.width } }, h("slot", { key: 'cb9b159bd4a4951b5981a696bf0cd951c26c8efa' })));
+        return (h(Host, { key: 'c7d27a9888f8dd449e4ece79309497a7a5435f3f' }, h("slot", { key: '9dfec1da63cd4c796a152fd7c95cd95573922445' })));
     }
     static get is() { return "xv-table-v2-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -38,12 +38,12 @@ export class XvTableCell {
     }
     static get properties() {
         return {
-            "width": {
-                "type": "string",
+            "multiline": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -54,7 +54,7 @@ export class XvTableCell {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
+                "attribute": "multiline",
                 "reflect": true
             },
             "name": {
@@ -134,13 +134,13 @@ export class XvTableCell {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name?: string, value: XV_SORT_DIR }",
-                    "resolved": "{ name?: string; value: XV_SORT_DIR; }",
+                    "original": "XVTableSortDto",
+                    "resolved": "XVTableSortDto",
                     "references": {
-                        "XV_SORT_DIR": {
+                        "XVTableSortDto": {
                             "location": "import",
                             "path": "../_vars",
-                            "id": "src/components/xv-table/_vars.ts::XV_SORT_DIR"
+                            "id": "src/components/xv-table/_vars.ts::XVTableSortDto"
                         }
                     }
                 }

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

@@ -1 +1 @@
-{"version":3,"file":"xv-table-cell.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-cell/xv-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAO7D,MAAM,OAAO,WAAW;IAStB,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,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC;IAAA,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAChC,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\nimport { XV_SORT_DIR } from '../_vars';\nimport { forEach, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-cell',\n  styleUrl: 'xv-table-cell.scss',\n  shadow: true,\n})\nexport class XvTableCell {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) width?: string;\n  @Prop({ reflect: true, mutable: true }) name?: string;\n  @Prop({ reflect: true }) align?: 'left' | 'right' | 'center';\n  @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\n  @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<{ name?: string, value: 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({ name: this.name, value: this.sort });\n  };\n\n  render() {\n    return (\n      <Host style={{ width: this.width }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xv-table-cell.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-cell/xv-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAO7D,MAAM,OAAO,WAAW;IAStB,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,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC;IAAA,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YAAC,8DAAQ,CAAO,CACtB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\nimport { XV_SORT_DIR, XVTableSortDto } from '../_vars';\nimport { forEach, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-cell',\n  styleUrl: 'xv-table-cell.scss',\n  shadow: true,\n})\nexport class XvTableCell {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) multiline?: boolean;\n  @Prop({ reflect: true, mutable: true }) name?: string;\n  @Prop({ reflect: true }) align?: 'left' | 'right' | 'center';\n  @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\n  @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<XVTableSortDto>;\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({ name: this.name, value: this.sort });\n  };\n\n  render() {\n    return (\n      <Host><slot /></Host>\n    );\n  }\n}\n"]}

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

@@ -10,7 +10,7 @@ export class XvTableExpand {
         };
     }
     render() {
-        return (h(Host, { key: '03fe6f6aeccdd968034eb8ca2f927ef47e7864d8' }, h("button", { key: 'c6fd847183f1ce75de771c1138de6ed058f555b2', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '4d7d466275d3cb55552d5b7df60e28bbe75cb058', name: XV_EXPANDABLE_KEY }), h("div", { key: '5fdaa8095fc4cd05ce98549228200a739dadc2a3', class: { expandableContent: true, open: this.open } }, h("slot", { key: '3c04cf53d2a7c3989a4511f3d407e8e0e7597a7e' }))));
+        return (h(Host, { key: 'd5b0feeb957eb5d6ed947c0819225a6898fea034' }, h("button", { key: '63a7820dc19b3dfb5047f6ec5c271b99a3766d9d', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '73ccb205e604809beee6ffc53f00a2033ded8a4a', name: XV_EXPANDABLE_KEY }), h("div", { key: '32399433e236263d8a63874358d27f78db42975c', class: { expandableContent: true, open: this.open } }, h("slot", { key: '52fe4f89bbea86a16ead1f8f001f7cc74239f5d9' }))));
     }
     componentDidLoad() {
         setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);

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

@@ -1,12 +1,19 @@
 :host {
   display: grid;
-  align-items: center;
   grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
   border-bottom: 1px solid #E3E3E3;
+  border-right: 1px solid #E3E3E3;
+  border-left: 1px solid #E3E3E3;
+  min-height: var(--xv-table-min-height);
+  align-items: center;
+  align-content: center;
   transition: 0.25s ease-in-out background-color;
 }
 :host .cell-control {
   min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 :host([variant]) {

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

@@ -7,12 +7,22 @@ export class XvTableRow {
             this.checked = checked;
             if (!checked && this.partial)
                 this.partial = checked;
+            if (!this.name)
+                this.name = uidGenerator();
+            this.selectRow.emit({
+                name: this.name,
+                value: this.value,
+                checked: this.checked,
+                partial: this.partial,
+                header: this.header,
+                expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+            });
         };
     }
     checkedChangeHandle() {
         if (!this.name)
             this.name = uidGenerator();
-        this.selectRow.emit({
+        this.checkedChange.emit({
             name: this.name,
             value: this.value,
             checked: this.checked,
@@ -33,7 +43,7 @@ export class XvTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '5a5fd70ee1706f3c250c58139a2dc81dfd5a4a6a' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '4a9ac57fcb6baccaf97d866519b747ef1d921199', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '452ea4f34c537f02f16ef0c26ad17abff15f943d', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: 'b92316fbec5ed18d0097017cc260097e87443b79', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '5a80306e5b35a072d9f8cabcb9fa3a9bce8ec72c' })));
+        return (h(Host, { key: '1b026dc3a4cc49aefd6963864fba1cf1e63acc53' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: 'c37dc2e05c0e0b50b74a71e196ccbc2dce10b216', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'a90ed4e7d5b871e559e6736a33e2caae2be1bc4c', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '9223337d132b22e9cc516b0aa13702e5361ff570', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: 'a9a63bd03d0ecb929ceba7e85a96271636ed0a80' })));
     }
     componentWillLoad() {
         this.setInitialAttrs();
@@ -270,6 +280,27 @@ export class XvTableRow {
     }
     static get events() {
         return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SelectRowDto",
+                    "resolved": "SelectRowDto",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                }
+            }, {
                 "method": "selectRow",
                 "name": "selectRow",
                 "bubbles": true,

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

@@ -1 +1 @@
-{"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, Event, EventEmitter, Watch } from '@stencil/core';\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\nimport { setAttr, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-row',\n  styleUrl: 'xv-table-row.scss',\n  shadow: true,\n})\nexport class XvTableRow {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\n  @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\n  @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\n  @Prop({ reflect: true }) value?: SelectRowDto['value'];\n  @Prop({ reflect: true, mutable: true }) hover?: boolean;\n  @Prop({ reflect: true }) readonly?: boolean;\n  @Prop({ reflect: true }) required?: boolean;\n  @Prop({ reflect: true }) disabled?: boolean;\n  @Prop({ reflect: true }) header?: boolean;\n  @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\n\n  @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\n\n  @Watch('checked')\n  checkedChangeHandle() {\n    if (!this.name) this.name = uidGenerator();\n    this.selectRow.emit({\n      name: this.name,\n      value: this.value,\n      checked: this.checked,\n      partial: this.partial,\n      header: this.header,\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\n    });\n  }\n\n  private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\n    this.checked = checked;\n    if (!checked && this.partial) this.partial = checked;\n  };\n\n  private setInitialAttrs() {\n    if (this.variant || !this.hover) {\n      const tableEl = this.el.closest(XV_TABLE_TAG);\n      if (!this.hover) {\n        this.hover = tableEl.hasAttribute('hover');\n      }\n      if (this.variant) {\n        setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.variant !== undefined && (\n          <xv-table-v2-cell class=\"cell-control\">\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                required={this.required}\n                readonly={this.readonly}\n                onEventChange={this.checkHandle}\n              />\n            )}\n            {this.variant === 'radio' && (\n              <input\n                type=\"radio\"\n                name={this.name}\n                checked={this.checked || this.partial}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n              />\n            )}\n          </xv-table-v2-cell>\n        )}\n\n        <slot />\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setInitialAttrs();\n  }\n}\n"]}
+{"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, Event, EventEmitter, Watch } from '@stencil/core';\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\nimport { setAttr, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-row',\n  styleUrl: 'xv-table-row.scss',\n  shadow: true,\n})\nexport class XvTableRow {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\n  @Event({ eventName: 'checkedChange' }) checkedChange: EventEmitter<SelectRowDto>;\n  @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\n  @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\n  @Prop({ reflect: true }) value?: SelectRowDto['value'];\n  @Prop({ reflect: true, mutable: true }) hover?: boolean;\n  @Prop({ reflect: true }) readonly?: boolean;\n  @Prop({ reflect: true }) required?: boolean;\n  @Prop({ reflect: true }) disabled?: boolean;\n  @Prop({ reflect: true }) header?: boolean;\n  @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\n\n  @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\n\n  @Watch('checked')\n  checkedChangeHandle() {\n    if (!this.name) this.name = uidGenerator();\n    this.checkedChange.emit({\n      name: this.name,\n      value: this.value,\n      checked: this.checked,\n      partial: this.partial,\n      header: this.header,\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\n    });\n  }\n\n  private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\n    this.checked = checked;\n    if (!checked && this.partial) this.partial = checked;\n\n    if (!this.name) this.name = uidGenerator();\n    this.selectRow.emit({\n      name: this.name,\n      value: this.value,\n      checked: this.checked,\n      partial: this.partial,\n      header: this.header,\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\n    });\n  };\n\n  private setInitialAttrs() {\n    if (this.variant || !this.hover) {\n      const tableEl = this.el.closest(XV_TABLE_TAG);\n      if (!this.hover) {\n        this.hover = tableEl.hasAttribute('hover');\n      }\n      if (this.variant) {\n        setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.variant !== undefined && (\n          <xv-table-v2-cell class=\"cell-control\">\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                required={this.required}\n                readonly={this.readonly}\n                onEventChange={this.checkHandle}\n              />\n            )}\n            {this.variant === 'radio' && (\n              <input\n                type=\"radio\"\n                name={this.name}\n                checked={this.checked || this.partial}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n              />\n            )}\n          </xv-table-v2-cell>\n        )}\n\n        <slot />\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setInitialAttrs();\n  }\n}\n"]}

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

@@ -1,4 +1,5 @@
 :host {
+  --xv-table-min-height: 51.11px;
   --xv-table-padding-x: 16px;
   --xv-table-padding-y: 15px;
   --xv-table-cols-template: repeat(auto-fit, minmax(0, 1fr));
@@ -44,6 +45,17 @@
   flex-direction: column;
   position: relative;
 }
+:host .xv-table_wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--layer-accent-03) transparent;
+}
+:host .xv-table_wrapper ::slotted(*) {
+  min-width: 1000px;
+}
 :host .xv-table ::slotted([checked]) {
   background-color: var(--layer-selected-01, #E3E3E3);
 }
@@ -59,6 +71,19 @@
 :host .xv-table ::slotted([slot=footer]) {
   background-color: var(--layer-accent-02, #E3E3E3);
 }
+:host .xv-table_loading {
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--xv-table-min-height, 51.11px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+}
 :host .xv-table-title,
 :host ::slotted([slot=title]) {
   color: var(--text-primary, #333) !important;
@@ -92,16 +117,20 @@
 
 :host([size=xs]) {
   --xv-table-padding-y: 7px;
+  --xv-table-min-height: 35.1px;
 }
 
 :host([size=sm]) {
   --xv-table-padding-y: 10px;
+  --xv-table-min-height: 41.11px;
 }
 
 :host([size=lg]) {
   --xv-table-padding-y: 21px;
+  --xv-table-min-height: 63.09px;
 }
 
 :host([size=xl]) {
   --xv-table-padding-y: 31px;
+  --xv-table-min-height: 78.77px;
 }

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

@@ -1,10 +1,11 @@
 import { Host, h, Fragment } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
 export class XvTable {
     constructor() {
         this.selected = new Map();
         this.selectedCount = 0;
     }
-    handleSelectRow({ detail }) {
+    handleCheckedChange({ detail }) {
         if (detail.header || detail.expandable)
             return;
         if (detail.checked) {
@@ -30,7 +31,7 @@ export class XvTable {
             .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
     }
     render() {
-        return (h(Host, { key: '98ad681acc0e04bf0c1bb819ab012b3ea22e04c6', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'b4315a19b272218842902dfe9ad73fc878e29530', name: "title" }, !!this.el.title && h("h2", { key: 'c2a7a7d1b75206f13475443d31c6554cf80cc91f', class: "xv-table-title" }, this.el.title)), h("slot", { key: '1d3f709b9f6bfb6972eacbb34ae310da4c71ccc9', name: "toolbar" }), h("div", { key: '0653df0154242466a8147e6dee9b2d500d651977', class: "xv-table" }, h("div", { key: '0c1dc822a97f299e5269a4a7b03408c5bb568982', class: "batch-actions" }, h(Fragment, { key: '5974e0f94f21860e78dfe163296099cd6ee42da7' }, h("div", { key: 'f74a8d397e5ff1244b923697559ea1b5c9adf443', class: "batch-actions_content" }, h("slot", { key: '9ab1a03ea8eade4b9b021302f2305c4fca5ccaaf', name: "batch" })), h("p", { key: '4b63b6deaa4d31d5aa13e336a6331dcd86961579', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("slot", { key: '64a7b87bc705b4378665e0991fd1d9506048e4b6' }), h("slot", { key: 'c7a5ac279541c4eaf917e768b27f7a0ee1f1e8dd', name: "footer" }))));
+        return (h(Host, { key: 'd661040bcec38c039dd3ae7516fa40bfb0274da7', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'a341cf9b6bf250dbf0dbee0bf17da8a734be7a31', name: "title" }, !!this.el.title && h("h2", { key: 'bf33335fe741ebae458f3dcc02d1d65ac4c75ddd', class: "xv-table-title" }, this.el.title)), h("slot", { key: 'b7504f0b48d538ce6d4c1fb7706e1ab8bce8bd8c', name: "toolbar" }), h("div", { key: '54b51b51171726650858ce3484c1d510dd88796c', class: "xv-table" }, h("div", { key: '22f7f3638901e4f80acee21696ee4ae8d7e01ad4', class: "batch-actions" }, h(Fragment, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, h("div", { key: 'eb7a82cda62bb1084715d446da1ca082c7ff6f37', class: "batch-actions_content" }, h("slot", { key: 'eb95cf88821c541e71b1620ce0d79bbe196a16e8', name: "batch" })), h("p", { key: '050dbbefa2fc8adfffbbb12652964279bd5b69d4', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: 'd9b2187c942ebb3b7acdefdd180be5fcbfcd3584', class: "xv-table_wrapper" }, h("slot", { key: '521a467f10d6af8fbd504376283e6fb738a618d3' }), h("slot", { key: '2e5e03829cc2a410be2e10e547d7c323d05ac251', name: "footer" })), !!this.loading && (h("div", { key: '91ff01d4e08b67c62ba5696dc781edb9b821dd54', class: "xv-table_loading" }, h("xv-loader-v2", { key: '97927371d38d0de32aa9e6cf6f3d68239f97d5a0', size: SIZE_VAR.LG }))))));
     }
     componentWillLoad() {
         this.setColsSizeTemplate();
@@ -93,6 +94,25 @@ export class XvTable {
                 "attribute": "hover",
                 "reflect": true
             },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": true
+            },
             "colsSize": {
                 "type": "unknown",
                 "mutable": false,
@@ -119,10 +139,16 @@ export class XvTable {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colsSize",
+                "methodName": "setColsSizeTemplate"
+            }];
+    }
     static get listeners() {
         return [{
-                "name": "selectRow",
-                "method": "handleSelectRow",
+                "name": "checkedChange",
+                "method": "handleCheckedChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1 +1 @@
-{"version":3,"file":"xv-table.js","sourceRoot":"","sources":["../../../src/components/xv-table/xv-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAS3F,MAAM,OAAO,OAAO;IALpB;QAUW,aAAQ,GAA8B,IAAI,GAAG,EAAE,CAAC;QAChD,kBAAa,GAAW,CAAC,CAAC;KA6DpC;IA1DC,eAAe,CAAC,EAAE,MAAM,EAA6B;QACnD,IAAI,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,UAAU;YAAE,OAAO;QAC/C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEO,mBAAmB;;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO;QAErD,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CACvB,0BAA0B,EAC1B,IAAI,CAAC,QAAQ;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACT,IAAI,CAAC,CAAC;gBAAE,OAAO,gBAAgB,CAAC;YAChC,IAAI,CAAC,KAAK,MAAM;gBAAE,OAAO,iBAAiB,CAAC;YAC3C,OAAO,QAAQ,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;QACvD,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,CAAC,GAAG,mCAAmC,CACnD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;YACjD,6DAAM,IAAI,EAAC,OAAO,IACf,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,2DAAI,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAM,CAC9D;YAEP,6DAAM,IAAI,EAAC,SAAS,GAAG;YAEvB,4DAAK,KAAK,EAAC,UAAU;gBACnB,4DAAK,KAAK,EAAC,eAAe;oBACxB,EAAC,QAAQ;wBACP,4DAAK,KAAK,EAAC,uBAAuB;4BAChC,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;wBACN,0DAAG,KAAK,EAAC,qBAAqB,IAC3B,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,EAAE,CAC5H,CACK,CACP;gBAEN,8DAAQ;gBAER,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,CACR,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, State, Listen, Fragment } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { SelectRowDto } from './_vars';\n\n@Component({\n  tag: 'xv-table-v2',\n  styleUrl: 'xv-table.scss',\n  shadow: true,\n})\nexport class XvTable {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) size?: SIZE_VAR;\n  @Prop({ reflect: true }) hover?: boolean;\n  @Prop({ reflect: true, attribute: 'colsSize' }) colsSize?: (string | null)[];\n  @State() selected: Map<string, SelectRowDto> = new Map();\n  @State() selectedCount: number = 0;\n\n  @Listen('selectRow')\n  handleSelectRow({ detail }: CustomEvent<SelectRowDto>) {\n    if (detail.header || detail.expandable) return;\n    if (detail.checked) {\n      this.selected.set(detail.name, detail);\n    } else {\n      this.selected.delete(detail.name);\n    }\n\n    this.selectedCount = this.selected.size;\n  }\n\n  private setColsSizeTemplate() {\n    if (!this.colsSize || !this.colsSize?.length) return;\n\n    this.el.style.setProperty(\n      '--xv-table-cols-template',\n      this.colsSize\n        .map((v) => {\n          if (!v) return 'minmax(0, 1fr)';\n          if (v === 'auto') return 'minmax(0, auto)';\n          return `calc(${v} - ${50 / this.colsSize.length}px)`;\n        })\n        .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))'\n    );\n  }\n\n  render() {\n    return (\n      <Host class={{ batchVisible: !!this.selectedCount }}>\n        <slot name=\"title\">\n          {!!this.el.title && <h2 class=\"xv-table-title\">{this.el.title}</h2>}\n        </slot>\n\n        <slot name=\"toolbar\" />\n\n        <div class=\"xv-table\">\n          <div class=\"batch-actions\">\n            <Fragment>\n              <div class=\"batch-actions_content\">\n                <slot name=\"batch\" />\n              </div>\n              <p class=\"batch-actions_count\">\n                {!!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`}\n              </p>\n            </Fragment>\n          </div>\n\n          <slot />\n\n          <slot name=\"footer\" />\n        </div>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setColsSizeTemplate();\n  }\n}\n"]}
+{"version":3,"file":"xv-table.js","sourceRoot":"","sources":["../../../src/components/xv-table/xv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Listen, Fragment, Watch } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { SelectRowDto } from './_vars';\n\n@Component({\n  tag: 'xv-table-v2',\n  styleUrl: 'xv-table.scss',\n  shadow: true,\n})\nexport class XvTable {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) size?: SIZE_VAR;\n  @Prop({ reflect: true }) hover?: boolean;\n  @Prop({ reflect: true }) loading?: boolean;\n  @Prop({ reflect: true, attribute: 'colsSize' }) colsSize?: (string | null)[];\n  @State() selected: Map<string, SelectRowDto> = new Map();\n  @State() selectedCount: number = 0;\n\n  @Listen('checkedChange')\n  handleCheckedChange({ detail }: CustomEvent<SelectRowDto>) {\n    if (detail.header || detail.expandable) return;\n    if (detail.checked) {\n      this.selected.set(detail.name, detail);\n    } else {\n      this.selected.delete(detail.name);\n    }\n\n    this.selectedCount = this.selected.size;\n  }\n\n  @Watch('colsSize')\n  private setColsSizeTemplate() {\n    if (!this.colsSize || !this.colsSize?.length) return;\n\n    this.el.style.setProperty(\n      '--xv-table-cols-template',\n      this.colsSize\n        .map((v) => {\n          if (!v) return 'minmax(0, 1fr)';\n          if (v === 'auto') return 'minmax(0, auto)';\n          return `calc(${v} - ${50 / this.colsSize.length}px)`;\n        })\n        .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))',\n    );\n  }\n\n  render() {\n    return (\n      <Host class={{ batchVisible: !!this.selectedCount }}>\n        <slot name=\"title\">\n          {!!this.el.title && <h2 class=\"xv-table-title\">{this.el.title}</h2>}\n        </slot>\n\n        <slot name=\"toolbar\" />\n\n        <div class=\"xv-table\">\n          <div class=\"batch-actions\">\n            <Fragment>\n              <div class=\"batch-actions_content\">\n                <slot name=\"batch\" />\n              </div>\n              <p class=\"batch-actions_count\">\n                {!!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`}\n              </p>\n            </Fragment>\n          </div>\n\n          <div class=\"xv-table_wrapper\">\n            <slot />\n\n            <slot name=\"footer\" />\n          </div>\n\n          {!!this.loading && (\n            <div class=\"xv-table_loading\">\n              <xv-loader-v2 size={SIZE_VAR.LG} />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setColsSizeTemplate();\n  }\n}\n"]}

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

@@ -1,3 +1,10 @@
 :host {
   display: block;
+}
+
+:host([loading]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
 }

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

@@ -1,10 +1,12 @@
 import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../../types/enum";
 export class XvTab {
     constructor() {
         this.disabled = false;
+        this.loading = false;
     }
     render() {
-        return h(Host, { key: '3dcd55f79d9c95dc54efd7d2547470b61f8bd091', disabled: this.disabled }, h("slot", { key: '72ea7a00510f9a3baa35e11512ab22d1800fdf8c' }));
+        return (h(Host, { key: '41e9cd0d84db300497b86bd697aa867fd591d405', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
     }
     static get is() { return "xv-tab-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -58,6 +60,45 @@ export class XvTab {
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"xv-tab.js","sourceRoot":"","sources":["../../../../src/components/xv-tabs/xv-tab/xv-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,KAAK;IALlB;QAO2B,aAAQ,GAAY,KAAK,CAAC;KAKpD;IAHC,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAAE,8DAAQ,CAAO,CAAC;IACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xv-tab-v2',\n  styleUrl: 'xv-tab.scss',\n  shadow: true,\n})\nexport class XvTab {\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    return <Host disabled={this.disabled}><slot /></Host>;\n  }\n}\n"]}
+{"version":3,"file":"xv-tab.js","sourceRoot":"","sources":["../../../../src/components/xv-tabs/xv-tab/xv-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAO/C,MAAM,OAAO,KAAK;IALlB;QAO2B,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;KAUnD;IAPC,MAAM;QACJ,OAAO,CACP,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAC3C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAc,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,CAAC,CAAC,CAAC,eAAQ,CACzD,CACN,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../../types/enum';\n\n@Component({\n  tag: 'xv-tab-v2',\n  styleUrl: 'xv-tab.scss',\n  shadow: true,\n})\nexport class XvTab {\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) loading: boolean = false;\n  @Prop() name?: number | string;\n\n  render() {\n    return (\n    <Host disabled={this.disabled} name={this.name}>\n      {this.loading ? <xv-loader-v2 size={SIZE_VAR.LG} /> : <slot />}\n    </Host>\n    );\n  }\n}\n"]}

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

@@ -3,9 +3,21 @@
   flex-direction: column;
 }
 :host(.xv-tabs) .tab-headers {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+}
+:host(.xv-tabs) .tab-headers_container {
   display: flex;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+}
+:host(.xv-tabs) .tab-headers_container::-webkit-scrollbar {
+  display: none;
 }
-:host(.xv-tabs) .tab-headers button {
+:host(.xv-tabs) .tab-headers_tab {
   background: none;
   padding: 11px var(--gap-md, 16px);
   cursor: pointer;
@@ -23,7 +35,7 @@
   height: 40px;
   white-space: nowrap;
 }
-:host(.xv-tabs) .tab-headers button:after {
+:host(.xv-tabs) .tab-headers_tab:after {
   content: "";
   position: absolute;
   transition: background-color 0.3s ease, width 0.3s ease;
@@ -34,31 +46,63 @@
   height: 2px;
   background-color: var(--interactive-01, #273435);
 }
-:host(.xv-tabs) .tab-headers button:focus {
+:host(.xv-tabs) .tab-headers_tab:focus {
   outline: none;
   border: 2px solid var(--border-border-subtle-01, #D1D1D1);
 }
-:host(.xv-tabs) .tab-headers button:hover {
+:host(.xv-tabs) .tab-headers_tab:hover {
   border-bottom-color: var(--border-strong-01, #8B8B8B);
 }
-:host(.xv-tabs) .tab-headers button.active {
+:host(.xv-tabs) .tab-headers_tab.active {
   color: var(--text-primary, #333);
   font-weight: 700;
 }
-:host(.xv-tabs) .tab-headers button.active:after {
+:host(.xv-tabs) .tab-headers_tab.active:after {
   width: 100%;
 }
-:host(.xv-tabs) .tab-headers button.active:focus {
+:host(.xv-tabs) .tab-headers_tab.active:focus {
   border-color: var(--interactive-01, #273435);
 }
-:host(.xv-tabs) .tab-headers button:disabled {
+:host(.xv-tabs) .tab-headers_tab:disabled {
   color: var(--text-on-color-disabled, #8B8B8B);
   border-bottom-color: var(--border-disabled, #D1D1D1);
   cursor: not-allowed;
 }
-:host(.xv-tabs) .tab-headers button:disabled:after {
+:host(.xv-tabs) .tab-headers_tab:disabled:after {
   background-color: var(--border-disabled, #D1D1D1);
 }
+:host(.xv-tabs) .tab-headers_btn {
+  outline: none;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: 0.25s ease-in-out opacity;
+}
+:host(.xv-tabs) .tab-headers_btn:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 5px;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+:host(.xv-tabs) .tab-headers_btn:active {
+  opacity: 0.3;
+}
+:host(.xv-tabs) .tab-headers_btn.prev:before {
+  transform: translate(-50%, -50%) rotate(135deg);
+}
+:host(.xv-tabs) .tab-headers_btn.next:before {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
 :host(.xv-tabs) .tab-content-wrapper {
   position: relative;
   overflow: hidden;
@@ -78,4 +122,18 @@
   overflow-y: auto;
   pointer-events: auto;
   max-height: 1000px;
+}
+:host(.xv-tabs) .xv-tabs_empty {
+  display: block;
+  text-align: center;
+  margin: 20px auto;
+  font-size: var(--fz-xl);
+  color: var(--text-primary);
+}
+
+:host([loading]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
 }