@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-132280.3 → 0.0.0-bugfix-dev-KB-157120.0

package/dist/collection/components/ez-classic-search-plus/ez-classic-search-plus.js

@@ -38,6 +38,8 @@ export class EzClassicSearchPlus {
     this.searchDescriptionIsOpen = false;
     this.visibleOptions = undefined;
     this.showLoading = true;
+    this.canShowClearButton = false;
+    this.isHoveringDescription = false;
   }
   async observeValue(newValue, oldValue) {
     var _a;
@@ -51,11 +53,11 @@ export class EzClassicSearchPlus {
       return;
     }
     if (newNormalizedValue === undefined) {
-      this.codeValue = undefined;
-      this.descriptionValue = undefined;
+      this.clearSearch();
       this.ezChange.emit(undefined);
       return;
     }
+    this.canShowClearButton = this.getClearButtonStatus();
     this.codeValue = newNormalizedValue;
     try {
       this.descriptionValue = await this.normalizeCodeToDescriptionValue(newValue);
@@ -149,12 +151,14 @@ export class EzClassicSearchPlus {
     }
   }
   clearSearch() {
-    this.value = null;
-    this.codeValue = null;
-    this.descriptionValue = null;
+    this._textInputCodeValue.value = null;
     if (!this.hideDescriptionInput) {
       this._textInputDescriptionValue.value = null;
     }
+    this.value = null;
+    this.codeValue = null;
+    this.descriptionValue = null;
+    this.canShowClearButton = false;
   }
   async normalizeCodeToDescriptionValue(valueToNormalize) {
     if (!valueToNormalize) {
@@ -198,7 +202,7 @@ export class EzClassicSearchPlus {
   }
   async loadDescriptionValueByCode(codeValue) {
     if (!this.optionLoader) {
-      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
+      console.warn(this.i18n("ez-classic-search-plus.optionLoaderNotDefined"));
       return "";
     }
     try {
@@ -228,7 +232,7 @@ export class EzClassicSearchPlus {
   }
   async loadAdvancedSearch() {
     if (!this.optionLoader) {
-      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
+      console.warn(this.i18n("ez-classic-search-plus.optionLoaderNotDefined"));
       return;
     }
     const searchArgument = { mode: SearchMode.ADVANCED, argument: "" };
@@ -255,6 +259,7 @@ export class EzClassicSearchPlus {
       this._popover.showUnder(this.el);
     }
     const argument = event.target.value;
+    this.canShowClearButton = this.getClearButtonStatus();
     await this.debounceLoaderOptions(argument);
   }
   async debounceLoaderOptions(argument) {
@@ -373,15 +378,23 @@ export class EzClassicSearchPlus {
     event.stopPropagation();
     this.searchDescriptionIsOpen = event.detail;
   }
-  render() {
+  getClearButtonStatus() {
     var _a, _b;
+    if (this.ensureClearButtonVisible) {
+      return true;
+    }
+    if (((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value)) {
+      return true;
+    }
+    return !!this.value;
+  }
+  render() {
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    const canShowClearButton = !this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value));
     return (h(Host, null, h("div", { class: "ez-classic-search-plus__wrapper" }, h("div", { class: "ez-classic-search-plus__label-container" }, h("label", { title: this.label }, this.label), this.required && h("span", { class: "required-indicator" }, "*")), h("div", { class: "ez-classic-search-plus__container" }, h("ez-classic-input", { ref: (elem) => this._textInputCodeValue = elem, class: {
         "ez-classic-search-plus__code-input": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-no-border": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-full": this.hideDescriptionInput
-      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation() }), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, errorMessage: this.errorMessage, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: canShowClearButton ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation() }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))))));
+      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation(), state: this.errorMessage && this.canShowError ? "error" : "default" }), !this.hideDescriptionInput && (h("div", { class: "description-input-container", onMouseEnter: () => this.isHoveringDescription = true, onMouseLeave: () => this.isHoveringDescription = false }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: this.canShowClearButton && this.isHoveringDescription ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation(), rightIconTooltip: this.i18n("ez-classic-search-plus.clearValue"), state: this.errorMessage && this.canShowError ? "error" : "default" }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))), h("div", { class: "ez-classic-search-plus__error-container" }, h("span", null, this.errorMessage)))));
   }
   static get is() { return "ez-classic-search-plus"; }
   static get encapsulation() { return "shadow"; }
@@ -859,7 +872,9 @@ export class EzClassicSearchPlus {
       "isLoadingDescription": {},
       "searchDescriptionIsOpen": {},
       "visibleOptions": {},
-      "showLoading": {}
+      "showLoading": {},
+      "canShowClearButton": {},
+      "isHoveringDescription": {}
     };
   }
   static get events() {

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

@@ -7,6 +7,7 @@ export class EzClassicTextArea {
     this.placeholder = '';
     this.value = '';
     this.helpText = undefined;
+    this.errorMessage = undefined;
     this.state = "default";
     this.enabled = true;
     this.readonly = false;
@@ -34,6 +35,13 @@ export class EzClassicTextArea {
   async setBlur() {
     this._textAreaElem.blur();
   }
+  async observeErrorMessage(newValue) {
+    if (newValue && newValue.trim() !== '') {
+      this.state = "error";
+      return;
+    }
+    this.state = "default";
+  }
   onBlur() {
     this.ezBlur.emit(this.value);
   }
@@ -66,7 +74,7 @@ export class EzClassicTextArea {
     this.addInfoId();
   }
   render() {
-    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
+    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), (this.helpText || this.errorMessage) && (h("span", { id: "textArea_helpText", title: this.errorMessage || this.helpText }, this.errorMessage || this.helpText))));
   }
   static get is() { return "ez-classic-text-area"; }
   static get encapsulation() { return "shadow"; }
@@ -171,6 +179,23 @@ export class EzClassicTextArea {
         "attribute": "help-text",
         "reflect": false
       },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido"
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
       "state": {
         "type": "string",
         "mutable": false,
@@ -476,4 +501,10 @@ export class EzClassicTextArea {
     };
   }
   static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }];
+  }
 }

package/dist/collection/components/ez-classic-time-input/ez-classic-time-input.js

@@ -161,7 +161,7 @@ export class EzClassicTimeInput {
       value: this._viewValue,
       enabled: this.enabled,
       label: this.label,
-      restrict: "0123456789:",
+      mask: this.showSeconds ? "##:##:##" : "##:##",
       onBlur: () => this.handleBlur(),
       onInput: () => this.handleInput(),
       errorMessage: this.errorMessage,
@@ -169,7 +169,8 @@ export class EzClassicTimeInput {
       size: this.size,
       canShowError: this.canShowError,
       alternativePlaceholder: this.alternativePlaceholder,
-      required: this.required
+      required: this.required,
+      onEzChange: (event) => event.stopPropagation()
     };
     return (h(Host, null, h("ez-classic-input", Object.assign({}, inputProps, { leftIconName: "timer-outline" }))));
   }

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

@@ -274,6 +274,11 @@ export class EzComboBox {
     else {
       window.setTimeout(() => {
         this.setInputValue(false);
+        if (this._criteria !== undefined) {
+          this._criteria = undefined;
+          this._preSelection = undefined;
+          this.updateVisibleOptions();
+        }
       }, this._deboucingTime);
     }
   }

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

@@ -3,7 +3,7 @@
   /*@doc Define a posição do componente.*/
   --ez-dropdown--z-index: var(--more-visible, 2);
   /*@doc Define o espaçamento interno do componente.*/
-  --ez-dropdown--padding: var(--space--small, 6px);
+  --ez-dropdown--padding: var(--space--16, 16px);
   /*@doc Define a sombra externa do componente.*/
   --ez-dropdown--box-shadow: var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));
   /*@doc Define o raio da borda do componente.*/
@@ -189,7 +189,7 @@
   transition: var(--ez-dropdown__item--transition);
 }
 
-.ez-dropdown__item:hover {
+.ez-dropdown__item:not(:has(.ez-dropdown__item-builder)):hover {
   /*public*/
   background-color: var(--ez-dropdown__item--background-color);
 }

package/dist/collection/components/ez-empty-card/ez-empty-card.js

@@ -16,7 +16,7 @@ export class EzEmptyCard {
     }
   }
   render() {
-    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
+    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}${typeof this.height == "number" ? 'px' : ''}` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}${typeof this.width == "number" ? 'px' : ''}` } : {}));
     return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
   }
   static get is() { return "ez-empty-card"; }
@@ -52,11 +52,11 @@ export class EzEmptyCard {
         "defaultValue": "\"default\""
       },
       "height": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
@@ -69,11 +69,11 @@ export class EzEmptyCard {
         "reflect": true
       },
       "width": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-form-view/ez-form-view.css

@@ -4,10 +4,16 @@
   width: 100%;
 
   /*@doc Define o tamanho mínimo dos itens do formulário.*/
-  --ez-form-view__item--min-width: 220px;
+  --ez-form-view__item--min-width: 250px;
+
+  /*@doc Define o tamanho mínimo dos itens do formulário.*/
+  --ez-form-view__long-item--min-width: 530px;
 
   /*@doc Define o tamanho máximo dos itens do formulário.*/
-  --ez-form-view__item--max-width: 440px;
+  --ez-form-view__item--max-width: 512px;
+
+  /*@doc Define o tamanho máximo dos itens longos do formulário.*/
+  --ez-form-view__long-item--max-width: 100%;
 
   /*@doc Define o colunas entre itens do formulário.*/
   --ez-form-view__item--gap: var(--space--14, 14px);
@@ -25,12 +31,20 @@
 }
 
 .form-view__content--single-column {
-  grid-template-columns:repeat(1, minmax(var(--ez-form-view__item--min-width), var(--ez-form-view__item--max-width)));
+  grid-template-columns:1fr;
+}
+
+.form-view__content--single-column > div:not(.input-full_width) {
+  width: clamp(var(--ez-form-view__item--min-width), 70%, var(--ez-form-view__item--max-width));
 }
 
 .input-full_width {
-  grid-column: 1 / -1;
-  width: 100%;
+  grid-column: 1/-1;
+  width: clamp(var(--ez-form-view__long-item--min-width), 100%, var(--ez-form-view__long-item--max-width));
+}
+
+.single-column {
+  --ez-form-view__long-item--max-width: 1024px;
 }
 
 *:has(*) + ez-collapsible-box {

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

@@ -80,7 +80,7 @@ export class EzFormView {
   buildFormItemElement(item, classItem = "") {
     var _a;
     if (this.isItemFullWidth(item.userInterface)) {
-      classItem += " input-full_width";
+      classItem += ` input-full_width ${this.singleColumn && `single-column`}`;
     }
     const context = {
       formLayout: this.formLayout,

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -12,6 +12,7 @@ import { buildSearch } from "./templates/SearchInput.tpl";
 import { buildRichText } from "./templates/RichText.tpl";
 import { getI18n } from "../../../utils/i18n";
 import { buildImage } from "./templates/ImageInput.tpl";
+import { buildMultiSelectInput } from "./templates/MultiSelectInput.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -28,6 +29,7 @@ uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 uiBuilders.set(UserInterface.HTML, buildRichText);
 uiBuilders.set(UserInterface.IMAGE, buildImage);
+uiBuilders.set(UserInterface.MULTISELECTOR, buildMultiSelectInput);
 export const fieldBuilder = (field, customUiBuilders = new Map(), context) => {
   const i18n = getI18n();
   const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||

package/dist/collection/components/ez-form-view/fieldbuilder/templates/MultiSelectInput.tpl.js

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+export const buildMultiSelectInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
+  var _a, _b, _c, _d;
+  const rawOptions = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof rawOptions === "string") {
+    const parsed = JSON.parse(rawOptions);
+    options = Object.keys(parsed).map(key => ({ value: key, label: parsed[key], check: false }));
+  }
+  else {
+    options = rawOptions;
+  }
+  // Quando o metadata não informa explicitamente, usamos a lista estática (options)
+  // caso não haja um datasource configurado.
+  const useOptions = (_a = props === null || props === void 0 ? void 0 : props.useOptions) !== null && _a !== void 0 ? _a : (options != undefined && (props === null || props === void 0 ? void 0 : props.dataSource) == undefined);
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-multi-select-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, options: options, dataSource: props === null || props === void 0 ? void 0 : props.dataSource, columnName: (_b = props === null || props === void 0 ? void 0 : props.columnName) !== null && _b !== void 0 ? _b : name, useOptions: useOptions, isTextSearch: (_c = props === null || props === void 0 ? void 0 : props.isTextSearch) !== null && _c !== void 0 ? _c : false, orderSelectedFirst: (_d = props === null || props === void 0 ? void 0 : props.orderSelectedFirst) !== null && _d !== void 0 ? _d : false })));
+};

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

@@ -1,14 +1,12 @@
-import { DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid, } from "@ag-grid-community/core";
-import { LicenseManager } from '@ag-grid-enterprise/core';
+import { Action, DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
+import { Grid, ModuleRegistry, } from '@ag-grid-community/core';
+import { EnterpriseCoreModule, LicenseManager } from '@ag-grid-enterprise/core';
 import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 import { CellRendererStatus } from './components/cellRendererStatus';
 import SelectionHeader from './components/selectionHeader';
-import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } from '../../../../utils/constants';
+import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME, } from '../../../../utils/constants';
 import GridEditionManager from './GridEditionManager';
-import { ModuleRegistry } from '@ag-grid-community/core';
-import { EnterpriseCoreModule } from '@ag-grid-enterprise/core';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
@@ -16,6 +14,8 @@ import { MenuModule } from '@ag-grid-enterprise/menu';
 import DOMPurify from 'dompurify';
 import { buildLocaleText } from './utils/buildLocaleText';
 import { agGridLicense } from '../../../../utils/ag-grid-license';
+import { resolveAggFunc } from './utils/AggFunctionResolver';
+import { GRID_COLUMN_DEFAULT_WIDTHS } from './gridColumnDefaultWidths';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -41,12 +41,14 @@ export default class AgGridController {
     this.DEFAULT_HEADER_ROW_HEIGHT = 32;
     this.CHECK_BOX_COL_ID = 'checkBoxColumn';
     this.STATUS_COL_ID = 'statusColumn';
+    this.COLUMN_FOOTER_OPER = 'gridFooterOper';
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
     this.BLOCK_LOAD_DEBOUNCE = 100;
-    this.DEFAULT_FONT_SIZE = 14;
+    this.DEFAULT_FONT_SIZE = 8;
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
-    this.DEFAULT_ICON_SIZE = 12;
-    this.DEFAULT_MAX_SIZE = 200;
+    this.DEFAULT_ICON_SIZE = 40;
+    this.DEFAULT_MAX_SIZE = 300;
+    this.MULTI_VALUES_PROP = '__multiValues';
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -56,6 +58,9 @@ export default class AgGridController {
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
     this._lastColsConfig = undefined;
+    this._pinnedBottomDebounceTimer = null;
+    this._pinnedBottomDebounceDelay = 150;
+    this._pinnedBottomPendingArgs = null;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -122,21 +127,24 @@ export default class AgGridController {
         const params = [];
         let isNullIncluded;
         checkedOptions.forEach(option => {
-          const paramName = `PARAM_${column}_${params.length + 1}`;
-          params.push({
-            dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
-            name: paramName,
-            value: option.value,
-          });
-          if (option.value == undefined) {
-            isNullIncluded = true;
-          }
-          else {
-            if (placeholders.length > 0) {
-              placeholders = placeholders + ',';
+          const optionValues = this.resolveColumnFilterValues(option);
+          optionValues.forEach(value => {
+            const paramName = `PARAM_${column}_${params.length + 1}`;
+            params.push({
+              dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
+              name: paramName,
+              value,
+            });
+            if (value == undefined) {
+              isNullIncluded = true;
             }
-            placeholders = `${placeholders}:${paramName}`;
-          }
+            else {
+              if (placeholders.length > 0) {
+                placeholders = placeholders + ',';
+              }
+              placeholders = `${placeholders}:${paramName}`;
+            }
+          });
         });
         return {
           name: `${DISTINCT_FILTER_NAME_PREFIX}${column}`,
@@ -158,6 +166,13 @@ export default class AgGridController {
     }
     return `${columnExpression} in (${placeholders})`;
   }
+  resolveColumnFilterValues(option) {
+    const multiValues = option === null || option === void 0 ? void 0 : option[this.MULTI_VALUES_PROP];
+    if (Array.isArray(multiValues) && multiValues.length > 0) {
+      return multiValues;
+    }
+    return [option.value];
+  }
   initDatagrid(container, options) {
     var _a;
     this._options = options;
@@ -256,6 +271,90 @@ export default class AgGridController {
       this.observer.observe(container);
     }
   }
+  onGridReady(evt) {
+    var _a;
+    this._bottomPinnedRowSubscriber = async (action) => {
+      if (action.type === Action.DATA_LOADED || action.type === Action.PAGINATION_UPDATED) {
+        this.scheduleSetPinnedBottomRow(evt.api, evt.columnApi);
+      }
+    };
+    (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.subscribe(this._bottomPinnedRowSubscriber);
+  }
+  scheduleSetPinnedBottomRow(api, columnApi) {
+    if (!api || !columnApi)
+      return;
+    // atualiza args pendentes
+    this._pinnedBottomPendingArgs = { api, columnApi };
+    // limpa timer anterior
+    if (this._pinnedBottomDebounceTimer != null) {
+      window.clearTimeout(this._pinnedBottomDebounceTimer);
+    }
+    // agenda execução
+    this._pinnedBottomDebounceTimer = window.setTimeout(async () => {
+      this._pinnedBottomDebounceTimer = null;
+      const args = this._pinnedBottomPendingArgs;
+      this._pinnedBottomPendingArgs = null;
+      if (!args)
+        return;
+      try {
+        await this.setPinnedBottomRow(args.api, args.columnApi);
+      }
+      catch (err) {
+        console.error('Erro em setPinnedBottomRow debounced:', err);
+      }
+    }, this._pinnedBottomDebounceDelay);
+  }
+  async setPinnedBottomRow(api, columnApi) {
+    const paginationInfo = this._dataUnit.getPaginationInfo();
+    const loadingInProgress = paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.loadingInProgress;
+    if (!api || !columnApi || loadingInProgress)
+      return;
+    const columns = columnApi.getAllGridColumns();
+    const columnsWithAgg = columns.filter(col => col.getColDef().aggFunc);
+    if (columnsWithAgg.length === 0)
+      return;
+    const accumulators = new Map();
+    columnsWithAgg.forEach(col => {
+      const colId = col.getColId();
+      accumulators.set(colId, { values: [], aggFunc: col.getColDef().aggFunc });
+    });
+    const recordsToAggregate = await this.getAllRecordsToAggregate();
+    recordsToAggregate.forEach(record => {
+      columnsWithAgg.forEach(col => {
+        const colId = col.getColId();
+        const value = record[colId];
+        if (value != null) {
+          accumulators.get(colId).values.push(value);
+        }
+      });
+    });
+    const totalRow = {};
+    accumulators.forEach((acc, colId) => {
+      try {
+        const aggFn = resolveAggFunc(acc.aggFunc);
+        totalRow[colId] = aggFn({ values: acc.values });
+      }
+      catch (error) {
+        console.error(`Erro ao calcular agregação para coluna ${colId}:`, error);
+        totalRow[colId] = null;
+      }
+    });
+    const hasData = Object.values(totalRow).some(value => value !== null && value !== undefined && value !== 0 && !Number.isNaN(value));
+    if (hasData) {
+      api.setPinnedBottomRowData([totalRow]);
+    }
+  }
+  async getAllRecordsToAggregate() {
+    var _a, _b;
+    if ((_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.allRecordsLoader) {
+      return this._dataUnit.allRecordsLoader(this._dataUnit);
+    }
+    const paginationInfo = this._dataUnit.getPaginationInfo();
+    if (!paginationInfo || !paginationInfo.total)
+      return [];
+    const response = await this._dataUnit.dataLoader(this._dataUnit, { limit: paginationInfo.total });
+    return (_b = response.records) !== null && _b !== void 0 ? _b : [];
+  }
   processFormatterCellCallback(params) {
     const column = params.column.getColDef();
     if (typeof column.valueFormatter === 'function') {
@@ -421,6 +520,8 @@ export default class AgGridController {
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
     opt.onDragStopped = evt => this.onCallStateChange('columnMovedEnd', evt);
     opt.onCellClicked = evt => this.onCellClicked(evt);
+    opt.onGridReady = evt => this.onGridReady(evt);
+    opt.onModelUpdated = async (evt) => this.scheduleSetPinnedBottomRow(evt.api, evt.columnApi);
   }
   setOptionsSupress(opt) {
     opt.suppressDragLeaveHidesColumns = true;
@@ -943,9 +1044,12 @@ export default class AgGridController {
       tooltip = this._i18n('ez-grid.columnCantBeOrder');
     }
     const presentationFrom = (_d = source === null || source === void 0 ? void 0 : source.props) === null || _d === void 0 ? void 0 : _d.get(PRESENTATION_FROM_COL_PROP_NAME);
+    const initialWidth = this.getInitialColumnWidth(source.userInterface, source.label);
     return this._editionManager.configureColumn({
       headerName: source.label,
       field: source.name,
+      width: initialWidth,
+      aggFunc: this.getAggFunc(source),
       sortable: propSortable,
       resizable: true,
       headerComponent: 'ezGridCustomHeader',
@@ -987,6 +1091,10 @@ export default class AgGridController {
       editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
+  getAggFunc(column) {
+    var _a, _b;
+    return (_b = (_a = column.props) === null || _a === void 0 ? void 0 : _a.get(this.COLUMN_FOOTER_OPER)) !== null && _b !== void 0 ? _b : column.aggFunc;
+  }
   setHTMLRender(params, source) {
     const htmlSanitized = DOMPurify.sanitize(params.value);
     params.colDef.cellRenderer = (cellParams) => {
@@ -1109,12 +1217,13 @@ export default class AgGridController {
     }
   }
   onCallStateChange(type, e) {
+    var _a, _b;
     const finished = !('finished' in e) || e['finished'];
     if (finished && this._columnStateChangeCallback) {
       let info = {};
       let isUserChange = this.isUIEvent(e['source'], e['type']);
       if (type === 'columnResize') {
-        info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
+        info['column'] = { colId: (_a = e['column']) === null || _a === void 0 ? void 0 : _a.colId, actualWidth: (_b = e['column']) === null || _b === void 0 ? void 0 : _b.actualWidth };
       }
       info['isUserChange'] = isUserChange;
       info['isElementResize'] = this.isElementResize(e);
@@ -1242,6 +1351,22 @@ export default class AgGridController {
     var _a;
     this.observer.disconnect();
     (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.handleDestroyBottomPinnedRowSubscriber();
+    this.handleDestroySetBottomPinnedRowDebounce();
+  }
+  handleDestroyBottomPinnedRowSubscriber() {
+    var _a;
+    if (this._bottomPinnedRowSubscriber) {
+      (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._bottomPinnedRowSubscriber);
+      this._bottomPinnedRowSubscriber = null;
+    }
+  }
+  handleDestroySetBottomPinnedRowDebounce() {
+    if (this._pinnedBottomDebounceTimer != null) {
+      clearTimeout(this._pinnedBottomDebounceTimer);
+      this._pinnedBottomDebounceTimer = null;
+      this._pinnedBottomPendingArgs = null;
+    }
   }
   registryListeners() {
     var _a;
@@ -1270,10 +1395,21 @@ export default class AgGridController {
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
     const label = (_b = field === null || field === void 0 ? void 0 : field.label) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.columnApi) === null || _d === void 0 ? void 0 : _d.getColumn(cfgColumn.name)) === null || _e === void 0 ? void 0 : _e.getColDef()) === null || _f === void 0 ? void 0 : _f.headerName;
-    if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
-      return this.DEFAULT_MAX_SIZE;
+    return this.getInitialColumnWidth(field === null || field === void 0 ? void 0 : field.userInterface, label);
+  }
+  getInitialColumnWidth(userInterface, label) {
+    const columnWidthByLabel = this.getColumnWidthByLabel(label);
+    const defaultWidth = this.getDefaultWidthByUserInterface(userInterface);
+    if (!defaultWidth) {
+      return columnWidthByLabel;
+    }
+    return Math.max(defaultWidth, columnWidthByLabel);
+  }
+  getDefaultWidthByUserInterface(userInterface) {
+    if (!userInterface) {
+      return undefined;
     }
-    return this.getColumnWidthByLabel(label);
+    return GRID_COLUMN_DEFAULT_WIDTHS[userInterface];
   }
   getColumnWidthByLabel(label) {
     const labelSize = ((label === null || label === void 0 ? void 0 : label.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;