@sankhyalabs/ezui 5.20.4 → 5.21.0-dev.2

package/dist/cjs/ez-chip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 const ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary)}.lbl{display:flex;white-space:nowrap;align-items:center;cursor:pointer;user-select:none;color:var(--ez-label-chip__label--title--primary);height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size);font-weight:var(--ez-label-chip__label--font-weight)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);outline-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container:focus{outline:var(--border--medium) var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
-const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
+require('./ApplicationUtils-c9d1205c.js');
+const CSSVarsUtils = require('./CSSVarsUtils-10c9d5b4.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const constants = require('./constants-2714478b.js');
 
 const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box__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)}}";
 
@@ -21,7 +20,6 @@ const EzComboBox = class {
     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;
@@ -34,7 +32,6 @@ const EzComboBox = class {
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
-    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -58,7 +55,7 @@ const EzComboBox = class {
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
       try {
-        if (this.searchMode && typeof newValue === "string") {
+        if (typeof newValue === "string") {
           this.setInputValue();
           return;
         }
@@ -83,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);
   }
@@ -221,18 +218,19 @@ const EzComboBox = class {
   }
   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) {
@@ -296,7 +294,7 @@ const EzComboBox = class {
     return this._floatingID !== undefined && core.FloatingManager.isFloating(this._floatingID);
   }
   nextOption() {
-    if (this.searchMode && !this.isOptionsVisible()) {
+    if (!this.isOptionsVisible()) {
       return;
     }
     this.showOptions();
@@ -319,9 +317,6 @@ const EzComboBox = class {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
-    else {
-      this.controlListWithOnlyOne();
-    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -340,7 +335,6 @@ const EzComboBox = class {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
-          this.controlEmptySearch();
         }
       }
       else {
@@ -348,10 +342,6 @@ const EzComboBox = class {
       }
     }
   }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -363,10 +353,6 @@ const EzComboBox = class {
     else {
       this.resetOptions();
     }
-    if (this.searchMode) {
-      this._visibleOptions = [];
-      this.clearSource();
-    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -402,93 +388,6 @@ const EzComboBox = class {
   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.ApplicationUtils.info(this._textEmptyList);
-      }
-      else {
-        this.controlListWithOnlyOne();
-      }
-    }
-  }
-  validateDescriptionValue() {
-    if (!this.searchMode || core.StringUtils.isEmpty(this.value)) {
-      return;
-    }
-    let value = this.value;
-    if (typeof value === "object") {
-      return;
-    }
-    if (core.StringUtils.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.ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
-  }
-  getFieldLabel() {
-    var _a;
-    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(constants.REQUIRED_INFO, "").toUpperCase();
-  }
   resetOptions() {
     this.hideOptions();
     this._criteria = undefined;
@@ -514,12 +413,7 @@ const EzComboBox = class {
         });
       }
     }
-    if (this.searchMode) {
-      this.updateSource([]);
-    }
-    else {
-      this.loadOptions(SearchMode.PRELOAD);
-    }
+    this.loadOptions(SearchMode.PRELOAD);
   }
   componentDidRender() {
     var _a;
@@ -529,7 +423,6 @@ const EzComboBox = class {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       core.ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
     });
-    this.validateDescriptionValue();
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
@@ -549,13 +442,7 @@ const EzComboBox = class {
   // 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;
@@ -572,36 +459,12 @@ const EzComboBox = class {
     }
     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() {
@@ -611,9 +474,7 @@ const EzComboBox = class {
     }
   }
   onTextInputClickHandler() {
-    if (!this.searchMode) {
-      this.showOptions();
-    }
+    this.showOptions();
   }
   keyDownHandler(event) {
     this._tabPressed = false;
@@ -645,7 +506,6 @@ const EzComboBox = class {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -662,11 +522,8 @@ const EzComboBox = class {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   render() {
-    var _a;
     core.ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.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)
-      ? index.h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, index.h("ez-icon", { iconName: "close" }))
-      : undefined), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.h("ez-icon", { iconName: "chevron-down" }))), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
       && this._visibleOptions.length === 0
       && index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
       && index.h("div", { class: "message" }, index.h("div", { class: "message__loading" })), this.showOptionValue

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+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)}";
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+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)}";
 

package/dist/cjs/ez-dialog.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const DialogType = require('./DialogType-2114c337.js');
 const core = require('@sankhyalabs/core');
 

package/dist/cjs/ez-dropdown.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 const DropdownItem = ({ item, hasIcon, hasChildren, isLockedLevels, onSubActionClick }) => {
@@ -286,6 +286,7 @@ const EzDropdown = class {
     index.registerInstance(this, hostRef);
     this.ezClick = index.createEvent(this, "ezClick", 7);
     this.ezSubActionClick = index.createEvent(this, "ezSubActionClick", 7);
+    this.ezOutsideClick = index.createEvent(this, "ezOutsideClick", 7);
     this._itemList = {};
     this._submenuList = [];
     this._openedMenuList = {};
@@ -298,6 +299,11 @@ const EzDropdown = class {
     this.value = undefined;
     this.itemBuilder = undefined;
   }
+  handleClickOutside(event) {
+    if (!this._element.contains(event.target)) {
+      this.ezOutsideClick.emit();
+    }
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
@@ -376,13 +382,13 @@ const EzDropdown = class {
       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 (index.h("div", { class: "ez-dropdown__item-builder" }, customContent));
@@ -403,7 +409,7 @@ const EzDropdown = class {
       var _a;
       return (item.type !== "divider"
         ? index.h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), index.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 &&

package/dist/cjs/ez-file-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
 const ezFileItemCss = ":host{display:flex;width:100%;--ez-file-item--height:42px;--ez-file-item--padding:9px;--ez-file-item--border-radius:var(--border--radius-medium, 12px);--ez-file-item--border-color:var(--color--strokes, #DCE0E8);--ez-file-item--border-style:var(--border--small, 1px solid);--ez-file-item--font-family:var(--font-pattern, Arial);--ez-file-item--font-size:var(--text--medium, 14px);--ez-file-item--font-weight:var(--text-weight--medium, 400);--ez-file-item--color:var(--title--primary, #2B3A54);--ez-file-item__file-size--font-weight:var(--text-weight--large, 600);--ez-file-item__file-size--color:var(--color--primary, #008561);--ez-file-item__background-progress--color:var(--color--primary-300, E2F4EF);--ez-file-item--icon-color:var(--title--primary, #2B3A54)}.box{display:flex;box-sizing:border-box;position:relative;align-items:center;justify-content:space-between;width:100%;padding:var(--ez-file-item--padding);border:var(--ez-file-item--border-color) var(--ez-file-item--border-style);border-radius:var(--ez-file-item--border-radius);height:var(--ez-file-item--height)}.box::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));background-color:var(--ez-file-item__background-progress--color)}.content{display:flex;align-items:center;z-index:0;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item--font-weight);color:var(--ez-file-item--color)}.file-type-icon{flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color);padding-right:var(--ez-file-item--padding)}.file-size{padding-left:2px;overflow:hidden;flex-shrink:0;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item__file-size--font-weight);color:var(--ez-file-item__file-size--color)}.btn-remove{cursor:pointer;flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color)}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const constants = require('./constants-2714478b.js');
 const CheckMode = require('./CheckMode-ecb90b87.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); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1064511f.js');
+const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const RecordValidationProcessor = require('./RecordValidationProcessor-4c893e04.js');
 require('./ApplicationUtils-c9d1205c.js');