xv-webcomponents 0.1.30 → 0.1.32

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

@@ -1,3 +1,10 @@
 :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

@@ -1,10 +1,12 @@
 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: 'b3991bf63fb73f2c39670477652dfa5b40630126', disabled: this.disabled }, h("slot", { key: 'a5dd5a983a13e97be7d925de669461226dc296c0' }));
+        return (h(Host, { key: '82d797fe902cd4dab29cf094485aad742835e6b4', 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"; }
@@ -37,7 +39,7 @@ export class XvTab {
                 "getter": false,
                 "setter": false,
                 "attribute": "label",
-                "reflect": false
+                "reflect": true
             },
             "disabled": {
                 "type": "boolean",
@@ -56,8 +58,47 @@ export class XvTab {
                 "getter": false,
                 "setter": false,
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
             }
         };
     }

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

@@ -1 +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;AAOzD,MAAM,OAAO,KAAK;IALlB;QAOU,aAAQ,GAAY,KAAK,CAAC;KAKnC;IAHC,MAAM;QACJ,OAAO,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAAE,8DAAQ,CAAO,CAAC;IACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xv-tab-v2',\n  styleUrl: 'xv-tab.scss',\n  shadow: true,\n})\nexport class XvTab {\n  @Prop() label: string;\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return <Host disabled={this.disabled}><slot /></Host>;\n  }\n}\n"]}
+{"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

@@ -5,7 +5,7 @@
 :host(.xv-tabs) .tab-headers {
   display: flex;
 }
-:host(.xv-tabs) .tab-headers button {
+:host(.xv-tabs) .tab-headers_tab {
   background: none;
   padding: 11px var(--gap-md, 16px);
   cursor: pointer;
@@ -23,7 +23,7 @@
   height: 40px;
   white-space: nowrap;
 }
-:host(.xv-tabs) .tab-headers button:after {
+:host(.xv-tabs) .tab-headers_tab:after {
   content: "";
   position: absolute;
   transition: background-color 0.3s ease, width 0.3s ease;
@@ -34,46 +34,94 @@
   height: 2px;
   background-color: var(--interactive-01, #273435);
 }
-:host(.xv-tabs) .tab-headers button:focus {
+:host(.xv-tabs) .tab-headers_tab:focus {
   outline: none;
   border: 2px solid var(--border-border-subtle-01, #D1D1D1);
 }
-:host(.xv-tabs) .tab-headers button:hover {
+:host(.xv-tabs) .tab-headers_tab:hover {
   border-bottom-color: var(--border-strong-01, #8B8B8B);
 }
-:host(.xv-tabs) .tab-headers button.active {
+:host(.xv-tabs) .tab-headers_tab.active {
   color: var(--text-primary, #333);
   font-weight: 700;
 }
-:host(.xv-tabs) .tab-headers button.active:after {
+:host(.xv-tabs) .tab-headers_tab.active:after {
   width: 100%;
 }
-:host(.xv-tabs) .tab-headers button.active:focus {
+:host(.xv-tabs) .tab-headers_tab.active:focus {
   border-color: var(--interactive-01, #273435);
 }
-:host(.xv-tabs) .tab-headers button:disabled {
+: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 button:disabled:after {
+: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;
-  transition: height 0.3s ease;
-  padding: var(--gap-md, 16px);
+  padding: var(--gap-md, 16px) 0;
 }
 :host(.xv-tabs) ::slotted(xv-tab-v2) {
   position: absolute;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  max-height: 0;
+  transition: max-height 0.5s ease;
   width: 100%;
   pointer-events: none;
 }
 :host(.xv-tabs) ::slotted(xv-tab-v2.active) {
   position: relative;
   opacity: 1;
+  overflow-y: auto;
   pointer-events: auto;
+  max-height: 1000px;
+}
+: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;
 }

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { TAB_TAGS, TABS_VATIANT } from "./_vars";
+import { SIZE_VAR } from "../../types/enum";
 export class XvTabs {
     constructor() {
         /**
@@ -10,54 +11,51 @@ export class XvTabs {
          * Variant of tabs from TABS_VATIANT enum
          */
         this.variant = TABS_VATIANT.DEFAULT;
-        /**
-         * for animate the tab content
-         */
-        this.height = 0;
         /**
          * local variable for tab labels collection
          */
         this.tabElements = [];
-    }
-    /**
-     * Watch active tab changes to animate content height
-     */
-    onActiveTabChanged() {
-        this.setHeight();
-    }
-    collectTabs() {
-        if (!this.tabElements.length) {
-            this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
-        }
+        this.collectTabs = () => {
+            if (!this.tabElements.length) {
+                this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
+                this.tabElements.forEach((tab) => {
+                    if (tab.hasAttribute('name') && !this.active) {
+                        this.active = tab.getAttribute('name');
+                    }
+                });
+            }
+        };
     }
     updateTabClasses() {
         this.tabElements.forEach((tab, i) => {
-            tab.classList.toggle('active', i === this.active);
-        });
-    }
-    setHeight() {
-        requestAnimationFrame(() => {
-            var _a;
-            const tab = this.tabElements[this.active];
-            if (tab) {
-                const content = (_a = tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.host;
-                this.height = (content === null || content === void 0 ? void 0 : content.scrollHeight) || 0;
-            }
+            tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
         });
     }
-    handleTabClick(index) {
-        if (index === this.active)
+    handleTabClick(active) {
+        if (active === this.active)
             return;
-        this.active = index;
-        this.setHeight();
-        this.tabSelect.emit(this.active);
+        this.active = active;
+        this.activeChange.emit(Number(this.active) || this.active);
+    }
+    setTab(count = 1) {
+        const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
+        const tab = this.tabElements[currentIdx + count];
+        if (tab && !(tab === null || tab === void 0 ? void 0 : tab.hasAttribute('disabled'))) {
+            this.active = tab.getAttribute('name') || `${currentIdx + count}`;
+        }
     }
     render() {
-        return (h(Host, { key: '490001d8e74c759e11a2fc99c545d0a3429465f6', class: "xv-tabs", variant: this.variant }, h("div", { key: 'bd5210a9e26775c56b14fb4d0a330ed472033403', class: "tab-headers", role: "tablist" }, this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: { active: index === this.active }, onClick: () => this.handleTabClick(index) }, tab.getAttribute('label') || `Tab ${index + 1}`)))), h("div", { key: '0e15189ae37d5ac1431545df44a4c6500694a2fc', class: "tab-content-wrapper", style: { height: `${this.height}px` }, role: "tabpanel", tabindex: -1 }, h("slot", { key: '18dc32e8d6f6576b355786d6c959582df87a59b5' }))));
+        var _a, _b, _c;
+        if (this.loading) {
+            return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
+        }
+        return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
+                'tab-headers_tab': true,
+                active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
+            }, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
     }
     componentWillLoad() {
-        this.collectTabs();
-        this.setHeight();
+        // this.collectTabs();
     }
     componentDidRender() {
         this.updateTabClasses();
@@ -77,11 +75,11 @@ export class XvTabs {
     static get properties() {
         return {
             "active": {
-                "type": "number",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | string",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -96,6 +94,25 @@ export class XvTabs {
                 "reflect": true,
                 "defaultValue": "0"
             },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loader"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": true
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -121,18 +138,56 @@ export class XvTabs {
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "TABS_VATIANT.DEFAULT"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message when have no tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "empty-message",
+                "reflect": false
+            },
+            "showArrows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message when have no tabs"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-arrows",
+                "reflect": true
             }
         };
     }
     static get states() {
         return {
-            "height": {}
+            "tabElements": {}
         };
     }
     static get events() {
         return [{
-                "method": "tabSelect",
-                "name": "tabSelect",
+                "method": "activeChange",
+                "name": "activeChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -141,18 +196,12 @@ export class XvTabs {
                     "text": "Emit event to outside"
                 },
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | string",
+                    "resolved": "number | string",
                     "references": {}
                 }
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "active",
-                "methodName": "onActiveTabChanged"
-            }];
-    }
 }
 //# sourceMappingURL=xv-tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Watch, Prop, Event, EventEmitter } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\n\n@Component({\n  tag: 'xv-tabs-v2',\n  styleUrl: 'xv-tabs.scss',\n  shadow: true,\n})\nexport class XvTabs {\n  @Element() el: HTMLElement;\n  /**\n   * Index of active tab\n   */\n  @Prop({ reflect: true, mutable: true }) active: number = 0;\n  /**\n   * Variant of tabs from TABS_VATIANT enum\n   */\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n  /**\n   * for animate the tab content\n   */\n  @State() height: number = 0;\n  /**\n   * Emit event to outside\n   */\n  @Event() tabSelect: EventEmitter<number>;\n  /**\n   * local variable for tab labels collection\n   */\n  private tabElements: HTMLElement[] = [];\n  /**\n   * Watch active tab changes to animate content height\n   */\n  @Watch('active')\n  onActiveTabChanged() {\n    this.setHeight();\n  }\n\n  private collectTabs() {\n    if (!this.tabElements.length) {\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n    }\n  }\n\n  private updateTabClasses() {\n    this.tabElements.forEach((tab, i) => {\n      tab.classList.toggle('active', i === this.active);\n    });\n  }\n\n  private setHeight() {\n    requestAnimationFrame(() => {\n      const tab = this.tabElements[this.active];\n      if (tab) {\n        const content = tab.shadowRoot?.host;\n        this.height = content?.scrollHeight || 0;\n      }\n    });\n  }\n\n  private handleTabClick(index: number) {\n    if (index === this.active) return;\n\n    this.active = index;\n    this.setHeight();\n    this.tabSelect.emit(this.active);\n  }\n\n  render() {\n    return (\n      <Host class=\"xv-tabs\" variant={this.variant}>\n        <div class=\"tab-headers\" role=\"tablist\">\n          {this.tabElements.map((tab, index) => (\n            <button\n              role=\"tab\"\n              disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n              class={{ active: index === this.active }}\n              onClick={() => this.handleTabClick(index)}\n            >\n              {tab.getAttribute('label') || `Tab ${index + 1}`}\n            </button>\n          ))}\n        </div>\n\n        <div\n          class=\"tab-content-wrapper\"\n          style={{ height: `${this.height}px` }}\n          role=\"tabpanel\"\n          tabindex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.collectTabs();\n    this.setHeight();\n  }\n\n  componentDidRender() {\n    this.updateTabClasses();\n  }\n}\n"]}
+{"version":3,"file":"xv-tabs.js","sourceRoot":"","sources":["../../../src/components/xv-tabs/xv-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { TAB_TAGS, TABS_VATIANT } from './_vars';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-tabs-v2',\n  styleUrl: 'xv-tabs.scss',\n  shadow: true,\n})\nexport class XvTabs {\n  @Element() el: HTMLElement;\n  /**\n   * Index of active tab\n   */\n  @Prop({ reflect: true, mutable: true }) active: number | string = 0;\n  /**\n   * Emit event to outside\n   */\n  @Event() activeChange: EventEmitter<number | string>;\n  /**\n   * Show loader\n   */\n  @Prop({ reflect: true }) loading?: boolean;\n  /**\n   * Variant of tabs from TABS_VATIANT enum\n   */\n  @Prop() variant: TABS_VATIANT = TABS_VATIANT.DEFAULT;\n  /**\n   * Message when have no tabs\n   */\n  @Prop() emptyMessage?: string;\n  /**\n   * Message when have no tabs\n   */\n  @Prop({ reflect: true }) showArrows?: boolean;\n  /**\n   * local variable for tab labels collection\n   */\n  @State() tabElements: HTMLElement[] = [];\n\n  private collectTabs = () => {\n    if (!this.tabElements.length) {\n      this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));\n      this.tabElements.forEach((tab) => {\n        if (tab.hasAttribute('name') && !this.active) {\n          this.active = tab.getAttribute('name');\n        }\n      })\n    }\n  }\n\n  private updateTabClasses() {\n    this.tabElements.forEach((tab, i) => {\n      tab.classList.toggle(\n        'active',\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    });\n  }\n\n  private handleTabClick(active: string | number) {\n    if (active === this.active) return;\n\n    this.active = active;\n    this.activeChange.emit(Number(this.active) || this.active);\n  }\n\n  private setTab(count: number = 1) {\n    const currentIdx = this.tabElements.findIndex(\n      (tab, i) =>\n        (tab.getAttribute('name') || `${i}`) === `${this.active}`\n      );\n    const tab = this.tabElements[currentIdx + count];\n\n    if (tab && !tab?.hasAttribute('disabled')) {\n      this.active = tab.getAttribute('name') || `${currentIdx + count}`;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"xv-tabs\" variant={this.variant}>\n          <xv-loader-v2 size={SIZE_VAR.XL} />\n        </Host>\n      )\n    }\n\n    return (\n      <Host class=\"xv-tabs\" variant={this.variant}>\n        <div class=\"tab-headers\" role=\"tablist\">\n          <button\n            hidden={!this.showArrows || !this.tabElements?.length}\n            aria-label=\"Previous\"\n            class=\"tab-headers_btn prev\"\n            onClick={() => this.setTab(-1)}\n          />\n          {this.tabElements?.length ? this.tabElements.map((tab, index) => (\n            <button\n              role=\"tab\"\n              disabled={!!tab.getAttribute('disabled') || !!(tab as any)?.disabled}\n              class={{\n                'tab-headers_tab': true,\n                active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,\n              }}\n              onClick={() => this.handleTabClick(tab.getAttribute('name') || `${index}`)}\n            >\n              {tab.getAttribute('label') || `Tab ${index + 1}`}\n            </button>\n          )) : this.emptyMessage && <p class=\"xv-tabs_empty\">{this.emptyMessage}</p>}\n\n          <button\n            aria-label=\"Next\"\n            hidden={!this.showArrows || !this.tabElements?.length}\n            class=\"tab-headers_btn next\"\n            onClick={() => this.setTab(1)}\n          />\n        </div>\n\n        <div\n          class=\"tab-content-wrapper\"\n          role=\"tabpanel\"\n          tabindex={-1}\n        >\n          <slot onSlotchange={this.collectTabs} />\n        </div>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    // this.collectTabs();\n  }\n\n  componentDidRender() {\n    this.updateTabClasses();\n  }\n}\n"]}

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

@@ -13,7 +13,7 @@ export class XvTag {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: 'cca59dceeb566fa038234f7962be22424dc9a35e', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '5d7bedbbbb7ce916b1aa5efda7cebe957b985762', class: "xv-tag_content" }, h("slot", { key: '300db1eecac2be8508b328cd869599af162c04a8' })), this.closeable && (h("button", { key: '4d7eacbb1d380ecf664780e4466129327563bace', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: 'e7015e92932ed5f4d6d3acb68ab63628e4a4bcb6', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '87a56eb93d86027dfcfa6c2e0edc22defe7628b4', class: "xv-tag_content" }, h("slot", { key: 'b71fb28fdbf29da81d8cc701f7a9b4bf0fc23c4d' })), this.closeable && (h("button", { key: 'f99c2fc938973a3809a355a8621cf161e185c46c', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
     static get is() { return "xv-tag-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-text-input/xv-text-input.js

@@ -14,12 +14,17 @@ export class XvTextInput {
         this.value = '';
         this.disabled = false;
         this.readonly = false;
+        this.loading = false;
         this.handleInput = (e) => {
             const target = e.target;
             this.value = target.value;
+            this.valueChange.emit(this.value);
             this.internals.setFormValue(target.value);
         };
         this.getControlIcon = (status) => {
+            if (this.loading) {
+                return h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
+            }
             switch (status) {
                 case TextInputStatus.ERROR: {
                     return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
@@ -31,7 +36,7 @@ export class XvTextInput {
         };
     }
     render() {
-        return (h(Host, { key: '4a16cd6ea36fd074e118bc262bf2aa50a32bbc90', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a18f098c242b7923951ad745d8fdca68289b6a1e', class: "label" }, this.label), h("div", { key: '3fc93834180279e5dfcc4b203e6e821e13acb539', class: "control" }, h("input", { key: '5d4b743dcb4c7afff9475f69b0127b478bc6a2a1', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: 'e24b2c111e6fdba83006493d1fc7dcdf08256880', class: "helper" }, this.helper)));
+        return (h(Host, { key: '7e773cbebf4bd3bc6c2e71f454f733de77ec2b56', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a28eca6e736e747c5730d2b517cbcf33178a53af', class: "label" }, this.label), h("div", { key: 'c432a6ca83a94d1f160745b1f0f2e1a532441ccd', class: "control" }, h("input", { key: '5545a39193c180329fe382f8f9fd4aac5d79adcd', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: 'ab7aee3589f336f3899afef307845466c4eee41e', class: "helper" }, this.helper)));
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value);
@@ -68,7 +73,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "label",
-                "reflect": false
+                "reflect": true
             },
             "placeholder": {
                 "type": "string",
@@ -87,7 +92,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "placeholder",
-                "reflect": false
+                "reflect": true
             },
             "helper": {
                 "type": "string",
@@ -106,7 +111,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "helper",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "name": {
@@ -126,7 +131,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             },
             "size": {
                 "type": "string",
@@ -151,7 +156,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "size",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "SIZE_VAR.MD"
             },
             "status": {
@@ -177,7 +182,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "status",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "TextInputStatus.DEF"
             },
             "value": {
@@ -197,7 +202,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "value",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -217,7 +222,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "readonly": {
@@ -237,11 +242,49 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "readonly",
-                "reflect": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading",
+                "reflect": true,
                 "defaultValue": "false"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get attachInternalsMemberName() { return "internals"; }
 }