@sankhyalabs/ezui 7.2.0-rc.9 → 7.2.0

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

@@ -1,15 +1,23 @@
 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)}.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 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 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);
@@ -25,32 +33,19 @@ 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) {
-          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;
+          return;
         }
         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);
@@ -58,10 +53,12 @@ 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") {
@@ -72,23 +69,72 @@ 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) {
-    const tab = this._processedTabs.find(tab => tab.index === tabIndex);
-    this.handleTabClick(tab, !silent);
+    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);
+    }
   }
   handleTabClick(tab, emitChange = true) {
+    var _a;
+    if (tab.disabled) {
+      return;
+    }
     this.selectedIndex = tab.index;
     this._focusedIndex = undefined;
     this.selectedTab = tab.tabKey;
     if (emitChange) {
-      this.ezChange.emit(tab);
+      (_a = this.ezChange) === null || _a === void 0 ? void 0 : _a.emit(tab);
     }
     this.setFocusedBtn(false, tab.index);
+    this.scrollActiveTabIntoView(tab.index);
   }
-  componentWillLoad() {
-    this.processesTabs();
+  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" });
+      }
+    });
   }
   processesTabs() {
+    var _a;
     if (this.tabs) {
       if (Array.isArray(this.tabs)) {
         this._processedTabs = [...this.tabs];
@@ -96,39 +142,30 @@ const EzTabselector = class {
       else {
         this._processedTabs = [];
         this.tabs.split(",").forEach((label) => {
+          var _a;
           label = label.trim();
-          this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+          (_a = this._processedTabs) === null || _a === void 0 ? void 0 : _a.push({ label, tabKey: label, index: this._processedTabs.length });
           this.buildElementIdTab(this._processedTabs);
         });
       }
     }
-    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 };
+    (_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 };
       const content = elem.firstChild;
       if (content) {
         content.setAttribute("slot", "tab" + tab.index);
-        this._hostElem.appendChild(content);
+        (_g = this._hostElem) === null || _g === void 0 ? void 0 : _g.appendChild(content);
       }
-      this._processedTabs.push(tab);
+      (_h = this._processedTabs) === null || _h === void 0 ? void 0 : _h.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];
@@ -151,10 +188,13 @@ const EzTabselector = class {
           lastTab = tab;
         }
       });
-      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+      if (lastTab) {
+        container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+      }
     }
   }
   updateScroll() {
+    var _a, _b, _c, _d;
     const container = this._scrollContainer;
     if (container) {
       const { scrollWidth, clientWidth, scrollLeft } = container;
@@ -162,16 +202,16 @@ const EzTabselector = class {
       this._startHidden = container.scrollLeft > 0;
       this._endHidden = remainingScroll > 0;
       if (this._startHidden) {
-        this._backwardButton.classList.remove("hidden");
+        (_a = this._backwardButton) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
       }
       else {
-        this._backwardButton.classList.add("hidden");
+        (_b = this._backwardButton) === null || _b === void 0 ? void 0 : _b.classList.add("hidden");
       }
       if (this._endHidden) {
-        this._forwardButton.classList.remove("hidden");
+        (_c = this._forwardButton) === null || _c === void 0 ? void 0 : _c.classList.remove("hidden");
       }
       else {
-        this._forwardButton.classList.add("hidden");
+        (_d = this._forwardButton) === null || _d === void 0 ? void 0 : _d.classList.add("hidden");
       }
       const classNames = ["", "startHidden", "endHidden", "middle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
@@ -190,44 +230,152 @@ const EzTabselector = class {
     this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
   }
   setFocusedTab(index) {
+    if (index === undefined) {
+      return;
+    }
     window.clearTimeout(this._scrollCallBackTest);
     this._scrollCallBackTest = window.setTimeout(() => {
-      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
-      tabtoscroll.scrollIntoView();
+      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();
     }, 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) {
-    const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
-    tabsButtons.forEach((el) => {
+    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) => {
       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 = this._hostElem.getAttribute(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 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() {
-    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) => {
+    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) => {
       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) }, 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); } }));
+      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); } }));
     })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   get _hostElem() { return getElement(this); }
   static get watchers() { return {
-    "tabs": ["observeTabs"]
+    "tabs": ["observeTabs"],
+    "selectedIndex": ["observeSelectedIndex"],
+    "selectedTab": ["observeSelectedTab"]
   }; }
 };
 EzTabselector.style = ezTabselectorCss;

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

@@ -46,6 +46,7 @@ const EzTextInput = class {
       if (newValue != oldValue) {
         this._inputElem.value = this.value || "";
         this.handleChange();
+        this.applyMask(newValue);
         this.adjustFloatingLabel();
         this.checkIsOverflowing();
         if (!this.isSlaveMode()) {
@@ -190,12 +191,9 @@ const EzTextInput = class {
     const value = this._inputElem.value;
     if (value && this._maskFormatter) {
       try {
-        if (this.cleanValueMask) {
-          this.applyMask(value);
-        }
-        else {
-          this._inputElem.value = this._maskFormatter.format(value);
-        }
+        const newMask = this.handleDefaultMask(value);
+        this._maskFormatter.mask = newMask;
+        this._inputElem.value = this._maskFormatter.format(this._maskFormatter.removeMask(value));
       }
       catch (e) {
         this.errorMessage = e.message;
@@ -221,20 +219,33 @@ const EzTextInput = class {
       }
     }
   }
+  handleDefaultMask(value = this.value) {
+    if (this.mask === "cgc_cpf") {
+      if (value && value.length <= 11) {
+        this.mask = MaskFormatter.DEFAULT_MASKS["cpf"];
+      }
+      else {
+        this.mask = MaskFormatter.DEFAULT_MASKS["cnpj"];
+      }
+    }
+    return this.mask;
+  }
   applyMask(value) {
     if (!value || value === "")
       return value;
     if (this._maskFormatter) {
       try {
+        const newMask = this.handleDefaultMask(value);
+        this._maskFormatter.mask = newMask;
         const formattedValue = this._maskFormatter.applyMask(this._maskFormatter.removeMask(value));
         if (this._inputElem) {
           this._inputElem.value = formattedValue;
           return this._inputElem.value;
         }
-        else {
+        if (!this.cleanValueMask) {
           this.value = formattedValue;
-          return this.value;
         }
+        return this.value;
       }
       catch (e) {
         this.errorMessage = e.message;
@@ -301,7 +312,7 @@ const EzTextInput = class {
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
   getValue() {
-    return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
+    return this.mask ? this.applyMask(this.value) : this.value;
   }
   buildLabelClass() {
     let classList = this.enabled ? 'input__label' : 'input__label input__label--disabled';
@@ -332,12 +343,7 @@ const EzTextInput = class {
     if (this.value) {
       if (this._maskFormatter) {
         try {
-          if (this.cleanValueMask) {
-            this.applyMask(this.value);
-          }
-          else {
-            this.value = this._maskFormatter.format(this.value);
-          }
+          this.applyMask(this.value);
         }
         catch (e) {
           this.errorMessage = e.message;

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-a031816b.js';
+import { i as initI18n } from './index-b5a15d4b.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 { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-2964eae1.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 { 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-a031816b.js';
+import { i as initI18n } from './index-b5a15d4b.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-e99e53c8.js';
-import { i as initI18n } from './index-a031816b.js';
+import { A as ApplicationUtils } from './ApplicationUtils-29d2709c.js';
+import { i as initI18n } from './index-b5a15d4b.js';
 import './DialogType-54a62731.js';
 
 class RemoteFile {