xv-webcomponents 0.1.41 → 0.1.42

package/dist/cjs/xv-webcomponents.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["xv-breadcrumbs-v2.cjs",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_33.cjs",[[1,"xv-data-table-row",{"variant":[1]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040,"loading-states"],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-data-table",{"size":[1],"label":[1],"description":[1],"block":[4],"columnWidths":[16,"column-widths"]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"openModal":[64],"closeModal":[64]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-toggle-tip",{"open":[1540],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-data-table-cell",{"name":[1],"multiline":[2],"width":[1]}],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[4,"xv-tooltip-v2",{"message":[1],"position":[1],"visible":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[65,"xv-button-v2",{"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
+  return index.bootstrapLazy([["xv-breadcrumbs-v2.cjs",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_34.cjs",[[1,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040,"loading-states"],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-data-table",{"size":[1],"block":[4],"columnWidths":[16,"column-widths"],"hover":[4]}],[1,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"openModal":[64],"closeModal":[64]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-toggle-tip",{"open":[1540],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[2],"width":[1],"align":[1]},[[0,"click","handleSort"]]],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[4,"xv-tooltip-v2",{"message":[1],"position":[1],"visible":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[65,"xv-button-v2",{"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -8,6 +8,7 @@
     "components/xv-checkbox/xv-checkbox.js",
     "components/xv-data-table/xv-data-table.js",
     "components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js",
+    "components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js",
     "components/xv-data-table/xv-data-table-row/xv-data-table-row.js",
     "components/xv-dropdown/xv-dropdown.js",
     "components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js",

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

@@ -0,0 +1,3 @@
+export const XV_DATA_TABLE_TAG = 'xv-data-table';
+export const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';
+//# sourceMappingURL=_vars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/_vars.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CAAC","sourcesContent":["\nexport interface XvDataTableCheck {\n  name: string;\n  checked: boolean;\n  value?: string | number | object;\n  partial?: boolean;\n  header?: boolean;\n  footer?: boolean;\n  expandable?: boolean;\n}\n\nexport const XV_DATA_TABLE_TAG = 'xv-data-table';\nexport const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';\n"]}

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

@@ -1,7 +1,11 @@
+@charset "UTF-8";
 :host {
   display: table-cell;
   border-style: solid;
-  border-width: var(--xv-data-table-border-width, 0);
+  border-left-width: 0;
+  border-right-width: 0;
+  border-top-width: var(--xv-data-table-border-width, 0);
+  border-bottom-width: var(--xv-data-table-border-width, 0);
   border-color: var(--xv-data-table-border-color, transparent);
   padding-inline: var(--xv-data-table-padding-x, 0);
   padding-block: var(--xv-data-table-padding-y, 0);
@@ -27,4 +31,60 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+:host([sort]) {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+:host([sort]):before, :host([sort]):after {
+  font-size: 12px;
+  line-height: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  pointer-events: none;
+  transition: 350ms ease-in-out opacity;
+  opacity: 0;
+}
+:host([sort]):before {
+  content: "▲";
+  top: 50%;
+  transform: translateY(calc(-50% - 5px));
+}
+:host([sort])::after {
+  content: "▼";
+  top: 50%;
+  transform: translateY(calc(-50% + 5px));
+}
+
+:host([sort]:hover) {
+  background-color: var(--layer-accent-hover-01, #E3E3E3);
+}
+:host([sort]:hover)::before, :host([sort]:hover)::after {
+  opacity: 1;
+}
+
+:host([sort=asc]) {
+  background-color: var(--layer-accent-active-01, #D1D1D1);
+}
+:host([sort=asc])::before {
+  opacity: 1;
+}
+:host([sort=asc])::after {
+  display: none;
+}
+
+:host([sort=desc]) {
+  background-color: var(--layer-accent-active-01, #D1D1D1);
+}
+:host([sort=desc])::before {
+  display: none;
+}
+:host([sort=desc])::after {
+  opacity: 1;
 }

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

@@ -1,7 +1,31 @@
 import { h, Host } from "@stencil/core";
+import { forEach, uidGenerator } from "../../../utils/utils";
+import { XV_SORT_DIR } from "../../../types/enum";
 export class XvDataTableCell {
+    handleSort() {
+        if (this.sort === undefined)
+            return;
+        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;
+        forEach(this.el.parentElement.children, (cell) => {
+            if (cell !== this.el && cell.hasAttribute('sort')) {
+                cell.setAttribute('sort', 'none');
+            }
+        });
+        if (!this.name)
+            this.name = uidGenerator();
+        this.sortChange.emit(this.sort);
+    }
+    ;
     render() {
-        return (h(Host, { key: 'c505212113c232e8e4aca82338f6f799e26e943b', role: "cell", style: { width: this.width }, class: { multiline: this.multiline !== undefined } }, !this.multiline || isNaN(this.multiline) ? h("slot", null) : (h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, h("slot", null)))));
+        return (h(Host, { key: 'bfc254739fa56d47210d43d134ba6c3534c5e567', 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)))));
     }
     static get is() { return "xv-data-table-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -20,7 +44,7 @@ export class XvDataTableCell {
             "name": {
                 "type": "string",
                 "attribute": "name",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -36,6 +60,31 @@ export class XvDataTableCell {
                 "setter": false,
                 "reflect": false
             },
+            "sort": {
+                "type": "string",
+                "attribute": "sort",
+                "mutable": true,
+                "complexType": {
+                    "original": "XV_SORT_DIR | ''",
+                    "resolved": "\"\" | XV_SORT_DIR.ASC | XV_SORT_DIR.DESC | XV_SORT_DIR.NONE",
+                    "references": {
+                        "XV_SORT_DIR": {
+                            "location": "import",
+                            "path": "../../../types/enum",
+                            "id": "src/types/enum.ts::XV_SORT_DIR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "multiline": {
                 "type": "number",
                 "attribute": "multiline",
@@ -73,8 +122,61 @@ export class XvDataTableCell {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "align": {
+                "type": "string",
+                "attribute": "align",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'center'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "sortChange",
+                "name": "sortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XV_SORT_DIR",
+                    "resolved": "XV_SORT_DIR.ASC | XV_SORT_DIR.DESC | XV_SORT_DIR.NONE",
+                    "references": {
+                        "XV_SORT_DIR": {
+                            "location": "import",
+                            "path": "../../../types/enum",
+                            "id": "src/types/enum.ts::XV_SORT_DIR"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleSort",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=xv-data-table-cell.js.map

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

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

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

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

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

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

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

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

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

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