@sankhyalabs/ezui 3.0.1 → 3.0.2

package/dist/collection/components/ez-tabselector/ez-tabselector.js

@@ -1,4 +1,4 @@
-import { Component, Event, Element, h, Prop, Host, State, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
 export class EzTabselector {
   constructor() {
@@ -53,6 +53,10 @@ export class EzTabselector {
         this.setFocusedTab(this.selectedIndex);
       }
     };
+    this._processedTabs = undefined;
+    this.selectedIndex = undefined;
+    this.selectedTab = undefined;
+    this.tabs = undefined;
   }
   observeTabs(newValue) {
     if (newValue && typeof newValue !== "string") {
@@ -205,118 +209,123 @@ export class EzTabselector {
     });
   }
   render() {
-    return (h(Host, null,
-      h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }),
-      h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
-        const labelStyle = { "min-width": this.getTextWidth(tab.label) };
-        const tabId = "tab" + index;
-        const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
-        if (isSelected) {
-          this.selectedTab = tab.tabKey;
-          this.selectedIndex = index;
-        }
-        return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle },
-          tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }),
-          h("span", { class: "tab-label", title: tab.label }, tab.label),
-          tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }),
-          h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
-      })),
-      h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
+    return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
+      const labelStyle = { "min-width": this.getTextWidth(tab.label) };
+      const tabId = "tab" + index;
+      const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
+      if (isSelected) {
+        this.selectedTab = tab.tabKey;
+        this.selectedIndex = index;
+      }
+      return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+    })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   static get is() { return "ez-tabselector"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-tabselector.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-tabselector.css"]
-  }; }
-  static get properties() { return {
-    "selectedIndex": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o index da aba selecionada."
-      },
-      "attribute": "selected-index",
-      "reflect": true
-    },
-    "selectedTab": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tabselector.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tabselector.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedIndex": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o index da aba selecionada."
+        },
+        "attribute": "selected-index",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define a aba selecionada."
+      "selectedTab": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a aba selecionada."
+        },
+        "attribute": "selected-tab",
+        "reflect": true
       },
-      "attribute": "selected-tab",
-      "reflect": true
-    },
-    "tabs": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | Array<Tab>",
-        "resolved": "Tab[] | string",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "Tab": {
-            "location": "local"
+      "tabs": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Array<Tab>",
+          "resolved": "Tab[] | string",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Tab": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o nome das abas do componente.\nPodendo serem separadas por v\u00EDrgula \",\" ou em um Array de configura\u00E7\u00E3o."
-      },
-      "attribute": "tabs",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "_processedTabs": {}
-  }; }
-  static get events() { return [{
-      "method": "ezChange",
-      "name": "ezChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do componente."
-      },
-      "complexType": {
-        "original": "Tab",
-        "resolved": "Tab",
-        "references": {
-          "Tab": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o nome das abas do componente.\nPodendo serem separadas por v\u00EDrgula \",\" ou em um Array de configura\u00E7\u00E3o."
+        },
+        "attribute": "tabs",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_processedTabs": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do componente."
+        },
+        "complexType": {
+          "original": "Tab",
+          "resolved": "Tab",
+          "references": {
+            "Tab": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "_hostElem"; }
-  static get watchers() { return [{
-      "propName": "tabs",
-      "methodName": "observeTabs"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "tabs",
+        "methodName": "observeTabs"
+      }];
+  }
 }