@sankhyalabs/ezui 1.1.161 → 1.2.0-beta.1

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

@@ -1,15 +1,9 @@
 import { Component, h, Host, Prop, Method, Event, State, Watch } from "@stencil/core";
 import AgGridController from "./controller/ag-grid/AgGridController";
-import DataUnitBridge from "./controller/DataUnitBridge";
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
     this._popUpGridConfig = false;
-    /**
-    * Determina o número de linhas de cada página. Caso informado o valor -1
-    * não haverá paginação.
-    */
-    this.pageSize = -1;
   }
   /**
   * Método responsável por receber a definição das colunas
@@ -55,98 +49,17 @@ export class EzGrid {
     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);
   }
-  /**
-  * Método para fazer um filtro rápido na grid.
-  */
-  async nextPage() {
-    this._gridController.nextPage();
-  }
-  /**
-  * Método para fazer um filtro rápido na grid.
-  */
-  async previousPage() {
-    this._gridController.previousPage();
-  }
-  /**
-  * Método para fazer um filtro rápido na grid.
-  */
-  async hasNextPage() {
-    return new Promise(resolve => {
-      resolve(this._navigationHasNext);
-    });
-  }
-  /**
-  * Método para fazer um filtro rápido na grid.
-  */
-  async hasPreviousPage() {
-    return new Promise(resolve => {
-      resolve(this._navigationHasPrevious);
-    });
-  }
-  /**
-  * Método para verificar se o registro selecionado é o ultimo da página.
-  */
-  async isLastOfPage() {
-    return new Promise(resolve => {
-      resolve(this._gridController.isLastOfPage());
-    });
-  }
-  /**
-  * Método para verificar se o registro selecionado é o primeiro da página.
-  */
-  async isFirstOfPage() {
-    return new Promise(resolve => {
-      resolve(this._gridController.isFirstOfPage());
-    });
-  }
-  /**
-  * Método para navegar para o proxímo registro da grid.
-  */
-  async nextRecord() {
-    this._gridController.nextRecord();
-  }
-  /**
-  * Método para navegar para o registro anterior da grid.
-  */
-  async previousRecord() {
-    this._gridController.previousRecord();
-  }
-  /**
-  * Método para verificar se existem proximos registros.
-  */
-  async hasNextRecord() {
-    return Promise.resolve(this._gridController.hasNextRecord());
-  }
-  /**
-  * Método para verificar se existem registros anteriores.
-  */
-  async hasPreviousRecord() {
-    return Promise.resolve(this._gridController.hasPreviousRecord());
-  }
-  /**
-  * Método para abrir a configuração da grid.
-  */
-  async openGridConfig() {
-    this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
-    this._gridConfig.selectedTab = "Colunas";
-    this._popUpGridConfig = true;
-  }
   componentWillLoad() {
-    if (this.dataUnit) {
-      this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
-      addEventListener("ezSelectionChange", (evt) => this.dataUnit.setSelection(evt.detail.selection.map((r) => r.__record__id__)));
-    }
+    addEventListener("ezSelectionChange", (evt) => {
+      if (this.dataUnit) {
+        this.dataUnit.setSelection(evt.detail.selection.map((r) => r.__record__id__));
+      }
+    });
   }
   onColumnStateChange(type, state, info) {
     var _a;
@@ -214,45 +127,41 @@ export class EzGrid {
   componentDidLoad() {
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
-      onSelectionChange: (state) => this.ezSelectionChange.emit(state),
-      onPaginationChange: (status) => {
-        this._navigationHasPrevious = status.hasPrevious;
-        this._navigationHasNext = status.hasNext;
-        this._navigationFirstRow = status.pageStart;
-        this._navigationLastRow = status.pageEnd;
-        this._navigationTotalRows = status.totalRows;
-      },
+      onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
+      onPaginationChange: (paginationInfo) => this._paginationInfo = paginationInfo,
       onDoubleClick: (row) => {
         this.ezDoubleClick.emit(row);
       },
       allowMultipleSelection: this.multipleSelection,
-      pageSize: this.pageSize,
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit
     });
-    if (this._dataUnitBridge) {
-      this._gridController.setColumnsDef(this._dataUnitBridge.buildColumnDefs(), true);
-    }
     if (this.config) {
       this.observeConfig(this.config);
     }
   }
-  disconnectedCallback() {
-    if (this._dataUnitBridge) {
-      this._dataUnitBridge.onDisconnectedCallback();
+  previousPage() {
+    if (this.dataUnit) {
+      this.dataUnit.previousPage();
+    }
+  }
+  nextPage() {
+    if (this.dataUnit) {
+      this.dataUnit.nextPage();
     }
   }
   getPaginationControl() {
-    if (this.pageSize === -1) {
-      return null;
+    if (this._paginationInfo) {
+      const { firstRecord, lastRecord, total, currentPage, hasMore } = this._paginationInfo;
+      return [
+        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" },
+          h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`),
+          ` de ${total}`),
+        h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
+        h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      ];
     }
-    return [
-      h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" },
-        h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
-        ` de ${this._navigationTotalRows}`),
-      h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
-      h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
-    ];
+    return null;
   }
   observeConfig(config) {
     this._gridController.setColumnsState(config.columns);
@@ -261,6 +170,11 @@ export class EzGrid {
   closeGridConfig() {
     this._popUpGridConfig = false;
   }
+  async openGridConfig() {
+    this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
+    this._gridConfig.selectedTab = "Colunas";
+    this._popUpGridConfig = true;
+  }
   render() {
     return (h(Host, null,
       h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" },
@@ -319,24 +233,6 @@ export class EzGrid {
         "text": "Configura\u00E7\u00E3o de exibi\u00E7\u00E3o da grade."
       }
     },
-    "pageSize": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determina o n\u00FAmero de linhas de cada p\u00E1gina. Caso informado o valor -1\nn\u00E3o haver\u00E1 pagina\u00E7\u00E3o."
-      },
-      "attribute": "page-size",
-      "reflect": false,
-      "defaultValue": "-1"
-    },
     "serverUrl": {
       "type": "string",
       "mutable": false,
@@ -376,11 +272,7 @@ export class EzGrid {
     }
   }; }
   static get states() { return {
-    "_navigationHasPrevious": {},
-    "_navigationHasNext": {},
-    "_navigationFirstRow": {},
-    "_navigationLastRow": {},
-    "_navigationTotalRows": {},
+    "_paginationInfo": {},
     "_popUpGridConfig": {}
   }; }
   static get events() { return [{
@@ -414,12 +306,11 @@ export class EzGrid {
         "text": "Evento disparado ao selecionar linhas da grade."
       },
       "complexType": {
-        "original": "EzGridSelectionStatus",
-        "resolved": "EzGridSelectionStatus",
+        "original": "Array<any>",
+        "resolved": "any[]",
         "references": {
-          "EzGridSelectionStatus": {
-            "location": "import",
-            "path": "./controller/EzGridController"
+          "Array": {
+            "location": "global"
           }
         }
       }
@@ -627,22 +518,6 @@ export class EzGrid {
         "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>",
@@ -662,166 +537,6 @@ export class EzGrid {
         "tags": []
       }
     },
-    "nextPage": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para fazer um filtro r\u00E1pido na grid.",
-        "tags": []
-      }
-    },
-    "previousPage": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para fazer um filtro r\u00E1pido na grid.",
-        "tags": []
-      }
-    },
-    "hasNextPage": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para fazer um filtro r\u00E1pido na grid.",
-        "tags": []
-      }
-    },
-    "hasPreviousPage": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para fazer um filtro r\u00E1pido na grid.",
-        "tags": []
-      }
-    },
-    "isLastOfPage": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para verificar se o registro selecionado \u00E9 o ultimo da p\u00E1gina.",
-        "tags": []
-      }
-    },
-    "isFirstOfPage": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para verificar se o registro selecionado \u00E9 o primeiro da p\u00E1gina.",
-        "tags": []
-      }
-    },
-    "nextRecord": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para navegar para o prox\u00EDmo registro da grid.",
-        "tags": []
-      }
-    },
-    "previousRecord": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para navegar para o registro anterior da grid.",
-        "tags": []
-      }
-    },
-    "hasNextRecord": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para verificar se existem proximos registros.",
-        "tags": []
-      }
-    },
-    "hasPreviousRecord": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "M\u00E9todo para verificar se existem registros anteriores.",
-        "tags": []
-      }
-    },
     "openGridConfig": {
       "complexType": {
         "signature": "() => Promise<void>",
@@ -834,7 +549,7 @@ export class EzGrid {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "M\u00E9todo para abrir a configura\u00E7\u00E3o da grid.",
+        "text": "",
         "tags": []
       }
     }

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

@@ -1,6 +1,7 @@
 import { StringUtils } from '@sankhyalabs/core';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
 import ApplicationUtils from '../../../../utils/ApplicationUtils';
+import { DialogType } from '../../../ez-dialog/DialogType';
 export class EzGridConfig {
   constructor() {
     this._orderListItems = [];
@@ -350,7 +351,7 @@ export class EzGridConfig {
         labelConfirm: "Salvar",
         btnConfirmDanger: false
       };
-      ApplicationUtils.confirm("Aviso", "As alterações realizadas serão descartadas. Gostaria de salvar antes de sair?", null, false, options)
+      ApplicationUtils.confirm("Aviso", "As alterações realizadas serão descartadas. Gostaria de salvar antes de sair?", null, DialogType.WARN, options)
         .then(response => {
         if (!response) {
           this._dataChanged = false;

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

@@ -67,6 +67,12 @@ export class EzPopover {
   }
   observeOpened(newValue, oldValue) {
     if (newValue != oldValue) {
+      if (oldValue) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
       this.ezVisibilityChange.emit(newValue);
     }
   }

package/dist/collection/components/ez-radio-button/ez-radio-button.css

@@ -0,0 +1,204 @@
+:host {
+ 
+  /* Título do radio */
+  /*@doc Define a família da fonte do label.*/
+  --ez-radio-button--font-family: var(--font-pattern, Arial);
+  /*@doc Define o tamanho do label.*/
+  --ez-radio-button--font-size:  var(--text--large, 16px);
+  /*@doc Define o peso da fonte do label.*/
+  --ez-radio-button--font-weight: var(--text-weight--large);
+  /*@doc Define a cor do texto.*/
+  --ez-radio-button--font-color: var(--title--primary, #2B3A54);
+  
+  /* Label itens do radio */
+  /*@doc Define a família da fonte do label. */
+  --ez-radio-button__form-label--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label. */
+  --ez-radio-button__form-label--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor do texto. */
+  --ez-radio-button__form-label--title-primary: var(--title--primary, #2B3A54);
+  /*@doc Define o tamanho do label. */
+  --ez-radio-button__form-label--font-size: var(--text--medium, 14px);
+
+  /* Colors */
+  /*@doc cor da borda do radio sem seleção (sem seleção / sem foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--border-color: var(--title--primary, #2B3A54);
+  /*@doc cor do radio selecionado (com seleção / sem foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--color: var(--color--primary, #008561);
+  /*@doc cor da borda do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--border-color: var(--color--strokes, #dce0e8);
+  /*@doc cor do background do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--background-color: var(--background--medium, #f0f3f7);
+  /*@doc cor da label quando o radio está desativado (sem seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--color: var(--color--strokes, #dce0e8);
+  /*@doc cor do centro do radio quando o radio está desativado (com seleção / sem foco / sem hover / disabled) */
+  --ez-radio-button__form-radio--disabled--before--background-color: var(--color--strokes, #dce0e8);
+  /*@doc cor do background quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--focus--background-color: var(--color--inverted, #fff);
+  /*@doc cor do box-shadow quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--box-shadow-color: var(--background--strong, #e4eaf1);
+  /*@doc cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--focus--background-color: var(--color--inverted, #fff);
+  /*@doc cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) */
+  --ez-radio-button__form-radio--checked--focus--box-shadow-color: var(--color--primary-300, #e2f4ef);
+  /*@doc cor do background quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) */
+  --ez-radio-button__form-radio--checked--hover--background-color: var(--color--inverted, #fff);
+  /*@doc cor do box-shadow quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) */
+  --ez-radio-button__form-radio--checked--hover--box-shadow-color: #daece7; /*d7e9e4*/
+  /*@doc cor do hover quando o radio está desmarcado (sem seleção / sem foco / com hover / enabled) */
+  --ez-radio-button__form-radio--hover--box-shadow-color: var(--color--strokes, #dce0e8);
+  /*@doc cor do fundo quando o radio está marcado e desativado (com seleção / sem foco / com hover / disabled) */
+  --ez-radio-button__form-radio--checked--disabled--hover--background-color: var(--background--medium, #f0f3f7);
+
+  /*private*/
+  display: flex;
+  width: 100%;
+  margin: 10px;  
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.form--vertical {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.form--horizontal {
+  /*private*/
+  display: flex;
+  flex-direction: row; 
+}
+
+.form__group {
+  /*private*/
+  display: flex;
+  align-items: center;
+  margin-top: 15px;  
+}
+
+.label{
+  /*public*/
+  font-family: var(--ez-radio-button--font-family);
+  font-size: var(--ez-radio-button--font-size);
+  font-weight: var(--ez-radio-button--font-weight);  
+  color: var(--ez-radio-button--font-color);
+}
+
+.form__label{
+  /*private*/
+  cursor: pointer;
+  padding-left: 12px;
+  padding-right: 25px;
+  /*public*/
+  font-weight: var(--ez-radio-button__form-label--font-weight);  
+  color: var(--ez-radio-button__form-label--title-primary);
+  font-family: var(--ez-radio-button__form-label--font-family);
+  font-size: var(--ez-radio-button__form-label--font-size);
+}
+
+.form__radio {
+  /*private*/
+  cursor: pointer;
+  appearance: none;  
+  outline: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;  
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  /*public*/
+  border: 2px solid var(--ez-radio-button__form-radio--border-color);
+}
+
+.form__radio::before {
+  /*private*/
+  content: '';
+  display: block;
+  position: absolute;
+  opacity: 0;
+  transition: all 300ms ease-in-out;
+  height: calc(18px/2);
+  width: calc(18px/2);
+  border-radius: 50%;
+  /*public*/
+  background: var(--ez-radio-button__form-radio--checked--color);
+}
+
+.form__radio:checked:before {
+  /*private*/
+  opacity: 1;
+}
+
+.form__radio:checked{
+  /*public*/
+  border: 2px solid var(--ez-radio-button__form-radio--checked--color);
+}
+
+.form__radio:disabled{
+  /*private*/
+  cursor: default;
+  /*public*/
+  border: 2px solid var(--ez-radio-button__form-radio--disabled--border-color);
+  background-color: var(--ez-radio-button__form-radio--disabled--background-color);
+}
+
+.form__radio:disabled:hover {
+  /*private*/
+  box-shadow: inherit;
+}
+
+input[type=radio]:disabled ~ label{
+  /*private*/
+  cursor: default;
+  /*public*/
+  color: var(--ez-radio-button__form-radio--disabled--color);
+}
+
+.form__radio:disabled:before {
+  /*public*/
+  background: var(--ez-radio-button__form-radio--disabled--before--background-color);
+}
+
+.form__radio:focus {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--focus--background-color); 
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--box-shadow-color);
+}
+
+.form__radio:checked:focus {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--checked--focus--background-color); 
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--focus--box-shadow-color);
+}
+
+.form__radio:checked:hover {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--checked--hover--background-color); 
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--hover--box-shadow-color);
+}
+
+.form__radio:hover {
+  /*private*/
+  transition: 0.25s linear;
+  /*public*/
+  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--hover--box-shadow-color);
+}
+
+.form__radio:checked:disabled:hover{
+  /*private*/
+  box-shadow: none;
+  /*public*/
+  background-color: var(--ez-radio-button__form-radio--checked--disabled--hover--background-color);
+}
+