npm - xv-webcomponents - Versions diffs - 0.1.44 → 0.1.46 - Mend

xv-webcomponents 0.1.44 → 0.1.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.css CHANGED Viewed

@@ -1,4 +1,99 @@
 @charset "UTF-8";
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
 :host {
   display: table-cell;
   border-style: solid;

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

@@ -8,9 +8,9 @@ export class XvDataTableCell {
         let sort = this.sort;
         if (this.sort === '')
             sort = XV_SORT_DIR.NONE;
-        this.sort = sort === XV_SORT_DIR.NONE ?
-            XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
-            XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
+        this.sort = sort === XV_SORT_DIR.NONE || sort === XV_SORT_DIR.DESC
+            ? XV_SORT_DIR.ASC
+            : XV_SORT_DIR.DESC;
         forEach(this.el.parentElement.children, (cell) => {
             if (cell !== this.el && cell.hasAttribute('sort')) {
                 cell.setAttribute('sort', 'none');
@@ -22,10 +22,15 @@ export class XvDataTableCell {
     }
     ;
     render() {
-        return (h(Host, { key: 'bfc254739fa56d47210d43d134ba6c3534c5e567', role: "cell", style: { width: this.width }, class: {
+        return (h(Host, { key: 'ead02f35aaaf6e9699fd45dc6e7faa8052734a04', role: "cell", style: { width: this.width }, class: {
                 multiline: this.multiline !== undefined,
                 [`align--${this.align}`]: !!this.align
-            } }, !this.multiline || isNaN(this.multiline) ? h("slot", null) : (h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, h("slot", null)))));
+            } }, !this.multiline || isNaN(this.multiline) ? this.__renderWithTooltip() : (h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, this.__renderWithTooltip()))));
+    }
+    __renderWithTooltip() {
+        if (!this.tooltip)
+            return h("slot", null);
+        return (h("xv-tooltip-v2", { dashed: true, position: "top-start", message: this.tooltip }, h("slot", null)));
     }
     static get is() { return "xv-data-table-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -141,6 +146,25 @@ export class XvDataTableCell {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "attribute": "tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

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

	@@ -1 +1 @@
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"]}
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;IAY1B,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,IAAI,IAAI,KAAK,WAAW,CAAC,IAAI;YAChE,CAAC,CAAC,WAAW,CAAC,GAAG;YACjB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;QAErB,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,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CACvE,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,EAAE,IAC3E,IAAI,CAAC,mBAAmB,EAAE,CACvB,CACP,CACI,CACR,CAAC;IACJ,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,eAAQ,CAAA;QAElC,OAAO,CACL,qBACE,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO;YACtB,eAAQ,CAAgB,CAC1B,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 @Prop() tooltip?: string;\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 \|\| sort === XV_SORT_DIR.DESC\n ? XV_SORT_DIR.ASC\n : XV_SORT_DIR.DESC;\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) ? this.__renderWithTooltip() : (\n <div class=\"line-clamp\" style={{ ['-webkit-line-clamp']: `${this.multiline}` }}>\n {this.__renderWithTooltip()}\n </div>\n )}\n </Host>\n );\n }\n\n private __renderWithTooltip() {\n if (!this.tooltip) return <slot />\n\n return (\n <xv-tooltip-v2\n dashed={true}\n position=\"top-start\"\n message={this.tooltip}\n ><slot /></xv-tooltip-v2>\n );\n }\n}\n"]}

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

@@ -1,3 +1,98 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
 :host([collapsed]) {
   display: none;
 }

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

@@ -15,7 +15,7 @@ export class XvDataTableCollapse {
         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' })));
+        return (h(Host, { key: '0ce4a6aaa788b562e88e72ab386aef92f16bdd4a', id: this.el.id, part: "xv-collapse", class: this.el.className, collapsed: this.collapsed, expanded: !this.collapsed }, h("slot", { key: 'a3759bcabc9786c810747d568062de74429dde89' })));
     }
     static get is() { return "xv-data-table-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,98 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
 :host {
   display: table-row;
   background-color: var(--xv-data-table-row-bg, transparent);
@@ -43,11 +138,11 @@
   display: flex;
 }
-:host(.hover:not([header]):hover) {
+:host(.hover:not(.header):hover) {
   background-color: var(--layer-hover-01, #E9E9E9);
 }
-:host([header]) {
+:host(.header) {
   background-color: var(--layer-accent-01, #F7F7F7);
 }
@@ -59,13 +154,15 @@
   background-color: var(--layer-selected-hover-01, #DADADA);
 }
-:host([footer]),
-:host([footer]:hover),
-:host([footer].hover),
-:host([footer].hover:hover) {
+:host(.footer),
+:host(.footer:hover),
+:host(.footer.hover),
+:host(.footer.hover:hover) {
   background-color: var(--layer-accent-02, #E3E3E3);
 }
-:host([disabled]) {
+:host(.disabled:not(.header):not(.footer)) {
   opacity: 0.5;
+  cursor: not-allowed;
+  user-select: none;
 }

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

@@ -40,14 +40,20 @@ export class XvDataTableRow {
                 name: this.name,
                 value: this.value,
                 partial: this.partial,
-                header: this.header,
-                footer: this.footer,
+                header: this.el.slot === 'header',
+                footer: this.el.slot === '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 })));
+        return (h(Host, { key: '9c09bb7feded09ff44d27a8e3ca6fe8629a1df10', role: "row", part: "xv-row", class: {
+                checked: this.checked,
+                hover: this.hover,
+                disabled: this.disabled,
+                header: this.el.slot === 'header' || !!this.header,
+                footer: this.el.slot === 'footer' || !!this.footer,
+            } }, (!!this.variant || this.collapsable) && (h("xv-data-table-cell", { key: '2210bbfc7a7990b5637ce927fedf534231dd2dcf', width: !!this.variant ? '16px' : '0', class: "cell-control" }, !!this.collapse && (h("button", { key: 'e1b116151cc85737793807d9b30bc43bffe26741', class: { 'cell-control_collapse': true, open: !this.collapsed }, onClick: this.collapseClick })), this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '39e63d58e9bc5e03c338631aeb40c3145a67788c', 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: 'c9c8c2af8f8c95d845cc5194acf84ba2584c7481', onSlotchange: this.setInitialState })));
     }
     static get is() { return "xv-data-table-row"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +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,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAoB,MAAM,UAAU,CAAC;AAO/D,MAAM,OAAO,cAAc;IAL3B;QAW2B,YAAO,GAAY,KAAK,CAAC;QACzB,YAAO,GAAY,KAAK,CAAC;QACzB,UAAK,GAAY,KAAK,CAAC;QACxC,WAAM,GAAY,KAAK,CAAC;QACxB,WAAM,GAAY,KAAK,CAAC;QACxB,aAAQ,GAAY,KAAK,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAKzB,cAAS,GAAY,KAAK,CAAC;QAI5B,kBAAa,GAAG,KAAK,IAAI,EAAE;;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAE/C,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;YACjC,MAAM,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA,CAAC;QACtD,CAAC,CAAA;QAEO,oBAAe,GAAG,GAAG,EAAE;;YAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,yBAAyB,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAChG,IAAI,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,YAAY,CAAC,WAAW,CAAC,CAAC;YAC9D,CAAC;YAED,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;gBACjD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC,CAAA;QAEO,wBAAmB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAwB,EAAE,EAAE;YAC1E,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO;gBAAE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACrD,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE,CAAC;YAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBACd,OAAO;gBACP,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,MAAM,EAAE,IAAI,CAAC,~~MAAM~~;~~gBACnB~~,MAAM,EAAE,IAAI,CAAC,~~MAAM~~;~~gBACnB~~,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;aAC9B,CAAC,CAAC;QACL,CAAC,CAAC;~~KA2BH~~;~~IAzBC~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,~~qDAAC~~,IAAI,EAAC,KAAK,~~EAAC~~,IAAI,EAAC,QAAQ,~~EAAC~~,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,~~OAAO~~,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,~~EAAE~~;~~YAC/E~~,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACvC,2EAAoB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,EAAC,cAAc;gBAC3E,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClB,+DAAQ,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,GAAW,CAChH;gBACA,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,CAC9B,uEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,mBAAmB,EACvC,KAAK,EAAC,uBAAuB,GAAkB,CAClD,CACkB,CACtB;YACD,6DAAM,YAAY,EAAE,IAAI,CAAC,eAAe,GAAI,CACvC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
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.el.slot === 'header',\n footer: this.el.slot === 'footer',\n expandable: !!this.collapseEl,\n });\n };\n\n render() {\n return (\n <Host\n role=\"row\"\n part=\"xv-row\"\n class={{\n checked: this.checked,\n hover: this.hover,\n disabled: this.disabled,\n header: this.el.slot === 'header' \|\| !!this.header,\n footer: this.el.slot === 'footer' \|\| !!this.footer,\n }}>\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 CHANGED Viewed

@@ -1,4 +1,100 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
 :host {
+  --xv-data-table-min-height: 51.11px;
   --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);
@@ -12,7 +108,7 @@
   line-height: 18px;
   letter-spacing: 0.16px;
 }
-@media screen and (max-width: 980px) {
+@media screen and (max-width: 1180px) {
   :host {
     display: block;
     position: relative;
@@ -21,12 +117,13 @@
     scrollbar-color: var(--layer-accent-03) transparent;
   }
   :host ::slotted([slot=title]), :host > table {
-    min-width: 1000px;
+    min-width: 1180px;
   }
 }
 :host .bar {
   position: sticky;
   left: 0;
+  z-index: 10;
 }
 :host .bar_batch {
   position: absolute;
@@ -70,6 +167,19 @@
 :host > caption {
   display: contents;
 }
+:host .loading {
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--xv-data-table-min-height, 51.11px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+}
 :host([block]) {
   width: 100%;

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

@@ -7,7 +7,7 @@ export class XvDataTable {
         this.hover = false;
     }
     render() {
-        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' }))));
+        return (h(Host, { key: '1a8dba81544ccb3a0881cd2d1573ee4000269d12', class: "xv-data-table" }, h("caption", { key: 'bc5c9defcb9541c7b95cbf4f1a3dbed563ff34aa' }, h("slot", { key: '5deafd8370e965164f4cc242e12e9a14120ec07b', name: "title" })), h("div", { key: '8665b876dcad814e4f758968fc5cc69726c12d74', class: "bar" }, h("div", { key: 'dce555dbfaac502afd04b253e431001beeb9e78e', class: "bar_batch" }, h("slot", { key: '48c79bee9b1e02eaff0e5ec12a5e49a1eea40f84', name: "batch" })), h("div", { key: 'a6b242b9c095221be3e8a93bdd1d911a3683c08d', class: "bar_toolbar" }, h("slot", { key: 'e651e2dc0886251743d2d2de68ad6233420405e5', name: "toolbar" }))), h("table", { key: '411a552a506abf324be71e1ab1e59c7fdcfb5373', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: 'dccdffbda2c37ad60ad066c9fc04a3cf5321ced1' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("thead", { key: '365e8597c85c9c2482041093caa097cef826f0e6' }, h("slot", { key: '5c5efeba7f80a428c24608d6420d0a7705453db4', name: "header" })), h("tbody", { key: '3125e64b5488d9210d671d76223bfc715eae376c' }, h("slot", { key: '926c9406e2fd63e64a5872eb33cbcb9c59af9613' })), h("tfoot", { key: 'a62e2c69d7bf4cfbea88ee3bdae99050eb77c42a' }, h("slot", { key: '9d0a2dedadc5082f5f3aae6a658e755cc34e69b0', name: "footer" }))), !!this.loading && (h("div", { key: '59780110176efb21d4cff6f820826a62ea59404c', class: "loading" }, h("xv-loader-v2", { key: 'e4fe3baec8de82403e3b109f6fe02899388e296a', size: SIZE_VAR.LG })))));
     }
     static get is() { return "xv-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -68,6 +68,25 @@ export class XvDataTable {
                 "setter": false,
                 "reflect": false
             },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "columnWidths": {
                 "type": "unknown",
                 "attribute": "column-widths",