xv-webcomponents 0.1.43 → 0.1.44

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator-item.js","sourceRoot":"","sources":["../../../../src/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,OAAO,uBAAuB;IALpC;QAO4B,WAAM,GAAyB,oBAAoB,CAAC,UAAU,CAAC;KAqB1F;IAnBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,EAAC,4BAA4B,EAAE,IAAI,EAAC;YAE3C,6DAAM,KAAK,EAAC,MAAM,GAAE;YACpB,6DAAM,KAAK,EAAC,MAAM;gBAChB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;oBACvD,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sLAAsL,GACxL,CACF,CACD;YACP,0DAAG,KAAK,EAAC,OAAO;gBAAC,8DAAO,CAAI,CACvB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport { PROGRESS_ITEM_STATUS } from '../_vars';\n\n@Component({\n  tag: 'xv-progress-indicator-v2-item',\n  styleUrl: 'xv-progress-indicator-item.scss',\n  shadow: true,\n})\nexport class XvProgressIndicatorItem {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: false }) status: PROGRESS_ITEM_STATUS = PROGRESS_ITEM_STATUS.NO_STARTED;\n\n  render() {\n    return (\n      <Host\n        status={this.status}\n        class={{'xv-progress-indicator-item': true}}\n      >\n        <span class=\"line\"/>\n        <span class=\"icon\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n                <path\n                  fill=\"currentColor\"\n                  d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"\n                />\n          </svg>\n        </span>\n        <p class=\"label\"><slot/></p>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,45 @@
+:host {
+  --progress-indicator-icon-size: 22px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-family: var(--ff-body, inherit);
+  overflow-x: auto;
+}
+
+:host([variant=horizontal]) ::slotted(xv-progress-indicator-v2-item) {
+  flex-direction: row;
+  column-gap: var(--gap-xs, 8px);
+  justify-content: flex-start;
+  padding-left: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+:host([size=xs]) {
+  --progress-indicator-icon-size: 14px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+}
+
+:host([size=sm]) {
+  --progress-indicator-icon-size: 16px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+}
+
+:host([size=md]) {
+  --progress-indicator-icon-size: 22px;
+  --progress-indicator-font-size: var(--fz-md, 14px);
+}
+
+:host([size=lg]) {
+  --progress-indicator-icon-size: 24px;
+  --progress-indicator-font-size: var(--fz-lg, 18px);
+}
+
+:host([size=xl]) {
+  --progress-indicator-icon-size: 32px;
+  --progress-indicator-font-size: var(--fz-xl, 20px);
+}

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

@@ -0,0 +1,157 @@
+import { Host, h } from "@stencil/core";
+import { PROGRESS_ITEM_STATUS, PROGRESS_VARIANTS } from "./_vars";
+import { SIZE_VAR } from "../../types/enum";
+import { forEach } from "../../utils/utils";
+export class XvProgressIndicator {
+    constructor() {
+        /**
+         * Current progress
+         * from 0 to 100
+         */
+        this.progress = 0;
+        /**
+         * Progress variant
+         * enum PROGRESS_VARIANTS
+         * possible option `horizontal`
+         */
+        this.variant = PROGRESS_VARIANTS.DEFAULT;
+        /**
+         * Size of progress
+         * enum SIZE_VAR
+         * possible options `XS | SM | MD | LG | XL`
+         */
+        this.size = SIZE_VAR.MD;
+    }
+    // Update 'xv-progress-indicator-item' done status
+    updateChildItems() {
+        const items = this.el.children;
+        const itemsCount = this.el.childElementCount;
+        const progressPerItem = 100 / itemsCount;
+        if (!items.length || !itemsCount)
+            return;
+        forEach(items, (item, index) => {
+            var _a;
+            const itemProgressStart = index * progressPerItem;
+            let status;
+            const localProgress = Math.min(Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1) * 100;
+            if (localProgress >= 100) {
+                status = PROGRESS_ITEM_STATUS.DONE;
+            }
+            else if (localProgress > 0) {
+                status = PROGRESS_ITEM_STATUS.IN_PROGRESS;
+            }
+            else {
+                status = PROGRESS_ITEM_STATUS.NO_STARTED;
+            }
+            // Set item current status
+            item.setAttribute('status', status);
+            // Update progress line
+            const line = (_a = item === null || item === void 0 ? void 0 : item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.line');
+            if (line)
+                line.style.width = `${localProgress}%`;
+        });
+    }
+    // Load initial done status
+    componentDidLoad() {
+        this.updateChildItems();
+    }
+    render() {
+        return (h(Host, { key: '05e84a5e734b88c4d2a3c2206e4e5ea75c0fc969', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '12dcb64216cfc45663d73d66bbd3225be005e897' })));
+    }
+    static get is() { return "xv-progress-indicator-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-progress-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-progress-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progress": {
+                "type": "number",
+                "attribute": "progress",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current progress\nfrom 0 to 100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "PROGRESS_VARIANTS",
+                    "resolved": "PROGRESS_VARIANTS.DEFAULT | PROGRESS_VARIANTS.HORIZONTAL",
+                    "references": {
+                        "PROGRESS_VARIANTS": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-progress-indicator/_vars.ts::PROGRESS_VARIANTS"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress variant\nenum PROGRESS_VARIANTS\npossible option `horizontal`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "PROGRESS_VARIANTS.DEFAULT"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of progress\nenum SIZE_VAR\npossible options `XS | SM | MD | LG | XL`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "progress",
+                "methodName": "updateChildItems"
+            }];
+    }
+}
+//# sourceMappingURL=xv-progress-indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-progress-indicator.js","sourceRoot":"","sources":["../../../src/components/xv-progress-indicator/xv-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,OAAO,mBAAmB;IALhC;QAOE;;;WAGG;QACsB,aAAQ,GAAW,CAAC,CAAC;QAC9C;;;;WAIG;QACK,YAAO,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAC/D;;;;WAIG;QACK,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;KA+CtC;IA7CC,kDAAkD;IAElD,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QAC7C,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;QAEzC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,UAAU;YAAE,OAAO;QAEzC,OAAO,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC7B,MAAM,iBAAiB,GAAG,KAAK,GAAG,eAAe,CAAC;YAClD,IAAI,MAA4B,CAAC;YACjC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CACtE,GAAG,GAAG,CAAC;YAER,IAAI,aAAa,IAAI,GAAG,EAAE,CAAC;gBACzB,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;YACrC,CAAC;iBAAM,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;gBAC7B,MAAM,GAAG,oBAAoB,CAAC,WAAW,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACN,MAAM,GAAG,oBAAoB,CAAC,UAAU,CAAC;YAC3C,CAAC;YAED,0BAA0B;YACzB,IAAoB,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAErD,uBAAuB;YACvB,MAAM,IAAI,GAAG,MAAC,IAAoB,aAApB,IAAI,uBAAJ,IAAI,CAAkB,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAgB,CAAC;YACtF,IAAI,IAAI;gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,aAAa,GAAG,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B;IAC3B,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE;YACpF,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Watch, Element } from '@stencil/core';\nimport { PROGRESS_ITEM_STATUS, PROGRESS_VARIANTS } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\nimport { forEach } from '../../utils/utils';\n\n@Component({\n  tag: 'xv-progress-indicator-v2',\n  styleUrl: 'xv-progress-indicator.scss',\n  shadow: true,\n})\nexport class XvProgressIndicator {\n  @Element() el: HTMLElement;\n  /**\n   * Current progress\n   * from 0 to 100\n   */\n  @Prop({ reflect: true }) progress: number = 0;\n  /**\n   * Progress variant\n   * enum PROGRESS_VARIANTS\n   * possible option `horizontal`\n   */\n  @Prop() variant: PROGRESS_VARIANTS = PROGRESS_VARIANTS.DEFAULT;\n  /**\n   * Size of progress\n   * enum SIZE_VAR\n   * possible options `XS | SM | MD | LG | XL`\n   */\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n\n  // Update 'xv-progress-indicator-item' done status\n  @Watch('progress')\n  updateChildItems() {\n    const items = this.el.children;\n    const itemsCount = this.el.childElementCount;\n    const progressPerItem = 100 / itemsCount;\n\n    if (!items.length || !itemsCount) return;\n\n    forEach(items, (item, index) => {\n      const itemProgressStart = index * progressPerItem;\n      let status: PROGRESS_ITEM_STATUS;\n      const localProgress = Math.min(\n        Math.max((this.progress - itemProgressStart) / progressPerItem, 0), 1\n      ) * 100;\n\n      if (localProgress >= 100) {\n        status = PROGRESS_ITEM_STATUS.DONE;\n      } else if (localProgress > 0) {\n        status = PROGRESS_ITEM_STATUS.IN_PROGRESS;\n      } else {\n        status = PROGRESS_ITEM_STATUS.NO_STARTED;\n      }\n\n      // Set item current status\n      (item as HTMLElement).setAttribute('status', status);\n\n      // Update progress line\n      const line = (item as HTMLElement)?.shadowRoot?.querySelector('.line') as HTMLElement;\n      if (line) line.style.width = `${localProgress}%`;\n    });\n  }\n\n  // Load initial done status\n  componentDidLoad() {\n    this.updateChildItems()\n  }\n\n  render() {\n    return (\n      <Host variant={this.variant} size={this.size} class={{ 'xv-progress-indicator': true }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+export const XV_EXPANDABLE_KEY = 'expandable';
+export const XV_TABLE_TAG = 'xv-table-v2';
+//# sourceMappingURL=_vars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-table/_vars.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC9C,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC","sourcesContent":["import { XV_SORT_DIR } from '../../types/enum';\n\nexport interface SelectRowDto {\n  name: string;\n  checked: boolean;\n  value?: string | number | object;\n  partial?: boolean;\n  header?: boolean;\n  expandable?: boolean;\n}\n\nexport const XV_EXPANDABLE_KEY = 'expandable';\nexport const XV_TABLE_TAG = 'xv-table-v2';\n\nexport interface XVTableSortDto {\n  name?: string;\n  value: XV_SORT_DIR;\n}\n"]}

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

@@ -0,0 +1,93 @@
+@charset "UTF-8";
+:host {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: var(--xv-table-padding-y) var(--xv-table-padding-x);
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: 0.16px;
+  transition: 0.25s ease-in-out background-color;
+}
+
+:host([multiline]) {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: initial;
+  padding-bottom: 1px;
+  padding-top: 0;
+  line-height: 1.2;
+}
+
+:host([align=left]) {
+  text-align: left;
+}
+
+:host([align=right]) {
+  text-align: right;
+}
+
+:host([align=center]) {
+  text-align: center;
+}
+
+: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-table/xv-table-cell/xv-table-cell.js

@@ -0,0 +1,160 @@
+import { Host, h } from "@stencil/core";
+import { forEach, uidGenerator } from "../../../utils/utils";
+import { XV_SORT_DIR } from "../../../types/enum";
+export class XvTableCell {
+    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({ name: this.name, value: this.sort });
+    }
+    ;
+    render() {
+        return (h(Host, { key: '81ba9b0d8bd1652b30259af7a177b27185c49dee' }, h("slot", { key: '5b0517d3001ba92944f2032307541d7db6eb7b27' })));
+    }
+    static get is() { return "xv-table-v2-cell"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-cell.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-cell.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiline": {
+                "type": "boolean",
+                "attribute": "multiline",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "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": true
+            },
+            "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": true
+            },
+            "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
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortChange",
+                "name": "sortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XVTableSortDto",
+                    "resolved": "XVTableSortDto",
+                    "references": {
+                        "XVTableSortDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::XVTableSortDto"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleSort",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-table-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-cell.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-cell/xv-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,OAAO,WAAW;IAStB,UAAU;QACR,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO;QACpC,IAAI,IAAI,GAAqB,IAAI,CAAC,IAAI,CAAC;QACvC,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;YAAE,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC;QAE9C,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC;YACrC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC;YAC1C,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;QAExC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;YAC/C,IAAI,IAAI,KAAK,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,YAAY,EAAE,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC;IAAA,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YAAC,8DAAQ,CAAO,CACtB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\nimport { XVTableSortDto } from '../_vars';\nimport { forEach, uidGenerator } from '../../../utils/utils';\nimport { XV_SORT_DIR } from '../../../types/enum';\n\n@Component({\n  tag: 'xv-table-v2-cell',\n  styleUrl: 'xv-table-cell.scss',\n  shadow: true,\n})\nexport class XvTableCell {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) multiline?: boolean;\n  @Prop({ reflect: true, mutable: true }) name?: string;\n  @Prop({ reflect: true }) align?: 'left' | 'right' | 'center';\n  @Prop({ reflect: true, mutable: true }) sort?: XV_SORT_DIR | '';\n  @Event({ eventName: 'sortChange' }) sortChange: EventEmitter<XVTableSortDto>;\n\n  @Listen('click')\n  handleSort() {\n    if (this.sort === undefined) return;\n    let sort: XV_SORT_DIR | '' = this.sort;\n    if (this.sort === '') sort = XV_SORT_DIR.NONE;\n\n    this.sort = sort === XV_SORT_DIR.NONE ?\n      XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?\n        XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;\n\n    forEach(this.el.parentElement.children, (cell) => {\n      if (cell !== this.el && cell.hasAttribute('sort')) {\n        cell.setAttribute('sort', 'none');\n      }\n    });\n\n    if (!this.name) this.name = uidGenerator();\n    this.sortChange.emit({ name: this.name, value: this.sort });\n  };\n\n  render() {\n    return (\n      <Host><slot /></Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+  position: relative;
+  transition: 0.25s ease-in-out background-color;
+}
+:host .expand-btn {
+  z-index: 9;
+  position: absolute;
+  left: max(10px, var(--xv-table-padding-x));
+  top: max(2px, var(--xv-table-padding-y) + 2px);
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: block;
+  width: 8.5px;
+  height: 8.5px;
+  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;
+}
+:host .expand-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+:host .expand-btn.open {
+  transform: rotate(-135deg);
+}
+:host .expandableContent {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
+  transition: 250ms ease max-height;
+}
+:host .expandableContent.open {
+  max-height: 600px;
+}
+:host ::slotted([slot=expandable]) {
+  display: grid;
+  align-items: center;
+}
+:host ::slotted(xv-table-v2-row),
+:host ::slotted([slot=expandable]) {
+  padding-inline-start: calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px);
+}
+:host ::slotted([disabled]) {
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+  user-select: none;
+}

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

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+import { XV_EXPANDABLE_KEY } from "../_vars";
+import { setAttr } from "../../../utils/utils";
+export class XvTableExpand {
+    constructor() {
+        this.open = false;
+        this.disabled = false;
+        this.handleExpand = () => {
+            this.open = !this.open;
+        };
+    }
+    render() {
+        return (h(Host, { key: '6176a4e0845dbae0f6e28b7a31110e8b2ce6b6d9' }, h("button", { key: 'a4d9b8ec62e9a791f24355cba0397af7c5ad8fa6', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '9d4d815a424de28794a334c1ffeac6613b3bf380', name: XV_EXPANDABLE_KEY }), h("div", { key: '4acce147075c142a356f3fcb5cbe9cc5ccaea4c0', class: { expandableContent: true, open: this.open } }, h("slot", { key: '0e46f8843b84ddd7bf362b3c5178373b466fb96e' }))));
+    }
+    componentDidLoad() {
+        setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
+    }
+    static get is() { return "xv-table-v2-expand"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-expand.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-expand.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "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": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-table-expand.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-expand.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-expand/xv-table-expand.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAO/C,MAAM,OAAO,aAAa;IAL1B;QAO0C,SAAI,GAAY,KAAK,CAAC;QACrC,aAAQ,GAAY,KAAK,CAAC;QAE3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC,CAAC;KAoBH;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B;YACF,6DAAM,IAAI,EAAE,iBAAiB,GAAI;YAEjC,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;gBAAE,8DAAQ,CAAM,CACnE,CACR,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport { XV_EXPANDABLE_KEY } from '../_vars';\nimport { setAttr } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-expand',\n  styleUrl: 'xv-table-expand.scss',\n  shadow: true,\n})\nexport class XvTableExpand {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  private handleExpand = () => {\n    this.open = !this.open;\n  };\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{ 'expand-btn': true, open: this.open }}\n          disabled={this.disabled}\n          onClick={this.handleExpand}\n        />\n        <slot name={XV_EXPANDABLE_KEY} />\n\n        <div class={{ expandableContent: true, open: this.open }}><slot /></div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);\n  }\n}\n"]}

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

@@ -0,0 +1,39 @@
+:host {
+  display: grid;
+  grid-template-columns: var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
+  border-bottom: 1px solid #E3E3E3;
+  border-right: 1px solid #E3E3E3;
+  border-left: 1px solid #E3E3E3;
+  min-height: var(--xv-table-min-height);
+  align-items: center;
+  align-content: center;
+  transition: 0.25s ease-in-out background-color;
+}
+:host .cell-control {
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([variant]) {
+  grid-template-columns: minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));
+}
+
+:host([hover]:not([header]):hover) {
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+
+:host([checked]) {
+  background-color: var(--layer-selected-01, #E3E3E3);
+}
+
+:host([checked]:hover) {
+  background-color: var(--layer-selected-hover-01, #DADADA);
+}
+
+:host([header]) {
+  background-color: var(--layer-accent-01, #F7F7F7);
+  box-shadow: 0 0 0 1px #E3E3E3 inset;
+  border-bottom: none;
+}