@sankhyalabs/ezui 5.20.0-dev.3 → 5.20.0-dev.31

package/README.md

@@ -15,13 +15,13 @@ Esse projeto é constituído por um monorepo com a seguinte hierarquia:
     -- .gitlab-ci.yml
 ```
 
-Observe que na raiz do ez-ui temos um packege.json que define as configurações de storybook para todos os componentes filhos dentro da hierarquia. 
+Observe que na raiz do ez-ui temos um packege.json que define as configurações de storybook para todos os componentes filhos dentro da hierarquia.
 Cada subpasta (component1, component2) são componentes [Stencil](https://stenciljs.com/).
 
 #### O EzUI foi baseado no [UiKit](https://xd.adobe.com/view/d45d91bf-f5a8-4814-899f-e781732807d1-810e/grid) disponibilizado pela equipe de UX da Sankhya.
 
 ## Executando o projeto
-Para iniciar o projeto, basta ir até a pasta do componente que deseja testar (ex: ez-ui/component1) e executar o comando: `npm install && npm run dev`  
+Para iniciar o projeto, basta ir até a pasta do componente que deseja testar (ex: ez-ui/component1) e executar o comando: `npm install && npm run dev`
 Este procedimento irá iniciar um servidor do storybook para testar o componente. A porta que o servidor estará sendo executado é apresentada no console ao final do comando.
 
 ## Padrão de commit e merge request:
@@ -41,10 +41,9 @@ Hoje estamos utilizando o padrão de semantic release baseado no [angular](https
   └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
 ```
 
- - Na solicitação de merge request deve ter um titulo com o seguinte padrão: SKA-111 - Titulo  sugestivo da minha modificação, onde, SKA-111 é id do card do jira.
+ - Na solicitação de merge request deve ter um titulo com o seguinte padrão: KB-11111 - Titulo  sugestivo da minha modificação, onde, KB-11111 é id do card do Kanbanize.
 
 ## Fontes notáveis
-
 - **ez-ui/.storybook/***: Nessa pasta temos arquivos de configuração do storybook. Essa pasta é utilizada em ambiente de produção.
     * **ez-ui/.storybook/preview-head.html**: Esse arquivo é responsável por fazer o import de módulos dos webcomponents e dos styles globais da aplicação. Esse arquivo é utilizado em ambiente de produção.
 - **ez-ui/.storybook-dev/***: Nessa pasta temos arquivos de configuração do storybook. Porém essa pasta é utilizada apenas em ambiente de desenvolvimento.
@@ -75,4 +74,4 @@ o build do ezui, link do react-output e ezui, build do react-output e a disponib
 - [Diretrizes de documentação](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Diretrizes-de-documenta%C3%A7%C3%A3o)
 - [Link ente projetos](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Link-ente-projetos)
 - [Definindo bons data-element-id de testabilidade no design system](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Definindo-bons-data-element-id-de-testabilidade-no-design-system)
-- [Criando exemplos de componentes](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Criando-exemplos-de-componentes)
+- [Criando exemplos de componentes](https://gitlab.sankhya.com.br/dti/design-system/ez-ui/-/wikis/Criando-exemplos-de-componentes)

package/dist/cjs/{CSSVarsUtils-b136a156.js → CSSVarsUtils-10c9d5b4.js}

@@ -66,6 +66,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) {

package/dist/cjs/ez-actions-button.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 require('./ApplicationUtils-c9d1205c.js');
-const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 

package/dist/cjs/ez-alert-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-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(--more-visible--2x, 3);\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 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 = class {
   constructor(hostRef) {
@@ -61,11 +61,13 @@ const EzAlertList = class {
   /**
    * Gerencia a exibição do overlay usando FloatingManager do Core.
    */
-  async manageOverlay() {
-    if (this.opened) {
+  manageOverlay() {
+    if (this.opened && this._container) {
       this._overlayId = core.FloatingManager.float(this._container, this._overlayRef, this.getFloatOptions());
     }
     else {
+      if (this._overlayId === undefined)
+        return;
       core.FloatingManager.close(this._overlayId);
       this._overlayId = undefined;
     }
@@ -74,8 +76,10 @@ const EzAlertList = class {
    * Atualiza a posição da lista.
    */
   updatePosition(right, bottom) {
-    core.FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
-      bottom }));
+    if (this.opened) {
+      core.FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
+        bottom }));
+    }
   }
   ;
   /**
@@ -84,7 +88,7 @@ const EzAlertList = class {
   getFloatOptions() {
     return {
       autoClose: false,
-      isFixed: false,
+      isFixed: true,
       bottom: '10px',
       right: '10px',
     };
@@ -106,9 +110,9 @@ const EzAlertList = class {
     const boxHeight = this._container.getBoundingClientRect().height;
     return ((docHeight - boxHeight) / 2) + 'px';
   }
-  componentDidRender() {
+  componentDidLoad() {
     this.manageOverlay();
-    if (this.opened) {
+    if (this.opened && this._container) {
       this._container.focus();
     }
   }
@@ -116,27 +120,28 @@ const EzAlertList = class {
     this.dataElementId = core.ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
   }
   render() {
-    return (index.h(index.Host, Object.assign({}, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), index.h("div", { ref: elem => (this._overlayRef = elem) }, index.h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, index.h("div", { class: "alert-list__content" }, index.h("div", { class: "alert-list__header" }, index.h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), index.h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (index.h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": core.ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), index.h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": core.ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
-        this.opened = false;
-      }, title: 'Fechar' }))), index.h("div", { class: "alert-list__expandable-content" }, index.h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
-        return (index.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 (index.h(index.Host, Object.assign({}, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
+      (index.h("div", { ref: elem => (this._overlayRef = elem) }, index.h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, index.h("div", { class: "alert-list__content" }, index.h("div", { class: "alert-list__header" }, index.h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), index.h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (index.h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": core.ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), index.h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": core.ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+          this.opened = false;
+        }, title: 'Fechar' }))), index.h("div", { class: "alert-list__expandable-content" }, index.h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
+          return (index.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 : "",
+          };
+        }) })))))) : null));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-card-item_3.cjs.entry.js

@@ -4,15 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
 
-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}\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  cursor: pointer;\n  justify-content: space-between;\n  gap: var(--space--small, 6px);\n}\n\n.card-item__details-left {\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-right {\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail:not(:last-child) {\n  cursor: pointer;\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@container box (max-width: 500px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-left {\n    width: 100%;\n  }\n  \n  .card-item__details-right {\n    width: 100%;\n  }\n}";
+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 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ezClick = index.createEvent(this, "ezClick", 7);
     this.item = undefined;
+    this.enableKey = true;
   }
   componentWillRender() {
     this.createDetailList();
@@ -40,11 +41,11 @@ const EzCardItem = class {
   }
   render() {
     return (index.h(index.Host, null, this.item &&
-      index.h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, index.h("label", { class: "card-item__title" }, index.h("span", { class: "card-item__key", innerHTML: this.item.key }), index.h("span", { innerHTML: this.item.title })), index.h("div", { class: "card-item__details" }, index.h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
+      index.h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, index.h("div", { class: "ez-row card-item__content" }, index.h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, index.h("label", { class: "card-item__title" }, this.enableKey && (index.h("span", { class: "card-item__key", innerHTML: this.item.key })), index.h("span", { innerHTML: this.item.title })), index.h("div", { class: "card-item__details-container" }, index.h("div", { class: "card-item__details-container__left" }, this._details.detailsLeft.map(detail => {
         return this.buildDetailContent(detail);
-      })), index.h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
+      })), index.h("div", { class: "card-item__details-container__right" }, this._details.detailsRight.map(detail => {
         return this.buildDetailContent(detail);
-      }))))));
+      })))), index.h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, index.h("slot", { name: "rightSlot" }))))));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 require('./ApplicationUtils-c9d1205c.js');
-const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 
@@ -80,7 +80,7 @@ const EzComboBox = class {
     }
   }
   observeOptions(newOptions, oldOptions) {
-    if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.join('')) === (oldOptions === null || oldOptions === void 0 ? void 0 : oldOptions.join('')))
+    if (core.ObjectUtils.equals(newOptions, oldOptions))
       return;
     this.loadOptions(SearchMode.PRELOAD);
   }
@@ -222,14 +222,15 @@ const EzComboBox = class {
       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) {
@@ -370,7 +371,7 @@ const EzComboBox = class {
     }
     else {
       window.setTimeout(() => {
-        this.setInputValue();
+        this.setInputValue(false);
       }, this._deboucingTime);
     }
     this.resetOptions();

package/dist/cjs/ez-date-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
 
 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)}";
 
@@ -111,6 +111,9 @@ const EzDateInput = class {
     this._calendar.hide();
   }
   handleBlur() {
+    if (!this._changePending) {
+      return;
+    }
     try {
       const strValue = this._textInput.value;
       const newValue = core.DateUtils.strToDate(strValue);

package/dist/cjs/ez-date-time-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
 
 const ezDateTimeInputCss = ":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)}";
 
@@ -163,6 +163,9 @@ const EzDateTimeInput = class {
   }
   handleBlur() {
     var _a, _b;
+    if (!this._changePending) {
+      return;
+    }
     try {
       const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
       const newValue = this.getParsedDateTime();

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

@@ -14,7 +14,7 @@ const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (index.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 (index.h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
     index.h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.CheckMode.SWITCH : CheckMode.CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
@@ -28,29 +28,31 @@ const buildComboBox = ({ name, label, readOnly, required, props, contextName, ca
   else {
     options = prop;
   }
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.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 = ({ name, label, readOnly, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.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 = core.ObjectUtils.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 (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
@@ -65,12 +67,12 @@ const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.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 = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
 };
 
@@ -80,7 +82,7 @@ const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError
 };
 
 const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+  return (index.h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
     index.h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
 };
 
@@ -140,7 +142,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 = class {
   constructor(hostRef) {
@@ -175,19 +177,36 @@ const EzFormView = class {
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
+  isItemFullWidth(userInterface) {
+    return [
+      core.UserInterface.FILE,
+      core.UserInterface.LONGTEXT
+    ].includes(userInterface);
+  }
+  buildFormItemElement(item, classItem = "") {
+    if (this.isItemFullWidth(item.userInterface)) {
+      classItem += " input-full_width";
+    }
+    return index.h("div", { class: classItem }, fieldBuilder(item));
+  }
   render() {
     core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
     if (this.fields == undefined) {
       return;
     }
-    return (index.h(index.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 (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, value.map(fi => fieldBuilder(fi))));
+        return (index.h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, index.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 = index.h("div", { class: "form-view__content" }, nonArrayElements);
+    return (index.h(index.Host, null, groupedNonArrayElements, formContent));
   }
   get _element() { return index.getElement(this); }
 };