@sankhyalabs/ezui 1.1.117 → 1.1.120

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

@@ -57,9 +57,9 @@
   /*@doc Define a altura do slider do checkbox.*/
   --ez-switch--slider--height: 14px;
   /*@doc Define a largura do pino do slider do checkbox.*/
-  --ez-switch--pin--width: 20px;
+  --ez-switch--pin--width: 19px;
   /*@doc Define a altura do pino do slider do checkbox.*/
-  --ez-switch--pin--height: 20px;
+  --ez-switch--pin--height: 19px;
   /*@doc Define a largura do slider quando focado.*/
   --ez-switch--focus--width: 32px;
   /*@doc Define a altura do slider quando focado.*/
@@ -71,15 +71,17 @@
   /*@doc Define a cor de fundo do checkbox desabilitado no modo switch.*/
   --ez-switch--disabled--background-color: var(--color--disable-secondary);
   /*@doc Define a cor de fundo do checkbox marcado no modo switch.*/
-  --ez-switch--checked--background-color: var(--color--primary-300);
+  --ez-switch--disabled--checked--background-color: var(--color--primary-300);
+  /*@doc Define a cor de fundo do checkbox marcado no modo switch.*/
+  --ez-switch--checked--background-color: var(--color--primary);
 
   /*pin*/
   /*@doc Define a cor de fundo do pino do slider. */
   --ez-switch--pin--background-color: var(--background--xlight);
   /*@doc Define a cor de fundo do pino do slider quando desabilitado. */
-  --ez-switch--pin--disabled--background-color: var(--color--disable-secondary);
+  --ez-switch--pin--disabled--background-color: var(--color--disable-primary);
   /*@doc Define a cor de fundo do pino do slider quando marcado. */
-  --ez-switch--pin--checked--background-color: var(--color--primary);
+  --ez-switch--pin--checked--background-color: var(--background--xlight);
   /*@doc Define a cor de fundo do pino do slider quando marcado e desabilitado1. */
   --ez-switch--pin--checked--disabled--background-color: #E8F7F4;
   /*@doc Define a cor de fundo do pino do slider quando focado. */
@@ -87,6 +89,11 @@
   /*@doc Define a cor de fundo do pino do slider quando marcado e focado. */
   --ez-switch--pin--checked--focus--background-color: var(--color--primary);
 
+  /*@doc Define a cor da borda do pino do slider. */
+  --ez-switch--pin--border-color: var(--text--primary);
+  /*@doc Define a cor da borda do pino do slider quando desabilitado. */
+  --ez-switch--pin--disabled--border-color: var(--text--secondary);
+
   /*@doc Define o tamanho da fonte do label.*/
   --ez-check--label--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
@@ -218,7 +225,7 @@ input.switchMode {
   outline: none;
   cursor: pointer;
   border-radius: 20px;
-  border: var(--border--small, 1px solid) var(--text--secondary, #a2abb9);
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);
   transition: background-color var(--transition);
 
   /*public*/
@@ -230,6 +237,12 @@ input.switchMode {
 input.switchMode:disabled {
   /*public*/
   background-color: var(--ez-switch--disabled--background-color);
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9);
+}
+
+input.switchMode:checked:disabled {
+  /*public*/
+  background-color: var(--ez-switch--disabled--checked--background-color);
 }
 
 input.switchMode::after {
@@ -240,8 +253,10 @@ input.switchMode::after {
   box-shadow: var(--shadow);
   transition: transform var(--transition);
   transition: background-color var(--transition);
-  transform: translateX(-2px) translateY(-3px);
+  transition: border-color var(--transition);
+  transform: translateX(-2px) translateY(-4px);
   border-radius: 50%;
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);
 
   /*public*/
   width: var(--ez-switch--pin--width);
@@ -252,6 +267,7 @@ input.switchMode::after {
 input.switchMode:disabled::after {
   /*public*/
   background-color: var(--ez-switch--pin--disabled--background-color);
+  border: var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9);
 }
 
 /*-------------------------------ON---------------------------------*/
@@ -277,7 +293,7 @@ input.switchMode::before {
   width: var(--ez-switch--focus--width);
   height: var(--ez-switch--focus--height);
   top: calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);
-  left: calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width))/2);
+  left: calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);
   background-color: var(--ez-switch--pin--focus--background-color);
 }
 
@@ -290,18 +306,20 @@ input.switchMode:focus::before {
 input.switchMode:checked:focus::before {
   /*private*/
   background-color: var(--ez-switch--pin--checked--focus--background-color);
-  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width)));
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px));
 }
 
 input.switchMode:checked::after {
   /*private*/
   transition: transform var(--transition);
   transition: background-color var(--transition);
-  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-3px);
+  transition: border-color var(--transition);
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);
   box-shadow: var(--shadow);
 
   /*public*/
   background-color: var(--ez-switch--pin--checked--background-color);
+  border: var(--border--small, 1px solid) var(--color--primary, #008561);
 }
 
 input.switchMode:checked:disabled::after {

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -37,11 +37,13 @@ export default class AgGridController {
       this._serverURL = options.serverURL;
       this._dataUnit = options.dataUnit;
       this._dataUnit.sortingProvider = this;
+      this._dataSource = new DataSource(this._dataUnit, this._serverURL);
       this._gridOptions = {
         localeText: gridTerms,
         rowModelType: "serverSide",
+        serverSideStoreType: "partial",
         rowSelection: this._multipleSelection ? "multiple" : "single",
-        serverSideDatasource: new DataSource(this._dataUnit, this._serverURL),
+        serverSideDatasource: this._dataSource,
         getRowNodeId: (params) => typeof params === "string" ? params : params[this._idAttribName],
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -52,10 +54,13 @@ export default class AgGridController {
           }));
           return items;
         },
-        onViewportChanged: () => {
-          if (this._dataUnit) {
-            this.selectRows(this._dataUnit.getSelection());
-          }
+        getRowHeight: () => {
+          //FIXME: Existe um bug no PartialStore.prototype.destroyAllBlocks do ag-grid, pois
+          //apesar de destruir os blocos, mantém a variável "blockHeights" com o tamanho antigo
+          //dos blocos, então, quando removemos uma linha, a altura do bloco não é recalculada.
+          //Descobri que setando manualmente a altura das linhas, apesar do bloco ficar com 
+          //tamanho errado, isso afeta menos o componente.
+          return 25;
         }
       };
       this.setOptionsEvents(this._gridOptions);
@@ -78,6 +83,11 @@ export default class AgGridController {
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onPaginationChanged = () => this.onPaginationChange();
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
+    opt.onViewportChanged = () => {
+      if (this._dataUnit) {
+        this.selectRows(this._dataUnit.getSelection());
+      }
+    };
   }
   setOptionsPagination(opt) {
     opt.pagination = (this._pageSize > -1);
@@ -95,11 +105,11 @@ export default class AgGridController {
     }
     this._gridOptions.api.setRowData(data);
   }
-  addRows(rows) {
+  addRows() {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    this._gridOptions.api.applyServerSideTransaction({ add: rows });
+    this._gridOptions.api.refreshServerSideStore({});
   }
   selectRows(rowIds) {
     if (this._grid === undefined) {
@@ -114,11 +124,11 @@ export default class AgGridController {
       });
     }
   }
-  removeRows(rowIds) {
+  removeRows() {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    this._gridOptions.api.applyServerSideTransaction({ remove: rowIds });
+    this._gridOptions.api.refreshServerSideStore({});
   }
   changeValues(changes, rowIds) {
     if (this._grid === undefined) {
@@ -235,6 +245,14 @@ export default class AgGridController {
   previousPage() {
     this._gridOptions.api.paginationGoToPreviousPage();
   }
+  goToPage(page) {
+    this._gridOptions.api.paginationGoToPage(page);
+  }
+  quickFilter(term) {
+    this._dataSource.setQuickFilter(term);
+    this.goToPage(0);
+    this._gridOptions.api.refreshServerSideStore({ purge: true });
+  }
   buildColDef(source) {
     return {
       headerName: source.label,

package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js

@@ -19,15 +19,15 @@ export default class DataSource {
       }
     }
     else {
-      this.loadData()
+      this.loadData({ limit: params.api.paginationGetPageSize(), offset: params.request.startRow, quickFilter: this._quickFilterTerm })
         .then(data => params.success(data))
         .catch(() => params.fail());
     }
   }
-  loadData() {
+  loadData(page) {
     return new Promise((resolve, reject) => {
       if (this._dataUnit) {
-        this._dataUnit.loadData().then(rowData => resolve({ rowData, rowCount: rowData.length }));
+        this._dataUnit.loadData(page).then(pageRes => resolve({ rowData: this._dataUnit.records, rowCount: pageRes.total }));
       }
       else {
         fetch(this._serverURL)
@@ -38,4 +38,7 @@ export default class DataSource {
       }
     });
   }
+  setQuickFilter(term) {
+    this._quickFilterTerm = term;
+  }
 }

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

@@ -54,6 +54,18 @@ export class EzGrid {
   async getColumns() {
     return Promise.resolve(this._gridController.getColumnsDef());
   }
+  /**
+  * Método para recarregar pagina atual da grid.
+  */
+  async refresh() {
+    this._gridController.refresh();
+  }
+  /**
+  * Método para fazer um filtro rápido na grid.
+  */
+  async quickFilter(term) {
+    this._gridController.quickFilter(term);
+  }
   componentWillLoad() {
     if (this.dataUnit) {
       this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
@@ -433,6 +445,41 @@ export class EzGrid {
         "text": "M\u00E9todo retornar o estado atual das colunas do grid.",
         "tags": []
       }
+    },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "M\u00E9todo para recarregar pagina atual da grid.",
+        "tags": []
+      }
+    },
+    "quickFilter": {
+      "complexType": {
+        "signature": "(term: string) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "M\u00E9todo para fazer um filtro r\u00E1pido na grid.",
+        "tags": []
+      }
     }
   }; }
 }

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

@@ -17,11 +17,9 @@
   position: relative;
   display: flex;
   user-select: none;
-  width: 100%;
 }
 
-
-.box {
+.popover__box {
   /*private*/
   z-index: var(--ez-popover__box--z-index);
   display: flex;
@@ -35,10 +33,10 @@
   box-shadow: var(--ez-popover__box--box-shadow);
 }
 
-.box--fit-content {
+.popover__box--fit-content {
   width: fit-content;
 }
 
-.box--full-width {
+.popover__box--full-width {
   width: 100%;
 }

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

@@ -29,6 +29,41 @@ export class EzPopover {
      * Opções: "100% e "fit-content" (default)
      */
     this.boxWidth = "fit-content";
+    this.innerClickTest = (_popOvercontainer, node, eventOrigin) => {
+      const innerContainers = [_popOvercontainer];
+      if (this.innerElement) {
+        if (typeof (this.innerElement) == "string") {
+          innerContainers.push(document.querySelector(`#${this.innerElement}`));
+        }
+        else {
+          this.innerElement.forEach(comp => {
+            innerContainers.push(document.querySelector(`#${comp}`));
+          });
+        }
+      }
+      for (var i = 0; i < innerContainers.length; i++) {
+        let _container = innerContainers[i];
+        if (_container != undefined) {
+          if (_container.contains(node)) {
+            return true;
+          }
+          if (eventOrigin && "nodeType" in (eventOrigin === null || eventOrigin === void 0 ? void 0 : eventOrigin.target) && _container.contains(eventOrigin.target)) {
+            return true;
+          }
+          if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
+            return true;
+          }
+          _container = this._host;
+          if (!_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    this.backClickListener = () => {
+      this.ezVisibilityChange.emit(false);
+    };
   }
   dispatchVisibilityChange(newValue, oldValue) {
     if (newValue != oldValue) {
@@ -45,16 +80,8 @@ export class EzPopover {
       left,
       bottom,
       right,
-      innerClickTest: (_container, node) => {
-        if (_container.contains(node)) {
-          return true;
-        }
-        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
-          return true;
-        }
-        _container = this._host;
-        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
-      }
+      innerClickTest: this.innerClickTest,
+      backClickListener: this.backClickListener
     };
     FloatingManager.updateFloatPosition(this._box, this._container, floatingOptions);
   }
@@ -68,16 +95,8 @@ export class EzPopover {
       left,
       bottom,
       right,
-      innerClickTest: (_container, node) => {
-        if (_container.contains(node)) {
-          return true;
-        }
-        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
-          return true;
-        }
-        _container = this._host;
-        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
-      }
+      innerClickTest: this.innerClickTest,
+      backClickListener: this.backClickListener
     };
     this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
     this.opened = true;
@@ -101,7 +120,7 @@ export class EzPopover {
   render() {
     return (h(Host, null,
       h("section", { ref: el => this._container = el },
-        h("div", { class: `box ${this.boxWidth === "fit-content" ? "box--fit-content" : "box--full-width"}`, ref: el => this._box = el },
+        h("div", { class: `popover__box ${this.boxWidth === "fit-content" ? "popover__box--fit-content" : "popover__box--full-width"}`, ref: el => this._box = el },
           h("slot", null)))));
   }
   static get is() { return "ez-popover"; }
@@ -237,6 +256,27 @@ export class EzPopover {
       },
       "attribute": "opened",
       "reflect": true
+    },
+    "innerElement": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<string> | string",
+        "resolved": "string | string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Array de componente(s) que ir\u00E1(\u00E3o) abrir o popover."
+      },
+      "attribute": "inner-element",
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -247,7 +287,7 @@ export class EzPopover {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Evento disparado ao exibir/ocultar o componente."
+        "text": "\nEvento disparado ao exibir/ocultar o componente."
       },
       "complexType": {
         "original": "boolean",
@@ -275,9 +315,6 @@ export class EzPopover {
         "references": {
           "Promise": {
             "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
           }
         },
         "return": "Promise<void>"
@@ -306,9 +343,6 @@ export class EzPopover {
         "references": {
           "Promise": {
             "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
           }
         },
         "return": "Promise<void>"

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

@@ -73,7 +73,7 @@
   mask-image: var(--ez-toast__btn__close__image);
 }
 
-.toast__container--oppened {
+.toast__container--opened {
   animation: fadein 0.5s, fadeout 0.5s 3s;
   visibility: visible;
 }

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

@@ -1,6 +1,10 @@
-import { Component, h, Prop, Method } from '@stencil/core';
+import { Component, h, Method, Prop, Host, forceUpdate } from '@stencil/core';
 export class EzToast {
   constructor() {
+    this._nextMessages = [];
+    this._currentMessageInfo = { message: "", fadeTime: undefined, useIcon: undefined };
+    this._toastOpenedClass = "toast__container--opened";
+    this._lastTimeOut = undefined;
     this._lang = "pt"; // Controla qual idioma será usado para definir a regras de hifenização.
     /**
     * Controla o tempo de exibição do componente em milissegundos.
@@ -18,21 +22,61 @@ export class EzToast {
   /**
   * Exibe o componente na tela.
   */
-  async show() {
-    this.container.classList.add("toast__container--oppened");
+  async show(message, fadeTime, useIcon, canClose) {
+    return new Promise(resolve => {
+      var _a;
+      if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains(this._toastOpenedClass)) {
+        this._nextMessages.push({ message, fadeTime, useIcon, canClose, callBack: resolve });
+      }
+      else {
+        this._currentMessageInfo.message = message || this.message;
+        this._currentMessageInfo.fadeTime = fadeTime || this.fadeTime;
+        this._currentMessageInfo.useIcon = useIcon || this.useIcon;
+        this._currentMessageInfo.callBack = resolve;
+        if (canClose) {
+          this._currentMessageInfo.canClose = this.canClose;
+        }
+        forceUpdate(this);
+        this.displayToast();
+        this._lastTimeOut = setTimeout(() => {
+          this.hideToast();
+        }, this._currentMessageInfo.fadeTime + 400);
+      }
+    });
+  }
+  hideToast() {
+    this.makeToastInvisible();
+    if (this._nextMessages.length > 0) {
+      if (this._currentMessageInfo.callBack) {
+        this._currentMessageInfo.callBack(true);
+      }
+      setTimeout(() => {
+        let newMessageInfo = this._nextMessages.shift();
+        this.show(newMessageInfo.message, newMessageInfo.fadeTime, newMessageInfo.useIcon);
+      });
+    }
+    if (this._currentMessageInfo.callBack) {
+      this._currentMessageInfo.callBack(true);
+    }
+  }
+  makeToastInvisible() {
+    this.container.classList.remove(this._toastOpenedClass);
+    this.container.style.animation = `none`;
+    if (this._lastTimeOut)
+      clearTimeout(this._lastTimeOut);
+  }
+  displayToast() {
+    this.container.classList.add(this._toastOpenedClass);
     this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
-    setTimeout(() => {
-      this.container.classList.remove("toast__container--oppened");
-      this.container.style.animation = `none`;
-    }, this.fadeTime + 400);
   }
   render() {
-    return (h("div", { ref: (el) => this.container = el, class: "toast__container" },
-      this.useIcon &&
-        h("slot", { name: "icon" }),
-      h("div", { lang: this._lang, class: this.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this.message, innerHTML: this.message }),
-      this.canClose &&
-        h("button", { class: "btn-close", onClick: () => { this.container.classList.remove("toast__container--oppened"); this.container.style.animation = `none`; } })));
+    return (h(Host, null,
+      h("div", { ref: (el) => this.container = el, class: "toast__container" },
+        this._currentMessageInfo.useIcon &&
+          h("slot", { name: "icon" }),
+        h("div", { lang: this._lang, class: this._currentMessageInfo.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this._currentMessageInfo.message, innerHTML: this._currentMessageInfo.message }),
+        this._currentMessageInfo.canClose &&
+          h("button", { class: "btn-close", onClick: () => { this.hideToast(); } }))));
   }
   static get is() { return "ez-toast"; }
   static get encapsulation() { return "shadow"; }
@@ -118,14 +162,26 @@ export class EzToast {
   static get methods() { return {
     "show": {
       "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
+        "signature": "(message: string, fadeTime: number, useIcon: boolean, canClose?: boolean) => Promise<unknown>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
         "references": {
           "Promise": {
             "location": "global"
           }
         },
-        "return": "Promise<void>"
+        "return": "Promise<unknown>"
       },
       "docs": {
         "text": "Exibe o componente na tela.",

package/dist/collection/components/test-du/test-du.js

@@ -47,16 +47,20 @@ export class TestDu {
         }
       ]
     };
-    this.dataUnit.dataLoader = () => new Promise(accept => accept([
-      {
-        __record__id__: "1321321321321321",
-        CODPARC: 10,
-        NOMEPARC: "Parceiro 10",
-        P: "M",
-        L: "Bagaço",
-        LI: "Azedo"
-      }
-    ]));
+    this.dataUnit.dataLoader = () => new Promise(accept => accept({
+      records: [{
+          __record__id__: "1321321321321321",
+          CODPARC: 10,
+          NOMEPARC: "Parceiro 10",
+          P: "M",
+          L: "Bagaço",
+          LI: "Azedo"
+        }],
+      limit: 0,
+      offset: 2,
+      total: 100,
+      hasMore: true
+    }));
   }
   render() {
     return (h("ez-form", { dataUnit: this.dataUnit }));

package/dist/collection/utils/ApplicationUtils.js

@@ -24,10 +24,7 @@ export default class ApplicationUtils {
       toast = document.createElement("ez-toast");
       window.document.body.appendChild(toast);
     }
-    toast.canClose = options.canClose;
-    toast.message = message;
-    toast.fadeTime = 4000;
-    toast.show();
+    toast.show(message, 4000, false, options.canClose);
   }
 }
 ApplicationUtils.defaultMessageOptions = {