@sankhyalabs/ezui 5.20.4 → 5.21.0-dev.10

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { UserInterface, DateUtils as DateUtils$1, Action, WaitingChangeException, ApplicationContext, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, StringUtils as StringUtils$1, TimeFormatter, DataUnit, HTMLBuilder, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, FieldComparator, ArrayUtils as ArrayUtils$1 } from '@sankhyalabs/core';
+import { UserInterface, DateUtils as DateUtils$1, Action, WaitingChangeException, ApplicationContext, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, StringUtils as StringUtils$1, TimeFormatter, DataUnit, HTMLBuilder, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, FieldComparator, ArrayUtils as ArrayUtils$1, OverflowWatcher, OVERFLOWED_CLASS_NAME, KeyboardManager } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -284,6 +284,19 @@ class CSSVarsUtils {
       });
     }
   }
+  static applyVarsGrid(host, child) {
+    if (child) {
+      [
+        "--ez-grid--min-height",
+        "--snk-grid-min-height",
+      ].forEach(prop => {
+        const propValue = getComputedStyle(host).getPropertyValue(prop);
+        if (propValue !== null && propValue !== undefined) {
+          child.style.setProperty(prop, propValue);
+        }
+      });
+    }
+  }
   static applyIfExists(host, element, varName) {
     const prop = getComputedStyle(host).getPropertyValue(varName);
     if (prop) {
@@ -1113,88 +1126,162 @@ const EzAlert$1 = class extends HTMLElement$1 {
   static get style() { return ezAlertCss; }
 };
 
-const ezAlertListCss = ":host{display:flex;--ez-alert-list__container--width:680px;--ez-alert-list__container--height:220px;--ez-alert-list__title--font-family:var(--font-pattern, \"Roboto\");--ez-alert-list__title--font-size:var(--title--large, 20px);--ez-alert-list__title--color:var(--title--primary, #2b3a54);--ez-alert-list__title--font-weight:var(--text-weight--extra-large, 700);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-bottom-color:var(--color--strokes, #DCE0E8);--ez-list__item--white-space:break-space}.alert-list__content{display:flex;flex-direction:column;gap:var(--space--xs);margin:var(--space--large, 24px);width:100%}.alert-list__container{z-index:var(--more-visible--2x, 3);display:flex;height:var(--ez-alert-list__container--height);width:var(--ez-alert-list__container--width);border-radius:var(--border--radius-medium);background-color:var(--background--xlight);box-shadow:0px 8px 24px 0px rgba(0, 38, 111, 0.1)}.alert-list__header{width:100%;display:flex;align-items:center;justify-content:space-between}.alert-list__title{font-family:var(--ez-alert-list__title--font-family);font-size:var(--ez-alert-list__title--font-size);font-weight:var(--ez-alert-list__title--font-weight);color:var(--ez-alert-list__title--color)}.alert-list__header__buttons{display:flex;gap:var(--space--xs)}.alert-list__expandable-content{overflow-y:auto;scrollbar-width:thin}";
+const ezAlertListCss = ":host {\n  display: flex;\n\n  /* Alert List */\n  \n  /*@doc Define a largura da lista minimizado */\n  --ez-alert-list__container--width: 680px;\n  /*@doc Define a altura da lista minimizado */\n  --ez-alert-list__container--height: 220px;\n  \n  /*@doc Define a largura da lista maximizada */\n  --ez-alert-list__container--width--expanded: 920px;\n  /*@doc Define a altura da lista maximizada */\n  --ez-alert-list__container--height--expanded: 540px;\n\n  /* Title */\n  /*@doc Define a fonte do título do componente */\n  --ez-alert-list__title--font-family: var(--font-pattern, \"Roboto\");\n  /*@doc Define o tamanho da fonte do título do popup.*/\n  --ez-alert-list__title--font-size: var(--title--large, 20px);\n  /*@doc Define a cor da fonte do título do popup.*/\n  --ez-alert-list__title--color: var(--title--primary, #2b3a54);\n  /*@doc Define o peso da fonte do título do popup.*/\n  --ez-alert-list__title--font-weight: var(--text-weight--extra-large, 700);\n\n  /* @doc Define a borda inferior do item da lista. */\n  --ez-list__item--border-bottom: var(--border--small, 1px solid);\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color: var(--color--strokes, #DCE0E8);\n\n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: break-space;\n}\n\n.alert-list__content {\n  display: flex;\n  flex-direction: column;\n  \n  gap: var(--space--xs);\n  margin: var(--space--large, 24px);\n  width: 100%;\n}\n\n.alert-list__container {\n  z-index: var(--ez-elevation--8, 8);\n  display: flex;\n  height: var(--ez-alert-list__container--height);\n  width: var(--ez-alert-list__container--width);\n  border-radius: var(--border--radius-medium);\n  background-color: var(--background--xlight);\n  box-shadow: var(--shadow--medium);\n\n  &.expanded {\n    height: var(--ez-alert-list__container--height--expanded);\n    width: var(--ez-alert-list__container--width--expanded);\n  }\n\n  @media (max-height: 640px) {\n    max-height: calc(100vh - var(--space--3xl));\n  }  \n}\n\n.alert-list__header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.alert-list__title {\n  font-family: var(--ez-alert-list__title--font-family);\n  font-size: var(--ez-alert-list__title--font-size);\n  font-weight: var(--ez-alert-list__title--font-weight);\n  color: var(--ez-alert-list__title--color);\n}\n\n.alert-list__header__buttons {\n  display: flex;\n  gap: var(--space--xs);\n}\n\n.alert-list__expandable-content {\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n";
 
 const EzAlertList$1 = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this._container = undefined;
     this.alerts = [];
     this.enableDragAndDrop = undefined;
-    this.enableExpand = undefined;
+    this.enableExpand = true;
     this.itemRightSlotBuilder = undefined;
     this.opened = true;
     this.expanded = false;
   }
   observeOpened() {
-    this.manageOverlay();
+    if (this.opened) {
+      this.manageOverlay();
+    }
+  }
+  /**
+   * Retorna o id do alerta a partir do título e do índice.
+   */
+  alertId(title, index) {
+    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
+    return `alert-${index}-${concatTitle(title)}`;
+  }
+  /**
+   * Retorna o título do alerta a partir do id.
+   */
+  getAlertTitle(id) {
+    var _a;
+    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  }
+  /**
+   * Retorna o link para o titulo do alerta a partir do id.
+   */
+  getLinkActionClick(item) {
+    var _a;
+    const action = (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === item.id)) === null || _a === void 0 ? void 0 : _a.onClickLink;
+    if (action)
+      return action;
+    return () => { };
+  }
+  /**
+    * Retorna o texto do título do alerta.
+    */
+  getTitleText(item) {
+    var _a;
+    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
+    return `${title}${(title && item.label) ? ':' : ''}`;
+  }
+  /**
+   * Gerencia a exibição do conteúdo expandido.
+   */
+  toggleExpandContainer() {
+    if (!this.enableExpand) {
+      return;
+    }
+    this.expanded = !this.expanded;
+    this._container.classList.toggle('expanded', this.expanded);
+    if (this.expanded) {
+      this.updatePosition(this.getBoundingRight(), this.getBoundingBottom());
+    }
+    else {
+      this.updatePosition(`10px`, `10px`);
+    }
   }
   /**
    * Gerencia a exibição do overlay usando FloatingManager do Core.
    */
-  async manageOverlay() {
-    if (this.opened) {
-      this._overlayId = FloatingManager.float(this._container, this._overlayRef, {
-        autoClose: false,
-        isFixed: !this.enableDragAndDrop,
-        bottom: '10px',
-        right: '10px'
-      });
+  manageOverlay() {
+    if (this.opened && this._container) {
+      this._overlayId = FloatingManager.float(this._container, this._overlayRef, this.getFloatOptions());
     }
     else {
+      if (this._overlayId === undefined)
+        return;
       FloatingManager.close(this._overlayId);
       this._overlayId = undefined;
     }
   }
-  componentDidRender() {
-    this.manageOverlay();
+  /**
+   * Atualiza a posição da lista.
+   */
+  updatePosition(right, bottom) {
     if (this.opened) {
-      this._container.focus();
+      FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
+        bottom }));
     }
   }
-  componentWillLoad() {
-    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+  ;
+  /**
+   * Retorna valores padrões do componente
+   */
+  getFloatOptions() {
+    return {
+      autoClose: false,
+      isFixed: true,
+      bottom: '10px',
+      right: '10px',
+    };
   }
-  alertId(title, index) {
-    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
-    return `alert-${index}-${concatTitle(title)}`;
+  ;
+  /**
+   * Retorna o valor para o alinhamento horizontal do componente.
+   */
+  getBoundingRight() {
+    const docWidth = document.body.clientWidth;
+    const boxWidth = this._container.getBoundingClientRect().width;
+    return ((docWidth - boxWidth) / 2) + 'px';
   }
-  getAlertTitle(id) {
-    var _a;
-    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  /**
+   * Retorna o valor para o alinhamento vertical do componente.
+   */
+  getBoundingBottom() {
+    const docHeight = document.body.clientHeight;
+    const boxHeight = this._container.getBoundingClientRect().height;
+    return ((docHeight - boxHeight) / 2) + 'px';
   }
-  getTitleText(item) {
-    var _a;
-    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
-    return `${title}${(title && item.label) ? ':' : ''}`;
+  componentDidLoad() {
+    this.manageOverlay();
+    if (this.opened && this._container) {
+      this._container.focus();
+    }
+  }
+  componentWillLoad() {
+    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
   }
   render() {
-    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: "alert-list__container", ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, h("ez-button", { mode: "icon", size: "small", iconName: "expand", "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), onClick: () => { }, title: this.expanded ? 'Resumir' : 'Expandir' }), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
-        this.opened = false;
-      }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
-        return (h("a", { href: "#", style: {
-            fontFamily: "var(--font-pattern, 'Roboto')",
-            fontSize: 'var(--text--medium, 14px)',
-            fontWeight: 'var(--text-weight--medium, 400)',
-            color: 'var(--color--primary, #008561)',
-            marginRight: '4px',
-            cursor: 'pointer',
-            display: 'flex',
-            width: 'max-content',
-            textDecoration: 'none'
-          } }, this.getTitleText(item)));
-      }, dataSource: this.alerts.map((alert, index) => {
-        var _a;
-        return {
-          id: this.alertId(alert.title, index),
-          label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
-        };
-      }) })))))));
+    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
+      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+          this.opened = false;
+        }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
+          return (h("a", { onClick: this.getLinkActionClick(item), style: {
+              fontFamily: "var(--font-pattern, 'Roboto')",
+              fontSize: 'var(--text--medium, 14px)',
+              fontWeight: 'var(--text-weight--medium, 400)',
+              color: 'var(--color--primary, #008561)',
+              marginRight: '4px',
+              cursor: 'pointer',
+              display: 'flex',
+              width: 'max-content',
+              textDecoration: 'none'
+            } }, this.getTitleText(item)));
+        }, dataSource: this.alerts.map((alert, index) => {
+          var _a;
+          return {
+            id: this.alertId(alert.title, index),
+            label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
+          };
+        }) })))))) : null));
   }
   get _element() { return this; }
   static get watchers() { return {
-    "opened": ["observeOpened"]
+    "_container": ["observeOpened"]
   }; }
   static get style() { return ezAlertListCss; }
 };
@@ -1612,7 +1699,7 @@ const EzBreadcrumb$1 = class extends HTMLElement$1 {
   static get style() { return ezBreadcrumbCss; }
 };
 
-const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
+const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link-disabled-color:var(--color--disable-primary, '#e5eaf0');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}a.disabled{color:var(--ez-button--link-disabled-color);cursor:not-allowed}";
 
 const EzButton$1 = class extends HTMLElement$1 {
   constructor() {
@@ -1683,7 +1770,7 @@ const EzButton$1 = class extends HTMLElement$1 {
       return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
     }
     else if (this.mode == "link") {
-      return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+      return (h("a", { class: `${this.getIconSize()} ${!this.enabled ? "disabled" : ""}`, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
     else {
       return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
@@ -1925,7 +2012,7 @@ const EzCalendar$1 = class extends HTMLElement$1 {
   static get style() { return ezCalendarCss; }
 };
 
-const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;line-break:anywhere;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
+const ezCardItemCss = ":host {\n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--text-weight--medium, 400);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--text-weight--large, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--title--primary, #2B3A54);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  padding: 12px;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.card-item__details-container__left {\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-container__right {\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail:not(:last-child) {\n  cursor: pointer;\n  white-space: pre-line;\n\n  /*public*/\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item__detail-label--color);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n  color: var(--ez-card-item--color);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n.card-item__content{\n  display: flex;\n  align-items: center;\n}\n\n.card-item__details-container{\n  display: flex;\n}\n\n.card-item__details-slot{\n  margin-left: auto;\n}\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-container__left {\n    width: 100%;\n  }\n  \n  .card-item__details-container__right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";
 
 const EzCardItem$1 = class extends HTMLElement$1 {
   constructor() {
@@ -1934,6 +2021,7 @@ const EzCardItem$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezClick = createEvent(this, "ezClick", 7);
     this.item = undefined;
+    this.enableKey = true;
   }
   componentWillRender() {
     this.createDetailList();
@@ -1961,17 +2049,17 @@ const EzCardItem$1 = class extends HTMLElement$1 {
   }
   render() {
     return (h(Host, null, this.item &&
-      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("label", { class: "card-item__title" }, h("span", { class: "card-item__key", innerHTML: this.item.key }), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details" }, h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
+      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: "card-item__title" }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details-container" }, h("div", { class: "card-item__details-container__left" }, this._details.detailsLeft.map(detail => {
         return this.buildDetailContent(detail);
-      })), h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
+      })), h("div", { class: "card-item__details-container__right" }, this._details.detailsRight.map(detail => {
         return this.buildDetailContent(detail);
-      }))))));
+      })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
   }
   get _element() { return this; }
   static get style() { return ezCardItemCss; }
 };
 
-const ezCheckCss = ":host{--ez-check--box--width:20px;--ez-check--box--height:20px;--ez-check--width:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--height:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--indeterminate--image:url('data:image/svg+xml;utf8,<svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 1,0 h 8 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 H 1 C 0.446,2 0,1.554 0,1 0,0.446 0.446,0 1,0 Z\" /></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:19px;--ez-switch--pin--height:19px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;align-items:center;margin:0}input.regular-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.compact{margin-right:0px}input.regular-mode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regular-mode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regular-mode:disabled{cursor:auto;background:none}input.regular-mode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regular-mode:disabled::before{border:var(--ez-check--disabled--border)}input.regular-mode:checked:enabled:hover,input.regular-mode:indeterminate:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regular-mode:checked:enabled:focus,input.regular-mode:indeterminate:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regular-mode:checked::before,input.regular-mode:indeterminate::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regular-mode:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regular-mode:checked::after,input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:10px;height:2px;-webkit-mask-image:var(--ez-check--indeterminate--image);mask-image:var(--ez-check--indeterminate--image)}input.regular-mode:checked:disabled::after,input.regular-mode:indeterminate:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switch-mode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switch-mode:disabled{background-color:var(--ez-switch--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switch-mode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switch-mode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);background-color:var(--ez-switch--pin--focus--background-color)}input.switch-mode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switch-mode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px))}input.switch-mode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;width:inherit}.label--disabled{color:var(--ez-check--label--disabled--color)}.label--padding{padding-left:var(--space--small)}";
+const ezCheckCss = ":host{--ez-check--box--width:20px;--ez-check--box--height:20px;--ez-check--width:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--height:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--indeterminate--image:url('data:image/svg+xml;utf8,<svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 1,0 h 8 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 H 1 C 0.446,2 0,1.554 0,1 0,0.446 0.446,0 1,0 Z\" /></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:19px;--ez-switch--pin--height:19px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;align-items:center;margin:0;max-width:100%}input.regular-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.compact{margin-right:0px}input.regular-mode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regular-mode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regular-mode:disabled{cursor:auto;background:none}input.regular-mode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regular-mode:disabled::before{border:var(--ez-check--disabled--border)}input.regular-mode:checked:enabled:hover,input.regular-mode:indeterminate:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regular-mode:checked:enabled:focus,input.regular-mode:indeterminate:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regular-mode:checked::before,input.regular-mode:indeterminate::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regular-mode:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regular-mode:checked::after,input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:10px;height:2px;-webkit-mask-image:var(--ez-check--indeterminate--image);mask-image:var(--ez-check--indeterminate--image)}input.regular-mode:checked:disabled::after,input.regular-mode:indeterminate:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switch-mode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switch-mode:disabled{background-color:var(--ez-switch--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switch-mode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switch-mode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);background-color:var(--ez-switch--pin--focus--background-color)}input.switch-mode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switch-mode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px))}input.switch-mode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;width:inherit}.label--disabled{color:var(--ez-check--label--disabled--color)}.label--padding{padding-left:var(--space--small)}";
 
 const EzCheck$1 = class extends HTMLElement$1 {
   constructor() {
@@ -2292,10 +2380,6 @@ const EzCollapsibleBox$1 = class extends HTMLElement$1 {
   static get style() { return ezCollapsibleBoxCss; }
 };
 
-const REQUIRED_INFO = " (obrigatório) *";
-const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
-const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";
-
 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__list-min-width:64px;--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{min-width:var(--ez-combo-box__list-min-width);position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;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%;padding:0;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)}}";
 
 const EzComboBox$1 = class extends HTMLElement$1 {
@@ -2309,7 +2393,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     this._maxWidthValue = 0;
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
-    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
     this._lookupMode = false;
     this._preSelection = undefined;
     this._visibleOptions = undefined;
@@ -2322,7 +2405,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
-    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -2346,7 +2428,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
       try {
-        if (this.searchMode && typeof newValue === "string") {
+        if (typeof newValue === "string") {
           this.setInputValue();
           return;
         }
@@ -2371,9 +2453,9 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     }
   }
   observeOptions(newOptions, oldOptions) {
-    if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.join('')) === (oldOptions === null || oldOptions === void 0 ? void 0 : oldOptions.join('')))
+    if (ObjectUtils$1.equals(newOptions, oldOptions))
       return;
-    this.loadOptions(SearchMode.PRELOAD);
+    this.loadOptions(SearchMode$1.PRELOAD);
   }
   /*
   * Retorna uma promise com o valor da opção selecionada,
@@ -2509,18 +2591,19 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   }
   updateVisibleOptions() {
     let opts = this._source || [];
-    if (!this.searchMode && this._criteria) {
+    if (this._criteria) {
       const upperCriteria = this._criteria.toUpperCase();
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
-    if (this.suppressEmptyOption) {
-      this._visibleOptions = opts;
-    }
-    else {
-      this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
+    if (this.hasToAddEmptyoption(opts)) {
+      opts = [{ value: undefined, label: "" }].concat(opts);
     }
+    this._visibleOptions = opts;
     this._maxWidthValue = this.getMaxWidthValue();
   }
+  hasToAddEmptyoption(opts) {
+    return !this.suppressEmptyOption && !opts.filter(opt => !opt.value).length;
+  }
   getMaxWidthValue() {
     var _a;
     if (this.showOptionValue) {
@@ -2584,7 +2667,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
   }
   nextOption() {
-    if (this.searchMode && !this.isOptionsVisible()) {
+    if (!this.isOptionsVisible()) {
       return;
     }
     this.showOptions();
@@ -2607,9 +2690,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
-    else {
-      this.controlListWithOnlyOne();
-    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -2628,7 +2708,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
-          this.controlEmptySearch();
         }
       }
       else {
@@ -2636,10 +2715,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       }
     }
   }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -2651,10 +2726,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     else {
       this.resetOptions();
     }
-    if (this.searchMode) {
-      this._visibleOptions = [];
-      this.clearSource();
-    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -2690,93 +2761,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   clearSearch() {
     this.value = null;
   }
-  controlListWithOnlyOne() {
-    var _a;
-    if (this.searchMode) {
-      const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
-      if ((source === null || source === void 0 ? void 0 : source.length) === 1) {
-        this.selectOption(source[0]);
-      }
-    }
-  }
-  controlEmptySearch() {
-    var _a;
-    if (this.searchMode) {
-      if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
-        this.clearSearch();
-        ApplicationUtils.info(this._textEmptyList);
-      }
-      else {
-        this.controlListWithOnlyOne();
-      }
-    }
-  }
-  validateDescriptionValue() {
-    if (!this.searchMode || StringUtils$1.isEmpty(this.value)) {
-      return;
-    }
-    let value = this.value;
-    if (typeof value === "object") {
-      return;
-    }
-    if (StringUtils$1.isEmpty(value)) {
-      return;
-    }
-    this.loadDescriptionValue(value);
-  }
-  async loadDescriptionValue(argument) {
-    var _a, _b;
-    if (argument == undefined) {
-      return;
-    }
-    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this.loadOptionValue(argument);
-      return;
-    }
-    const searchArgument = {
-      mode: SearchMode.PREDICTIVE,
-      argument
-    };
-    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
-    if (source == undefined) {
-      return;
-    }
-    if (source instanceof Promise) {
-      source.then((result) => {
-        this.setDescriptionValue(result);
-      });
-    }
-    else {
-      this.setDescriptionValue(source);
-    }
-  }
-  setDescriptionValue(source) {
-    const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
-    if (value == undefined || !Object.keys(value).length) {
-      this.showNoResultMessage();
-      return;
-    }
-    this._lookupMode = true;
-    this.value = value;
-  }
-  loadOptionValue(argument) {
-    var _a;
-    const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
-    if (source != undefined) {
-      this.selectOption(source);
-    }
-    else {
-      this.showNoResultMessage();
-    }
-  }
-  async showNoResultMessage() {
-    this.clearSearch();
-    ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
-  }
-  getFieldLabel() {
-    var _a;
-    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(REQUIRED_INFO, "").toUpperCase();
-  }
   resetOptions() {
     this.hideOptions();
     this._criteria = undefined;
@@ -2802,12 +2786,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
         });
       }
     }
-    if (this.searchMode) {
-      this.updateSource([]);
-    }
-    else {
-      this.loadOptions(SearchMode.PRELOAD);
-    }
+    this.loadOptions(SearchMode$1.PRELOAD);
   }
   componentDidRender() {
     var _a;
@@ -2817,7 +2796,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
     });
-    this.validateDescriptionValue();
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
@@ -2837,13 +2815,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
-  }
-  buildNumberArgument(argument) {
-    if (this.isTextSearch) {
-      return NaN;
-    }
-    return Number(argument || undefined);
+    this.showOptions();
   }
   onTextInputChangeHandler(event) {
     var _a;
@@ -2860,36 +2832,12 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     }
     this._criteria = argument;
     if (argument) {
-      if (this.searchMode) {
-        this._showLoading = false;
-        this.clearSource();
-        const enoughChars = argument.length >= this.limitCharsToSearch;
-        const argumentNumber = this.buildNumberArgument(argument);
-        if (enoughChars || !isNaN(argumentNumber)) {
-          this._showLoading = true;
-          this._changeDeboucingTimeout = window.setTimeout(() => {
-            this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
-          }, this._deboucingTime);
-          this.showOptions();
-        }
-        else {
-          this.hideOptions();
-        }
-      }
-      else {
-        this.updateVisibleOptions();
-        this.showOptions();
-      }
+      this.updateVisibleOptions();
+      this.showOptions();
     }
     else {
       this.hideOptions();
-      if (this.searchMode) {
-        this._showLoading = false;
-        this.clearSource();
-      }
-      else {
-        this.updateVisibleOptions();
-      }
+      this.updateVisibleOptions();
     }
   }
   clearDeboucingTimeout() {
@@ -2899,15 +2847,13 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     }
   }
   onTextInputClickHandler() {
-    if (!this.searchMode) {
-      this.showOptions();
-    }
+    this.showOptions();
   }
   keyDownHandler(event) {
     this._tabPressed = false;
     if (event.ctrlKey) {
       if (event.key === "f" || event.key === "F") {
-        this.loadOptions(SearchMode.ADVANCED);
+        this.loadOptions(SearchMode$1.ADVANCED);
         //ATENÇÃO: Ctrl + F tem ação específica nos browsers
         //nesse caso, como vamos abrir o popup de busca avançada,
         //não é interessante deixar o evento propagar;
@@ -2933,7 +2879,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -2950,11 +2895,8 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   render() {
-    var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
-      ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
       && this._visibleOptions.length === 0
       && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
       && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.showOptionValue
@@ -2969,12 +2911,12 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   }; }
   static get style() { return ezComboBoxCss; }
 };
-var SearchMode;
+var SearchMode$1;
 (function (SearchMode) {
   SearchMode["ADVANCED"] = "ADVANCED";
   SearchMode["PRELOAD"] = "PRELOAD";
   SearchMode["PREDICTIVE"] = "PREDICTIVE";
-})(SearchMode || (SearchMode = {}));
+})(SearchMode$1 || (SearchMode$1 = {}));
 
 const ezDateInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
 
@@ -3881,6 +3823,7 @@ const EzDropdown$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezClick = createEvent(this, "ezClick", 7);
     this.ezSubActionClick = createEvent(this, "ezSubActionClick", 7);
+    this.ezOutsideClick = createEvent(this, "ezOutsideClick", 7);
     this._itemList = {};
     this._submenuList = [];
     this._openedMenuList = {};
@@ -3893,6 +3836,11 @@ const EzDropdown$1 = class extends HTMLElement$1 {
     this.value = undefined;
     this.itemBuilder = undefined;
   }
+  handleClickOutside(event) {
+    if (!this._element.contains(event.target)) {
+      this.ezOutsideClick.emit();
+    }
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
@@ -3971,13 +3919,13 @@ const EzDropdown$1 = class extends HTMLElement$1 {
       this._itemList[item.id] = {};
     }
   }
-  getContainerItemBuilder(item, level) {
+  getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren) {
     if (this.itemBuilder == undefined) {
       return;
     }
     const customContent = this.itemBuilder(item, level);
     if (customContent == undefined) {
-      return;
+      return this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren);
     }
     if (typeof customContent !== "string") {
       return (h("div", { class: "ez-dropdown__item-builder" }, customContent));
@@ -3998,7 +3946,7 @@ const EzDropdown$1 = class extends HTMLElement$1 {
       var _a;
       return (item.type !== "divider"
         ? h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item) }, this.itemBuilder
-          ? this.getContainerItemBuilder(item, level)
+          ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
           : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
           !isLockedLevels &&
           hasChildren &&
@@ -4672,10 +4620,12 @@ const EzForm$1 = class extends HTMLElement$1 {
         this.processMetadata();
       }
     };
+    this._fieldsProps = new Map();
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
     this.fieldToFocus = undefined;
+    this.onlyStaticFields = false;
   }
   /**
    * Realiza validação no conteúdo de todos os campos.
@@ -4686,6 +4636,15 @@ const EzForm$1 = class extends HTMLElement$1 {
   observeConfig() {
     this.processMetadata();
   }
+  /**
+   * Altera/adiciona uma propriedade nos metadados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const newCustomFieldProps = new Map(this._fieldsProps);
+    const currentProps = this._fieldsProps.get(fieldName);
+    newCustomFieldProps.set(fieldName, Object.assign(Object.assign({}, currentProps), { [propName]: value }));
+    this._fieldsProps = newCustomFieldProps;
+  }
   getDynamicContent() {
     var _a;
     const formMD = selectFormMetadata(this._store.getState());
@@ -4712,10 +4671,10 @@ const EzForm$1 = class extends HTMLElement$1 {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
+    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: ref => this._formView = ref, class: "ez-row ez-padding-vertical--small", fields: fields })));
   }
   processMetadata() {
-    if (!this.isStatic() && this.dataUnit && this._store) {
+    if (this.bindFields() && this.dataUnit && this._store) {
       const metadata = buildFormMetadata(this.config, this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
@@ -4724,6 +4683,9 @@ const EzForm$1 = class extends HTMLElement$1 {
     var _a;
     return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
+  bindFields() {
+    return !this.isStatic() || this.onlyStaticFields === false;
+  }
   componentWillLoad() {
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
@@ -4743,6 +4705,7 @@ const EzForm$1 = class extends HTMLElement$1 {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")), this.dataUnit.dataUnitId, metadata, this.recordsValidator);
     this.ezReady.emit();
     this.handleFieldToFocus();
+    this.setFieldsProps();
   }
   handleFieldToFocus() {
     var _a;
@@ -4759,6 +4722,17 @@ const EzForm$1 = class extends HTMLElement$1 {
       this.ezFormRequestClearFieldToFocus.emit();
     });
   }
+  setFieldsProps() {
+    if (!this._formView) {
+      return;
+    }
+    for (const [fieldName, props] of this._fieldsProps) {
+      for (const prop in props) {
+        this._formView.setFieldProp(fieldName, prop, props[prop]);
+      }
+      this._fieldsProps.delete(fieldName);
+    }
+  }
   disconnectedCallback() {
     this.dataUnit.unsubscribe(this.onDataUnitAction);
     this._dataBinder.onDisconnectedCallback();
@@ -4779,6 +4753,10 @@ const EzForm$1 = class extends HTMLElement$1 {
   static get style() { return ezFormCss; }
 };
 
+const REQUIRED_INFO = " (obrigatório) *";
+const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
+const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";
+
 const buildSwitch$1 = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, true);
 };
@@ -4786,7 +4764,7 @@ const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
     h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
@@ -4800,29 +4778,31 @@ const buildComboBox$1 = ({ name, label, readOnly, required, props, contextName,
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };
 
 const buildDate$1 = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildTime$1 = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildDateTime$1 = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };
 
 const buildFile = ({ name, label, readOnly, contextName, props }) => {
   const uploadProps = ObjectUtils$1.removeEmptyValues({
     subTitle: props.subTitle,
-    requestHeaders: props.STORAGESTRATEGY ? {
+    requestHeaders: Object.assign(Object.assign({}, (props.STORAGESTRATEGY && {
       STORAGESTRATEGY: props.STORAGESTRATEGY
-    } : null
+    })), (props.INTERNAL_FILENAME && {
+      INTERNAL_FILENAME: props.INTERNAL_FILENAME
+    })),
   });
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
@@ -4837,12 +4817,12 @@ const buildInteger$1 = ({ name, label, readOnly, contextName, canShowError }) =>
   return buildNumeric$1(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric$1(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
 const buildSearch$1 = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
 };
 
@@ -4852,7 +4832,7 @@ const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError
 };
 
 const buildTextInput$1 = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
 };
 
@@ -4912,7 +4892,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--sapce-width:5px}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--sapce-width);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
 
 const EzFormView$1 = class extends HTMLElement$1 {
   constructor() {
@@ -4925,6 +4905,19 @@ const EzFormView$1 = class extends HTMLElement$1 {
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
   }
+  /**
+   * Altera/adiciona uma propriedade nos metados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const fields = this.fields.map(field => {
+      if (field.name === fieldName) {
+        field.props = field.props || {};
+        field.props[propName] = value;
+      }
+      return field;
+    });
+    this.fields = [...fields];
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
@@ -4948,19 +4941,36 @@ const EzFormView$1 = class extends HTMLElement$1 {
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
+  isItemFullWidth(userInterface) {
+    return [
+      UserInterface.FILE,
+      UserInterface.LONGTEXT
+    ].includes(userInterface);
+  }
+  buildFormItemElement(item, classItem = "") {
+    if (this.isItemFullWidth(item.userInterface)) {
+      classItem += " input-full_width";
+    }
+    return h("div", { class: classItem }, fieldBuilder(item));
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
     if (this.fields == undefined) {
       return;
     }
-    return (h(Host, null, Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
+    let nonArrayGrup = [];
+    let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, value.map(fi => fieldBuilder(fi))));
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
-        return fieldBuilder(value);
+        nonArrayGrup.push(value);
       }
-    })));
+    });
+    // Filtra os elementos que não são arrays e os coloca dentro de uma única div
+    let nonArrayElements = nonArrayGrup.map((value) => this.buildFormItemElement(value));
+    let groupedNonArrayElements = h("div", { class: "form-view__content" }, nonArrayElements);
+    return (h(Host, null, groupedNonArrayElements, formContent));
   }
   get _element() { return this; }
   static get style() { return ezFormViewCss; }
@@ -123786,6 +123796,26 @@ var AllEnterpriseModules = [
 
 ModuleRegistry.registerModules(AllEnterpriseModules);
 
+class DataSourceInterceptor {
+  constructor(controller) {
+    this._controller = controller;
+  }
+  clearColumnFilter(filters) {
+    var _a;
+    return (_a = filters.filter(filter => !filter.name.startsWith(DISTINCT_FILTER_NAME_PREFIX))) !== null && _a !== void 0 ? _a : [];
+  }
+  interceptAction(action) {
+    var _a;
+    if (action.type === Action.LOADING_DATA) {
+      if (EZ_GRID_LOADING_SOURCE !== action.payload.source) {
+        action.payload.filters = ((_a = action.payload) === null || _a === void 0 ? void 0 : _a.filters) !== undefined ? this.clearColumnFilter(action.payload.filters) : action.payload.filters;
+        this._controller.clearFilter();
+      }
+    }
+    return action;
+  }
+}
+
 class DataSource {
   updateLoadedRecords(action) {
     const records = action.payload;
@@ -123817,16 +123847,13 @@ class DataSource {
           break;
         case Action.LOADING_DATA:
           this._waitingForLoad = true;
-          if (EZ_GRID_LOADING_SOURCE !== action.payload.source) {
-            this._controller.clearFilter();
-          }
           this._controller.refresh();
           break;
         case Action.DATA_LOADED:
           this._waitingForLoad = false;
           this.callbackGetRows(this._lastLoadingParams);
           if (this._options) {
-            this._options.onPaginationChange(this._dataUnit.getPaginationInfo());
+            this._options.onPaginationChange(this._dataUnit.getPaginationInfo(), action.payload.selectFirstRecord);
           }
           this.updateSelection();
           break;
@@ -123860,6 +123887,7 @@ class DataSource {
     this._controller.setColumnsDef(this.buildColumnDefs());
     this._options = options;
     this._dataUnit.subscribe(this.duObserver);
+    this._dataUnit.addInterceptor(new DataSourceInterceptor(this._controller));
   }
   updateSelection() {
     const selectionInfo = this._dataUnit.getSelectionInfo();
@@ -123922,15 +123950,6 @@ class DataSource {
   }
 }
 
-function calcFilterColumnLeftPosition(leftReference) {
-  const FIX_MARGIN = 60;
-  const FILTER_COLUMN_WIDTH = 330;
-  const screenWidth = window.innerWidth;
-  const maxLeft = screenWidth - (FILTER_COLUMN_WIDTH + FIX_MARGIN);
-  const leftInt = leftReference - FIX_MARGIN;
-  return leftInt > maxLeft ? maxLeft : leftInt;
-}
-
 class EzGridCustomHeader {
   init(agParams) {
     var _a;
@@ -123967,8 +123986,7 @@ class EzGridCustomHeader {
   }
   onClickFilter() {
     var _a;
-    const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
+    this.params.showColumnFilter((_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
   }
   configSortIcon() {
     this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
@@ -124649,7 +124667,8 @@ class AgGridController {
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
     this._filteredColumns = new Map();
-    this._filterColumnleftPosition = '0px';
+    this._filterColumnleftPosition = 0;
+    this._customFormatters = new Map();
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -124795,6 +124814,7 @@ class AgGridController {
         this.selectRows((selection === null || selection === void 0 ? void 0 : selection.recordIds) || [], true);
       }
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
+      this._customFormatters = options.customFormatters;
     }
   }
   processFormatterCellCallback(params) {
@@ -124814,11 +124834,9 @@ class AgGridController {
     }
     return params.value;
   }
-  setFilterColumnLeftPosition(params) {
-    if (params.type === 'columnMenu') {
-      const ePopup = params.ePopup;
-      const leftString = ePopup.style.left.replace('px', '');
-      this._filterColumnleftPosition = `${calcFilterColumnLeftPosition(parseInt(leftString))}px`;
+  setFilterColumnLeftPosition({ type, ePopup }) {
+    if (type === 'columnMenu') {
+      this._filterColumnleftPosition = ePopup.getBoundingClientRect().left;
       return;
     }
   }
@@ -125164,7 +125182,7 @@ class AgGridController {
     //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
     const columnsOffset = colDef.length - columns.length;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
+    state === null || state === void 0 ? void 0 : state.forEach((cfgColumn, index) => {
       const colWidth = this.getColumnWidth(cfgColumn);
       this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
@@ -125258,15 +125276,22 @@ class AgGridController {
         tooltip: tooltip,
         isSortable: propSortable,
         hasFilter: () => this.hasFilterColumn(source.name),
-        showColumnFilter: (leftPosition, fromIcon) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon }),
+        showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon: true }),
       },
       valueFormatter: params => {
-        if (params.value == undefined) {
+        if (params.value === undefined) {
           return "";
         }
         if (params.value instanceof Promise) {
           return "Carregando...";
         }
+        const customFormatter = this._customFormatters.get(source.name);
+        if (customFormatter) {
+          const formattedValue = customFormatter.format(params.value, source, params.data.__record__id__);
+          if (formattedValue) {
+            return formattedValue;
+          }
+        }
         if (this._dataUnit) {
           return this._dataUnit.getFormattedValue(source.name, params.value);
         }
@@ -125275,6 +125300,13 @@ class AgGridController {
       cellStyle: this.getStyleByColumn(source),
     });
   }
+  setCustomFormatters(customFormatters) {
+    this._customFormatters = customFormatters;
+  }
+  refreshSelectedRows() {
+    const selectedNodes = this._gridOptions.api.getSelectedNodes();
+    this._gridOptions.api.redrawRows({ rowNodes: selectedNodes });
+  }
   getInitCellStyle() {
     return {
       'line-height': this.getRowHeight() - 1 + 'px',
@@ -125452,9 +125484,34 @@ class AgGridController {
   }
 }
 
+function enableSelectAll(total) {
+  return total !== undefined;
+}
+function buildSelectAllLabel(allRecordSelected, count, total) {
+  if (allRecordSelected)
+    return 'Selecionar apenas a página atual';
+  if (total === undefined)
+    return `Carregando todos os ${count} registros`;
+  return `Selecionar todos os ${total} registros`;
+}
+function buildSelectAllTitle(total) {
+  if (enableSelectAll(total))
+    return '';
+  return 'Aguarde o carregamento para selecionar o registro de todas as páginas';
+}
+function getText(selectionCount, allSelectedRecords) {
+  if (allSelectedRecords) {
+    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+  }
+  if (selectionCount > 1) {
+    return `Os <strong>${selectionCount} registros</strong> dessa página estão selecionados.`;
+  }
+  return "O único registro dessa página está selecionado";
+}
+
 const SelectionCounter = (props) => {
   const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
-  const { total, hasMore } = paginationInfo || {};
+  const { total, hasMore, count } = paginationInfo || {};
   const shouldRenderSelectionButton = () => {
     if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
       return false;
@@ -125468,20 +125525,11 @@ const SelectionCounter = (props) => {
         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" },
           shouldRenderSelectionButton() &&
-            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("ez-button", Object.assign({ title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))),
+          h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar Sele\u00E7\u00E3o", 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" })))));
 };
-function getText(selectionCount, allSelectedRecords) {
-  if (allSelectedRecords) {
-    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
-  }
-  else {
-    const pluralChar = selectionCount > 1 ? "s" : "";
-    return `Há <strong>${selectionCount} registro${pluralChar}</strong> selecionado${pluralChar}.`;
-  }
-}
 function getElementID(sufix) {
   return {
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)
@@ -125643,13 +125691,13 @@ class InMemoryFilterColumnDataSource {
   }
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{width:30%;min-width:100px;justify-content:flex-end;flex-wrap:wrap}.grid-header__left-container.sc-ez-grid{width:70%}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}";
 
 const windowInstace$1 = window;
 const matches = (text, filter) => {
-  const normalizedText = StringUtils$1.replaceAccentuatedCharsLower(text.toLocaleLowerCase());
+  const normalizedText = StringUtils$1.replaceAccentuatedCharsLower(text === null || text === void 0 ? void 0 : text.toLocaleLowerCase());
   const normalizedFilter = StringUtils$1.replaceAccentuatedCharsLower(filter.toLocaleLowerCase());
-  return normalizedText.includes(normalizedFilter);
+  return normalizedText === null || normalizedText === void 0 ? void 0 : normalizedText.includes(normalizedFilter);
 };
 const EzGrid$1 = class extends HTMLElement$1 {
   constructor() {
@@ -125669,6 +125717,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
     this._hasLeftButtons = false;
+    this._customFormatters = new Map();
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -125740,8 +125789,52 @@ const EzGrid$1 = class extends HTMLElement$1 {
   async filterColumns(search) {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
+  /**
+   * Registra um formatador de valores para uma coluna da grid.
+   */
+  async addCustomValueFormatter(columnName, customFormatter) {
+    if (!columnName || !customFormatter) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.set(columnName, customFormatter);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Remove o formatador de valores de uma coluna da grid.
+   */
+  async removeCustomValueFormatter(columnName) {
+    if (!columnName) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.delete(columnName);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Atualiza linhas da grade.
+   */
+  async refreshSelectedRows() {
+    this._gridController.refreshSelectedRows();
+  }
+  /**
+   * Retorna o formatador customizado da coluna caso exista.
+   */
+  async getCustomValueFormatter(columnName) {
+    return this._customFormatters.get(columnName);
+  }
   observeConfig(config) {
-    this._gridController.setColumnsState(config.columns);
+    this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
+  }
+  updatePaginationTooltip() {
+    if (!this._refPaginationLabelTooltip)
+      return;
+    const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
+    if (alreadyDefined) {
+      this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
+    }
   }
   onSelectionChange(evt) {
     this._currentPageSelected = evt.detail.selectionHeaderStatus === true;
@@ -125791,21 +125884,29 @@ const EzGrid$1 = class extends HTMLElement$1 {
     return newConfig;
   }
   positionSelectionCounter() {
-    var _a;
-    if (this._gridSelectionCounter == undefined) {
+    var _a, _b;
+    if (!this._gridSelectionCounter)
       return;
-    }
-    if (this._showSelectionCounter) {
-      const boundingContainer = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-      if (boundingContainer == undefined) {
-        return;
-      }
-      const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
-    }
-    else {
+    if (!this._showSelectionCounter) {
       this._gridSelectionCounter.style.bottom = '';
+      return;
+    }
+    const containerRect = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const selectionRect = (_b = this._gridSelectionCounter) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!containerRect || !selectionRect)
+      return;
+    const positionBottom = containerRect.bottom - 30;
+    this._gridSelectionCounter.style.bottom = document.body.clientHeight - positionBottom + 'px';
+    this._gridSelectionCounter.style.left = this.calculatePositionLeft(containerRect, selectionRect);
+  }
+  calculatePositionLeft(containerRect, selectionRect) {
+    let selectionStart = containerRect.left + (containerRect.width / 2);
+    const containerRightEdge = containerRect.left + this._container.clientWidth;
+    const selectionEnd = (selectionStart - (selectionRect.width / 2)) + selectionRect.width;
+    if (selectionEnd > containerRightEdge) {
+      selectionStart = containerRightEdge - (selectionRect.width / 2);
     }
+    return `${selectionStart}px`;
   }
   setEvents() {
     window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));
@@ -125898,11 +125999,10 @@ const EzGrid$1 = class extends HTMLElement$1 {
   }
   getPaginationControl() {
     if (this._paginationInfo) {
-      const { firstRecord, lastRecord, total, count, currentPage, hasMore } = this._paginationInfo;
+      const { currentPage, hasMore } = this._paginationInfo;
       return [
-        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`),
-        h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
-        h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
+        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())),
+        h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })),
       ];
     }
     return null;
@@ -125911,16 +126011,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
-      onPaginationChange: (paginationInfo) => {
-        var _a;
-        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
-          this._gridController.setFocusLastRow();
-        }
-        else {
-          this._gridController.setFocusFirstRow();
-          this._paginationChangedByKeyboard = true;
-        }
-        this._paginationInfo = paginationInfo;
+      onPaginationChange: (paginationInfo, selectFirstRecord) => {
+        this.handlePaginationChange(selectFirstRecord, paginationInfo);
       },
       onPaginationUpdate: (paginationInfo) => {
         this._paginationInfo = paginationInfo;
@@ -125934,7 +126026,8 @@ const EzGrid$1 = class extends HTMLElement$1 {
       statusResolver: this.statusResolver,
       useEnterLikeTab: this.useEnterLikeTab,
       recordsValidator: this.recordsValidator,
-      editionIsDisabled: () => !this.canEdit
+      editionIsDisabled: () => !this.canEdit,
+      customFormatters: this._customFormatters
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -125946,6 +126039,66 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
+    this._initHeaderOverflowWatcher();
+  }
+  handlePaginationChange(selectFirstRecord, paginationInfo) {
+    var _a;
+    if (selectFirstRecord !== false) {
+      if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
+        this._gridController.setFocusLastRow();
+      }
+      else {
+        this._gridController.setFocusFirstRow();
+        this._paginationChangedByKeyboard = true;
+      }
+    }
+    this._paginationInfo = paginationInfo;
+  }
+  _getActualPageLabel() {
+    const { firstRecord, lastRecord } = this._paginationInfo;
+    return `${firstRecord}-${lastRecord}`;
+  }
+  _getRemainingPageLabel() {
+    const { total, count } = this._paginationInfo;
+    return `${total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`}`;
+  }
+  _getPaginationTooltip() {
+    return this._getActualPageLabel() + this._getRemainingPageLabel();
+  }
+  _initHeaderOverflowWatcher() {
+    this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
+  }
+  buildOverFlowWatcherParams() {
+    return {
+      element: this._refPaginationControl,
+      callback: this.handleOverFlow.bind(this),
+      notOverFlow: ["grid-pagination-tooltip"]
+    };
+  }
+  handleOverFlow(elementsOverflow) {
+    if (!this._refPaginationLabel)
+      return;
+    if (elementsOverflow.length > 0) {
+      this._hidePaginationDescription();
+    }
+    else {
+      this._showPaginationDescription();
+    }
+  }
+  _hidePaginationDescription() {
+    this._refPaginationLabel.classList.add(OVERFLOWED_CLASS_NAME);
+    this._refPaginationLabelTooltip.setAttribute('data-flow', 'bottom');
+    this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
+  }
+  ;
+  _showPaginationDescription() {
+    this._refPaginationLabel.classList.remove(OVERFLOWED_CLASS_NAME);
+    this._refPaginationLabelTooltip.removeAttribute('data-flow');
+    this._refPaginationLabelTooltip.removeAttribute('data-tooltip');
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -125969,14 +126122,15 @@ const EzGrid$1 = class extends HTMLElement$1 {
   }
   render() {
     var _a;
-    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, 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  ez-elevation--4
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container grid-header__left-container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container grid-header__pagination", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return this; }
   static get watchers() { return {
-    "config": ["observeConfig"]
+    "config": ["observeConfig"],
+    "_paginationInfo": ["updatePaginationTooltip"]
   }; }
   static get style() { return ezGridCss; }
 };
@@ -126083,7 +126237,7 @@ const EzGuideNavigator$1 = class extends HTMLElement$1 {
   static get style() { return ezGuideNavigatorCss; }
 };
 
-const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-acao:before{content:\"\\ea03\"}.ez-icon-account-outline:before{content:\"\\ea04\"}.ez-icon-account:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-antecipação:before{content:\"\\ea0b\"}.ez-icon-apps:before{content:\"\\ea0c\"}.ez-icon-arrow-forward:before{content:\"\\ea0d\"}.ez-icon-arrow-upward:before{content:\"\\ea0e\"}.ez-icon-arrow_back:before{content:\"\\ea0f\"}.ez-icon-arrow_downward:before{content:\"\\ea10\"}.ez-icon-baixa:before{content:\"\\ea11\"}.ez-icon-balance:before{content:\"\\ea12\"}.ez-icon-bell-inverted:before{content:\"\\ea13\"}.ez-icon-bell:before{content:\"\\ea14\"}.ez-icon-boleto:before{content:\"\\ea15\"}.ez-icon-boolean:before{content:\"\\ea16\"}.ez-icon-business-center:before{content:\"\\ea17\"}.ez-icon-calendar-clock:before{content:\"\\ea18\"}.ez-icon-calendar:before{content:\"\\ea19\"}.ez-icon-cash-remove:before{content:\"\\ea1a\"}.ez-icon-check-circle-inverted:before{content:\"\\ea1b\"}.ez-icon-check-circle:before{content:\"\\ea1c\"}.ez-icon-check:before{content:\"\\ea1d\"}.ez-icon-chevron-down:before{content:\"\\ea1e\"}.ez-icon-chevron-left:before{content:\"\\ea1f\"}.ez-icon-chevron-right:before{content:\"\\ea20\"}.ez-icon-chevron-up:before{content:\"\\ea21\"}.ez-icon-circle--medium:before{content:\"\\ea22\"}.ez-icon-circle:before{content:\"\\ea23\"}.ez-icon-cleaning:before{content:\"\\ea24\"}.ez-icon-clipboard:before{content:\"\\ea25\"}.ez-icon-close:before{content:\"\\ea26\"}.ez-icon-cobrar:before{content:\"\\ea27\"}.ez-icon-code:before{content:\"\\ea28\"}.ez-icon-configuration:before{content:\"\\ea29\"}.ez-icon-content-cut:before{content:\"\\ea2a\"}.ez-icon-copy:before{content:\"\\ea2b\"}.ez-icon-credit_card:before{content:\"\\ea2c\"}.ez-icon-crop:before{content:\"\\ea2d\"}.ez-icon-custom:before{content:\"\\ea2e\"}.ez-icon-delete-file:before{content:\"\\ea2f\"}.ez-icon-delete:before{content:\"\\ea30\"}.ez-icon-description:before{content:\"\\ea31\"}.ez-icon-dividir:before{content:\"\\ea32\"}.ez-icon-docx:before{content:\"\\ea33\"}.ez-icon-dot-notification:before{content:\"\\ea34\"}.ez-icon-dots-horizontal:before{content:\"\\ea35\"}.ez-icon-dots-vertical:before{content:\"\\ea36\"}.ez-icon-drag-indicator:before{content:\"\\ea37\"}.ez-icon-dual-chevron-down:before{content:\"\\ea38\"}.ez-icon-dual-chevron-left:before{content:\"\\ea39\"}.ez-icon-dual-chevron-right:before{content:\"\\ea3a\"}.ez-icon-dual-chevron-up:before{content:\"\\ea3b\"}.ez-icon-edit-file:before{content:\"\\ea3c\"}.ez-icon-edit-table:before{content:\"\\ea3d\"}.ez-icon-edit-time:before{content:\"\\ea3e\"}.ez-icon-edit-value:before{content:\"\\ea3f\"}.ez-icon-edit:before{content:\"\\ea40\"}.ez-icon-email:before{content:\"\\ea41\"}.ez-icon-estorno:before{content:\"\\ea42\"}.ez-icon-exe:before{content:\"\\ea43\"}.ez-icon-expand:before{content:\"\\ea44\"}.ez-icon-expandir_card:before{content:\"\\ea45\"}.ez-icon-extrato:before{content:\"\\ea46\"}.ez-icon-eye-off:before{content:\"\\ea47\"}.ez-icon-eye:before{content:\"\\ea48\"}.ez-icon-favorite:before{content:\"\\ea49\"}.ez-icon-figma:before{content:\"\\ea4a\"}.ez-icon-file-download:before{content:\"\\ea4b\"}.ez-icon-file-upload:before{content:\"\\ea4c\"}.ez-icon-filter:before{content:\"\\ea4d\"}.ez-icon-find-file:before{content:\"\\ea4e\"}.ez-icon-find-page:before{content:\"\\ea4f\"}.ez-icon-format-color-fill:before{content:\"\\ea50\"}.ez-icon-generic:before{content:\"\\ea51\"}.ez-icon-gif:before{content:\"\\ea52\"}.ez-icon-graph_bar:before{content:\"\\ea53\"}.ez-icon-handshake:before{content:\"\\ea54\"}.ez-icon-help-inverted:before{content:\"\\ea55\"}.ez-icon-help:before{content:\"\\ea56\"}.ez-icon-hide_menu:before{content:\"\\ea57\"}.ez-icon-home:before{content:\"\\ea58\"}.ez-icon-icons104:before{content:\"\\ea59\"}.ez-icon-language:before{content:\"\\ea5a\"}.ez-icon-launch:before{content:\"\\ea5b\"}.ez-icon-lightbulb:before{content:\"\\ea5c\"}.ez-icon-list:before{content:\"\\ea5d\"}.ez-icon-location:before{content:\"\\ea5e\"}.ez-icon-lock-outline:before{content:\"\\ea5f\"}.ez-icon-lock:before{content:\"\\ea60\"}.ez-icon-menu:before{content:\"\\ea61\"}.ez-icon-mid:before{content:\"\\ea62\"}.ez-icon-minus:before{content:\"\\ea63\"}.ez-icon-money-off:before{content:\"\\ea64\"}.ez-icon-money:before{content:\"\\ea65\"}.ez-icon-more:before{content:\"\\ea66\"}.ez-icon-mp3:before{content:\"\\ea67\"}.ez-icon-mp4:before{content:\"\\ea68\"}.ez-icon-multiple-files:before{content:\"\\ea69\"}.ez-icon-north-west:before{content:\"\\ea6a\"}.ez-icon-number:before{content:\"\\ea6b\"}.ez-icon-ordem-ascendente:before{content:\"\\ea6c\"}.ez-icon-ordem-descendente:before{content:\"\\ea6d\"}.ez-icon-parcelar:before{content:\"\\ea6e\"}.ez-icon-pause:before{content:\"\\ea6f\"}.ez-icon-payments:before{content:\"\\ea70\"}.ez-icon-pdf:before{content:\"\\ea71\"}.ez-icon-play:before{content:\"\\ea72\"}.ez-icon-plus:before{content:\"\\ea73\"}.ez-icon-png:before{content:\"\\ea74\"}.ez-icon-power:before{content:\"\\ea75\"}.ez-icon-pptx:before{content:\"\\ea76\"}.ez-icon-preview:before{content:\"\\ea77\"}.ez-icon-print:before{content:\"\\ea78\"}.ez-icon-push-pin:before{content:\"\\ea79\"}.ez-icon-rateio:before{content:\"\\ea7a\"}.ez-icon-receipt:before{content:\"\\ea7b\"}.ez-icon-recolher_card:before{content:\"\\ea7c\"}.ez-icon-restore:before{content:\"\\ea7d\"}.ez-icon-return:before{content:\"\\ea7e\"}.ez-icon-sankhya-place:before{content:\"\\ea7f\"}.ez-icon-save:before{content:\"\\ea80\"}.ez-icon-search:before{content:\"\\ea81\"}.ez-icon-settings-inverted:before{content:\"\\ea82\"}.ez-icon-settings:before{content:\"\\ea83\"}.ez-icon-share:before{content:\"\\ea84\"}.ez-icon-shield:before{content:\"\\ea85\"}.ez-icon-show_menu:before{content:\"\\ea86\"}.ez-icon-south-east:before{content:\"\\ea87\"}.ez-icon-sync:before{content:\"\\ea88\"}.ez-icon-table:before{content:\"\\ea89\"}.ez-icon-tag_code:before{content:\"\\ea8a\"}.ez-icon-text:before{content:\"\\ea8b\"}.ez-icon-timeline:before{content:\"\\ea8c\"}.ez-icon-timer-outline:before{content:\"\\ea8d\"}.ez-icon-trending-up:before{content:\"\\ea8e\"}.ez-icon-tune:before{content:\"\\ea8f\"}.ez-icon-txt:before{content:\"\\ea90\"}.ez-icon-un-pin:before{content:\"\\ea91\"}.ez-icon-unfold_less:before{content:\"\\ea92\"}.ez-icon-unfold_more:before{content:\"\\ea93\"}.ez-icon-user-circle:before{content:\"\\ea94\"}.ez-icon-warning-outline:before{content:\"\\ea95\"}.ez-icon-warning_triangle:before{content:\"\\ea96\"}.ez-icon-whatshot:before{content:\"\\ea97\"}.ez-icon-xlsx:before{content:\"\\ea98\"}.ez-icon-zip:before{content:\"\\ea99\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
+const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-acao:before{content:\"\\ea03\"}.ez-icon-account-outline:before{content:\"\\ea04\"}.ez-icon-account:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-antecipacao:before{content:\"\\ea0b\"}.ez-icon-apps:before{content:\"\\ea0c\"}.ez-icon-arrow-forward:before{content:\"\\ea0d\"}.ez-icon-arrow-upward:before{content:\"\\ea0e\"}.ez-icon-arrow_back:before{content:\"\\ea0f\"}.ez-icon-arrow_downward:before{content:\"\\ea10\"}.ez-icon-baixa:before{content:\"\\ea11\"}.ez-icon-balance:before{content:\"\\ea12\"}.ez-icon-bell-inverted:before{content:\"\\ea13\"}.ez-icon-bell:before{content:\"\\ea14\"}.ez-icon-boleto:before{content:\"\\ea15\"}.ez-icon-boolean:before{content:\"\\ea16\"}.ez-icon-business-center:before{content:\"\\ea17\"}.ez-icon-calendar-clock:before{content:\"\\ea18\"}.ez-icon-calendar:before{content:\"\\ea19\"}.ez-icon-cash-remove:before{content:\"\\ea1a\"}.ez-icon-check-circle-inverted:before{content:\"\\ea1b\"}.ez-icon-check-circle:before{content:\"\\ea1c\"}.ez-icon-check:before{content:\"\\ea1d\"}.ez-icon-chevron-down:before{content:\"\\ea1e\"}.ez-icon-chevron-left:before{content:\"\\ea1f\"}.ez-icon-chevron-right:before{content:\"\\ea20\"}.ez-icon-chevron-up:before{content:\"\\ea21\"}.ez-icon-circle--medium:before{content:\"\\ea22\"}.ez-icon-circle:before{content:\"\\ea23\"}.ez-icon-cleaning:before{content:\"\\ea24\"}.ez-icon-clipboard:before{content:\"\\ea25\"}.ez-icon-clock-rotate-left:before{content:\"\\ea26\"}.ez-icon-close:before{content:\"\\ea27\"}.ez-icon-cobrar:before{content:\"\\ea28\"}.ez-icon-code:before{content:\"\\ea29\"}.ez-icon-configuration:before{content:\"\\ea2a\"}.ez-icon-content-cut:before{content:\"\\ea2b\"}.ez-icon-copy:before{content:\"\\ea2c\"}.ez-icon-credit_card:before{content:\"\\ea2d\"}.ez-icon-crop:before{content:\"\\ea2e\"}.ez-icon-custom:before{content:\"\\ea2f\"}.ez-icon-delete-file:before{content:\"\\ea30\"}.ez-icon-delete:before{content:\"\\ea31\"}.ez-icon-description:before{content:\"\\ea32\"}.ez-icon-dividir:before{content:\"\\ea33\"}.ez-icon-docx:before{content:\"\\ea34\"}.ez-icon-dot-notification:before{content:\"\\ea35\"}.ez-icon-dots-horizontal:before{content:\"\\ea36\"}.ez-icon-dots-vertical:before{content:\"\\ea37\"}.ez-icon-drag-indicator:before{content:\"\\ea38\"}.ez-icon-dual-chevron-down:before{content:\"\\ea39\"}.ez-icon-dual-chevron-left:before{content:\"\\ea3a\"}.ez-icon-dual-chevron-right:before{content:\"\\ea3b\"}.ez-icon-dual-chevron-up:before{content:\"\\ea3c\"}.ez-icon-edit-file:before{content:\"\\ea3d\"}.ez-icon-edit-table:before{content:\"\\ea3e\"}.ez-icon-edit-time:before{content:\"\\ea3f\"}.ez-icon-edit-value:before{content:\"\\ea40\"}.ez-icon-edit:before{content:\"\\ea41\"}.ez-icon-email:before{content:\"\\ea42\"}.ez-icon-estorno:before{content:\"\\ea43\"}.ez-icon-exe:before{content:\"\\ea44\"}.ez-icon-expand:before{content:\"\\ea45\"}.ez-icon-expandir_card:before{content:\"\\ea46\"}.ez-icon-extrato:before{content:\"\\ea47\"}.ez-icon-eye-off:before{content:\"\\ea48\"}.ez-icon-eye:before{content:\"\\ea49\"}.ez-icon-favorite:before{content:\"\\ea4a\"}.ez-icon-figma:before{content:\"\\ea4b\"}.ez-icon-file-download:before{content:\"\\ea4c\"}.ez-icon-file-upload:before{content:\"\\ea4d\"}.ez-icon-filter:before{content:\"\\ea4e\"}.ez-icon-find-file:before{content:\"\\ea4f\"}.ez-icon-find-page:before{content:\"\\ea50\"}.ez-icon-format-color-fill:before{content:\"\\ea51\"}.ez-icon-generic:before{content:\"\\ea52\"}.ez-icon-gif:before{content:\"\\ea53\"}.ez-icon-graph_bar:before{content:\"\\ea54\"}.ez-icon-handshake:before{content:\"\\ea55\"}.ez-icon-help-inverted:before{content:\"\\ea56\"}.ez-icon-help:before{content:\"\\ea57\"}.ez-icon-hide_menu:before{content:\"\\ea58\"}.ez-icon-home:before{content:\"\\ea59\"}.ez-icon-icons104:before{content:\"\\ea5a\"}.ez-icon-language:before{content:\"\\ea5b\"}.ez-icon-launch:before{content:\"\\ea5c\"}.ez-icon-lightbulb:before{content:\"\\ea5d\"}.ez-icon-list:before{content:\"\\ea5e\"}.ez-icon-location:before{content:\"\\ea5f\"}.ez-icon-lock-outline:before{content:\"\\ea60\"}.ez-icon-lock:before{content:\"\\ea61\"}.ez-icon-menu:before{content:\"\\ea62\"}.ez-icon-mid:before{content:\"\\ea63\"}.ez-icon-minus:before{content:\"\\ea64\"}.ez-icon-money-off:before{content:\"\\ea65\"}.ez-icon-money:before{content:\"\\ea66\"}.ez-icon-more:before{content:\"\\ea67\"}.ez-icon-mp3:before{content:\"\\ea68\"}.ez-icon-mp4:before{content:\"\\ea69\"}.ez-icon-multiple-files:before{content:\"\\ea6a\"}.ez-icon-north-west:before{content:\"\\ea6b\"}.ez-icon-number:before{content:\"\\ea6c\"}.ez-icon-ordem-ascendente:before{content:\"\\ea6d\"}.ez-icon-ordem-descendente:before{content:\"\\ea6e\"}.ez-icon-parcelar:before{content:\"\\ea6f\"}.ez-icon-pause:before{content:\"\\ea70\"}.ez-icon-payments:before{content:\"\\ea71\"}.ez-icon-pdf:before{content:\"\\ea72\"}.ez-icon-play:before{content:\"\\ea73\"}.ez-icon-plus:before{content:\"\\ea74\"}.ez-icon-png:before{content:\"\\ea75\"}.ez-icon-power:before{content:\"\\ea76\"}.ez-icon-pptx:before{content:\"\\ea77\"}.ez-icon-preview:before{content:\"\\ea78\"}.ez-icon-print:before{content:\"\\ea79\"}.ez-icon-push-pin:before{content:\"\\ea7a\"}.ez-icon-rateio:before{content:\"\\ea7b\"}.ez-icon-receipt:before{content:\"\\ea7c\"}.ez-icon-recolher_card:before{content:\"\\ea7d\"}.ez-icon-restore:before{content:\"\\ea7e\"}.ez-icon-return:before{content:\"\\ea7f\"}.ez-icon-sankhya-place:before{content:\"\\ea80\"}.ez-icon-save:before{content:\"\\ea81\"}.ez-icon-search:before{content:\"\\ea82\"}.ez-icon-settings-inverted:before{content:\"\\ea83\"}.ez-icon-settings:before{content:\"\\ea84\"}.ez-icon-share:before{content:\"\\ea85\"}.ez-icon-shield:before{content:\"\\ea86\"}.ez-icon-show_menu:before{content:\"\\ea87\"}.ez-icon-south-east:before{content:\"\\ea88\"}.ez-icon-sync:before{content:\"\\ea89\"}.ez-icon-table:before{content:\"\\ea8a\"}.ez-icon-tag_code:before{content:\"\\ea8b\"}.ez-icon-text:before{content:\"\\ea8c\"}.ez-icon-timeline:before{content:\"\\ea8d\"}.ez-icon-timer-outline:before{content:\"\\ea8e\"}.ez-icon-trending-up:before{content:\"\\ea8f\"}.ez-icon-tune:before{content:\"\\ea90\"}.ez-icon-txt:before{content:\"\\ea91\"}.ez-icon-un-pin:before{content:\"\\ea92\"}.ez-icon-unfold_less:before{content:\"\\ea93\"}.ez-icon-unfold_more:before{content:\"\\ea94\"}.ez-icon-user-circle:before{content:\"\\ea95\"}.ez-icon-warning-outline:before{content:\"\\ea96\"}.ez-icon-warning_triangle:before{content:\"\\ea97\"}.ez-icon-whatshot:before{content:\"\\ea98\"}.ez-icon-xlsx:before{content:\"\\ea99\"}.ez-icon-zip:before{content:\"\\ea9a\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
 
 const EzIcon$1 = class extends HTMLElement$1 {
   constructor() {
@@ -126711,11 +126865,7 @@ const EzModal$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezCloseModal = createEvent(this, "ezCloseModal", 7);
     this.ezOpenModal = createEvent(this, "ezOpenModal", 7);
-    this.handleKeyboardEvent = (ev) => {
-      if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
-        this.closeModal();
-      }
-    };
+    this.ezModalAction = createEvent(this, "ezModalAction", 7);
     this.modalSize = undefined;
     this.align = undefined;
     this.heightMode = "regular";
@@ -126727,11 +126877,9 @@ const EzModal$1 = class extends HTMLElement$1 {
   observeOpened() {
     if (this.opened) {
       this._overlayId = FloatingManager.subscribeOverlayControl(this._modalRef);
-      document.addEventListener("keydown", this.handleKeyboardEvent);
     }
     else {
       FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
-      document.removeEventListener("keydown", this.handleKeyboardEvent);
     }
   }
   closeModal() {
@@ -126740,6 +126888,10 @@ const EzModal$1 = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     this.observeOpened();
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezModalAction.emit.bind("OK"))
+      .bind("Escape", () => this.closeModal())
+      .bind("Esc", () => this.closeModal());
   }
   componentDidRender() {
     if (this.opened) {
@@ -126758,10 +126910,11 @@ const EzModal$1 = class extends HTMLElement$1 {
     const scrimType = `modal__screen-${this.scrim}`;
     return (h(Host, null, this.opened
       ?
-        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${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))))
+        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, 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));
   }
+  get _element() { return this; }
   static get watchers() { return {
     "opened": ["observeOpened"]
   }; }
@@ -126785,7 +126938,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
 
-const ezModalContainerCss = ".sc-ez-modal-container-h{--ez-modal-container-overflow-y:auto;--ez-modal-container-overflow-x:clip;display:grid;grid-template-rows:0 auto 1fr auto 0;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:var(--ez-modal-container-overflow-y);overflow-x:var(--ez-modal-container-overflow-x)}.ez-modal-container__content.sc-ez-modal-container::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}.ez-modal-container__footer.sc-ez-modal-container{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--space--medium);width:100%;padding-top:var(--space--small, 6px)}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+const ezModalContainerCss = ".sc-ez-modal-container-h{--ez-modal-container-overflow-y:auto;--ez-modal-container-overflow-x:clip;display:grid;grid-template-rows:0 auto 1fr auto 0;width:100%;height:100%}.ez-modal-container__header-container.sc-ez-modal-container{outline:none}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:var(--ez-modal-container-overflow-y);overflow-x:var(--ez-modal-container-overflow-x)}.ez-modal-container__content.sc-ez-modal-container::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}.ez-modal-container__footer.sc-ez-modal-container{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--space--medium);width:100%;padding-top:var(--space--small, 6px)}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
 
 const EzModalContainer$1 = class extends HTMLElement$1 {
   constructor() {
@@ -126800,6 +126953,12 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
   }
+  async handleEzModalAction(event) {
+    var _a;
+    if ((event === null || event === void 0 ? void 0 : event.target) && (event === null || event === void 0 ? void 0 : event.target) === ((_a = this._element) === null || _a === void 0 ? void 0 : _a.parentElement)) {
+      this.closeModal();
+    }
+  }
   cancelIsVisible() {
     return (this.cancelButtonStatus !== ModalButtonStatus$1.HIDDEN && this.cancelButtonLabel != undefined);
   }
@@ -126809,7 +126968,15 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction$1.LOAD);
+      this._modalRef.focus();
     });
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezModalAction.emit.bind(ModalAction$1.OK))
+      .bind("Escape", () => this.closeModal())
+      .bind("Esc", () => this.closeModal());
+  }
+  closeModal() {
+    this.ezModalAction.emit("CLOSE");
   }
   focusLast() {
     if (this._okButton == undefined) {
@@ -126821,8 +126988,9 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", null, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
+  get _element() { return this; }
   static get style() { return ezModalContainerCss; }
 };
 
@@ -127094,6 +127262,11 @@ const EzNumberInput$1 = class extends HTMLElement$1 {
     }
     this._changePending = false;
   }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
   validateValue(value) {
     return isNaN(value) || value === undefined ? null : value;
   }
@@ -127177,7 +127350,9 @@ const EzNumberInput$1 = class extends HTMLElement$1 {
   static get watchers() { return {
     "label": ["observeLabel"],
     "errorMessage": ["observeErrorMessage"],
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "precision": ["observePrecision"],
+    "prettyPrecision": ["observePrecision"]
   }; }
   static get style() { return ezNumberInputCss; }
 };
@@ -127332,7 +127507,7 @@ const EzPopover$1 = class extends HTMLElement$1 {
   static get style() { return ezPopoverCss; }
 };
 
-const ezPopupCss = ":host{display:flex;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--large, 24px);--ez-popup__header--padding-bottom:var(--space--medium, 12px);--ez-popup__title--font-family:var(--font-pattern, \"Roboto\");--ez-popup__title--font-size:var(--title--extra-large, 24px);--ez-popup__title--color:var(--title--primary, #2b3a54);--ez-popup__title--font-weight:var(--text-weight--large, 600);--ez-popup__btn__close--icon-color:var(--title--primary, #2b3a54);--ez-popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-wrap:wrap;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding)}.popup__container--auto{height:auto}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:grid;grid-template-rows:auto 1fr}.popup__expandable-content{box-sizing:border-box;width:100%;min-height:100%;height:100%}.popup__header{width:100%;display:flex}.popup__header--padding{padding-bottom:var(--ez-popup__header--padding-bottom)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--ez-popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--ez-popup__btn__close--icon);mask-image:var(--ez-popup__btn__close--icon)}.btn-close--solo{width:100%}.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}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@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 ezPopupCss = ":host{display:flex;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--large, 24px);--ez-popup__header--padding-bottom:var(--space--medium, 12px);--ez-popup__title--font-family:var(--font-pattern, \"Roboto\");--ez-popup__title--font-size:var(--title--extra-large, 24px);--ez-popup__title--color:var(--title--primary, #2b3a54);--ez-popup__title--font-weight:var(--text-weight--large, 600);--ez-popup__btn__close--icon-color:var(--title--primary, #2b3a54);--ez-popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-wrap:wrap;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding)}.popup__container--auto{height:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{box-sizing:border-box;width:100%;height:calc(100% - 44px)}.popup__header{width:100%;display:flex}.popup__header--padding{padding-bottom:var(--ez-popup__header--padding-bottom)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--ez-popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--ez-popup__btn__close--icon);mask-image:var(--ez-popup__btn__close--icon)}.btn-close--solo{width:100%}.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}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@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 EzPopup$1 = class extends HTMLElement$1 {
   constructor() {
@@ -127340,6 +127515,7 @@ const EzPopup$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezClosePopup = createEvent(this, "ezClosePopup", 7);
+    this.ezPopupAction = createEvent(this, "ezPopupAction", 7);
     this._sizeClasses = {
       "x-small": "col--sd-3 ez-popup__size-limit--x-small",
       "small": "col--sd-5",
@@ -127357,6 +127533,20 @@ const EzPopup$1 = class extends HTMLElement$1 {
   observeConfig() {
     this.manageOverflow();
   }
+  componentDidLoad() {
+    if (this.opened && this._popupRef) {
+      this._popupRef.focus();
+    }
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezPopupAction.emit.bind("OK"))
+      .bind("Escape", () => this.closePopup())
+      .bind("Esc", () => this.closePopup());
+  }
+  closePopup() {
+    this.opened = false;
+    this.manageOverflow();
+    this.ezClosePopup.emit();
+  }
   manageOverflow() {
     if (this.opened) {
       window.document.body.style.overflow = "hidden";
@@ -127367,25 +127557,23 @@ const EzPopup$1 = class extends HTMLElement$1 {
   }
   manageOverlay() {
     if (this.opened) {
-      this._overlayId = FloatingManager.subscribeOverlayControl(this._modalRef);
+      this._overlayId = FloatingManager.subscribeOverlayControl(this._popupRef);
     }
     else {
-      FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
+      FloatingManager.unsubscribeOverlayControl(this._popupRef || this._overlayId);
     }
   }
   getGridSize() {
     return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
   componentDidRender() {
-    if (this._container) {
-      this._container.focus();
-    }
     this.manageOverlay();
   }
   render() {
-    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._modalRef = ref }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : ""), ref: elem => this._container = elem, tabIndex: -1 }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
+    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : "") }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
       h(Fragment, null, !!this.ezTitle && h("div", { class: "popup__title" }, this.ezTitle), h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), h("div", { class: "popup__expandable-content" }, h("slot", null))))))) : undefined));
   }
+  get _element() { return this; }
   static get watchers() { return {
     "opened": ["observeConfig"]
   }; }
@@ -127625,7 +127813,7 @@ class ScrollCtrl {
   }
 }
 
-const ezSearchCss = ":host{width:100%}";
+const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--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{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-search--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-search__scrollbar--color-background);width:var(--ez-search__scrollbar--width);max-width:var(--ez-search__scrollbar--width);min-width:var(--ez-search__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__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-search--border-radius-small);padding:var(--ez-search--space--small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--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-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--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-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__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)}}";
 
 const EzSearch$1 = class extends HTMLElement$1 {
   constructor() {
@@ -127633,6 +127821,21 @@ const EzSearch$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
+    this._changeDeboucingTimeout = null;
+    this._limitCharsToSearch = 3;
+    this._deboucingTime = 300;
+    this._maxWidthValue = 0;
+    this._tabPressed = false;
+    this._textEmptyList = "Nenhum resultado encontrado";
+    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
+    this._lookupMode = false;
+    this._startHighlightTag = "<span class='card-item__highlight'>";
+    this._endHighlightTag = "</span>";
+    this._preSelection = undefined;
+    this._visibleOptions = undefined;
+    this._startLoading = false;
+    this._showLoading = true;
+    this._criteria = undefined;
     this.value = undefined;
     this.label = undefined;
     this.enabled = true;
@@ -127647,28 +127850,82 @@ const EzSearch$1 = class extends HTMLElement$1 {
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
     this.ignoreLimitCharsToSearch = false;
+    this.options = undefined;
+    this.suppressSearch = false;
   }
   observeErrorMessage() {
-    if (this._comboElement) {
-      this._comboElement.errorMessage = this.errorMessage;
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.setInputValue();
+      }
     }
   }
-  observeValue() {
-    if (this._comboElement) {
-      this._comboElement.value = this.value;
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      try {
+        if (newValue === "string") {
+          this.setInputValue();
+          return;
+        }
+        const newValueSelected = this.getSelectedOption(newValue);
+        const oldValueSelected = this.getSelectedOption(oldValue);
+        const currentValue = this.getSelectedOption(this.value);
+        if (this.isDifferentValues(currentValue, newValueSelected)) {
+          this.value = newValueSelected;
+        }
+        if (this.isDifferentValues(newValueSelected, oldValueSelected)) {
+          this.setInputValue();
+          const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
+          if (!this._lookupMode) {
+            this.ezChange.emit(valueEmitted);
+          }
+        }
+        this.resetOptions();
+      }
+      finally {
+        this._lookupMode = false;
+      }
     }
   }
+  observeOptions(newOptions, oldOptions) {
+    if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.join('')) === (oldOptions === null || oldOptions === void 0 ? void 0 : oldOptions.join('')))
+      return;
+    this.loadOptions(SearchMode.PRELOAD);
+  }
+  /*
+  * Retorna uma promise com o valor da opção selecionada,
+  * que será resolvida quando o backend devolver este dado.
+  */
+  async getValueAsync() {
+    if (!this._showLoading) {
+      return new Promise(resolve => resolve(this.value));
+    }
+    return new Promise(resolve => {
+      let id = setInterval(() => {
+        if (!this._showLoading) {
+          clearInterval(id);
+          resolve(this.value);
+        }
+      }, 100);
+    });
+  }
   /**
-    * Aplica o foco no campo.
-    */
+   * Aplica o foco no campo.
+   */
   async setFocus() {
-    this._comboElement.setFocus();
+    if (this._textInput) {
+      this._textInput.setFocus();
+    }
   }
   /**
-    * Remove o foco do campo.
-    */
+   * Remove o foco do campo.
+   */
   async setBlur() {
-    this._comboElement.setBlur();
+    if (this._textInput) {
+      this._textInput.setBlur();
+    }
   }
   /**
    * Retorna se o conteúdo é inválido.
@@ -127680,40 +127937,559 @@ const EzSearch$1 = class extends HTMLElement$1 {
    * Limpa o valor do campo de pesquisa
    */
   async clearValue() {
+    this.clearSearch();
+  }
+  scrollListener() {
+    var _a;
+    if (this._floatingID == undefined) {
+      return;
+    }
+    if ((_a = this.listOptionsPosition) === null || _a === void 0 ? void 0 : _a.hardPosition) {
+      this.hideOptions();
+    }
+    else {
+      window.requestAnimationFrame(() => {
+        this.updateListPosition();
+      });
+    }
+  }
+  updateListPosition() {
+    let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
+    const elementRect = this._listWrapper.getBoundingClientRect();
+    const containerRect = this._listContainer.getBoundingClientRect();
+    const textInputRect = this._textInput.getBoundingClientRect();
+    const limitHeight = bottomLimit || window.innerHeight;
+    const neededHeight = containerRect.bottom + elementRect.height;
+    if (!fromBottom && (elementRect.top < 0 || neededHeight > limitHeight)) {
+      fromBottom = true;
+    }
+    if (!hardPosition) {
+      verticalPosition = verticalPosition || 0;
+      horizontalPosition = horizontalPosition || 0;
+      if (fromBottom) {
+        verticalPosition = window.innerHeight - textInputRect.top + verticalPosition;
+      }
+      else {
+        verticalPosition += containerRect.top;
+      }
+      if (fromRight) {
+        horizontalPosition = window.innerWidth - textInputRect.right + horizontalPosition;
+      }
+      else {
+        horizontalPosition += containerRect.left;
+      }
+    }
+    if (verticalPosition != undefined) {
+      this._listWrapper.style[fromBottom ? "bottom" : "top"] = `${verticalPosition}px`;
+      this._listWrapper.style[fromBottom ? "top" : "bottom"] = "";
+    }
+    if (horizontalPosition != undefined) {
+      this._listWrapper.style[fromRight ? "right" : "left"] = `${horizontalPosition}px`;
+      this._listWrapper.style[fromRight ? "left" : "right"] = "";
+    }
+  }
+  getListPosition() {
+    if (this.listOptionsPosition) {
+      return this.listOptionsPosition;
+    }
+    return {
+      verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
+    };
+  }
+  isDifferentValues(firstValue, secondValue) {
+    return ObjectUtils$1.objectToString(firstValue || {}) !== ObjectUtils$1.objectToString(secondValue || {});
+  }
+  getFormattedText(currentValue) {
+    if (currentValue == undefined) {
+      return;
+    }
+    let text = (!this.showSelectedValue || currentValue.value == undefined) ? currentValue.label : `${currentValue.value} - ${currentValue.label}`;
+    text = text.replace(new RegExp(this._startHighlightTag, 'g'), '').replace(new RegExp(this._endHighlightTag, 'g'), '');
+    return text;
+  }
+  getText() {
+    const currentValue = this.getSelectedOption(this.value);
+    const text = this.getFormattedText(currentValue);
+    if (text == undefined) {
+      return;
+    }
+    return String(text)
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"');
+  }
+  getSelectedOption(value) {
+    if (typeof value === "string" || value instanceof String) {
+      return this._visibleOptions.find(o => o.value === value);
+    }
+    if (value) {
+      return Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
+    }
+    return value;
+  }
+  updateVisibleOptions() {
+    let opts = this._source || [];
+    if (this.suppressEmptyOption) {
+      this._visibleOptions = opts;
+    }
+    else {
+      this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
+    }
+    this._maxWidthValue = this.getMaxWidthValue();
+  }
+  getMaxWidthValue() {
+    var _a;
+    const arrValues = [];
+    (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.forEach(opt => {
+      const widthValue = this.getWidthValue(opt.value);
+      if (!arrValues.includes(widthValue)) {
+        arrValues.push(widthValue);
+      }
+    });
+    return arrValues.length > 1 ? Math.max(...arrValues) : 0;
+  }
+  getWidthValue(value) {
+    if (this._itemValueBasis != undefined) {
+      const span = this._itemValueBasis;
+      if (value != undefined) {
+        span.innerHTML = value;
+        return span.clientWidth > 0 ? (span.clientWidth + 2) : 0;
+      }
+      else {
+        span.innerHTML = "";
+      }
+    }
+    return 0;
+  }
+  createOption(detail) {
+    let { key, title } = detail;
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    title = StringUtils$1.decodeHtmlEntities(title);
+    const option = {
+      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
+      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+    };
+    this.selectOption(option);
+  }
+  buildItem(opt, index) {
+    opt.label = opt.label || opt.value;
+    const card = {
+      key: opt.value,
+      title: opt.label,
+      details: opt.details
+    };
+    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this._preSelection = index }, h("ez-card-item", { item: card }));
+  }
+  showOptions() {
+    if (!this.enabled)
+      return;
+    if (this.isOptionsVisible()) {
+      return;
+    }
+    if (!!this._resizeObserver)
+      this._resizeObserver.observe(this._textInput);
+    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: false, isFixed: true, backClickListener: () => this.hideOptions() });
+    this.setFocus();
+    window.requestAnimationFrame(() => {
+      this.updateListPosition();
+      if (!this.listOptionsPosition) {
+        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
+    });
+  }
+  hideOptions() {
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+    this._floatingID = undefined;
+    if (!!this._resizeObserver)
+      this._resizeObserver.unobserve(this._textInput);
+  }
+  isOptionsVisible() {
+    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
+  }
+  nextOption() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    this.showOptions();
+    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  previousOption() {
+    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
+    this.scrollToOption(this._visibleOptions[this._preSelection]);
+  }
+  scrollToOption(opt) {
+    window.requestAnimationFrame(() => {
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
+        ? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    });
+  }
+  selectCurrentOption() {
+    if (this._preSelection !== undefined) {
+      this.selectOption(this._visibleOptions[this._preSelection]);
+      this._preSelection = undefined;
+    }
+    else {
+      this.controlListWithOnlyOne();
+    }
+  }
+  updateSource(source) {
+    this._startLoading = false;
+    if (source instanceof Promise) {
+      this._showLoading = true;
+      source.then(result => {
+        this._showLoading = false;
+        this.updateSource(result);
+      }).catch(() => this._showLoading = false);
+      this.updateVisibleOptions();
+    }
+    else {
+      this._showLoading = false;
+      if (Array.isArray(source)) {
+        this._source = source;
+        this.updateVisibleOptions();
+        if (this._tabPressed) {
+          this._tabPressed = false;
+          this.controlEmptySearch();
+        }
+      }
+      else {
+        this.selectOption(source);
+      }
+    }
+  }
+  clearSource() {
+    this._source = [];
+    this.updateVisibleOptions();
+  }
+  replaceHighlight(value) {
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    return (value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
+  }
+  selectOption(newOption) {
     var _a, _b;
-    (_b = (_a = this._comboElement) === null || _a === void 0 ? void 0 : _a['clearValue']) === null || _b === void 0 ? void 0 : _b.call(_a);
+    const currentValue = this.getSelectedOption(this.value);
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
+    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) === null || _b === void 0 ? void 0 : _b.toString()))
+      || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
+      const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
+      this.value = adjustedOpt;
+    }
+    else {
+      this.setInputValue();
+      this.resetOptions();
+    }
+    this._visibleOptions = [];
+    this.clearSource();
   }
-  /*
-  * Retorna uma promise com o valor da opção selecionada,
-  * que será resolvida quando o backend devolver este dado.
-  */
-  async getValueAsync() {
+  loadOptions(mode, argument = "") {
+    this._criteria = argument;
+    this._startLoading = true;
+    if (this.optionLoader) {
+      const searchArgument = { mode, argument };
+      this.updateSource(this.optionLoader(searchArgument));
+    }
+    else {
+      this.updateSource(this.options);
+    }
+  }
+  cancelPreselection() {
+    if (!this._textInput.value && this.value) {
+      this.selectOption(undefined);
+    }
+    else {
+      window.setTimeout(() => {
+        this.setInputValue();
+      }, this._deboucingTime);
+    }
+    this.resetOptions();
+  }
+  setInputValue(clearError = true) {
+    const textValue = this.getText();
+    if ((this._textInput.value || '') !== textValue) {
+      this._textInput.value = textValue;
+      if (clearError) {
+        this.errorMessage = null;
+      }
+    }
+  }
+  clearSearch() {
+    this.value = null;
+  }
+  controlListWithOnlyOne() {
+    var _a, _b;
+    const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
+    if ((source === null || source === void 0 ? void 0 : source.length) > 0) {
+      const startHighlight = new RegExp(this._startHighlightTag, 'g');
+      const endHighlight = new RegExp(this._endHighlightTag, 'g');
+      let title = StringUtils$1.decodeHtmlEntities(source[0].label);
+      const option = {
+        value: (_b = source[0].value) === null || _b === void 0 ? void 0 : _b.replace(startHighlight, '').replace(endHighlight, ''),
+        label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+      };
+      this.selectOption(option);
+    }
+  }
+  controlEmptySearch() {
     var _a;
-    return (_a = this._comboElement) === null || _a === void 0 ? void 0 : _a.getValueAsync();
+    if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
+      this.clearSearch();
+      ApplicationUtils.info(this._textEmptyList);
+    }
+    else {
+      this.controlListWithOnlyOne();
+    }
   }
-  onComboChange(event) {
-    event.stopPropagation();
-    this.value = event.detail;
-    this.ezChange.emit(event.detail);
-    if (this.errorMessage !== this._comboElement.errorMessage) {
-      this.errorMessage = this._comboElement.errorMessage;
+  validateDescriptionValue() {
+    if (StringUtils$1.isEmpty(this.value)) {
+      return;
     }
+    let value = this.value;
+    if (typeof value === "object") {
+      return;
+    }
+    if (StringUtils$1.isEmpty(value)) {
+      return;
+    }
+    this.loadDescriptionValue(value);
+  }
+  async loadDescriptionValue(argument) {
+    var _a, _b;
+    if (argument == undefined) {
+      return;
+    }
+    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.loadOptionValue(argument);
+      return;
+    }
+    const searchArgument = {
+      mode: SearchMode.PREDICTIVE,
+      argument
+    };
+    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
+    if (source == undefined) {
+      return;
+    }
+    if (source instanceof Promise) {
+      source.then((result) => {
+        this.setDescriptionValue(result);
+      });
+    }
+    else {
+      this.setDescriptionValue(source);
+    }
+  }
+  setDescriptionValue(source) {
+    const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
+    if (value == undefined || !Object.keys(value).length) {
+      this.showNoResultMessage();
+      return;
+    }
+    this._lookupMode = true;
+    this.value = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+  }
+  loadOptionValue(argument) {
+    var _a;
+    const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
+    if (source != undefined) {
+      this.selectOption(source);
+    }
+    else {
+      this.showNoResultMessage();
+    }
+  }
+  async showNoResultMessage() {
+    this.clearSearch();
+    ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
+  }
+  getFieldLabel() {
+    var _a;
+    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(REQUIRED_INFO, "").toUpperCase();
+  }
+  resetOptions() {
+    this.hideOptions();
+    this._criteria = undefined;
+    this._preSelection = undefined;
+    this.updateVisibleOptions();
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentWillLoad() {
+    if (this.options === undefined) {
+      this.options = [];
+      const optionsTags = this.el.querySelectorAll("option");
+      if (optionsTags) {
+        optionsTags.forEach(e => {
+          let label = e.innerText;
+          let value = e.getAttribute("value");
+          let details = e.getAttribute("details");
+          if (!value) {
+            value = label;
+          }
+          this.options.push({ label, value, details });
+          e.hidden = true;
+        });
+      }
+    }
+    this.updateSource([]);
+  }
+  componentDidRender() {
+    var _a;
+    if (this._floatingID === undefined) {
+      this._listWrapper.remove();
+    }
+    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
+      ElementIDUtils.addIDInfoIfNotExists(elem, "itemSearch");
+    });
+    this.validateDescriptionValue();
   }
   componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
+    this.setInputValue(false);
+    this._resizeObserver = new ResizeObserver((entries) => {
+      window.requestAnimationFrame(() => {
+        if (!Array.isArray(entries) || !entries.length)
+          return;
+        const { clientWidth } = this._listContainer;
+        if (clientWidth > 0 && !!this._listWrapper) {
+          this._listWrapper.style.width = `${clientWidth}px`;
+        }
+      });
+    });
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handlerIconClick() {
+    this.loadOptions(SearchMode.ADVANCED);
+  }
+  buildNumberArgument(argument) {
+    if (this.isTextSearch) {
+      return NaN;
+    }
+    return Number(argument || undefined);
+  }
+  onTextInputChangeHandler(event) {
+    var _a;
+    this.clearDeboucingTimeout();
+    if (this._startLoading) {
+      this._changeDeboucingTimeout = window.setTimeout(() => {
+        this.onTextInputChangeHandler(event);
+      }, this._deboucingTime);
+      return;
+    }
+    const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
+    const argumentNumber = this.buildNumberArgument(argument);
+    if (!this._criteria) {
+      this._textInput.value = event.data || argument;
+    }
+    this._criteria = argument;
+    if (argument) {
+      this._showLoading = false;
+      this.clearSource();
+      if (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch) {
+        this._showLoading = true;
+        this._changeDeboucingTimeout = window.setTimeout(() => {
+          this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
+        }, this._deboucingTime);
+        this.showOptions();
+      }
+      else {
+        this.hideOptions();
+      }
+    }
+    else {
+      this.hideOptions();
+      this._showLoading = false;
+      this.clearSource();
+    }
+  }
+  clearDeboucingTimeout() {
+    if (this._changeDeboucingTimeout) {
+      window.clearTimeout(this._changeDeboucingTimeout);
+      this._changeDeboucingTimeout = null;
+    }
+  }
+  keyDownHandler(event) {
+    this._tabPressed = false;
+    if (event.ctrlKey) {
+      if (event.key === "f" || event.key === "F") {
+        this.loadOptions(SearchMode.ADVANCED);
+        //ATENÇÃO: Ctrl + F tem ação específica nos browsers
+        //nesse caso, como vamos abrir o popup de busca avançada,
+        //não é interessante deixar o evento propagar;
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        event.preventDefault();
+      }
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        this.nextOption();
+        event.stopPropagation();
+        break;
+      case "ArrowUp":
+        this.previousOption();
+        event.stopPropagation();
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+      case "Escape":
+        this.cancelPreselection();
+        break;
+      case "Tab":
+        this._tabPressed = true;
+        this.controlListWithOnlyOne();
+        break;
+    }
+    //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
+    //Por exemplo, quando o usuário dá um Enter, além de selecionar
+    //um valor, também significa que a ateração finalizou,
+    //e o contexto pode reagir (fechar um popup por exemplo).
+    //event.stopPropagation();
+  }
+  onTextInputFocusOutHandler() {
+    if (this.hideErrorOnFocusOut)
+      this.cancelPreselection();
+  }
+  canShowListOptions() {
+    return !this._showLoading && this._visibleOptions.length > 0;
   }
   render() {
-    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch, limitCharsToSearch: this.ignoreLimitCharsToSearch ? 0 : 3 }));
+    var _a;
+    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "search" })), ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
+      ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
+      : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+      && this._visibleOptions.length === 0
+      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
+      && h("div", { class: "message" }, h("div", { class: "message__loading" })), h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem }), this.canShowListOptions() && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
   }
-  ;
-  get _elem() { return this; }
+  get el() { return this; }
   static get watchers() { return {
     "errorMessage": ["observeErrorMessage"],
-    "value": ["observeValue"]
+    "value": ["observeValue"],
+    "options": ["observeOptions"]
   }; }
   static get style() { return ezSearchCss; }
 };
+var SearchMode;
+(function (SearchMode) {
+  SearchMode["ADVANCED"] = "ADVANCED";
+  SearchMode["PRELOAD"] = "PRELOAD";
+  SearchMode["PREDICTIVE"] = "PREDICTIVE";
+})(SearchMode || (SearchMode = {}));
 
 const ezSidebarButtonCss = ":host{position:relative;--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{position:absolute;display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0}";
 
@@ -127801,15 +128577,188 @@ const EzSkeleton$1 = class extends HTMLElement$1 {
   static get style() { return ezSkeletonCss; }
 };
 
-const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);padding:var(--space--nano);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow)}";
+const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #FFF);--ez-split-button--font-size:var(--text--medium, 14px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--medium, #008561);--ez-split-button--border-radius:var(--border--radius-large, 12px);--ez-split-button--border:none;--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600);--ez-split-button--hover--background-color:var(--background--medium, var(--ez-split-button--background-color));--ez-split-button--disabled-color:var(--text--disable);--ez-split-button--disabled--background-color:var(--color--disable-secondary);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:var(--ez-split-button--border);justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:focus,.ez-split-button__right-button:focus{outline:var(--ez-split-button--focus--border);box-shadow:var(--ez-split-button--focus--box-shadow)}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:--ez-elevation--8;border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
+
+const EzSplitButton$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.buttonClick = createEvent(this, "buttonClick", 7);
+    this.dropdownItemClick = createEvent(this, "dropdownItemClick", 7);
+    this.dropdownSubActionClick = createEvent(this, "dropdownSubActionClick", 7);
+    this.rightDefaultTitle = 'Mais opções';
+    this.show = false;
+    this.enabled = true;
+    this.iconName = undefined;
+    this.image = undefined;
+    this.items = undefined;
+    this.label = undefined;
+    this.leftTitle = undefined;
+    this.rightTitle = 'Mais opções';
+    this.mode = 'default';
+    this.size = 'medium';
+  }
+  /**
+   * Remove o foco de ambos os botões.
+   */
+  async setBlur() {
+    this.leftButton.blur();
+    this.rightButton.blur();
+  }
+  /**
+   * Aplica o foco no botão principal.
+   */
+  async setLeftButtonFocus() {
+    this.leftButton.focus();
+  }
+  /**
+   * Aplica o foco no botão do dropdown.
+   */
+  async setRightButtonFocus() {
+    this.rightButton.focus();
+  }
+  clickListener(evt) {
+    if (!this.enabled) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      evt.stopImmediatePropagation();
+    }
+  }
+  getIconSize(sizeParam = 'medium') {
+    var _a;
+    const sizeList = ['medium', 'large'];
+    const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
+  closeDropdown() {
+    this.show = false;
+  }
+  toggleDropdown() {
+    this.show = !this.show;
+  }
+  handleButtonClick() {
+    this.buttonClick.emit();
+  }
+  handleDropdownItemClick(evt) {
+    this.dropdownItemClick.emit(evt.detail);
+    evt.stopPropagation();
+    this.closeDropdown();
+  }
+  handleDropdownSubActionClick(evt) {
+    this.dropdownSubActionClick.emit(evt.detail);
+    evt.stopPropagation();
+    this.closeDropdown();
+  }
+  resolveOffsetParentRect() {
+    var _a, _b;
+    const offsetParentRect = (_b = (_a = this.dropdownParent) === null || _a === void 0 ? void 0 : _a.offsetParent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const rectWithoutScroll = {
+      top: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) + scrollTop,
+      left: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) + scrollLeft,
+      bottom: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.bottom) + scrollTop,
+      right: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.right) + scrollLeft,
+      width: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.width,
+      height: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.height
+    };
+    this.offsetParentRect = rectWithoutScroll;
+  }
+  /**
+   * Método responsável em posicionar o dropdown na tela.
+   * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
+   */
+  positionDropdown() {
+    var _a, _b, _c, _d, _e, _f;
+    const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
+    const rightButtonRect = _rightButton.getBoundingClientRect();
+    const dropdownParentRect = _dropdownParent.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - (rightButtonRect.bottom + ((_a = this.offsetParentRect) === null || _a === void 0 ? void 0 : _a.top));
+    const spaceAbove = rightButtonRect.top + ((_b = this.offsetParentRect) === null || _b === void 0 ? void 0 : _b.top);
+    const spaceRight = window.innerWidth - (rightButtonRect.left + ((_c = this.offsetParentRect) === null || _c === void 0 ? void 0 : _c.left));
+    const spaceLeft = rightButtonRect.left;
+    const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
+    const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
+    let top = `${rightButtonRect.bottom - ((_d = this.offsetParentRect) === null || _d === void 0 ? void 0 : _d.top) + window.scrollY}px`;
+    let left = `${rightButtonRect.left - ((_e = this.offsetParentRect) === null || _e === void 0 ? void 0 : _e.left) + window.scrollX}px`;
+    let bottom = 'auto';
+    if (hasSpaceBelow) {
+      bottom = `${window.innerHeight - rightButtonRect.top - window.scrollY}px`;
+      top = 'auto';
+      _dropdownParent.style.maxHeight = `${spaceAbove}px`;
+    }
+    if (hasSpaceRight) {
+      left = `${rightButtonRect.right - dropdownParentRect.width - ((_f = this.offsetParentRect) === null || _f === void 0 ? void 0 : _f.left) + window.scrollX}px`;
+    }
+    _dropdownParent.style.top = top;
+    _dropdownParent.style.bottom = bottom;
+    _dropdownParent.style.left = left;
+  }
+  setEvents() {
+    window.removeEventListener('scroll', this.positionDropdown.bind(this));
+    window.addEventListener('scroll', this.positionDropdown.bind(this));
+  }
+  componentWillLoad() {
+    this.setEvents();
+  }
+  componentWillRender() {
+    this.resolveOffsetParentRect();
+  }
+  componentDidLoad() {
+    if (this._element)
+      ElementIDUtils.addIDInfo(this._element);
+    if (this.leftButton) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
+    }
+    if (this.rightButton) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
+    }
+    this.positionDropdown();
+  }
+  componentDidUpdate() {
+    this.positionDropdown();
+  }
+  render() {
+    const hasIconButton = this.shouldShowIconOnLeftButton();
+    const hasLabelButton = this.shouldShowLabelOnLeftButton();
+    const iconSize = this.getIconSize();
+    return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); } }))))));
+  }
+  shouldShowLabelOnLeftButton() {
+    return ['icon-left', 'default'].includes(this.mode);
+  }
+  shouldShowIconOnLeftButton() {
+    return ['icon-left', 'icon-only'].includes(this.mode);
+  }
+  get _element() { return this; }
+  static get style() { return ezSplitButtonCss; }
+};
+
+const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow);flex-direction:column;overflow:hidden;display:flex;padding:var(--space--nano)}.box_split-item>.ez-split-item--content{overflow:auto}.expanded__item{position:absolute;z-index:var(--more-visible);top:0;left:0;width:100%;height:100%}.ez-split-item--header{display:flex;align-items:center;justify-content:space-between}.ez-split-item--header-title{flex:1;white-space:nowrap;overflow:hidden}.ez-split-item--header-title h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.ez-split-item--header-buttons{display:flex;align-items:center}.ez-split-item--content{display:block;height:100%}h3.ez-margin--small{margin-left:var(--space--small)}";
 
 const SplitItem = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
+    this.label = undefined;
+    this.enableExpand = true;
+    this._expanded = false;
+    this.size = undefined;
+  }
+  /**
+   * Alterna a visibilidade do painel.
+   */
+  toggleExpandItem() {
+    this._expanded = !this._expanded;
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: 'box_split-item' }));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--small ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
   }
   static get style() { return ezSplitItemCss; }
 };
@@ -128498,11 +129447,24 @@ const SplitPanel = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this._items = [];
+    this._buildInProgress = false;
     this.direction = 'column';
+    this.anchorToExpand = false;
   }
-  componentDidLoad() {
+  rebuildLayout() {
+    Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
+      el.remove();
+    });
+    Array.from(this._element.getElementsByTagName("EzSplitPanel")).reverse().forEach(el => {
+      el['rebuildLayout']();
+    });
+    this.buildItems();
+    this.initSplit();
+  }
+  buildItems() {
     this._panelID = StringUtils$1.generateUUID();
     this._element.dataset.panelId = this._panelID;
+    this._element.dataset.uniqueId = "EzSplitPanel";
     let itemsElements = Array.from(this._element.children);
     this._items = itemsElements.filter(child => { var _a; return ((_a = child.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'EZ-SPLIT-ITEM'; });
     let trackCount = 1;
@@ -128513,7 +129475,30 @@ const SplitPanel = class extends HTMLElement$1 {
       }
       trackCount += 2;
     });
+  }
+  componentDidLoad() {
+    this.buildItems();
     this.initSplit();
+    this._mutationObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList' && this._buildInProgress === false) {
+          this._buildInProgress = true;
+          window.requestAnimationFrame(() => {
+            this.rebuildLayout();
+          });
+          window.requestAnimationFrame(() => this._buildInProgress = false);
+          break;
+        }
+      }
+    });
+    // Configure o observer para observar mudanças nos filhos
+    this._mutationObserver.observe(this._element, { childList: true, subtree: false });
+  }
+  disconnectedCallback() {
+    //disconect o _mutationObserver
+    if (this._mutationObserver != undefined) {
+      this._mutationObserver.disconnect();
+    }
   }
   initSplit() {
     if (!this._items.length) {
@@ -128525,7 +129510,7 @@ const SplitPanel = class extends HTMLElement$1 {
   getGutters() {
     const gutters = {
       columnGutters: [],
-      rowGutters: []
+      rowGutters: [],
     };
     if (!this._items.length) {
       return gutters;
@@ -128535,19 +129520,19 @@ const SplitPanel = class extends HTMLElement$1 {
       if (index == this._items.length - 1)
         return;
       let gutterTrack = item.dataset.trackNumber;
-      if (index === (this._items.length - 1)) {
+      if (index === this._items.length - 1) {
         gutterTrack = this._items.length.toString();
       }
       gutters[proToChange].push({
         track: Number(gutterTrack),
-        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`)
+        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`),
       });
     });
     return gutters;
   }
   addItemGutter(item) {
     const gutter = document.createElement('div');
-    gutter.classList.add("ez-split-gutter");
+    gutter.classList.add('ez-split-gutter');
     gutter.classList.add(this.direction);
     gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
     gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
@@ -128555,29 +129540,47 @@ const SplitPanel = class extends HTMLElement$1 {
   }
   getElementStyle() {
     const style = {
-      'display': "grid",
-      'height': '100%',
-      'width': '100%'
+      display: 'grid',
+      height: '100%',
+      width: '100%',
+      position: this.anchorToExpand ? 'relative' : 'unset',
     };
     return style;
   }
+  calcFreeSpacePercentage() {
+    const inUseSpacePercentage = this._items.reduce((accumulator, currentValue) => {
+      var _a;
+      return accumulator + (((_a = currentValue.size) === null || _a === void 0 ? void 0 : _a.includes('%')) ? Number(currentValue.size.replace("%", "")) : 0);
+    }, 0);
+    const itemsWithoutSizeAmount = this._items.filter((item) => item.size === undefined).length;
+    if (!itemsWithoutSizeAmount || !inUseSpacePercentage) {
+      return null;
+    }
+    const freeSpacePercentage = ((100 - inUseSpacePercentage) / itemsWithoutSizeAmount);
+    return freeSpacePercentage;
+  }
   getGridTemplate() {
     let template = '';
-    this._items.forEach((_col, index) => {
+    const freeSpacePercentage = this.calcFreeSpacePercentage();
+    this._items.forEach((col, index) => {
+      let size = col.size || '1fr';
+      if (!col.size && freeSpacePercentage) {
+        size = `${freeSpacePercentage}%`;
+      }
       if (index === this._items.length - 1) {
-        template += ` 1fr`;
+        template += ` ${size}`;
         return;
       }
       if (index === 0) {
-        template += `1fr 5px`;
+        template += `${size} 5px`;
         return;
       }
-      template += ` 1fr 5px`;
+      template += ` ${size} 5px`;
     });
     return template;
   }
   render() {
-    return (h(Host, { style: this.getElementStyle() }));
+    return h(Host, { style: this.getElementStyle() });
   }
   get _element() { return this; }
   static get style() { return ezSplitPanelCss; }
@@ -129602,7 +130605,7 @@ const TreeItem = (props) => {
     itemsList.push(treeItem);
   }
   return (h("ul", { class: level === 1 ? "first-level" : undefined },
-    h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? 'tree-item-error' : ""}`, onClick: () => available && itemClick(treeItem) }, {
+    h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem) }, {
       disabled,
       selected: treeItem.id === selectedId,
       [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
@@ -129610,11 +130613,25 @@ const TreeItem = (props) => {
       h("div", { class: "item-label-container" },
         h("div", { class: "item-icon-box" }, expandable &&
           h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })),
-        h("label", { class: "item-label" }, treeItem.label)),
-      h("div", { class: `tree-item-badge ${(treeItem.id !== selectedId) ? treeItem.badge : null}` }, treeItem.badge === 'error' ? (h("ez-icon", { id: `${treeItem.id}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" })) : null)),
+        h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)),
+      getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)),
     expanded
       && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };
+function getBadgeElement(itemId, badge, isSelectedItem) {
+  if (badge == undefined) {
+    return;
+  }
+  if (typeof badge === "string") {
+    return h("div", { class: `tree-item-badge ${isSelectedItem ? null : badge}` }, badge === "error" &&
+      h("ez-icon", { id: `${itemId}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" }));
+  }
+  if (badge.type === "text") {
+    return h("div", { id: `${itemId}-badge-text`, class: "tree-item-badge-text" }, badge.text);
+  }
+  return h("div", null,
+    h("ez-icon", { id: `${itemId}-badge-icon`, class: "tree-item-badge-icon", style: { "--ez-icon--color": `var(--ez-tree__badge--icon-color--${badge.iconColor || "default"})` }, iconName: badge.iconName }));
+}
 
 class Node$1 {
   constructor(tree, item, parent, isPlaceHolder = false) {
@@ -129858,7 +130875,7 @@ class Tree extends Node$1 {
   }
 }
 
-const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item-badge{width:16px;height:16px;background:transparent;border-radius:50%;transition:all 300ms ease-in-out;display:flex;align-items:center;justify-content:center}.tree-item-badge-error-icon{--ez-icon--color:white}.tree-item-badge.error{background:var(--color--error)}.tree-item-badge.warning{background:var(--color--warning)}.tree-item-badge.success{background:var(--color--success)}.item-label-container{display:flex;align-items:center}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding);justify-content:space-between}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
+const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree--font-weight--bold:var(--text-weight--large, 600);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);--ez-tree__badge--icon-color--default:var(--title--primary, #2B3A54);--ez-tree__badge--icon-color--error:var(--color--error, #da4453);--ez-tree__badge--icon-color--success:var(--color-alert--success-800, #157a00);--ez-tree__badge--icon-color--warning:var(--color--warning, #f2d410);--ez-tree__badge--icon-color--disabled:var(--text--disable, #AFB6C0);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item-badge{width:16px;height:16px;background:transparent;border-radius:50%;transition:all 300ms ease-in-out;display:flex;align-items:center;justify-content:center}.tree-item-badge-error-icon{--ez-icon--color:white}.tree-item-badge-text{font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item-badge.error{background:var(--color--error)}.tree-item-badge.warning{background:var(--color--warning)}.tree-item-badge.success{background:var(--color--success)}.item-label-container{display:flex;align-items:center}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding);justify-content:space-between}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.item-label--bold{font-weight:var(--ez-tree--font-weight--bold)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
 
 const EzTree$1 = class extends HTMLElement$1 {
   constructor() {
@@ -130631,6 +131648,8 @@ const FilterColumn$1 = class extends HTMLElement$1 {
     this.TOP_POSITION_NO_TASKBAR = '32';
     this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
     this.DEFAULT_HEIGHT = 430;
+    this.FIX_MARGIN = 60;
+    this.FILTER_COLUMN_WIDTH = 330;
     this.opened = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
@@ -130663,15 +131682,24 @@ const FilterColumn$1 = class extends HTMLElement$1 {
       await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
     }
   }
-  calculateLeftPosition(configs) {
-    if (!configs.fromIcon) {
-      return configs.leftPosition;
+  calculateLeftPosition({ leftPosition, fromIcon }) {
+    const leftPositionCalculated = this.calcFilterColumnLeftPosition(leftPosition);
+    if (!fromIcon) {
+      return `${leftPositionCalculated}px`;
     }
     const difference = this.ezPopoverElement.getBoundingClientRect().left;
-    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
-    const leftResolved = (leftReference + 16) - difference;
+    const leftResolved = (leftPositionCalculated + 16) - difference;
     return `${(leftResolved > 0 ? leftResolved : 0)}px`;
   }
+  calcFilterColumnLeftPosition(leftReference) {
+    var _a, _b;
+    const gridReference = this.ezPopoverElement.closest("ez-grid");
+    const gridLimit = (_a = gridReference.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.right;
+    const popoverDiff = (_b = this.ezPopoverElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
+    const maxLeft = gridLimit - (this.FILTER_COLUMN_WIDTH + popoverDiff);
+    const leftInt = leftReference - (this.FIX_MARGIN + popoverDiff);
+    return leftInt > maxLeft ? maxLeft : leftInt;
+  }
   buildIsTextSearch() {
     var _a, _b;
     const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;
@@ -130785,43 +131813,44 @@ const MultiSelectionBoxMessage$1 = class extends HTMLElement$1 {
 
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
-const EzAlertList = /*@__PURE__*/proxyCustomElement(EzAlertList$1, [1,"ez-alert-list",{"alerts":[1040],"enableDragAndDrop":[516,"enable-drag-and-drop"],"enableExpand":[516,"enable-expand"],"itemRightSlotBuilder":[16],"opened":[1540],"expanded":[1540]}]);
+const EzAlertList = /*@__PURE__*/proxyCustomElement(EzAlertList$1, [1,"ez-alert-list",{"alerts":[1040],"enableDragAndDrop":[516,"enable-drag-and-drop"],"enableExpand":[516,"enable-expand"],"itemRightSlotBuilder":[16],"opened":[1540],"expanded":[1540],"_container":[32]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
 const EzBadge = /*@__PURE__*/proxyCustomElement(EzBadge$1, [1,"ez-badge",{"size":[513],"label":[513],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"position":[1040],"hasSlot":[32]}]);
 const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]);
 const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]},[[2,"click","clickListener"]]]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]},[[11,"scroll","scrollListener"]]]);
-const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16]}]);
+const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16],"enableKey":[4,"enable-key"]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"compact":[4]}]);
 const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"showNativeTooltip":[4,"show-native-tooltip"]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"boxBordered":[4,"box-bordered"],"label":[513],"subtitle":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32]}]);
-const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"limitCharsToSearch":[2,"limit-chars-to-search"],"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);
+const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"limitCharsToSearch":[2,"limit-chars-to-search"],"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"canShowError":[516,"can-show-error"]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"beforeClose":[1040]},[[8,"keydown","handleKeyDown"]]]);
-const EzDropdown = /*@__PURE__*/proxyCustomElement(EzDropdown$1, [1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]);
+const EzDropdown = /*@__PURE__*/proxyCustomElement(EzDropdown$1, [1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]},[[4,"click","handleClickOutside"]]]);
 const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]);
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"canShowError":[516,"can-show-error"]}]);
-const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"fieldToFocus":[1,"field-to-focus"]}]);
+const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"fieldToFocus":[1,"field-to-focus"],"onlyStaticFields":[4,"only-static-fields"],"_fieldsProps":[32]}]);
 const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16]}]);
-const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"selectionToastConfig":[16],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"columnfilterDataSource":[16],"useEnterLikeTab":[4,"use-enter-like-tab"],"recordsValidator":[16],"canEdit":[4,"can-edit"],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_hasLeftButtons":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
+const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"selectionToastConfig":[16],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"columnfilterDataSource":[16],"useEnterLikeTab":[4,"use-enter-like-tab"],"recordsValidator":[16],"canEdit":[4,"can-edit"],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_hasLeftButtons":[32],"_customFormatters":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
 const EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"listMode":[1,"list-mode"],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"itemLeftSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzLoadingBar = /*@__PURE__*/proxyCustomElement(EzLoadingBar$1, [1,"ez-loading-bar",{"_showLoading":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"heightMode":[1,"height-mode"],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"],"scrim":[1]}]);
-const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]);
+const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]},[[4,"ezCloseModal","handleEzModalAction"]]]);
 const EzMultiSelectionList = /*@__PURE__*/proxyCustomElement(EzMuiltiSelectionList, [2,"ez-multi-selection-list",{"columnName":[1,"column-name"],"dataSource":[16],"useOptions":[1028,"use-options"],"options":[1040],"isTextSearch":[4,"is-text-search"],"filteredOptions":[32],"displayOptions":[32],"viewScenario":[32],"displayOptionToCheckAllItems":[32]}]);
 const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
 const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]);
-const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"]}]);
+const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"options":[1040],"suppressSearch":[4,"suppress-search"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);
 const EzSidebarButton = /*@__PURE__*/proxyCustomElement(EzSidebarButton$1, [1,"ez-sidebar-button"]);
 const EzSkeleton = /*@__PURE__*/proxyCustomElement(EzSkeleton$1, [0,"ez-skeleton",{"count":[2],"variant":[1],"width":[1],"height":[1],"marginBottom":[1,"margin-bottom"],"animation":[1]}]);
-const EzSplitItem = /*@__PURE__*/proxyCustomElement(SplitItem, [0,"ez-split-item"]);
-const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-panel",{"direction":[1]}]);
+const EzSplitButton = /*@__PURE__*/proxyCustomElement(EzSplitButton$1, [1,"ez-split-button",{"enabled":[516],"iconName":[513,"icon-name"],"image":[513],"items":[16],"label":[513],"leftTitle":[513,"left-title"],"rightTitle":[513,"right-title"],"mode":[513],"size":[513],"show":[32]},[[2,"click","clickListener"]]]);
+const EzSplitItem = /*@__PURE__*/proxyCustomElement(SplitItem, [4,"ez-split-item",{"label":[1],"enableExpand":[516,"enable-expand"],"size":[1],"_expanded":[32]}]);
+const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-panel",{"direction":[1],"anchorToExpand":[4,"anchor-to-expand"]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"enableResize":[516,"enable-resize"]}]);
 const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32]}]);
@@ -130873,6 +131902,7 @@ const defineCustomElements = (opts) => {
   EzSearch,
   EzSidebarButton,
   EzSkeleton,
+  EzSplitButton,
   EzSplitItem,
   EzSplitPanel,
   EzTabselector,
@@ -130894,4 +131924,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };