@sankhyalabs/ezui 2.0.2 → 2.0.4

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Watch, Method, Event, Host } from '@stencil/core';
+import { Component, Prop, h, Method, Event, Host } from '@stencil/core';
 import { CheckMode } from './CheckMode';
 export class EzCheck {
   constructor() {
@@ -14,17 +14,6 @@ export class EzCheck {
      */
     this.mode = CheckMode.REGULAR;
   }
-  observeMode() {
-    var _a;
-    if (((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH) {
-      this._inputElem.classList.remove("regular-mode");
-      this._inputElem.classList.add("switch-mode");
-    }
-    else {
-      this._inputElem.classList.remove("switch-mode");
-      this._inputElem.classList.add("regular-mode");
-    }
-  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -40,9 +29,6 @@ export class EzCheck {
   async setFocus() {
     this._inputElem.focus();
   }
-  componentDidLoad() {
-    this.observeMode();
-  }
   changeValue() {
     if (!this.enabled) {
       return;
@@ -57,9 +43,13 @@ export class EzCheck {
     }
     return classes;
   }
+  getInputClasses() {
+    var _a;
+    return ((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? "switch-mode" : "regular-mode";
+  }
   render() {
     return (h(Host, null,
-      h("input", { type: "checkbox", class: "regular-mode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }),
+      h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled }),
       this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
   }
   static get is() { return "ez-check"; }
@@ -123,6 +113,23 @@ export class EzCheck {
       "reflect": true,
       "defaultValue": "true"
     },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o campo em um estado indeterminado, nem marcado nem desmarcado (n\u00E3o dispon\u00EDvel em modo \"switch\")."
+      },
+      "attribute": "indeterminate",
+      "reflect": false
+    },
     "mode": {
       "type": "string",
       "mutable": false,
@@ -192,8 +199,4 @@ export class EzCheck {
       }
     }
   }; }
-  static get watchers() { return [{
-      "propName": "mode",
-      "methodName": "observeMode"
-    }]; }
 }

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -151,7 +151,7 @@ export class EzComboBox {
   }
   buildItem(opt, index) {
     const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined },
+    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index },
       this.showOptionValue
         ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
         : undefined,
@@ -166,6 +166,7 @@ export class EzComboBox {
     //porque não quis onerar o text input com essa funcionalidade...
     const top = (this.errorMessage || !this.canShowError || this.mode === "slim") ? "0px" : "-19px";
     this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, top });
+    this.setFocus();
     window.requestAnimationFrame(() => {
       this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
     });
@@ -199,10 +200,10 @@ export class EzComboBox {
         const parentRect = parent.getBoundingClientRect();
         const itemRect = liElem.getBoundingClientRect();
         if (down && itemRect.bottom > parentRect.bottom) {
-          parent.scrollTop = itemRect.top;
+          parent.scrollTop = itemRect.height * (this._preSelection - 3);
         }
         else if (!down && itemRect.top < parentRect.top) {
-          parent.scrollTop = 0;
+          parent.scrollTop = itemRect.height * this._preSelection;
         }
       }
     });

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

@@ -14,7 +14,7 @@
 
   /* Título */
   /*@doc Define o estilo da mensagem exibida no título.*/
-  --dialog__title--font-pattern: var(--font-pattern, "'Sora', 'Algerian'");
+  --dialog__title--font-pattern: var(--font-pattern, "Roboto");
   /*@doc Define o espaçamento a esquerda do título.*/
   --dialog__title--padding-left: var(--space--small, 6px);
   /*@doc Define o espaçamento abaixo do container do título.*/
@@ -25,7 +25,7 @@
 
   /* Corpo da Mensagem */
   /*@doc Define o estilo do texto da mensagem.*/
-  --dialog__body--font-pattern: var(--font-pattern, "'Sora', 'Algerian'");
+  --dialog__body--font-pattern: var(--font-pattern, "Roboto");
   /*@doc Define a sombra do texto da mensagem.*/
   --dialog__body--text-shadow: var(--text-shadow, "0 0 0 #353535, 0 0 1px transparent");
   /*@doc Define o peso do texto da mensagem.*/

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

@@ -104,7 +104,7 @@ export class EzForm {
   }
   processMetadata() {
     if (!this.isStatic() && this.dataUnit) {
-      const metadata = this.config != undefined ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
+      const metadata = this.config != undefined && Object.values(this.config).length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
   }

package/dist/collection/components/ez-form/structure/FormSheetMetadata.js

@@ -28,11 +28,17 @@ export class FormMetadata {
   }
 }
 export const buildFromDataUnit = (dataUnit) => {
-  var _a;
+  var _a, _b;
   const unitMD = dataUnit.metadata;
   const metadata = new FormMetadata();
   if (unitMD) {
     const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
+    const items = new Map();
+    (_b = unitMD === null || unitMD === void 0 ? void 0 : unitMD.fields) === null || _b === void 0 ? void 0 : _b.forEach((descriptor) => {
+      if (descriptor.visible !== false) {
+        resolveFieldGroup(items, null, descriptor);
+      }
+    });
     let defaultValues = {};
     visibleFields
       .filter(descriptor => descriptor.defaultValue)
@@ -40,7 +46,7 @@ export const buildFromDataUnit = (dataUnit) => {
     metadata.addSheet({
       label: unitMD.label,
       name: unitMD.name,
-      items: visibleFields.map(descriptor => { return { descriptor }; }),
+      items: Array.from(items.values()),
       requiredFields: visibleFields
         .filter(descriptor => descriptor.required)
         .map(descriptor => descriptor.name),
@@ -59,6 +65,22 @@ function getTabConfig(tab, sheets) {
 function sortTabs(a, b) {
   return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
 }
+function resolveFieldGroup(items, field, descriptor) {
+  const fieldMD = { config: field, descriptor: descriptor };
+  let group = (field === null || field === void 0 ? void 0 : field.group) || descriptor.group;
+  if (group) {
+    const key = `group::${group}`;
+    if (!items.has(key)) {
+      items.set(key, { label: group, items: [fieldMD] });
+    }
+    else {
+      items.get(key).items.push(fieldMD);
+    }
+  }
+  else {
+    items.set((field === null || field === void 0 ? void 0 : field.name) || descriptor.name, fieldMD);
+  }
+}
 export const buildFromConfig = (config, dataUnit) => {
   var _a, _b;
   const sheets = new Map();
@@ -96,20 +118,7 @@ export const buildFromConfig = (config, dataUnit) => {
         if (defaultValue) {
           defaultValues[field.name] = field.defaultValue;
         }
-        const fieldMD = { config: field, descriptor };
-        const group = field.group;
-        if (group) {
-          const key = `group::${group}`;
-          if (!tabItens.has(key)) {
-            tabItens.set(key, { label: group, items: [fieldMD] });
-          }
-          else {
-            tabItens.get(key).items.push(fieldMD);
-          }
-        }
-        else {
-          tabItens.set(field.name, fieldMD);
-        }
+        resolveFieldGroup(tabItens, field, descriptor);
       }
     }
   });

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

@@ -5,6 +5,7 @@ import gridTerms from "./i18n/pt-BR.js";
 import getHeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
 import DataSource from "./DataSource";
 import { CellRenderer } from "./components/cellRenderer";
+import SelectionHeader from "./components/selectionHeader";
 export default class AgGridController {
   constructor(enterprise) {
     this.DEFAULT_ROW_HEIGHT = 30;
@@ -67,6 +68,13 @@ export default class AgGridController {
         defaultColDef: {
           headerClass: "ez-grid__cell-header",
           cellClass: "ez-grid__cell-body"
+        },
+        components: {
+          'ezGridHeaderComponent': SelectionHeader
+        },
+        context: {
+          headerCheckStatusGetter: () => this.getSelectionHeaderStatus(),
+          headerCheckStatusSetter: (selectAll) => this.updateSelectionForAll(selectAll)
         }
       };
       this.setOptionsEvents(this._gridOptions);
@@ -99,6 +107,31 @@ export default class AgGridController {
     opt.suppressDragLeaveHidesColumns = true;
     opt.suppressMenuHide = true;
   }
+  getSelectionHeaderStatus() {
+    const records = this._dataUnit.records;
+    if (records && records.length === 0) {
+      return false;
+    }
+    const selection = this._dataUnit.getSelection();
+    if (selection == undefined || selection.length === 0) {
+      return false;
+    }
+    if (selection.length != records.length) {
+      return undefined;
+    }
+    let status = undefined;
+    for (let i = 0; i < records.length; i++) {
+      const current = selection.includes(records[i].__record__id__);
+      if (status != undefined && current !== status) {
+        return undefined;
+      }
+      status = current;
+    }
+    return status;
+  }
+  updateSelectionForAll(selectAll) {
+    this._dataUnit.setSelection(selectAll ? this._dataUnit.records.map(r => r.__record__id__) : []);
+  }
   setData(data) {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
@@ -119,13 +152,12 @@ export default class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    if (rowIds && rowIds.length > 0) {
-      rowIds.forEach(rowId => {
-        const row = this._gridOptions.api.getRowNode(rowId);
-        if (row) {
-          row.setSelected(true);
-        }
-      });
+    this._gridOptions.api.forEachNode(node => {
+      node.setSelected(rowIds && rowIds.includes(node.id));
+    });
+    const selectionHeader = this._gridOptions.context.selectionHeader;
+    if (selectionHeader) {
+      selectionHeader.updateCheckbox();
     }
   }
   removeRows() {
@@ -174,7 +206,8 @@ export default class AgGridController {
         colId: this.CHECK_BOX_COL_ID,
         headerName: "",
         checkboxSelection: true,
-        headerCheckboxSelection: false,
+        headerComponent: "ezGridHeaderComponent",
+        headerClass: "ag-column-select-header",
         width: 28,
         suppressMovable: true,
         suppressAutoSize: true,
@@ -415,9 +448,12 @@ export default class AgGridController {
   }
   onSelectionChange() {
     if (this._selectionChangeCallback) {
-      this._selectionChangeCallback({
-        selection: this._gridOptions.api.getSelectedRows()
-      });
+      clearTimeout(this._selectionChangeDeboucing);
+      this._selectionChangeDeboucing = window.setTimeout(() => {
+        this._selectionChangeCallback({
+          selection: this._gridOptions.api.getSelectedRows()
+        });
+      }, 0);
     }
   }
   onRowDoubleClick(evt) {

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

@@ -0,0 +1,40 @@
+export default class SelectionHeader {
+  updateCheckbox() {
+    this.updatingValue = true;
+    try {
+      const value = this.headerCheckStatusGetter();
+      this.checkBox.indeterminate = value == undefined;
+      this.checkBox.value = value;
+    }
+    finally {
+      this.updatingValue = false;
+    }
+  }
+  init(params) {
+    params.context.selectionHeader = this;
+    const valueSetter = params.context.headerCheckStatusSetter;
+    this.headerCheckStatusGetter = params.context.headerCheckStatusGetter;
+    this.element = document.createElement('div');
+    this.element.classList.add("ag-header__selection-checkbox");
+    this.checkBox = document.createElement('ez-check');
+    this.checkBox.style.setProperty("--ez-check--focus--background-color", "transparent");
+    this.checkBox.style.setProperty("--ez-check--hover--background-color", "transparent");
+    this.element.append(this.checkBox);
+    this.updateCheckbox();
+    this.element.addEventListener('ezChange', (evt) => {
+      if (!this.updatingValue) {
+        valueSetter(evt.detail);
+      }
+    });
+  }
+  getGui() {
+    return this.element;
+  }
+  destroy() {
+    this.element.remove();
+    this.element = null;
+  }
+  refresh(_params) {
+    return false;
+  }
+}