@sankhyalabs/ezui 7.3.2 → 7.3.3-rc.1

package/dist/collection/components/ez-split-panel/ez-split-panel.js

@@ -8,6 +8,7 @@ export class SplitPanel {
     this.direction = 'column';
     this.anchorToExpand = false;
     this.structural = false;
+    this.showGutter = false;
   }
   rebuildLayout() {
     Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
@@ -135,6 +136,7 @@ export class SplitPanel {
   }
   getGridTemplate() {
     let template = '';
+    const gutterSize = this.showGutter ? '12px' : '5px';
     const freeSpacePercentage = this.calcFreeSpacePercentage();
     this._items.forEach((col, index) => {
       let size = col.size || '1fr';
@@ -146,10 +148,10 @@ export class SplitPanel {
         return;
       }
       if (index === 0) {
-        template += `${size} 5px`;
+        template += `${size} ${gutterSize}`;
         return;
       }
-      template += ` ${size} 5px`;
+      template += ` ${size} ${gutterSize}`;
     });
     return template;
   }
@@ -198,7 +200,7 @@ export class SplitPanel {
     });
   }
   render() {
-    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}`, style: this.getElementStyle() });
+    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}${this.showGutter ? ' ez-split-panel--gutter' : ''}`, style: this.getElementStyle() });
   }
   static get is() { return "ez-split-panel"; }
   static get originalStyleUrls() {
@@ -266,6 +268,24 @@ export class SplitPanel {
         "attribute": "structural",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "showGutter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Exibe uma al\u00E7a vis\u00EDvel no divisor entre os itens (indicador de arraste)."
+        },
+        "attribute": "show-gutter",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.css

@@ -69,3 +69,12 @@ h3.ez-margin--small {
   width: calc(100% - 2*(var(--space--extra-small)));
   height: calc(100% - 2*(var(--space--extra-small)));
 }
+
+/* Modo contorno: só borda, sem fundo/sombra. Especificidade > .structural__item
+   para vencer o border:0 quando os dois estão ativos. */
+.box_split-item.outline__item {
+  background: none;
+  box-shadow: none;
+  border: 1px solid var(--color--strokes, #E1E2E5);
+  border-radius: var(--border--radius-medium, 12px);
+}

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js

@@ -8,6 +8,7 @@ export class SplitItem {
     this._expanded = false;
     this.size = undefined;
     this.structural = false;
+    this.outline = false;
   }
   /**
    * Alterna a visibilidade do painel.
@@ -24,7 +25,7 @@ export class SplitItem {
     CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}${this.outline ? ' outline__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -111,6 +112,24 @@ export class SplitItem {
         "attribute": "structural",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "outline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Exibe o item apenas com contorno (borda), sem preenchimento nem sombra."
+        },
+        "attribute": "outline",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -86,6 +86,34 @@
   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;
@@ -99,7 +127,7 @@
   display: flex;
   box-sizing: border-box;
   padding: 0px;
-  top: 0px;
+  top: -2px;
   right: 0px;
   width: 16px;
   height: 100%;
@@ -150,4 +178,8 @@
 
 .right-icon {
   padding-left: var(--space--small);
+}
+
+.right-icon--error {
+  --ez-icon--color: var(--color--red-600, #BD0025);
 }

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

@@ -4,7 +4,14 @@ export class EzTabselector {
   constructor() {
     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);
@@ -20,32 +27,19 @@ export class EzTabselector {
         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);
@@ -53,10 +47,12 @@ export class EzTabselector {
         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") {
@@ -67,23 +63,72 @@ export class EzTabselector {
       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];
@@ -91,39 +136,30 @@ export class EzTabselector {
       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];
@@ -146,10 +182,13 @@ export class EzTabselector {
           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;
@@ -157,16 +196,16 @@ export class EzTabselector {
       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];
@@ -185,15 +224,97 @@ export class EzTabselector {
     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");
@@ -201,24 +322,48 @@ export class EzTabselector {
       ;
     });
   }
-  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${tab.rightIconError ? ' right-icon--error' : ''}` }), 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"; }
@@ -244,7 +389,7 @@ export class EzTabselector {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Define o index da aba selecionada."
@@ -261,7 +406,7 @@ export class EzTabselector {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Define a aba selecionada."
@@ -285,18 +430,37 @@ export class EzTabselector {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "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
+      },
+      "reorderable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se as abas podem ser reordenadas via drag-and-drop. Desabilitado por padr\u00E3o."
+        },
+        "attribute": "reorderable",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
+      "_dragOverIndex": {},
       "_processedTabs": {}
     };
   }
@@ -320,6 +484,28 @@ export class EzTabselector {
             }
           }
         }
+      }, {
+        "method": "ezReorder",
+        "name": "ezReorder",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando as abas s\u00E3o reordenadas via drag-and-drop.\nRecebe o array de abas na nova ordem."
+        },
+        "complexType": {
+          "original": "Array<Tab>",
+          "resolved": "Tab[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Tab": {
+              "location": "local"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -353,6 +539,12 @@ export class EzTabselector {
     return [{
         "propName": "tabs",
         "methodName": "observeTabs"
+      }, {
+        "propName": "selectedIndex",
+        "methodName": "observeSelectedIndex"
+      }, {
+        "propName": "selectedTab",
+        "methodName": "observeSelectedTab"
       }];
   }
 }