@sankhyalabs/ezui 1.1.125 → 1.1.128

package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js

@@ -1,32 +1,52 @@
+import { StringUtils } from '@sankhyalabs/core';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
 import { getSpritePath } from '../../../../utils/AssetsUtils';
-import { StringUtils } from '@sankhyalabs/core';
 export class GridConfig {
   constructor() {
-    this._columnListHistory = [];
     this._orderListItems = [];
+    this._orderPriorityList = [];
     this._columListItems = [];
-    this.selectedTab = "Colunas";
     this._selectedIndex = -1;
+    this.selectedTab = "Colunas";
   }
   /* Creation Methods */
   createOrderList() {
-    var _a;
     let newList = [];
-    if (((_a = this._columnListHistory) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this._columnListHistory.find(group => group.group === "Visíveis").items.forEach(column => {
-        let item = { label: column.label };
+    this.columns.forEach(column => {
+      var _a;
+      let configItem = (_a = this.config) === null || _a === void 0 ? void 0 : _a.columns.find(item => item.name === column.name);
+      let item = { name: column.name, label: column.label };
+      if (configItem) {
+        item['orderIndex'] = configItem.orderIndex;
+        item['ascending'] = configItem.ascending;
+      }
+      if (!column.hidden) {
         newList.push(item);
-      });
-    }
-    else {
-      this.columns.forEach(column => {
-        let item = { name: column.name, label: column.label };
-        if (!column.hidden) {
-          newList.push(item);
-        }
-      });
-    }
+      }
+    });
+    newList.sort((a, b) => {
+      //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
+      if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+        //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined && b.ascending != undefined) {
+        return (a.orderIndex - b.orderIndex);
+        //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined || b.ascending != undefined) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+      }
+      return (a.orderIndex - b.orderIndex);
+    });
     this._orderListItems = newList;
   }
   createColumnList() {
@@ -48,29 +68,44 @@ export class GridConfig {
         visibleGroup.items.push(item);
       }
     });
-    if (this._columnListHistory.length <= 0) {
-      this._columListItems = [visibleGroup, hiddenGroup];
-    }
+    this._columListItems = [visibleGroup, hiddenGroup];
   }
   buildColumnListSlot(item, group) {
     return (h("div", null,
       h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
   }
   buildOrderListSlot(item) {
-    let existingItem = this.columns.find(columnItem => columnItem.label === item.label);
     let selectedOption = "na";
-    if (existingItem === null || existingItem === void 0 ? void 0 : existingItem.sort) {
-      selectedOption = existingItem.sort;
+    if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
+      selectedOption = item.ascending == true ? 'asc' : 'desc';
     }
     return (h("div", null,
-      h("select-box", { selectedOption: selectedOption, key: 'select-box' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item); } })));
+      h("select-box", { selectedOption: selectedOption, key: 'select-box' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item.label); } })));
   }
-  updateOrder(sortOrder, updatedItem) {
+  updateOrder(sortOrder, updatedItemLabel) {
+    var _a;
     let newList = [...this.columns];
-    let newItem = newList.find(item => item.label === updatedItem.label);
+    let newItem = newList.find(item => item.label === updatedItemLabel);
     if (newItem) {
       newItem.sort = sortOrder.value === "na" ? undefined : sortOrder.value;
     }
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._orderPriorityList.find(item => item.label === newItem.label).sort = sortOrder;
+      this._orderPriorityList.filter(item => item.sort).map((item, index) => {
+        if (item.label === newItem.label) {
+          newItem.sortIndex = index;
+        }
+      });
+    }
+    else {
+      orderArray = newList.filter(item => item.sort && item.hidden !== true).map((item, index) => {
+        return { label: item.label, orderIndex: index };
+      });
+      orderArray.forEach(element => {
+        newList.find(item => item.label === element.label).sortIndex = element.orderIndex;
+      });
+    }
     this.columns = newList;
   }
   /* Actions Methods */
@@ -115,9 +150,100 @@ export class GridConfig {
         newColumnList.push(newColumnItem);
       });
     });
-    this._columnListHistory = [];
     this.columns = newColumnList;
-    this.configFinish.emit(this.columns);
+    this.save();
+  }
+  save() {
+    var _a;
+    let _newConfig;
+    if (this.config) {
+      _newConfig = this.config;
+    }
+    else {
+      _newConfig = this.createConfigFromState(this.columns);
+    }
+    let _newColumnConfigList = [];
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      orderArray = this.columns.filter(item => item.sort && item.hidden !== true).map((item) => {
+        return { label: item.label, orderIndex: 0 };
+      });
+      let indexCount = 0;
+      let newOrderArray = [];
+      this._orderPriorityList.forEach((orderPriorityItem) => {
+        let item = orderArray.find(column => column.label === orderPriorityItem.label);
+        if (item) {
+          item.orderIndex = indexCount;
+          newOrderArray.push(item);
+          indexCount++;
+        }
+      });
+      if (newOrderArray.length > 0) {
+        orderArray = newOrderArray;
+      }
+    }
+    for (let i = 0; i < this.columns.length; i++) {
+      const column = this.columns[i];
+      let _newColumnConfig = _newConfig.columns.find(_newColumnConfig => column.name === _newColumnConfig.name);
+      if (column.hidden === true && _newColumnConfig) {
+        continue;
+      }
+      if (_newColumnConfig) {
+        _newColumnConfig.width = column.width;
+      }
+      else if (column.hidden === false) {
+        _newColumnConfig = { name: column.name, width: column.width, orderIndex: 0 };
+      }
+      if (_newColumnConfig) {
+        if (column.sort) {
+          _newColumnConfig.ascending = column.sort.toUpperCase() === "ASC" ? true : false;
+          if (orderArray) {
+            adjustPriorityOrder(column, _newColumnConfig);
+          }
+          else {
+            _newColumnConfig.orderIndex = column.sortIndex;
+          }
+        }
+        else {
+          delete _newColumnConfig.ascending;
+          _newColumnConfig.orderIndex = 0;
+        }
+        _newColumnConfigList.push(_newColumnConfig);
+      }
+    }
+    _newConfig.columns = _newColumnConfigList;
+    this.configFinish.emit(_newConfig);
+    this._orderList.clearHistory();
+    function adjustPriorityOrder(column, _newColumnConfig) {
+      if (orderArray) {
+        let orderItem = orderArray.find(item => item.label === column.label);
+        if (orderItem) {
+          _newColumnConfig.orderIndex = orderItem.orderIndex;
+        }
+      }
+    }
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach(columnState => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
   }
   async locateColumn(evt, searchingText) {
     var _a;
@@ -207,15 +333,14 @@ export class GridConfig {
     return false;
   }
   closeConfig() {
-    this._columnListHistory = [];
     this.configCancel.emit();
+    this._orderList.clearHistory();
   }
   /* Handlers */
   handleTabChange(ev) {
     var _a;
     if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.selectedTab) {
       if (ev.target.selectedTab === "Ordenação das linhas") {
-        this._columnListHistory = this._columnList.dataSource;
         this.createOrderList();
       }
       this.selectedTab = ev.target.selectedTab;
@@ -230,11 +355,18 @@ export class GridConfig {
       }
     }
   }
+  handleOrderListChange(ev) {
+    if (ev.detail) {
+      let orderPriorityList = ev.detail;
+      if (orderPriorityList) {
+        this._orderPriorityList = orderPriorityList;
+      }
+    }
+  }
   componentWillRender() {
     var _a;
     if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       this.createColumnList();
-      this.createOrderList();
     }
   }
   componentDidRender() {
@@ -260,10 +392,10 @@ export class GridConfig {
       h("div", { class: "grid-config__main" },
         h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }),
         h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"),
-        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
+        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
       h("div", { class: "grid-config__footer" },
         h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }),
-        h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
+        h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get is() { return "grid-config"; }
   static get encapsulation() { return "scoped"; }
@@ -315,6 +447,26 @@ export class GridConfig {
         "tags": [],
         "text": ""
       }
+    },
+    "config": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "EzGridConfig",
+        "resolved": "EzGridConfig",
+        "references": {
+          "EzGridConfig": {
+            "location": "import",
+            "path": "../../controller/EzGridController"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get events() { return [{
@@ -328,13 +480,10 @@ export class GridConfig {
         "text": ""
       },
       "complexType": {
-        "original": "Array<EzGridColumn>",
-        "resolved": "EzGridColumn[]",
+        "original": "EzGridConfig",
+        "resolved": "EzGridConfig",
         "references": {
-          "Array": {
-            "location": "global"
-          },
-          "EzGridColumn": {
+          "EzGridConfig": {
             "location": "import",
             "path": "../../controller/EzGridController"
           }

package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.js

@@ -4,7 +4,7 @@ export class SelectBox {
     this.selectedOption = { value: "na", label: "N/A" };
   }
   render() {
-    return (h("ez-combo-box", { class: "grid-config-combo inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true },
+    return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true },
       h("option", { value: "na" }, "N/A"),
       h("option", { value: "asc" }, "A-Z"),
       h("option", { value: "desc" }, "Z-A")));

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Method, State, Event } from '@stencil/core';
+import { Component, Event, h, Host, Method, Prop, State } from '@stencil/core';
 ;
 ;
 export class EzList {
@@ -46,6 +46,12 @@ export class EzList {
     }
   }
   /**
+  * Responsável por limpar a lista de histórico do componente.
+  */
+  async clearHistory() {
+    this._listItemsHistory = [];
+  }
+  /**
   * Recebe   como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item específico (opcional).
   */
   async setSelection(selectedItem, scrollToOption) {
@@ -636,6 +642,22 @@ export class EzList {
       }
     }]; }
   static get methods() { return {
+    "clearHistory": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Respons\u00E1vel por limpar a lista de hist\u00F3rico do componente.",
+        "tags": []
+      }
+    },
     "setSelection": {
       "complexType": {
         "signature": "(selectedItem: ListItem, scrollToOption?: boolean) => Promise<void>",

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

@@ -33,7 +33,7 @@
   -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
 }
 
-.scroll.midle {
+.scroll.middle {
   -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
 }
 

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

@@ -129,7 +129,7 @@ export class EzTabselector {
       else {
         this._forwardButton.classList.add("hidden");
       }
-      const classNames = ["", "startHidden", "endHidden", "midle"];
+      const classNames = ["", "startHidden", "endHidden", "middle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
       classNames.forEach((name) => {
         if (name !== currentClass && container.classList.contains(name)) {

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

@@ -5,6 +5,10 @@ export class EzTextArea {
      * Deixa o campo disponível ou não para digitação.
      */
     this.enabled = true;
+    /**
+     * Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
+     */
+    this.rows = 4;
     /**
      * Permite exibir a mensagem de erro.
      */
@@ -36,11 +40,17 @@ export class EzTextArea {
     if (this._initialRows == undefined) {
       this._initialRows = this.rows > 0 ? this.rows : undefined;
     }
-    this.rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    const rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    if (rows !== this.rows) {
+      this.rows = rows;
+    }
   }
   adjustRowsValue() {
-    this.rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
-    this._initialRows = this.rows;
+    const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    if (rows !== this.rows) {
+      this.rows = rows;
+      this._initialRows = rows;
+    }
   }
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
@@ -225,7 +235,8 @@ export class EzTextArea {
         "text": "Ajusta o n\u00FAmero de linhas e consequentemente o height do textarea. Valor default: 4"
       },
       "attribute": "rows",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "4"
     },
     "canShowError": {
       "type": "boolean",