@sankhyalabs/ezui 7.2.0 → 7.3.0

package/dist/esm/ez-tabselector.entry.js

@@ -1,23 +1,15 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 
-const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0;margin-bottom:var(--space--extra-small, 3px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active ez-icon{--ez-icon--color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.is-disabled,.tab:disabled{cursor:not-allowed;opacity:0.5;color:var(--text--disabled, #a0a7b4);pointer-events:none}.is-disabled ez-icon{--ez-icon--color:var(--text--disabled, #a0a7b4)}.is-reorderable:not(.is-disabled){cursor:grab}.is-reorderable:not(.is-disabled):active{cursor:grabbing}.is-dragging{opacity:0.4}.is-drag-over{box-shadow:inset 2px 0 0 0 var(--color--primary, #008561)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:-2px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
+const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0;margin-bottom:var(--space--extra-small, 3px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active ez-icon{--ez-icon--color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
 
 const EzTabselector = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezChange = createEvent(this, "ezChange", 7);
-    this.ezReorder = createEvent(this, "ezReorder", 7);
     this.setFocusedParam = (ev) => {
       if (ev.key === "Enter") {
-        if (!this._processedTabs || this._focusedIndex === undefined) {
-          return;
-        }
         const selectedTab = this._processedTabs[this._focusedIndex];
-        if (selectedTab.disabled) {
-          ev.preventDefault();
-          return;
-        }
         this.handleTabClick(selectedTab);
         ev.preventDefault();
         this.setFocusedTab(selectedTab.index);
@@ -33,19 +25,32 @@ const EzTabselector = class {
         else {
           return;
         }
-        const step = operator ? 1 : -1;
-        const baseIndex = this._focusedIndex !== undefined ? this._focusedIndex : this.selectedIndex;
-        this._focusedIndex = this.findNextEnabledIndex(baseIndex, step);
         if (this._focusedIndex === undefined) {
-          return;
+          if (operator === false) {
+            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
+          }
+          else {
+            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
+          }
+        }
+        else {
+          if (operator === false) {
+            this._focusedIndex = this._focusedIndex - 1;
+          }
+          else {
+            this._focusedIndex = this._focusedIndex + 1;
+          }
+        }
+        if (this._focusedIndex < 0) {
+          this._focusedIndex = 0;
+        }
+        else if (this._focusedIndex > this._processedTabs.length - 1) {
+          this._focusedIndex = this._processedTabs.length - 1;
         }
         this.setFocusedBtn(true, this._focusedIndex);
         this.setFocusedTab(this._focusedIndex);
       }
       else if (ev.key === "Tab" || ev.key === "Escape") {
-        if (!this._processedTabs || this.selectedIndex === undefined) {
-          return;
-        }
         const currentTab = this._processedTabs[this.selectedIndex];
         this._focusedIndex = undefined;
         this.handleTabClick(currentTab);
@@ -53,12 +58,10 @@ const EzTabselector = class {
         this.setFocusedTab(this.selectedIndex);
       }
     };
-    this._dragOverIndex = undefined;
     this._processedTabs = undefined;
     this.selectedIndex = undefined;
     this.selectedTab = undefined;
     this.tabs = undefined;
-    this.reorderable = false;
   }
   observeTabs(newValue, oldValue) {
     if (newValue && typeof newValue !== "string") {
@@ -69,72 +72,23 @@ const EzTabselector = class {
       this.processesTabs();
     }
   }
-  observeSelectedIndex(newValue, oldValue) {
-    if (newValue !== oldValue && newValue !== undefined) {
-      this.scrollActiveTabIntoView(newValue);
-    }
-  }
-  observeSelectedTab(newValue, oldValue) {
-    if (newValue !== oldValue && newValue !== undefined && this._processedTabs) {
-      const idx = this._processedTabs.findIndex(t => t.tabKey === newValue);
-      if (idx >= 0) {
-        this.scrollActiveTabIntoView(idx);
-      }
-    }
-  }
   async goToTab(tabIndex, silent = false) {
-    var _a;
-    const tab = (_a = this._processedTabs) === null || _a === void 0 ? void 0 : _a.find(tab => tab.index === tabIndex);
-    if (tab) {
-      this.handleTabClick(tab, !silent);
-    }
+    const tab = this._processedTabs.find(tab => tab.index === tabIndex);
+    this.handleTabClick(tab, !silent);
   }
   handleTabClick(tab, emitChange = true) {
-    var _a;
-    if (tab.disabled) {
-      return;
-    }
     this.selectedIndex = tab.index;
     this._focusedIndex = undefined;
     this.selectedTab = tab.tabKey;
     if (emitChange) {
-      (_a = this.ezChange) === null || _a === void 0 ? void 0 : _a.emit(tab);
+      this.ezChange.emit(tab);
     }
     this.setFocusedBtn(false, tab.index);
-    this.scrollActiveTabIntoView(tab.index);
   }
-  scrollActiveTabIntoView(index) {
-    if (index === undefined) {
-      return;
-    }
-    requestAnimationFrame(() => {
-      const container = this._scrollContainer;
-      if (!container) {
-        return;
-      }
-      const tabEl = container.querySelector(`#tab${index}`);
-      if (!tabEl) {
-        return;
-      }
-      const containerRect = container.getBoundingClientRect();
-      const tabRect = tabEl.getBoundingClientRect();
-      const buttonOffset = 48;
-      const visibleLeft = containerRect.left + (this._startHidden ? buttonOffset : 0);
-      const visibleRight = containerRect.right - (this._endHidden ? buttonOffset : 0);
-      let delta = 0;
-      if (tabRect.left < visibleLeft) {
-        delta = tabRect.left - visibleLeft;
-      }
-      else if (tabRect.right > visibleRight) {
-        delta = tabRect.right - visibleRight;
-      }
-      if (delta !== 0) {
-        container.scrollBy({ left: delta, behavior: "smooth" });
-      }
-    });
+  componentWillLoad() {
+    this.processesTabs();
   }
   processesTabs() {
-    var _a;
     if (this.tabs) {
       if (Array.isArray(this.tabs)) {
         this._processedTabs = [...this.tabs];
@@ -142,30 +96,39 @@ const EzTabselector = class {
       else {
         this._processedTabs = [];
         this.tabs.split(",").forEach((label) => {
-          var _a;
           label = label.trim();
-          (_a = this._processedTabs) === null || _a === void 0 ? void 0 : _a.push({ label, tabKey: label, index: this._processedTabs.length });
+          this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
           this.buildElementIdTab(this._processedTabs);
         });
       }
     }
-    (_a = this._hostElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ez-tab").forEach((elem) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      const tabKey = (_a = elem.getAttribute("tabKey")) !== null && _a !== void 0 ? _a : 'tab';
-      const label = (_b = elem.getAttribute("label")) !== null && _b !== void 0 ? _b : 'tab';
-      const leftIcon = (_c = elem.getAttribute("leftIcon")) !== null && _c !== void 0 ? _c : undefined;
-      const rightIcon = (_d = elem.getAttribute("rightIcon")) !== null && _d !== void 0 ? _d : undefined;
-      const disabled = elem.hasAttribute("disabled");
-      const tab = { label, tabKey, leftIcon, rightIcon, disabled, index: (_f = (_e = this._processedTabs) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0 };
+    this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
+      const tabKey = elem.getAttribute("tabKey");
+      const label = elem.getAttribute("label");
+      const leftIcon = elem.getAttribute("leftIcon");
+      const rightIcon = elem.getAttribute("rightIcon");
+      const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
       const content = elem.firstChild;
       if (content) {
         content.setAttribute("slot", "tab" + tab.index);
-        (_g = this._hostElem) === null || _g === void 0 ? void 0 : _g.appendChild(content);
+        this._hostElem.appendChild(content);
       }
-      (_h = this._processedTabs) === null || _h === void 0 ? void 0 : _h.push(tab);
+      this._processedTabs.push(tab);
       this.buildElementIdTab(this._processedTabs);
     });
   }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
+    this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
+      var _a;
+      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
+      const dataInfo = { id: `${StringUtils.toCamelCase(label)}` };
+      ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
+    });
+  }
   handleSlotChange(ev) {
     const slot = ev.target;
     const content = slot.assignedElements()[0];
@@ -188,13 +151,10 @@ const EzTabselector = class {
           lastTab = tab;
         }
       });
-      if (lastTab) {
-        container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
-      }
+      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
     }
   }
   updateScroll() {
-    var _a, _b, _c, _d;
     const container = this._scrollContainer;
     if (container) {
       const { scrollWidth, clientWidth, scrollLeft } = container;
@@ -202,16 +162,16 @@ const EzTabselector = class {
       this._startHidden = container.scrollLeft > 0;
       this._endHidden = remainingScroll > 0;
       if (this._startHidden) {
-        (_a = this._backwardButton) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
+        this._backwardButton.classList.remove("hidden");
       }
       else {
-        (_b = this._backwardButton) === null || _b === void 0 ? void 0 : _b.classList.add("hidden");
+        this._backwardButton.classList.add("hidden");
       }
       if (this._endHidden) {
-        (_c = this._forwardButton) === null || _c === void 0 ? void 0 : _c.classList.remove("hidden");
+        this._forwardButton.classList.remove("hidden");
       }
       else {
-        (_d = this._forwardButton) === null || _d === void 0 ? void 0 : _d.classList.add("hidden");
+        this._forwardButton.classList.add("hidden");
       }
       const classNames = ["", "startHidden", "endHidden", "middle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
@@ -230,152 +190,44 @@ const EzTabselector = class {
     this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
   }
   setFocusedTab(index) {
-    if (index === undefined) {
-      return;
-    }
     window.clearTimeout(this._scrollCallBackTest);
     this._scrollCallBackTest = window.setTimeout(() => {
-      var _a;
-      const tabtoscroll = (_a = this._scrollContainer) === null || _a === void 0 ? void 0 : _a.querySelector(`#tab${index}`);
-      tabtoscroll === null || tabtoscroll === void 0 ? void 0 : tabtoscroll.scrollIntoView();
+      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
+      tabtoscroll.scrollIntoView();
     }, 200);
   }
-  handleDragStart(ev, index) {
-    if (!this.reorderable) {
-      return;
-    }
-    this._dragSourceIndex = index;
-    if (ev.dataTransfer) {
-      ev.dataTransfer.effectAllowed = "move";
-      ev.dataTransfer.setData("text/plain", String(index));
-    }
-  }
-  handleDragOver(ev, index) {
-    if (!this.reorderable || this._dragSourceIndex === undefined) {
-      return;
-    }
-    ev.preventDefault();
-    if (ev.dataTransfer) {
-      ev.dataTransfer.dropEffect = "move";
-    }
-    if (this._dragOverIndex !== index) {
-      this._dragOverIndex = index;
-    }
-  }
-  handleDragLeave(index) {
-    if (this._dragOverIndex === index) {
-      this._dragOverIndex = undefined;
-    }
-  }
-  handleDrop(ev, targetIndex) {
-    var _a;
-    if (!this.reorderable || this._dragSourceIndex === undefined || !this._processedTabs) {
-      return;
-    }
-    ev.preventDefault();
-    const sourceIndex = this._dragSourceIndex;
-    this._dragSourceIndex = undefined;
-    this._dragOverIndex = undefined;
-    if (sourceIndex === targetIndex) {
-      return;
-    }
-    const previouslySelectedKey = this.selectedTab;
-    const reordered = [...this._processedTabs];
-    const [moved] = reordered.splice(sourceIndex, 1);
-    reordered.splice(targetIndex, 0, moved);
-    reordered.forEach((tab, idx) => { tab.index = idx; });
-    this._processedTabs = reordered;
-    if (previouslySelectedKey !== undefined) {
-      const newSelected = reordered.findIndex(t => t.tabKey === previouslySelectedKey);
-      if (newSelected >= 0) {
-        this.selectedIndex = newSelected;
-      }
-    }
-    (_a = this.ezReorder) === null || _a === void 0 ? void 0 : _a.emit(reordered);
-  }
-  handleDragEnd() {
-    this._dragSourceIndex = undefined;
-    this._dragOverIndex = undefined;
-  }
-  findNextEnabledIndex(from, step) {
-    if (!this._processedTabs || this._processedTabs.length === 0) {
-      return undefined;
-    }
-    const total = this._processedTabs.length;
-    let index = from === undefined ? (step > 0 ? -1 : total) : from;
-    for (let i = 0; i < total; i++) {
-      index += step;
-      if (index < 0 || index > total - 1) {
-        return from;
-      }
-      if (!this._processedTabs[index].disabled) {
-        return index;
-      }
-    }
-    return from;
-  }
   setFocusedBtn(visible, parameter) {
-    var _a;
-    if (parameter === undefined) {
-      return;
-    }
-    const tabsButtons = (_a = this._scrollContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".tab");
-    tabsButtons === null || tabsButtons === void 0 ? void 0 : tabsButtons.forEach((el) => {
+    const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
+    tabsButtons.forEach((el) => {
       el.classList.remove("is-focused");
       if (el.id === "tab" + parameter && visible) {
         el.classList.add("is-focused");
       }
     });
   }
-  buildElementIdTab(tabs = []) {
+  buildElementIdTab(tabs) {
     tabs.forEach(tab => {
-      var _a;
       if (!tab.hasOwnProperty(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
-        const elemIdTabSelector = (_a = this._hostElem) === null || _a === void 0 ? void 0 : _a.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+        const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
         const dataElementID = `${elemIdTabSelector}_${StringUtils.toCamelCase(tab.tabKey)}`;
         tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
       }
     });
   }
-  componentWillLoad() {
-    this.processesTabs();
-  }
-  componentDidRender() {
-    this.updateScroll();
-  }
-  componentDidLoad() {
-    var _a;
-    if (this._hostElem) {
-      ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
-      (_a = this._hostElem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-        var _a;
-        const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
-        const dataInfo = { id: `${StringUtils.toCamelCase(label)}` };
-        ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
-      });
-    }
-    this.scrollActiveTabIntoView(this.selectedIndex);
-  }
   render() {
-    var _a;
-    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) }, (_a = this._processedTabs) === null || _a === void 0 ? void 0 : _a.map((tab, index) => {
+    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 tabId = "tab" + index;
       const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
       if (isSelected) {
         this.selectedTab = tab.tabKey;
         this.selectedIndex = index;
       }
-      const isDraggable = this.reorderable && !tab.disabled;
-      const isDragOver = this.reorderable && this._dragOverIndex === index && this._dragSourceIndex !== index;
-      const isDragging = this._dragSourceIndex === index;
-      return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}${tab.disabled ? " is-disabled" : ""}${this.reorderable ? " is-reorderable" : ""}${isDragOver ? " is-drag-over" : ""}${isDragging ? " is-dragging" : ""}`, disabled: tab.disabled, "aria-disabled": tab.disabled ? "true" : "false", draggable: isDraggable, onClick: () => this.handleTabClick(tab), onDragStart: (ev) => this.handleDragStart(ev, index), onDragOver: (ev) => this.handleDragOver(ev, index), onDragLeave: () => this.handleDragLeave(index), onDrop: (ev) => this.handleDrop(ev, index), onDragEnd: () => this.handleDragEnd() }, 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); } }));
+      return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab) }, 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() })));
   }
   get _hostElem() { return getElement(this); }
   static get watchers() { return {
-    "tabs": ["observeTabs"],
-    "selectedIndex": ["observeSelectedIndex"],
-    "selectedTab": ["observeSelectedTab"]
+    "tabs": ["observeTabs"]
   }; }
 };
 EzTabselector.style = ezTabselectorCss;

package/dist/esm/ez-text-input.entry.js

@@ -119,42 +119,6 @@ const EzTextInput = class {
       this._inputElem.classList.add("input__slim--noborder");
     }
   }
-  buildMaskFormatter() {
-    if (this.mask) {
-      const maskToBuilder = this.getMaskToBuilder();
-      this._maskFormatter = maskToBuilder ? new MaskFormatter(maskToBuilder) : undefined;
-    }
-  }
-  getMaskToBuilder() {
-    if (this.mask === 'cgc_cpf') {
-      return this.getCGCCpfMask();
-    }
-    if (this.mask === 'phone') {
-      return this.getPhoneMask();
-    }
-    if (this.mask in MaskFormatter.DEFAULT_MASKS) {
-      return MaskFormatter.DEFAULT_MASKS[this.mask];
-    }
-    return this.mask;
-  }
-  getPhoneMask() {
-    if (this.value && this.value.length === 10) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone : undefined;
-    }
-    if (this.value && this.value.length === 11) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone_mobile : undefined;
-    }
-    return undefined;
-  }
-  getCGCCpfMask() {
-    if (this.value && this.value.length === 11) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.cpf : undefined;
-    }
-    if (this.value && this.value.length === 14) {
-      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.cnpj : undefined;
-    }
-    return undefined;
-  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -383,7 +347,6 @@ const EzTextInput = class {
   }
   componentDidRender() {
     this.adjustFloatingLabel();
-    this.buildMaskFormatter();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');

package/dist/esm/ez-time-input.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { TimeFormatter, MaskFormatter, NumberUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
-import { i as initI18n } from './index-b5a15d4b.js';
+import { i as initI18n } from './index-41363fa6.js';
 
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";
 

package/dist/esm/ez-tooltip.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
-import { b as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, d as arrow } from './floating-ui.dom.esm-0c464cef.js';
+import { b as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, d as arrow } from './floating-ui.dom.esm-c94d4011.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
 const ezTooltipCss = ":host{--ez-tooltip--triangle-size:var(--space--8);--ez-tooltip--z-index:var(--elevation--24);--ez-tooltip--padding:var(--space--4) var(--space--8);--ez-tooltip--border-radius:var(--border--radius-8);--ez-tooltip--font-family:var(--font--pattern);--ez-tooltip--font-size:var(--font-size--small);--ez-tooltip--font-weight:var(--font-weight--regular);width:100%}.tooltip{position:absolute;z-index:var(--ez-tooltip--z-index);padding:var(--ez-tooltip--padding);border-radius:var(--ez-tooltip--border-radius);box-sizing:border-box;font-family:var(--ez-tooltip--font-family);font-size:var(--ez-tooltip--font-size);font-weight:var(--ez-tooltip--font-weight);text-align:center;width:max-content;display:none}.tooltip[data-strategy=\"fixed\"]{position:fixed}.arrow{position:absolute;width:var(--ez-tooltip--triangle-size);height:var(--ez-tooltip--triangle-size);transform:rotate(45deg)}.tooltip[data-type=\"default\"]{background:var(--color--petroleum-600);color:var(--color--gray-70)}.tooltip[data-type=\"default\"] .arrow{background:var(--color--petroleum-600)}.tooltip[data-type=\"error\"]{background:var(--color--red-600);color:var(--color--red-100)}.tooltip[data-type=\"error\"] .arrow{background:var(--color--red-600)}.tooltip[data-type=\"success\"]{background:var(--color--green-600);color:var(--color--green-100)}.tooltip[data-type=\"success\"] .arrow{background:var(--color--green-600)}.tooltip[data-type=\"warning\"]{background:var(--color--yellow-600);color:var(--color--yellow-100)}.tooltip[data-type=\"warning\"] .arrow{background:var(--color--yellow-600)}.tooltip[data-active=\"false\"]{display:none !important}";

package/dist/esm/ez-tree.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils, StringUtils, ObjectUtils } from '@sankhyalabs/core';
-import { i as initI18n } from './index-b5a15d4b.js';
+import { i as initI18n } from './index-41363fa6.js';
 
 const ICON_EXPANDED = "chevron-down";
 const ICON_COLAPSED = "chevron-right";

package/dist/esm/ez-upload.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-29d2709c.js';
-import { i as initI18n } from './index-b5a15d4b.js';
+import { A as ApplicationUtils } from './ApplicationUtils-1569f757.js';
+import { i as initI18n } from './index-41363fa6.js';
 import './DialogType-54a62731.js';
 
 class RemoteFile {