xv-webcomponents 0.1.43 → 0.1.46

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

@@ -0,0 +1,159 @@
+import { Host, h, Fragment } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvTable {
+    constructor() {
+        this.selected = new Map();
+        this.selectedCount = 0;
+    }
+    handleCheckedChange({ detail }) {
+        if (detail.header || detail.expandable)
+            return;
+        if (detail.checked) {
+            this.selected.set(detail.name, detail);
+        }
+        else {
+            this.selected.delete(detail.name);
+        }
+        this.selectedCount = this.selected.size;
+    }
+    setColsSizeTemplate() {
+        var _a;
+        if (!this.colsSize || !((_a = this.colsSize) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        this.el.style.setProperty('--xv-table-cols-template', this.colsSize
+            .map((v) => {
+            if (!v)
+                return 'minmax(0, 1fr)';
+            if (v === 'auto')
+                return 'minmax(0, auto)';
+            return `calc(${v} - ${50 / this.colsSize.length}px)`;
+        })
+            .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
+    }
+    render() {
+        return (h(Host, { key: 'f5b1e071eb6a77ab5996787a57f6c0dcb16e2db5', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '0ab62204e8ca9ee3be7bf02d9453169551afa320', name: "title" }, !!this.el.title && h("h2", { key: 'd068fa199d52eb6d03f6789c21b9772eeb613277', class: "xv-table-title" }, this.el.title)), h("slot", { key: '6341d71acc3a098d83d2bea92f75ff1401976c38', name: "toolbar" }), h("div", { key: 'ea3c38f9456de2e826a92a95beda1185b5c193da', class: "xv-table" }, h("div", { key: '1c1a95446e4a2f846161d91698e6da37a881fdad', class: "batch-actions" }, h(Fragment, { key: 'fc1a05dba097641e749691bef8a07bfe7941e511' }, h("div", { key: '3d727263feaec24b814649d32490a65030ca4272', class: "batch-actions_content" }, h("slot", { key: '2b03546395c0fb8a26baaa944f3cba9cf6b2e62b', name: "batch" })), h("p", { key: '54e0b63690449260e35cabd6731a01aee4e1a155', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: 'f4a9ac9b6639f0dd8ee5154ae1c94c990b7e6a01', class: "xv-table_wrapper" }, h("slot", { key: '295e69ac1e3f4ee20f95e80c05bac87556830fc9' }), h("slot", { key: '666df67a1dfb02d252516f1a41f771b659d9f06d', name: "footer" })), !!this.loading && (h("div", { key: '436c99696fbf79d290f794dbd12b7530c4a6fe88', class: "xv-table_loading" }, h("xv-loader-v2", { key: '6431bdb466cee31d6ac92dd32e74df9f586450b9', size: SIZE_VAR.LG }))))));
+    }
+    componentWillLoad() {
+        this.setColsSizeTemplate();
+    }
+    static get is() { return "xv-table-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "hover": {
+                "type": "boolean",
+                "attribute": "hover",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "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": true
+            },
+            "colsSize": {
+                "type": "unknown",
+                "attribute": "colssize",
+                "mutable": false,
+                "complexType": {
+                    "original": "(string | null)[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {},
+            "selectedCount": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colsSize",
+                "methodName": "setColsSizeTemplate"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "checkedChange",
+                "method": "handleCheckedChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-table.js.map

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

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

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

@@ -0,0 +1,11 @@
+export var TAB_TAGS;
+(function (TAB_TAGS) {
+    TAB_TAGS["TABS"] = "xv-tabs-v2";
+    TAB_TAGS["TAB"] = "xv-tab-v2";
+})(TAB_TAGS || (TAB_TAGS = {}));
+export var TABS_VATIANT;
+(function (TABS_VATIANT) {
+    TABS_VATIANT["DEFAULT"] = "";
+    // other variants will be here
+})(TABS_VATIANT || (TABS_VATIANT = {}));
+//# sourceMappingURL=_vars.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/_vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;IAClB,+BAAmB,CAAA;IACnB,6BAAiB,CAAA;AACnB,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,4BAAY,CAAA;IACZ,8BAA8B;AAChC,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB","sourcesContent":["export enum TAB_TAGS {\n  TABS = 'xv-tabs-v2',\n  TAB = 'xv-tab-v2'\n}\n\nexport enum TABS_VATIANT {\n  DEFAULT = '',\n  // other variants will be here\n}\n"]}

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

@@ -0,0 +1,105 @@
+.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: block;
+}
+
+:host([loading]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}

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

@@ -0,0 +1,106 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../../types/enum";
+export class XvTab {
+    constructor() {
+        this.disabled = false;
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { key: '5ec34d69de173b64d3a477e4005f27868cde3a5f', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+    }
+    static get is() { return "xv-tab-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "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"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "any",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-tab.js.map

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

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

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

@@ -0,0 +1,228 @@
+.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-tabs) {
+  display: flex;
+  flex-direction: column;
+}
+:host(.xv-tabs) .tab-headers {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+}
+:host(.xv-tabs) .tab-headers_container {
+  display: flex;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+}
+:host(.xv-tabs) .tab-headers_container::-webkit-scrollbar {
+  display: none;
+}
+:host(.xv-tabs) .tab-headers_tab {
+  background: none;
+  padding: 11px var(--gap-md, 16px);
+  cursor: pointer;
+  font: inherit;
+  transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;
+  position: relative;
+  border: 2px solid transparent;
+  border-bottom-color: var(--border-border-subtle-01, #D1D1D1);
+  background-blend-mode: multiply;
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  height: 40px;
+  white-space: nowrap;
+}
+:host(.xv-tabs) .tab-headers_tab:after {
+  content: "";
+  position: absolute;
+  transition: background-color 0.3s ease, width 0.3s ease;
+  top: 100%;
+  left: 0;
+  right: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--interactive-01, #273435);
+}
+:host(.xv-tabs) .tab-headers_tab:focus-visible {
+  outline: none;
+  border: 2px solid var(--interactive-01, #273435);
+}
+:host(.xv-tabs) .tab-headers_tab:hover {
+  border-bottom-color: var(--border-strong-01, #8B8B8B);
+}
+:host(.xv-tabs) .tab-headers_tab.active {
+  color: var(--text-primary, #333);
+  font-weight: 700;
+}
+:host(.xv-tabs) .tab-headers_tab.active:after {
+  width: 100%;
+}
+:host(.xv-tabs) .tab-headers_tab.active:focus-visible {
+  border-color: var(--interactive-01, #273435);
+}
+:host(.xv-tabs) .tab-headers_tab:disabled {
+  color: var(--text-on-color-disabled, #8B8B8B);
+  border-bottom-color: var(--border-disabled, #D1D1D1);
+  cursor: not-allowed;
+}
+:host(.xv-tabs) .tab-headers_tab:disabled:after {
+  background-color: var(--border-disabled, #D1D1D1);
+}
+:host(.xv-tabs) .tab-headers_btn {
+  outline: none;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: 0.25s ease-in-out opacity;
+}
+:host(.xv-tabs) .tab-headers_btn:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 5px;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+:host(.xv-tabs) .tab-headers_btn:active {
+  opacity: 0.3;
+}
+:host(.xv-tabs) .tab-headers_btn.prev:before {
+  transform: translate(-50%, -50%) rotate(135deg);
+}
+:host(.xv-tabs) .tab-headers_btn.next:before {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+:host(.xv-tabs) .tab-content-wrapper {
+  position: relative;
+  overflow: hidden;
+  padding: var(--gap-md, 16px) 0;
+}
+:host(.xv-tabs) ::slotted(xv-tab-v2) {
+  display: none;
+  width: 100%;
+  pointer-events: none;
+}
+:host(.xv-tabs) ::slotted(xv-tab-v2.active) {
+  display: contents;
+  pointer-events: auto;
+}
+:host(.xv-tabs) .xv-tabs_empty {
+  display: block;
+  text-align: center;
+  margin: 20px auto;
+  font-size: var(--fz-xl);
+  color: var(--text-primary);
+}
+
+:host([loading]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}