@sankhyalabs/ezui 7.2.0-rc.8 → 7.2.0

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" }), 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"
       }];
   }
 }

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -41,6 +41,7 @@ export class EzTextInput {
       if (newValue != oldValue) {
         this._inputElem.value = this.value || "";
         this.handleChange();
+        this.applyMask(newValue);
         this.adjustFloatingLabel();
         this.checkIsOverflowing();
         if (!this.isSlaveMode()) {
@@ -185,12 +186,9 @@ export class EzTextInput {
     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;
@@ -216,20 +214,33 @@ export class EzTextInput {
       }
     }
   }
+  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;
@@ -296,7 +307,7 @@ export class EzTextInput {
     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';
@@ -327,12 +338,7 @@ export class EzTextInput {
     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;