xv-webcomponents 0.1.29 → 0.1.31

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

@@ -62,18 +62,20 @@
 :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;
 }

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

@@ -10,54 +10,32 @@ 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));
+            }
+        };
     }
     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;
-            }
-        });
-    }
     handleTabClick(index) {
         if (index === this.active)
             return;
         this.active = index;
-        this.setHeight();
         this.tabSelect.emit(this.active);
     }
     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' }))));
+        return (h(Host, { key: '71222d5fc07d20673c5ef9e7cda9c6e443611011', class: "xv-tabs", variant: this.variant }, h("div", { key: '179f735cb97ca18df1e4d83167ce9f76a74a5afb', 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: 'c26bcad7439d3a8155fbb0af4e566845f77de28b', class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { key: 'c7744d7960dc59ed279103c40e20fa59feb4d0d7', onSlotchange: this.collectTabs }))));
     }
     componentWillLoad() {
-        this.collectTabs();
-        this.setHeight();
+        // this.collectTabs();
     }
     componentDidRender() {
         this.updateTabClasses();
@@ -126,7 +104,7 @@ export class XvTabs {
     }
     static get states() {
         return {
-            "height": {}
+            "tabElements": {}
         };
     }
     static get events() {
@@ -148,11 +126,5 @@ export class XvTabs {
             }];
     }
     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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAOjD,MAAM,OAAO,MAAM;IALnB;QAOE;;WAEG;QACqC,WAAM,GAAW,CAAC,CAAC;QAC3D;;WAEG;QACK,YAAO,GAAiB,YAAY,CAAC,OAAO,CAAC;QAKrD;;WAEG;QACM,gBAAW,GAAkB,EAAE,CAAC;QAEjC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAA;KAiDF;IA/CS,gBAAgB;QACtB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YAClC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc,CAAC,KAAa;QAClC,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QAElC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;YACzC,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,cACE,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,GAAW,aAAX,GAAG,uBAAH,GAAG,CAAU,QAAQ,CAAA,EACpE,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAExC,GAAG,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,OAAO,KAAK,GAAG,CAAC,EAAE,CACzC,CACV,CAAC,CACE;YAEN,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC;gBAEZ,6DAAM,YAAY,EAAE,IAAI,CAAC,WAAW,GAAI,CACpC,CACD,CACR,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,sBAAsB;IACxB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, State } 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   * Emit event to outside\n   */\n  @Event() tabSelect: EventEmitter<number>;\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    }\n  }\n\n  private updateTabClasses() {\n    this.tabElements.forEach((tab, i) => {\n      tab.classList.toggle('active', i === this.active);\n    });\n  }\n\n  private handleTabClick(index: number) {\n    if (index === this.active) return;\n\n    this.active = index;\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          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: '55ab2ded31587ebc443ace2a8417de8fa23a9d4d', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '8b10a67b88691eb68a0ab659c9d5e16bcf0cf3c4', class: "xv-tag_content" }, h("slot", { key: '31df2f187e4028849870d376fe38566a77c7bb70' })), this.closeable && (h("button", { key: '5dfd253f6c64121747cb7ea8ed4aa697b66edcb8', 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

@@ -31,7 +31,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: '8556c01f698beadee8a07430dd5a33d07b0669bc', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'd32d94e1731e624bfdb92dabe6dd19eb4a768956', class: "label" }, this.label), h("div", { key: 'ec0ecef3df39c6eb0682036efe30009688568299', class: "control" }, h("input", { key: 'c3d190af296b2cf9b8b2df95bca81f17699ed954', 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: '8abde71aa7c4f8dc6e85d36815789376bc00c4a6', class: "helper" }, this.helper)));
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value);
@@ -68,7 +68,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "label",
-                "reflect": false
+                "reflect": true
             },
             "placeholder": {
                 "type": "string",
@@ -87,7 +87,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "placeholder",
-                "reflect": false
+                "reflect": true
             },
             "helper": {
                 "type": "string",
@@ -106,7 +106,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "helper",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "name": {
@@ -126,7 +126,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             },
             "size": {
                 "type": "string",
@@ -151,7 +151,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "size",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "SIZE_VAR.MD"
             },
             "status": {
@@ -177,7 +177,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "status",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "TextInputStatus.DEF"
             },
             "value": {
@@ -197,7 +197,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "value",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -217,7 +217,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "readonly": {
@@ -237,7 +237,7 @@ export class XvTextInput {
                 "getter": false,
                 "setter": false,
                 "attribute": "readonly",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, h, Host, Element, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { TextInputStatus } from './_vars';\n\n/**\n * xv-text-input — custom input\n * ti get data you can use default Input event\n * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)\n */\n@Component({\n  tag: 'xv-text-input-v2',\n  styleUrl: 'xv-text-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvTextInput {\n  @Element() el: HTMLElement;\n  @Prop() label?: string;\n  @Prop() placeholder?: string;\n  @Prop() helper: string = '';\n  @Prop() name?: string;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() status: TextInputStatus = TextInputStatus.DEF;\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private handleInput = (e: InputEvent) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.internals.setFormValue(target.value);\n  }\n\n  render() {\n    return (\n      <Host name={this.name} class=\"xv-text-input\" role=\"textbox\" tabindex={this.disabled ? -1 : false}>\n        {this.label && <label class=\"label\">{this.label}</label>}\n\n        <div class=\"control\">\n          <input\n            type=\"text\"\n            class={{ withIcon: this.status !== TextInputStatus.DEF }}\n            readonly={this.readonly}\n            value={this.value}\n            disabled={this.disabled}\n            onInput={this.handleInput}\n            placeholder={this.placeholder}\n          />\n\n          {this.getControlIcon(this.status)}\n        </div>\n\n        {this.helper && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value);\n  }\n\n  private getControlIcon = (status: TextInputStatus) => {\n    switch (status) {\n      case TextInputStatus.ERROR: {\n        return (\n          <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path fill=\"currentColor\"\n                  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\" />\n          </svg>\n        )\n      }\n      case TextInputStatus.WARNING:\n        return (\n          <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path fill=\"currentColor\"\n                  d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n          </svg>\n        )\n      default: return null;\n    }\n  };\n}\n"]}
+{"version":3,"file":"xv-text-input.js","sourceRoot":"","sources":["../../../src/components/xv-text-input/xv-text-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, h, Host, Element, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { TextInputStatus } from './_vars';\n\n/**\n * xv-text-input — custom input\n * ti get data you can use default Input event\n * Angular - (input), React - (onInput), Pure - addEventListener('input', e => ...)\n */\n@Component({\n  tag: 'xv-text-input-v2',\n  styleUrl: 'xv-text-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvTextInput {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true }) label?: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: true }) helper: string = '';\n  @Prop({ reflect: true }) name?: string;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop({ reflect: true }) status: TextInputStatus = TextInputStatus.DEF;\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private handleInput = (e: InputEvent) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.internals.setFormValue(target.value);\n  }\n\n  render() {\n    return (\n      <Host name={this.name} class=\"xv-text-input\" role=\"textbox\" tabindex={this.disabled ? -1 : false}>\n        {this.label && <label class=\"label\">{this.label}</label>}\n\n        <div class=\"control\">\n          <input\n            type=\"text\"\n            class={{ withIcon: this.status !== TextInputStatus.DEF }}\n            readonly={this.readonly}\n            value={this.value}\n            disabled={this.disabled}\n            onInput={this.handleInput}\n            placeholder={this.placeholder}\n          />\n\n          {this.getControlIcon(this.status)}\n        </div>\n\n        {this.helper && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value);\n  }\n\n  private getControlIcon = (status: TextInputStatus) => {\n    switch (status) {\n      case TextInputStatus.ERROR: {\n        return (\n          <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path fill=\"currentColor\"\n                  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\" />\n          </svg>\n        )\n      }\n      case TextInputStatus.WARNING:\n        return (\n          <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path fill=\"currentColor\"\n                  d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n          </svg>\n        )\n      default: return null;\n    }\n  };\n}\n"]}

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

@@ -9,7 +9,7 @@ export class XvTooltip {
         this.position = 'top';
     }
     render() {
-        return (h(Host, { key: '3cbaa0f4193f8d41adfa47fac25a9e77b4deaa0d', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '176f13a692ca159849dacf780030f1a71f22de87' }, h("svg", { key: '334581c0388fcf67337605189461f8d7433fbf8c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'd0bbcb1d8ed14bcc183d6dc3277873702510900e', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+        return (h(Host, { key: '9bfc552b3e9ed5697b9718e94344853698737651', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '6ed625e9463d0fff4c24835cb1f5f12fb0dc4c01' }, h("svg", { key: '77dba81d363ff45e6903a73eae29f811a7cac7cf', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'd956ddf5f82a21a93200cf079bf1f7ff096c0644', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
     }
     static get is() { return "xv-tooltip-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/esm/{index-83ab73b7.js → index-590eb7d2.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'xv-webcomponents';
-const BUILD = /* xv-webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* xv-webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.27.1 | MIT Licensed | https://stenciljs.com
@@ -270,6 +270,13 @@ var h = (nodeName, vnodeData, ...children) => {
       }
     }
   }
+  if (typeof nodeName === "function") {
+    return nodeName(
+      vnodeData === null ? {} : vnodeData,
+      vNodeChildren,
+      vdomFnUtils
+    );
+  }
   const vnode = newVNode(nodeName, null);
   vnode.$attrs$ = vnodeData;
   if (vNodeChildren.length > 0) {
@@ -298,6 +305,36 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
+var vdomFnUtils = {
+  forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+  map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+var convertToPublic = (node) => ({
+  vattrs: node.$attrs$,
+  vchildren: node.$children$,
+  vkey: node.$key$,
+  vname: node.$name$,
+  vtag: node.$tag$,
+  vtext: node.$text$
+});
+var convertToPrivate = (node) => {
+  if (typeof node.vtag === "function") {
+    const vnodeData = { ...node.vattrs };
+    if (node.vkey) {
+      vnodeData.key = node.vkey;
+    }
+    if (node.vname) {
+      vnodeData.name = node.vname;
+    }
+    return h(node.vtag, vnodeData, ...node.vchildren || []);
+  }
+  const vnode = newVNode(node.vtag, node.vtext);
+  vnode.$attrs$ = node.vattrs;
+  vnode.$children$ = node.vchildren;
+  vnode.$key$ = node.vkey;
+  vnode.$name$ = node.vname;
+  return vnode;
+};
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
@@ -1462,6 +1499,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   }
   endBootstrap();
 };
+
+// src/runtime/fragment.ts
+var Fragment = (_, children) => children;
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
   if (listeners && win.document) {
     listeners.map(([flags, name, method]) => {
@@ -1501,6 +1541,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Fragment as F, Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-83ab73b7.js.map
+//# sourceMappingURL=index-590eb7d2.js.map