xv-webcomponents 0.1.41 → 0.1.42

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

@@ -1,7 +1,53 @@
 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: '46d3f061051182e865d1a0088653a1af509da94f', role: "row" }, this.variant === 'checkbox' && (h("xv-data-table-cell", { key: '461f71088337deeb60e307bf715a83d950414a16', width: "1.98%" }, h("xv-checkbox-v2", { key: '9b1b6487545b48659f61dfd4b47a0ddd803472dc' }))), h("slot", { key: 'd59814118146a679ff7c1f690ccb5836924ef3d2' })));
+        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"; }
@@ -35,8 +81,274 @@ export class XvDataTableRow {
                 "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

@@ -1 +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":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;IAGzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK;YACb,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,2EAAoB,KAAK,EAAC,OAAO;gBAC/B,wEAAiC,CACd,CACtB;YACD,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xv-data-table-row',\n  styleUrl: 'xv-data-table-row.scss',\n  shadow: true,\n})\nexport class XvDataTableRow {\n  @Prop() variant?: 'checkbox';\n\n  render() {\n    return (\n      <Host role=\"row\">\n        {this.variant === 'checkbox' && (\n          <xv-data-table-cell width=\"1.98%\">\n            <xv-checkbox-v2></xv-checkbox-v2>\n          </xv-data-table-cell>\n        )}\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"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

@@ -1,21 +1,74 @@
 :host {
   --xv-data-table-border-width: 1px;
-  --xv-data-table-border-color: var(--border-subtle-01);
-  --xv-data-table-padding-x: var(--spacing-05);
-  --xv-data-table-padding-y: var(--spacing-05);
+  --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;
-  display: contents;
   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]) {
@@ -26,26 +79,26 @@
 }
 
 :host([size=xs]) {
-  --xv-data-table-padding-x: var(--spacing-02);
-  --xv-data-table-padding-y: var(--spacing-02);
+  --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);
-  --xv-data-table-padding-y: var(--spacing-03);
+  --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);
-  --xv-data-table-padding-y: var(--spacing-05);
+  --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);
-  --xv-data-table-padding-y: var(--spacing-06);
+  --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);
-  --xv-data-table-padding-y: var(--spacing-07);
+  --xv-data-table-padding-x: var(--spacing-06, 24px);
+  --xv-data-table-padding-y: var(--spacing-07, 32px);
 }

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

@@ -4,9 +4,10 @@ export class XvDataTable {
     constructor() {
         this.size = SIZE_VAR.MD;
         this.columnWidths = [];
+        this.hover = false;
     }
     render() {
-        return (h(Host, { key: '3a2756875f87f6567ff283eea651938490687cdd', class: "xv-data-table" }, h("table", { key: '1a19f09a2fdd28eee4428e0a4de23dea10fa81b6', role: "table" }, (this.label || this.description) && (h("caption", { key: 'cbedfcf8303442fa5b9f7464edc723deecf9fa90' }, this.label || this.description)), this.columnWidths.length > 0 && (h("colgroup", { key: '54761e043642758379753ac03c8066684b0dee0e' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("slot", { key: 'b7c01a7fc0ae0f078ba796635214c32eb15977ad' }))));
+        return (h(Host, { key: '207324db4e9adea03e0137788fa43f8e9a7eb677', class: "xv-data-table" }, h("caption", { key: 'f5925136510194c00db68b12ef921f6e68b56904' }, h("slot", { key: 'b0b40ae6031c154f75f84587c4fa54f2c86fb011', name: "title" })), h("div", { key: '69121d921fcdc8f1c82e44d7eede6cdcab9e22d4', class: "bar" }, h("div", { key: '6b3db04362ba12983581946f00a66738dee3c2da', class: "bar_batch" }, h("slot", { key: 'caac537802365f29fefb13ac7f2c3060849ac47e', name: "batch" })), h("div", { key: 'b918df57e54dca14d66dd8a14994ceab12ff7ad2', class: "bar_toolbar" }, h("slot", { key: 'a567d9d6258abf3b3ed888e5ecee3817962949f6', name: "toolbar" }))), h("table", { key: 'fd0e463d79710b09db9a6e5655279d6c6591ed2e', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: '05aa18155327d5ecb1c62081dc081efb1f3b8db3' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("slot", { key: 'f95cdd075cad05b53bf8e3cef85eccd908c1191f' }))));
     }
     static get is() { return "xv-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -48,13 +49,13 @@ export class XvDataTable {
                 "reflect": false,
                 "defaultValue": "SIZE_VAR.MD"
             },
-            "label": {
-                "type": "string",
-                "attribute": "label",
+            "block": {
+                "type": "boolean",
+                "attribute": "block",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -67,28 +68,28 @@ export class XvDataTable {
                 "setter": false,
                 "reflect": false
             },
-            "description": {
-                "type": "string",
-                "attribute": "description",
+            "columnWidths": {
+                "type": "unknown",
+                "attribute": "column-widths",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "(string | null)[]",
+                    "resolved": "string[]",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "defaultValue": "[]"
             },
-            "block": {
+            "hover": {
                 "type": "boolean",
-                "attribute": "block",
+                "attribute": "hover",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -96,25 +97,6 @@ export class XvDataTable {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "columnWidths": {
-                "type": "unknown",
-                "attribute": "column-widths",
-                "mutable": false,
-                "complexType": {
-                    "original": "(string | null)[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -122,9 +104,11 @@ export class XvDataTable {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[]"
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=xv-data-table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAMU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAI7B,iBAAY,GAAsB,EAAE,CAAC;KAoB9C;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB,8DAAO,IAAI,EAAC,OAAO;gBAChB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACnC,kEAAU,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAW,CACpD;gBACA,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBAED,8DAAQ,CACF,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() label?: string;\n  @Prop() description?: string;\n  @Prop() block?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <table role=\"table\">\n          {(this.label || this.description) && (\n            <caption>{this.label || this.description}</caption>\n          )}\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAOU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAE7B,iBAAY,GAAsB,EAAE,CAAC;QACrC,UAAK,GAAY,KAAK,CAAC;KA4BhC;IA1BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB;gBACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CACb;YACV,4DAAK,KAAK,EAAC,KAAK;gBACd,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBACN,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,8DAAO,IAAI,EAAC,OAAO;gBAChB,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBAED,8DAAQ,CACF,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Element() el: HTMLElement;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() block?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n  @Prop() hover: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <caption>\n          <slot name=\"title\" />\n        </caption>\n        <div class=\"bar\">\n          <div class=\"bar_batch\">\n            <slot name=\"batch\" />\n          </div>\n          <div class=\"bar_toolbar\">\n            <slot name=\"toolbar\" />\n          </div>\n        </div>\n        <table role=\"table\">\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js

@@ -21,7 +21,7 @@ export class XvDropdownItem {
         });
     }
     render() {
-        return (h(Host, { key: '74a8a783a58af3d074bf888e3f520214910761e7', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '7b404292d6992ca6c260c488ba8668f214741399' }), this.selected && h("span", { key: '46ab6ec0b6b699af0325924a42b51166640d079a', class: "checkmark" })));
+        return (h(Host, { key: '85ba648d8281168521c1ed8c4b0b861fb428ce8e', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '6c303d085e23e1ecfa433aefa22f02be1cd5711f' }), this.selected && h("span", { key: 'c555912f9727a0e42b09279b31fe3b3b740bf7eb', class: "checkmark" })));
     }
     componentWillLoad() {
         if (!this.value)

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

@@ -94,7 +94,7 @@ export class XvDropdown {
         this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
     }
     render() {
-        return (h(Host, { key: 'cf4b8675fda5fc256ecfa65392ce7d9b84e60001', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, h("label", { key: '6abb497a5433793d78fa6b97cf5352ad504f0701', class: "label" }, h("slot", { key: '79f5a85651877363fe9dacfd94a9fa9cf976427f', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'a59e782b561fd1211712c01c2cdd9b51179de50e', class: "label_info", message: this.info })), h("div", { key: '225fc111e3fd2d4859f25d9e89d576b6159397bb', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), h("svg", { key: '43f6747c6e9b62d50805850ab2a26bf7e394abd5', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: 'df561b1bd2769206ff430822e3bc2d3090aacb0c', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '29bc50da8263de51f8b4d699bccde8c827b10a55', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: '8c912b8acbd55f49f6626112a4f38890906ddf03', class: "helper" }, this.error || this.warning || this.helper))));
+        return (h(Host, { key: '556a488d40dfcf1510f183fefbbf9d9bd1d0be80', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, h("label", { key: '54550cb9b8a26cc4df4a55abc677bd3f5bb9730d', class: "label" }, h("slot", { key: '46270d1b0e6b5ee26a07aeaf318617c73e82cfdb', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'f3b7c09e3346dbaeb0fd720e20e4bbcd58bde7eb', class: "label_info", message: this.info })), h("div", { key: '4b4a2794ba78378cd89b3b2ad67bc66edbf4c52f', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), h("svg", { key: '7c79ee0d976229090c0c0a25d01d7beb9a0c3afc', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: 'a895b585e7750cf4a01f7bd0dff390e70f2c482c', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '846792bfd1683daeb3223fb68c3559543b540787', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: '741d4636d86a44091e4a4b275806f745ded156f7', class: "helper" }, this.error || this.warning || this.helper))));
     }
     componentWillLoad() {
         this.setDefaultValues();

package/dist/collection/components/xv-file-uploader/xv-file-uploader.js

@@ -79,10 +79,10 @@ export class XvFileUploader {
     }
     render() {
         var _a;
-        return (h(Host, { key: '92aef18b84c7ff27bffa4e08f277037b8c980269', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled } }, this.label && h("label", { key: 'a1249cbce402d895e28417f0ea3b7be0432939a5', class: "label" }, this.label), this.description && h("p", { key: '5c3000bcdeea9a0952f67e6f09b38f476eb5380d', class: "description" }, this.description), this.variant === 'button' ? (h("button", { disabled: this.disabled, class: "upload-btn", onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (h("div", { class: { 'drop-zone': true, active: this.dragActive }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: () => this.fileInput.click() }, this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.', ((_a = this.accept) === null || _a === void 0 ? void 0 : _a.length) > 0 && h("span", null, " (", this.accept.join(', '), ")"))), h("input", { key: '0b0d4765dacd6dd3d0a9afb5b761976018728502', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.map(type => `.${type}`).join(',') }), h("ul", { key: 'f6f1a14ab1d2a705018ffed46ff6b3439bcedd1b', class: "file-list" }, this.files.map((file, index) => {
+        return (h(Host, { key: '1105dfa28937f83f3508498ecf3b00b181f3f062', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled } }, this.label && h("label", { key: 'bb7aeb7744325dc15cee88e63672ab2f1cac48fa', class: "label" }, this.label), this.description && h("p", { key: '17d6076cf70f1d69b9d760992739f5f8ae571711', class: "description" }, this.description), this.variant === 'button' ? (h("button", { disabled: this.disabled, class: "upload-btn", onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (h("div", { class: { 'drop-zone': true, active: this.dragActive }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: () => this.fileInput.click() }, this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.', ((_a = this.accept) === null || _a === void 0 ? void 0 : _a.length) > 0 && h("span", null, " (", this.accept.join(', '), ")"))), h("input", { key: 'bc25da9c977df0452fd8946b160d7b89487a5aee', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.map(type => `.${type}`).join(',') }), h("ul", { key: '3d2b5a6505a70c4a14004f0e0f3c6da7213b0007', class: "file-list" }, this.files.map((file, index) => {
             var _a, _b;
             return (h("li", { class: { file: true, withError: !!(((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index])) } }, h("div", { class: "file_container" }, h("span", { class: "file_container_name" }, file.name), this._renderLoaderState(index)), this._renderError(index)));
-        })), this.error && (h("div", { key: 'aa38b9ddbcebdd48c166dcc1a007549b6665b718', class: "error-container" }, h("p", { key: 'a421c517fe2681b089ac13d88a4bca1c6edde44c', class: "error-container_primary" }, this.error)))));
+        })), this.error && (h("div", { key: '3918fcaf5c5660eb2a5553886e191e2969d81cb4', class: "error-container" }, h("p", { key: '26fcb672d89ec14e99b83dfc78712b72d9042d72', class: "error-container_primary" }, this.error)))));
     }
     _renderLoaderState(index) {
         var _a, _b, _c;

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

@@ -14,7 +14,7 @@ export class Xvfooter {
         }
     }
     render() {
-        return (h("footer", { key: '25f7acefd3d83e3f85547e0c3165eba04cae14bc' }, h("div", { key: 'df924fadef964c0736fc9d88de8e27f034e0da16', innerHTML: this.htmlContent })));
+        return (h("footer", { key: 'ded377d47464f3f171b99929f6517d4a2bc0be7b' }, h("div", { key: 'f1cfbd7b0277f073ed45a7be034bc86d60bf8880', innerHTML: this.htmlContent })));
     }
     static get is() { return "xv-footer"; }
     static get originalStyleUrls() {