@sankhyalabs/ezui 4.6.0 → 4.7.0

package/dist/esm/ez-combo-box.entry.js

@@ -4,7 +4,7 @@ import { A as ApplicationUtils } from './ApplicationUtils-79bf1d95.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import { R as REQUIRED_INFO } from './constants-76d2e931.js';
+import { R as REQUIRED_INFO } from './constants-ca136201.js';
 
 const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 

package/dist/esm/ez-form-view.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-de655f48.js';
 import { UserInterface, ElementIDUtils } from '@sankhyalabs/core';
-import { R as REQUIRED_INFO } from './constants-76d2e931.js';
+import { R as REQUIRED_INFO } from './constants-ca136201.js';
 import { C as CheckMode } from './CheckMode-bdb2ec19.js';
 
 const buildSwitch = (field) => {

package/dist/esm/ez-form.entry.js

@@ -210,7 +210,6 @@ class DataBinder {
         case Action.RECORDS_COPIED:
         case Action.EDITION_CANCELED:
         case Action.SELECTION_CHANGED:
-        case Action.SELECTION_REMOVED:
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
           this.clearInvalid();

package/dist/esm/ez-grid.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-de655f48.js';
 import { Action, ObjectUtils as ObjectUtils$1, ApplicationContext, StringUtils as StringUtils$1, UserInterface, NumberUtils as NumberUtils$1, DataType, SortMode, ElementIDUtils, JSUtils } from '@sankhyalabs/core';
-import { A as ALL_RECORD } from './constants-76d2e931.js';
+import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 
 /**
           * @ag-grid-community/all-modules - Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue * @version v28.2.1
@@ -118930,6 +118930,7 @@ class DataSource {
           if (this._options) {
             this._options.onPaginationChange(this._dataUnit.getPaginationInfo());
           }
+          this.updateSelection();
           break;
         case Action.RECORDS_REMOVED:
         case Action.DATA_SAVED:
@@ -118938,7 +118939,6 @@ class DataSource {
           this._controller.refresh();
           break;
         case Action.SELECTION_CHANGED:
-        case Action.SELECTION_REMOVED:
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
           this.updateSelection();
@@ -118952,25 +118952,14 @@ class DataSource {
     this._dataUnit.subscribe(this.duObserver);
   }
   updateSelection() {
-    var _a;
-    if (this.isSelectionEquals()) {
-      return;
-    }
-    const dataSelection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
-    if ((dataSelection === null || dataSelection === void 0 ? void 0 : dataSelection.length) > 0) {
-      this._controller.selectRows(dataSelection);
+    const selectionInfo = this._dataUnit.getSelectionInfo();
+    if (selectionInfo.isAllRecords()) {
+      this._controller.selectAll(true);
     }
     else {
-      this._controller.deselectAll();
+      this._controller.selectRows(selectionInfo.recordIds, true);
     }
   }
-  isSelectionEquals() {
-    var _a, _b;
-    const dataSelection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
-    const controlSelection = (_b = this._controller) === null || _b === void 0 ? void 0 : _b.getSelection();
-    return ObjectUtils$1.objectToString(dataSelection || []) ===
-      ObjectUtils$1.objectToString(controlSelection || []);
-  }
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;
@@ -119171,9 +119160,12 @@ class AgGridController {
       else {
         this._grid = new Grid(container, this._gridOptions);
       }
-      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
-      if (selection) {
-        this.selectRows(selection);
+      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectionInfo();
+      if (selection === null || selection === void 0 ? void 0 : selection.isAllRecords()) {
+        this.selectAll(true);
+      }
+      else {
+        this.selectRows((selection === null || selection === void 0 ? void 0 : selection.recordIds) || [], true);
       }
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
     }
@@ -119237,7 +119229,7 @@ class AgGridController {
     opt.onColumnPinned = e => this.onCallStateChange("columnPinned", e);
     opt.onColumnMoved = e => this.onCallStateChange("columnMoved", e);
     opt.onColumnVisible = e => this.onCallStateChange("visibleChange", e);
-    opt.onSelectionChanged = () => this.onSelectionChange();
+    opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
     opt.onDragStopped = evt => this.onCallStateChange("columnMovedEnd", evt);
   }
@@ -119245,72 +119237,31 @@ class AgGridController {
     opt.suppressDragLeaveHidesColumns = true;
     opt.suppressMenuHide = true;
   }
-  isAllRecordSetted(allSelection) {
-    return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
-      return selectedRecord.__record__id__ === ALL_RECORD;
-    });
-  }
   getSelectionHeaderStatus() {
     const records = this._dataUnit.records;
     if (records && records.length === 0) {
       return false;
     }
-    const allSelection = this._dataUnit.getSelection();
-    if (allSelection == undefined || allSelection.length === 0) {
-      return false;
-    }
-    if (this.isAllRecordSetted(allSelection)) {
+    const selectionInfo = this._dataUnit.getSelectionInfo();
+    if (selectionInfo.isAllRecords()) {
       return true;
     }
-    if (allSelection.length != records.length) {
-      return undefined;
-    }
-    const selectedRecords = this._dataUnit.getSelectedRecords();
-    if (selectedRecords.length < allSelection.length) {
-      return undefined;
+    const selection = selectionInfo.recordIds;
+    if (selection == undefined || selection.length === 0) {
+      return false;
     }
     let status = undefined;
     for (let i = 0; i < records.length; i++) {
-      const current = allSelection.some((selectedRecord) => {
-        return selectedRecord.__record__id__ === records[i].__record__id__;
-      });
+      const current = selection.includes(records[i].__record__id__);
       if (status != undefined && current !== status) {
-        return;
+        return undefined;
       }
       status = current;
     }
     return status;
   }
-  async updateSelectionForAll(selectAll) {
-    if (this._dataUnit == undefined) {
-      return;
-    }
-    let allSelection = this._dataUnit.getSelection();
-    if (allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((sel) => sel.__record__id__ === ALL_RECORD)) {
-      await this._dataUnit.clearSelection();
-    }
-    let updateSelection = [];
-    const records = this._dataUnit.records;
-    const selectedRecords = this._dataUnit.getSelectedRecords();
-    allSelection = this._dataUnit.getSelection();
-    if (selectAll && selectedRecords.length < records.length) {
-      updateSelection = records;
-      allSelection.forEach((selectedRecord) => {
-        const recordIds = updateSelection.map((record) => record.__record__id__);
-        if (!recordIds.includes(selectedRecord.__record__id__)) {
-          updateSelection.push(selectedRecord);
-        }
-      });
-    }
-    else {
-      updateSelection = allSelection.filter((selectedRecord) => {
-        return !(records || [])
-          .some((record) => {
-          return record.__record__id__ === selectedRecord.__record__id__;
-        });
-      });
-    }
-    this._dataUnit.setSelection(updateSelection);
+  updateSelectionForAll(selectAll) {
+    this._dataUnit.updatePageSelection(selectAll ? this._dataUnit.records.map(r => r.__record__id__) : []);
   }
   setData(data) {
     if (this._grid === undefined) {
@@ -119328,21 +119279,55 @@ class AgGridController {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
   }
-  selectRows(rowIds) {
-    if (this._grid === undefined) {
-      throw new Error("Erro interno: Grid ainda não inicializado.");
+  selectAll(quietly = false) {
+    try {
+      this._gridOptions.context.selectionChangeQuietly = quietly;
+      this._gridOptions.api.forEachNode(node => {
+        if (!node.isSelected()) {
+          node.setSelected(true);
+        }
+      });
+    }
+    finally {
+      const newContext = Object.assign({}, this._gridOptions.context);
+      delete newContext.selectionChangeQuietly;
+      this._gridOptions.context = newContext;
     }
-    this._gridOptions.api.forEachNode(node => {
-      var _a;
-      if (rowIds && rowIds.find(row => row.__record__id__ === node.id)) {
-        node.setSelected(true);
-        (_a = this._gridOptions.api) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
+  }
+  selectRows(rowIds, quietly = false) {
+    var _a;
+    try {
+      this._gridOptions.context.selectionChangeQuietly = quietly;
+      if (this._grid === undefined) {
+        throw new Error("Erro interno: Grid ainda não inicializado.");
       }
-      else {
-        node.setSelected(false);
+      let lastSelected;
+      this._gridOptions.api.forEachNode(node => {
+        if (rowIds && rowIds.includes(node.id)) {
+          if (!node.isSelected()) {
+            node.setSelected(true);
+            lastSelected = node;
+          }
+        }
+        else {
+          if (node.isSelected()) {
+            node.setSelected(false);
+          }
+        }
+      });
+      const selectionHeader = this._gridOptions.context.selectionHeader;
+      if (selectionHeader) {
+        selectionHeader.updateCheckbox();
       }
-    });
-    this.updateCheckbox();
+      if (lastSelected) {
+        (_a = this._gridOptions.api) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(lastSelected);
+      }
+    }
+    finally {
+      const newContext = Object.assign({}, this._gridOptions.context);
+      delete newContext.selectionChangeQuietly;
+      this._gridOptions.context = newContext;
+    }
   }
   removeRows() {
     if (this._grid === undefined) {
@@ -119525,19 +119510,6 @@ class AgGridController {
     var _a;
     (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
   }
-  deselectAll() {
-    var _a, _b;
-    (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.deselectAll();
-    this.updateCheckbox();
-  }
-  updateCheckbox() {
-    var _a, _b;
-    const selectionHeader = (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.selectionHeader;
-    if (selectionHeader == undefined) {
-      return;
-    }
-    selectionHeader.updateCheckbox();
-  }
   buildColDef(source) {
     var _a, _b, _c;
     let tooltip = undefined;
@@ -119658,13 +119630,33 @@ class AgGridController {
     }
     return false;
   }
-  onSelectionChange() {
+  onSelectionChange(event) {
     if (this._selectionChangeCallback) {
       clearTimeout(this._selectionChangeDeboucing);
       this._selectionChangeDeboucing = window.setTimeout(() => {
-        this._selectionChangeCallback({
-          selection: this._gridOptions.api.getSelectedRows()
-        });
+        if (this._dataUnit) {
+          if (event.context.selectionChangeQuietly) {
+            const selectionInfo = this._dataUnit;
+            this._selectionChangeCallback({
+              selection: selectionInfo.records,
+              selectionHeaderStatus: this.getSelectionHeaderStatus()
+            });
+          }
+          else {
+            this._dataUnit.updatePageSelection(this._gridOptions.api.getSelectedRows().map((r) => r.__record__id__)).then(selectionInfo => {
+              this._selectionChangeCallback({
+                selection: selectionInfo.records,
+                selectionHeaderStatus: this.getSelectionHeaderStatus()
+              });
+            });
+          }
+        }
+        else {
+          this._selectionChangeCallback({
+            selection: this._gridOptions.api.getSelectedRows(),
+            selectionHeaderStatus: this.getSelectionHeaderStatus()
+          });
+        }
       }, 0);
     }
   }
@@ -119696,16 +119688,14 @@ class AgGridController {
 }
 
 const SelectionCounter = (props) => {
-  const { selectionCount, selectionPageCount, total, recordsLength, onSelectAll, onSelectPage, onClearAll, onClose } = props;
-  const pageSelectedRecords = selectionPageCount === recordsLength;
-  const allSelectedRecords = selectionCount === total;
+  const { selectionCount, currentPageSelected, total, allRecordSelected, onSelectAll, onSelectPage, onClearAll, onClose } = props;
   return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")),
     h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" },
       h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" },
-        h("label", Object.assign({ innerHTML: getText(selectionCount, allSelectedRecords), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))),
+        h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))),
         h("div", { class: "ez-flex ez-margin-right--medium" },
-          (pageSelectedRecords || allSelectedRecords) &&
-            h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allSelectedRecords ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allSelectedRecords ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allSelectedRecords ? "Page" : "All"}`))),
+          (currentPageSelected || allRecordSelected) &&
+            h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allRecordSelected ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
           h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))),
       h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")),
         h("ez-icon", { iconName: "close" })))));
@@ -119735,13 +119725,12 @@ const EzGrid = class {
     this.ezDoubleClick = createEvent(this, "ezDoubleClick", 7);
     this.configChange = createEvent(this, "configChange", 7);
     this._gridController = new AgGridController(false);
-    this._debounceTimer = 500;
-    this._selectionAll = false;
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
-    this._selectionCount = 0;
-    this._selectionPageCount = 0;
+    this._isAllSelection = false;
+    this._currentPageSelected = undefined;
+    this._selectionCount = undefined;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.serverUrl = undefined;
@@ -119800,117 +119789,29 @@ const EzGrid = class {
     this._gridController.setColumnsState(config.columns);
   }
   onSelectionChange(evt) {
-    const { selection } = evt === null || evt === void 0 ? void 0 : evt.detail;
-    if (selection == undefined || this.dataUnit == undefined) {
-      return;
-    }
-    if (this.isAllRecordSetted()) {
-      this.updateSelectionPage(selection);
-      return;
-    }
-    this.setSelection(selection);
-  }
-  updateSelectionPage(selection) {
-    if (this._selectionAll) {
-      this._selectionAll = false;
-    }
-    else {
-      this.dataUnit.clearSelection()
-        .then(() => {
-        const records = this.dataUnit.records;
-        const selectionPage = selection.filter((selectedRecord) => {
-          return records.some((record) => {
-            return record.__record__id__ === selectedRecord.__record__id__;
-          });
-        });
-        this._gridController.selectRows(selectionPage);
-      });
-    }
-  }
-  isAllRecordSetted() {
-    var _a;
-    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
-    return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
-      return selectedRecord.__record__id__ === ALL_RECORD;
-    });
-  }
-  setSelection(selection) {
-    if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
-      this.dataUnit.setSelection(selection)
-        .then(this.controlSelectionCounter.bind(this));
-    }
-    else {
-      this.dataUnit.clearSelection()
-        .then(this.controlSelectionCounter.bind(this));
-    }
-  }
-  setAutoSelectAll() {
-    var _a, _b, _c, _d;
-    const { total } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
-    if (total == undefined) {
-      return;
-    }
-    this._selectionCount = total;
-    this._selectionAll = true;
-    this._showSelectionCounter = true;
-    (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.selectRows((_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.records) !== null && _d !== void 0 ? _d : []);
-  }
-  controlSelectionCounter() {
-    var _a, _b;
-    const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
-    const counter = (_b = allSelection === null || allSelection === void 0 ? void 0 : allSelection.length) !== null && _b !== void 0 ? _b : 0;
-    if (this.isAllRecordSetted()) {
-      this.setAutoSelectAll();
-      return;
-    }
-    if (!this.multipleSelection || !this.isPaginationActived()) {
-      this._showSelectionCounter = false;
-      setTimeout(this.setSelectionCount.bind(this), this._debounceTimer);
-      return;
-    }
-    if (counter > 1) {
-      setTimeout(() => {
-        this.setSelectionCount(counter);
-        this._showSelectionCounter = true;
-      }, this._debounceTimer);
-    }
-    else {
-      this._showSelectionCounter = false;
-      setTimeout(this.setSelectionCount.bind(this, counter), this._debounceTimer);
+    this._currentPageSelected = evt.detail.selectionHeaderStatus === true;
+    if (this.dataUnit) {
+      this.setSelection(this.dataUnit.getSelectionInfo());
     }
   }
-  setSelectionCount(value = 0) {
-    var _a, _b;
-    this._selectionCount = value;
-    const selectPageRecords = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectedRecords();
-    this._selectionPageCount = (_b = selectPageRecords === null || selectPageRecords === void 0 ? void 0 : selectPageRecords.length) !== null && _b !== void 0 ? _b : 0;
-  }
-  isPaginationActived() {
+  setSelection(selectionInfo) {
     var _a;
-    const { total, lastRecord, firstRecord } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
-    if (total == undefined || lastRecord == undefined || firstRecord == undefined) {
-      return false;
-    }
-    return Math.ceil(total / (lastRecord - firstRecord + 1)) > 1;
+    this._selectionCount = (_a = selectionInfo === null || selectionInfo === void 0 ? void 0 : selectionInfo.length) !== null && _a !== void 0 ? _a : 0;
+    this._isAllSelection = selectionInfo === null || selectionInfo === void 0 ? void 0 : selectionInfo.isAllRecords();
+    this._showSelectionCounter = this._selectionCount > 1 || this._isAllSelection;
   }
   onSelectAllRecords() {
-    const allRecord = {
-      __record__id__: ALL_RECORD,
-      filter: this.dataUnit.getFilters(),
-      sort: this.dataUnit.getSort()
-    };
-    this.setSelection([allRecord]);
+    var _a;
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setSelection(SelectionMode.ALL_RECORDS).then(selection => this.setSelection(selection));
   }
   onSelectPageRecords() {
     var _a;
-    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection().then(() => {
-      var _a, _b, _c;
-      (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.selectRows((_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) !== null && _c !== void 0 ? _c : []);
-    });
+    (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setSelection(this.dataUnit.records.map(record => record.__record__id__)).then(selection => this.setSelection(selection));
   }
   onClearSelectedRecords() {
     var _a;
     (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection();
+    this.setSelection(undefined);
   }
   createConfigFromState(state) {
     let newConfig = { columns: [] };
@@ -120060,8 +119961,6 @@ const EzGrid = class {
           this._paginationChangedByKeyboard = true;
         }
         this._paginationInfo = paginationInfo;
-        this._gridController.updateCheckbox();
-        this.controlSelectionCounter();
       },
       onDoubleClick: (row) => {
         this.ezDoubleClick.emit(row);
@@ -120081,10 +119980,10 @@ const EzGrid = class {
     this.configSelectionCounter();
   }
   render() {
-    var _a, _b, _c;
+    var _a;
     return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), h("div", { ref: (ref) => this._gridSelectionCounter = ref, class: `grid__selection-counter
           ${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
-        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, selectionPageCount: this._selectionPageCount, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, recordsLength: (_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) === null || _c === void 0 ? void 0 : _c.length, onSelectAll: this.onSelectAllRecords.bind(this), onSelectPage: this.onSelectPageRecords.bind(this), onClearAll: this.onClearSelectedRecords.bind(this), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return getElement(this); }

package/dist/esm/ez-modal.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-de655f48.js';
 
-const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);display:block}.modal{position:fixed;padding:var(--ez-modal-vertical-padding) 0;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:100%;height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:24px;border-radius:12px 0px 0px 12px;box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);display:block}.modal{position:fixed;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.modal__vertical-padding{padding:var(--ez-modal-vertical-padding) 0}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:100%;height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:24px;box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 const EzModal = class {
   constructor(hostRef) {
@@ -14,6 +14,7 @@ const EzModal = class {
     };
     this.modalSize = undefined;
     this.align = undefined;
+    this.heightMode = "regular";
     this.opened = true;
     this.closeEsc = false;
     this.closeOutsideClick = false;
@@ -45,9 +46,11 @@ const EzModal = class {
   }
   render() {
     const positionSufix = this.align === "left" ? "left" : "right";
+    const regularVerticalPaddingClass = this.heightMode === "regular" ? 'modal__vertical-padding' : '';
+    const modalContentHeightMode = this.heightMode === "regular" ? `modal__content--${positionSufix}` : '';
     return (h(Host, null, this.opened
       ?
-        h("div", { class: "modal", onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalSize}` }, h("slot", null))))
+        h("div", { class: `modal ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
       :
         undefined));
   }

package/dist/esm/ez-upload.entry.js

@@ -98,7 +98,7 @@ class RemoteFile {
   }
 }
 
-const ezUploadCss = ":host{--ez-upload--height:42px;--ez-upload--width:100%;--ez-upload__icon--width:48px;--ez-upload__container--background-color:var(--background--medium, #d2dce9);--ez-upload__color--primary:var(--color--primary, #008561);--ez-upload--padding--extra-small:var(--space--extra-small, 3px);--ez-upload--padding--small:var(--space--small, 6px);--ez-upload--padding--medium:var(--space--medium, 12px);--ez-upload--padding--large:var(--space--large, 24px);--ez-upload__border--color:var(--color-strokes, #DCE0E8);--ez-upload--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-upload--text--primary:var(--text-primary, #626e82);--ez-upload--font-size:var(--text--medium, 14px);--ez-upload--font-family:var(--font-pattern, Arial);--ez-upload--font-weight:var(--text-weight--large, 500);--ez-upload__btn__cancel-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"8x\" width=\"8px\"><path d=\"M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z\"/></svg>');--ez-upload__file-icon-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"11x\" width=\"9px\"><path d=\"M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z\"/></svg>');display:flex;flex-wrap:wrap;position:relative;padding-bottom:16px;font-family:var(--ez-upload--font-family);font-size:var(--ez-upload--font-size);width:var(--ez-upload--width);font-weight:var(--ez-upload--font-weight)}.iu{display:flex;flex-wrap:wrap;background-color:var(--ez-upload__container--background-color);padding:var(--ez-upload--padding--small);width:100%;border-radius:12px;box-sizing:border-box}.iu__container{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:2px dashed var(--ez-upload__border--color);border-radius:6px;box-sizing:border-box}.iu__footer{display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding:0 var(--ez-upload--padding--medium) var(--ez-upload--padding--medium) var(--ez-upload--padding--medium);box-sizing:border-box}.iu__item{display:flex;width:100%;justify-content:flex-start;align-items:center;align-self:center;padding-bottom:var(--ez-upload--padding--extra-small);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iu__item-label{display:flex;max-width:80%;align-self:stretch;align-items:center}.file__name{font-weight:200}.box__content{width:100%;justify-content:center;align-items:center;height:100%;border:1px dashed var(--ez-upload__border--color);border-radius:6px;box-sizing:border-box}.box__container{display:flex;flex-wrap:wrap;background-color:var(--ez-upload__container--background-color);padding:6px;width:100%;border-radius:12px}a:-webkit-any-link{color:#008561;fill:#008561;cursor:pointer;text-decoration:none}progress[value]{display:flex;width:100%;appearance:none;border:1px solid var(--ez-upload__border--color);height:12px;justify-content:flex-start;align-items:center;border-radius:3px;position:relative}progress[value]::-webkit-progress-bar{display:flex;-webkit-appearance:none;width:100%;background-color:rgb(255, 255, 255);border-radius:2px;padding:2px}progress[value]::-webkit-progress-value{display:flex;width:100%;background-color:var(--ez-upload__color--primary)}.text--center{text-align:center}.align--middle{align-self:center;align-items:center}.text{font-family:var(--font-pattern, \"Roboto\");text-shadow:0 0 0 #353535, 0 0 1px transparent}.text--primary{color:var(--ez-upload--text--primary);text-shadow:var(--ez-upload--text-shadow)}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text--medium{font-size:14px}.text--small{font-size:12px}.btn-cancel{outline:none;border:none;background-color:unset;cursor:pointer}.btn-cancel::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:8px;height:8px;-webkit-mask-image:var(--ez-upload__btn__cancel-image);mask-image:var(--ez-upload__btn__cancel-image)}.iu_header{display:flex;flex-direction:column;width:100%}.iu__label{padding:var(--space--small);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-upload--font-family);font-size:var(--text--extra-small);font-weight:var(--ez-upload--font-weight);color:var(--ez-upload--text--primary);text-shadow:var(--ez-upload--text-shadow)}.iu__file-icon{outline:none;border:none;background-color:unset;cursor:pointer}.iu__file-icon:disabled{cursor:unset}.iu__file-icon::after{content:'';display:flex;background-color:var(--text--primary, #626e82);width:9px;height:11px;-webkit-mask-image:var(--ez-upload__file-icon-image);mask-image:var(--ez-upload__file-icon-image)}.iu__file-icon:disabled::after{background-color:var(--text--disable, #AFB6C0)}.iu__icon-label{justify-content:center;display:flex;cursor:pointer;padding:var(--ez-upload--padding--large) 0px;box-sizing:border-box}.background--disabled{background-color:var(--color--disable-secondary, #F2F5F8)}.text--disabled{color:var(--text--disable, #AFB6C0)}.mouse-pointer--disabled{cursor:unset}.appearanceNone{width:0px;height:0px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezUploadCss = ":host{--ez-upload--height:42px;--ez-upload--width:100%;--ez-upload__icon--width:48px;--ez-upload__container--background-color:var(--background--medium, #d2dce9);--ez-upload__color--primary:var(--color--primary, #008561);--ez-upload--padding--extra-small:var(--space--extra-small, 3px);--ez-upload--padding--small:var(--space--small, 6px);--ez-upload--padding--medium:var(--space--medium, 12px);--ez-upload--padding--large:var(--space--large, 24px);--ez-upload__border--color:var(--color-strokes, #DCE0E8);--ez-upload--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-upload--text--primary:var(--text-primary, #626e82);--ez-upload--text--secondary:var(--text-secondary, #a2abb9);--ez-upload--font-size:var(--text--medium, 14px);--ez-upload--font-family:var(--font-pattern, Arial);--ez-upload--font-weight:var(--text-weight--large, 500);--ez-upload__btn__cancel-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"8x\" width=\"8px\"><path d=\"M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z\"/></svg>');--ez-upload__file-icon-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"11x\" width=\"9px\"><path d=\"M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z\"/></svg>');display:flex;flex-wrap:wrap;position:relative;padding-bottom:16px;font-family:var(--ez-upload--font-family);font-size:var(--ez-upload--font-size);width:var(--ez-upload--width);font-weight:var(--ez-upload--font-weight)}.iu{display:flex;flex-wrap:wrap;background-color:var(--ez-upload__container--background-color);padding:var(--ez-upload--padding--small);width:100%;border-radius:12px;box-sizing:border-box}.iu__container{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:2px dashed var(--ez-upload__border--color);border-radius:6px;box-sizing:border-box}.iu__footer{display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding:0 var(--ez-upload--padding--medium) var(--ez-upload--padding--medium) var(--ez-upload--padding--medium);box-sizing:border-box}.iu__item{display:flex;width:100%;justify-content:flex-start;align-items:center;align-self:center;padding-bottom:var(--ez-upload--padding--extra-small);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iu__item-label{display:flex;max-width:80%;align-self:stretch;align-items:center}.file__name{font-weight:200}.box__content{width:100%;justify-content:center;align-items:center;height:100%;border:1px dashed var(--ez-upload__border--color);border-radius:6px;box-sizing:border-box}.box__container{display:flex;flex-wrap:wrap;background-color:var(--ez-upload__container--background-color);padding:6px;width:100%;border-radius:12px}a:-webkit-any-link{color:#008561;fill:#008561;cursor:pointer;text-decoration:none}progress[value]{display:flex;width:100%;appearance:none;border:1px solid var(--ez-upload__border--color);height:12px;justify-content:flex-start;align-items:center;border-radius:3px;position:relative}progress[value]::-webkit-progress-bar{display:flex;-webkit-appearance:none;width:100%;background-color:rgb(255, 255, 255);border-radius:2px;padding:2px}progress[value]::-webkit-progress-value{display:flex;width:100%;background-color:var(--ez-upload__color--primary)}.text--center{text-align:center}.align--middle{align-self:center;align-items:center}.padding-large{padding:var(--ez-upload--padding--large) 0px}.padding-extra-small{padding:var(--ez-upload--padding--extra-small) 0px}.text{font-family:var(--font-pattern, \"Roboto\");text-shadow:0 0 0 #353535, 0 0 1px transparent}.text--primary{color:var(--ez-upload--text--primary);text-shadow:var(--ez-upload--text-shadow)}.text--secondary{color:var(--ez-upload--text--secondary);text-shadow:var(--ez-upload--text-shadow)}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text--medium{font-size:14px}.text--small{font-size:12px}.btn-cancel{outline:none;border:none;background-color:unset;cursor:pointer}.btn-cancel::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:8px;height:8px;-webkit-mask-image:var(--ez-upload__btn__cancel-image);mask-image:var(--ez-upload__btn__cancel-image)}.iu_header{display:flex;flex-direction:column;width:100%}.iu__label{padding:var(--space--small);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-upload--font-family);font-size:var(--text--extra-small);font-weight:var(--ez-upload--font-weight);color:var(--ez-upload--text--primary);text-shadow:var(--ez-upload--text-shadow)}.iu__file-icon{outline:none;border:none;background-color:unset;cursor:pointer}.iu__file-icon:disabled{cursor:unset}.iu__file-icon::after{content:'';display:flex;background-color:var(--text--primary, #626e82);width:9px;height:11px;-webkit-mask-image:var(--ez-upload__file-icon-image);mask-image:var(--ez-upload__file-icon-image)}.iu__file-icon:disabled::after{background-color:var(--text--disable, #AFB6C0)}.iu__icon-label{justify-content:center;display:flex;cursor:pointer;box-sizing:border-box}.background--disabled{background-color:var(--color--disable-secondary, #F2F5F8)}.text--disabled{color:var(--text--disable, #AFB6C0)}.mouse-pointer--disabled{cursor:unset}.appearanceNone{width:0px;height:0px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 const EzUpload = class {
   constructor(hostRef) {
@@ -108,6 +108,7 @@ const EzUpload = class {
     this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
     this._filePointers = new Map();
     this.label = undefined;
+    this.subtitle = undefined;
     this.enabled = true;
     this.maxFileSize = undefined;
     this.maxFiles = undefined;
@@ -348,7 +349,8 @@ const EzUpload = class {
     }
   }
   render() {
-    return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass("iu", "background--disabled") }, h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, h("div", { class: "iu_header" }, this.label ? h("label", { class: this.evalDisabledClass("iu__label", "text--disabled"), title: this.label }, this.label) : null, h("div", { class: this.evalDisabledClass("iu__icon-label", "mouse-pointer--disabled") }, h("button", { class: "iu__file-icon", disabled: !this.enabled }), h("div", { class: this.evalDisabledClass("text text--center text--medium text--primary", "text--disabled") }, this.enabled ? "Arraste e solte ou clique para adicionar arquivos" : "Somente leitura"))), this.buildFooter()), h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, class: "appearanceNone" })));
+    return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass("iu", "background--disabled") }, h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, h("div", { class: "iu_header" }, this.label ? h("label", { class: this.evalDisabledClass("iu__label", "text--disabled"), title: this.label }, this.label) : null, h("div", { class: "padding-large" }, h("div", { class: this.evalDisabledClass("iu__icon-label", "mouse-pointer--disabled") }, h("button", { class: "iu__file-icon", disabled: !this.enabled }), h("div", { class: this.evalDisabledClass("text text--center text--medium text--primary", "text--disabled") }, this.enabled ? "Arraste e solte ou clique para adicionar arquivos" : "Somente leitura")), this.subtitle &&
+      h("div", { class: this.evalDisabledClass("padding-extra-small text text--center text--small text--secondary", "text--disabled") }, this.subtitle))), this.buildFooter()), h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, class: "appearanceNone" })));
   }
   buildFooter() {
     if (this._filePointers.size === 0) {