@sankhyalabs/ezui 6.1.0-dev.2 → 6.1.0-dev.21

package/dist/cjs/{search-column-1d3c9fa5.js → search-column-82c52e20.js}

@@ -1,8 +1,9 @@
 'use strict';
 
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
-const index = require('./index-9e5554cb.js');
+const ApplicationUtils = require('./ApplicationUtils-39807831.js');
+const index = require('./index-02854309.js');
+const index$1 = require('./index-a7b0c73d.js');
 
 const buildFieldMetadata = (descriptor, config) => {
   let { name, label, group } = Object.assign({}, config);
@@ -30,6 +31,7 @@ class RecordValidationProcessor {
     this._dataUnit = dataUnit;
     this._validationSource = validationSource;
     this._validator = validator;
+    this._i18n = index.getI18n();
   }
   validate(isSaving = true) {
     return new Promise((accept, reject) => {
@@ -72,12 +74,16 @@ class RecordValidationProcessor {
           invalidFields.push({ name: field, message: errorMessage });
         }
         else {
-          invalidFields.push({ name: field, message: "Essa informação é obrigatória" });
+          invalidFields.push({ name: field, message: this._i18n('utils.requiredField') });
         }
       }
     });
     if (invalidFields.length > 0) {
-      return { isValid: false, invalidFields, infoMessage: "Há pelo menos um campo obrigatório não preenchido." };
+      return {
+        isValid: false,
+        invalidFields,
+        infoMessage: this._i18n('utils.requiredFieldMessage')
+      };
     }
     return undefined;
   }
@@ -477,7 +483,7 @@ const SEARCH_FIELD_FULL_WIDTH = 240;
 const SEARCH_FIELD_MARGIN_BOTTOM = "0px";
 const SEARCH_FIELD_WIDTH = String(SEARCH_FIELD_FULL_WIDTH - 30) + "px";
 const buildFieldSearch = (action, optionLoader, onSelectField) => {
-  return index.h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
+  return index$1.h("ez-search", { class: 'ez-padding--small ez-margin--none', style: {
       "--ez-text-input__margin-bottom": SEARCH_FIELD_MARGIN_BOTTOM,
       "--ez-search--width": SEARCH_FIELD_WIDTH
     }, canShowError: false, showSelectedValue: false, showOptionValue: false, suppressEmptyOption: true, label: action.label, value: null, optionLoader: optionLoader, onEzChange: (evt) => onSelectField(evt.detail), ignoreLimitCharsToSearch: true });

package/dist/collection/collection-manifest.json

@@ -32,6 +32,7 @@
     "./components/ez-sortable-list/ez-sortable-list.js",
     "./components/ez-double-list/ez-double-list.js",
     "./components/ez-dropdown/ez-dropdown.js",
+    "./components/ez-empty-card/ez-empty-card.js",
     "./components/ez-file-item/ez-file-item.js",
     "./components/ez-filter-input/ez-filter-input.js",
     "./components/ez-form/ez-form.js",
@@ -48,6 +49,14 @@
     "./components/ez-popover-plus/ez-popover-plus.js",
     "./components/ez-popover-plus/subcomponent/ez-popover-core.js",
     "./components/ez-popup/ez-popup.js",
+    "./components/ez-rich-text/ez-rich-text.js",
+    "./components/ez-rich-text/ez-link-builder/ez-link-builder.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-arrows/ez-rich-toolbar-arrows.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-configs/ez-rich-toolbar-configs.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item/ez-rich-toolbar-item.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-letters/ez-rich-toolbar-letters.js",
+    "./components/ez-rich-text/ez-simple-image-uploader/ez-simple-image-uploader.js",
     "./components/ez-scroller/ez-scroller.js",
     "./components/ez-search/subcomponent/search-list/search-list.js",
     "./components/ez-search-plus/ez-search-plus.js",
@@ -59,6 +68,7 @@
     "./components/ez-split-panel/ez-split-panel.js",
     "./components/ez-split-panel/structure/item/ez-split-item.js",
     "./components/ez-text-area/ez-text-area.js",
+    "./components/ez-tile/ez-tile.js",
     "./components/ez-time-input/ez-time-input.js",
     "./components/ez-toast/ez-toast.js",
     "./components/ez-tooltip/ez-tooltip.js",
@@ -77,6 +87,11 @@
         "ez-application"
       ]
     },
+    {
+      "components": [
+        "ez-avatar"
+      ]
+    },
     {
       "components": [
         "ez-button"
@@ -87,6 +102,11 @@
         "ez-calendar"
       ]
     },
+    {
+      "components": [
+        "ez-empty-card"
+      ]
+    },
     {
       "components": [
         "ez-check"
@@ -182,6 +202,11 @@
         "ez-text-input"
       ]
     },
+    {
+      "components": [
+        "ez-tile"
+      ]
+    },
     {
       "components": [
         "ez-time-input"
@@ -207,5 +232,6 @@
         "ez-search-result-list"
       ]
     }
-  ]
+  ],
+  "global": "./global/app-init.js"
 }

package/dist/collection/components/ez-alert-list/ez-alert-list.js

@@ -1,5 +1,6 @@
 import { ElementIDUtils, FloatingManager } from '@sankhyalabs/core';
 import { Host, h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
 export class EzAlertList {
   constructor() {
     this._container = undefined;
@@ -122,14 +123,15 @@ export class EzAlertList {
       this._container.focus();
     }
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+    this.i18n = await initI18n();
   }
   render() {
     return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
-      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `${this.i18n('app.alerts')} (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
           this.opened = false;
-        }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
+        }, title: this.i18n('app.close') }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
           return (h("a", { onClick: this.getLinkActionClick(item), style: {
               fontFamily: "var(--font-pattern, 'Roboto')",
               fontSize: 'var(--text--medium, 14px)',

package/dist/collection/components/ez-avatar/ez-avatar.js

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
 export class EzAvatar {
   constructor() {
     this.DECIMAL_PARSE_BASE = 10;
@@ -30,9 +31,12 @@ export class EzAvatar {
     }
     return h("ez-icon", { class: "avatar-icon", iconName: "account-outline", fontSize: this.calcFontSize() });
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
     if (this.isInteractive) {
-      return (h("button", { "aria-label": "Perfil", class: this.getClass() }, this.renderAvatarContent()));
+      return (h("button", { "aria-label": this.i18n("app.profile"), class: this.getClass() }, this.renderAvatarContent()));
     }
     return (h("figure", { class: this.getClass() }, this.renderAvatarContent()));
   }

package/dist/collection/components/ez-calendar/ez-calendar.js

@@ -1,11 +1,9 @@
 import { FloatingManager } from "@sankhyalabs/core";
 import { forceUpdate, h } from "@stencil/core";
+import initI18n from "../../utils/i18n";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
-    this._todayLabel = "Hoje";
-    this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
-    this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
     this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
     this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
     this.value = new Date();
@@ -82,7 +80,7 @@ export class EzCalendar {
     return this._hostElem.dataset.isFixed === "true";
   }
   getMonthLabel() {
-    return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
+    return this.i18n(`ez-calendar.month.${this._currentPosition.getMonth()}`) + " " + this._currentPosition.getFullYear();
   }
   isSelectedDate(d) {
     if (this.value) {
@@ -142,6 +140,9 @@ export class EzCalendar {
       }
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidRender() {
     if (this.floating && this._firstRender) {
       this._calendarHeight = this._box.clientHeight;
@@ -179,7 +180,7 @@ export class EzCalendar {
     const firstDate = new Date();
     firstDate.setTime(this._currentPosition.getTime());
     firstDate.setDate(1 - firstDate.getDay());
-    return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { "data-day": day, class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
+    return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, [...Array(7).keys()].map(day => h("div", { "data-day": this.i18n(`ez-calendar.weekDay.${day}`), class: "calendar__cell calendar__cell--unselectable" }, this.i18n(`ez-calendar.weekDay.${day}`)))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
       const date = new Date();
       date.setTime(firstDate.getTime());
       date.setDate(date.getDate() + offset + index);
@@ -192,7 +193,7 @@ export class EzCalendar {
         classNames += " calendar__cell--selected";
       }
       return h("div", { "data-day-month": dataDayMonth, class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
-    })))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
+    })))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this.i18n('ez-calendar.today')))), (this.time || this.showSeconds) &&
       h("div", { class: "calendar-time" }, h("div", { class: "calendar-time__header" }, h("div", null, "H"), h("div", { class: "separatorTime" }, ":"), h("div", null, "M"), this.showSeconds &&
         h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
         h("div", null, "S")), h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {

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

@@ -351,7 +351,7 @@ input.switch-mode:checked:disabled::after {
   font-family: var(--ez-check--label--font-family);
   cursor: default;
   width: inherit;
-  display: flex;
+  display: block;
   align-content: center;
   gap: var(--space--small);
 }

package/dist/collection/components/ez-chip/ez-chip.js

@@ -8,6 +8,7 @@ export class EzChip {
     this.mode = undefined;
     this.value = false;
     this.showNativeTooltip = true;
+    this.disableAutoUpdateValue = false;
   }
   //---------------------------------------------
   // Public methods
@@ -42,7 +43,7 @@ export class EzChip {
       return;
     if (this.mode === "action")
       return this.actionClick.emit();
-    if (target.tagName.toLowerCase() !== "ez-icon")
+    if (target.tagName.toLowerCase() !== "ez-icon" && !this.disableAutoUpdateValue)
       return this.handleValueChange();
     if (target.classList.contains("btn-close"))
       return this.removeChip.emit();
@@ -208,6 +209,24 @@ export class EzChip {
         "attribute": "show-native-tooltip",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "disableAutoUpdateValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Desabilita a altera\u00E7\u00E3o da propriedade value ao clicar."
+        },
+        "attribute": "disable-auto-update-value",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -48,6 +48,7 @@ ez-icon {
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
 }
 
 

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { ApplicationUtils } from "../../utils";
+import initI18n from '../../utils/i18n';
 export class EzCollapsibleBox {
   constructor() {
     this._activeEditText = false;
@@ -58,14 +59,13 @@ export class EzCollapsibleBox {
     this._activeEditText = true;
     this.ezEditLabelMode.emit(this._activeEditText);
   }
-  confirmRemove(evt) {
+  async confirmRemove(evt) {
     evt.stopPropagation();
-    ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
-      .then((canRemove) => {
-      if (canRemove) {
-        this.removeElement();
-      }
-    });
+    const confirmMessage = this.i18n("ez-collapsible-box.confirmRemove", { label: this.label });
+    const canRemove = await ApplicationUtils.confirm(this.i18n("app.warning"), confirmMessage);
+    if (canRemove) {
+      this.removeElement();
+    }
   }
   saveEditionText(editDetails) {
     const { value, newValue } = editDetails.detail;
@@ -95,6 +95,9 @@ export class EzCollapsibleBox {
     };
     return styledLabel;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._hostElement);
   }
@@ -103,8 +106,8 @@ export class EzCollapsibleBox {
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
         (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
       h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
-        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
-        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
+        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: this.i18n("app.edit") }), this.removable &&
+        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: this.i18n("app.remove") })) :
       h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() })), h("slot", { name: "rightSlot" })), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, this.subtitle &&
       h("div", { class: "subtitle-box__content" }, h("label", { class: "subtitle-box__label", title: this.subtitle }, h("span", null, this.subtitle))), h("slot", null))));
   }

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 import { ElementIDUtils } from "@sankhyalabs/core";
+import initI18n from '../../../utils/i18n';
 export class EzComboBoxList {
   constructor() {
     this.showLoading = undefined;
     this.visibleOptions = undefined;
-    this.textEmptyList = "Nenhum resultado encontrado";
+    this.textEmptyList = undefined;
     this.showOptionValue = undefined;
     this.preSelection = undefined;
     this.maxWidth = undefined;
@@ -126,6 +127,9 @@ export class EzComboBoxList {
       });
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     this._listWrapper.style.width = `${this.width}px`;
     this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
@@ -137,7 +141,7 @@ export class EzComboBoxList {
     });
   }
   render() {
-    return (h("section", { class: "list-container" }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading && this.visibleOptions.length === 0 && (h("div", { class: "message" }, h("span", { class: "message__no-result" }, this.textEmptyList))), this.showLoading && (h("div", { class: "message" }, h("div", { class: "message__loading" }))), this.showOptionValue && (h("span", { class: "item__value item__value--hidden" })), !this.showLoading && this.visibleOptions.length > 0 &&
+    return (h("section", { class: "list-container" }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading && this.visibleOptions.length === 0 && (h("div", { class: "message" }, h("span", { class: "message__no-result" }, this.textEmptyList || this.i18n("ez-combo-box.noResults")))), this.showLoading && (h("div", { class: "message" }, h("div", { class: "message__loading" }))), this.showOptionValue && (h("span", { class: "item__value item__value--hidden" })), !this.showLoading && this.visibleOptions.length > 0 &&
       this.visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
   }
   static get is() { return "ez-combo-box-list"; }
@@ -221,8 +225,7 @@ export class EzComboBoxList {
           "text": "Mensagem exibida quando a lista de op\u00E7\u00F5es est\u00E1 vazia."
         },
         "attribute": "text-empty-list",
-        "reflect": false,
-        "defaultValue": "\"Nenhum resultado encontrado\""
+        "reflect": false
       },
       "showOptionValue": {
         "type": "boolean",

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

@@ -1,13 +1,13 @@
 import { ElementIDUtils, ObjectUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 import { CSSVarsUtils } from "../../utils";
+import initI18n from '../../utils/i18n';
 export class EzComboBox {
   constructor() {
     this._changeDeboucingTimeout = null;
     this._deboucingTime = 300;
     this._maxWidthValue = 0;
     this._tabPressed = false;
-    this._textEmptyList = "Nenhum resultado encontrado";
     this._lookupMode = false;
     this.isOpen = false;
     this._preSelection = undefined;
@@ -33,8 +33,9 @@ export class EzComboBox {
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
     this.autoFocus = false;
+    this.preventAutoFocus = false;
     this.alternativePlaceholder = undefined;
-    this.textEmptyOption = "Selecione um item";
+    this.textEmptyOption = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -83,13 +84,13 @@ export class EzComboBox {
   */
   async getValueAsync() {
     if (!this._showLoading) {
-      return new Promise(resolve => resolve(this.value));
+      return new Promise(resolve => resolve(this.sanitizeValue(this.value)));
     }
     return new Promise(resolve => {
       let id = setInterval(() => {
         if (!this._showLoading) {
           clearInterval(id);
-          resolve(this.value);
+          resolve(this.sanitizeValue(this.value));
         }
       }, 100);
     });
@@ -135,7 +136,7 @@ export class EzComboBox {
     return currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
   }
   getText() {
-    const currentValue = this.getSelectedOption(this.value);
+    const currentValue = this.getSelectedOption(this.sanitizeValue(this.value));
     const text = this.getFormattedText(currentValue);
     if (text == undefined) {
       return;
@@ -159,7 +160,7 @@ export class EzComboBox {
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
     if (this.hasToAddEmptyoption(opts)) {
-      opts = [{ value: undefined, label: this.textEmptyOption }].concat(opts);
+      opts = [{ value: undefined, label: this.textEmptyOption || this.i18n("ez-combo-box.placeholder") }].concat(opts);
     }
     this._visibleOptions = opts;
     this._maxWidthValue = this.getMaxWidthValue();
@@ -204,7 +205,8 @@ export class EzComboBox {
     this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
-    await this.setFocus();
+    if (!this.preventAutoFocus)
+      await this.setFocus();
   }
   hideOptions() {
     var _a;
@@ -266,7 +268,7 @@ export class EzComboBox {
     }
   }
   cancelPreselection() {
-    if (!this._textInput.value && this.value) {
+    if (!this._textInput.value && this.sanitizeValue(this.value)) {
       this.selectOption(undefined);
     }
     else {
@@ -293,10 +295,17 @@ export class EzComboBox {
     this._preSelection = undefined;
     this.updateVisibleOptions();
   }
+  sanitizeValue(value) {
+    if (value === "undefined" || value === "null") {
+      return undefined;
+    }
+    return value;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     if (this.options === undefined) {
       this.options = [];
       const optionsTags = this.el.querySelectorAll("option");
@@ -314,9 +323,7 @@ export class EzComboBox {
     }
     this.loadOptions(SearchMode.PRELOAD);
   }
-  componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
-    this.setInputValue(false);
+  setResizeObserver() {
     this._resizeObserver = new ResizeObserver((entries) => {
       window.requestAnimationFrame(() => {
         if (!Array.isArray(entries) || !entries.length)
@@ -329,6 +336,16 @@ export class EzComboBox {
         this._comboBoxList.width = textInputWidth;
       });
     });
+  }
+  connectedCallback() {
+    if (!this._resizeObserver) {
+      this.setResizeObserver();
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
+    this.setInputValue(false);
+    this.setResizeObserver();
     if (this.autoFocus) {
       requestAnimationFrame(() => {
         this.setFocus({ selectText: true });
@@ -340,6 +357,7 @@ export class EzComboBox {
     (_a = this._popover) === null || _a === void 0 ? void 0 : _a.remove();
     if (this._resizeObserver) {
       this._resizeObserver.disconnect();
+      this._resizeObserver = null;
     }
   }
   //---------------------------------------------
@@ -439,7 +457,7 @@ export class EzComboBox {
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${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, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${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, alternativePlaceholder: this.alternativePlaceholder || this.i18n("ez-combo-box.placeholder") }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-combo-box.noResults"), showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
   }
   static get is() { return "ez-combo-box"; }
   static get encapsulation() { return "shadow"; }
@@ -795,6 +813,24 @@ export class EzComboBox {
         "reflect": false,
         "defaultValue": "false"
       },
+      "preventAutoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, impede que o campo de texto receba foco automaticamente ao abrir as op\u00E7\u00F5es."
+        },
+        "attribute": "prevent-auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "alternativePlaceholder": {
         "type": "string",
         "mutable": false,
@@ -827,8 +863,7 @@ export class EzComboBox {
           "text": "Texto a ser apresentado na op\u00E7\u00E3o de valor nulo."
         },
         "attribute": "text-empty-option",
-        "reflect": false,
-        "defaultValue": "\"Selecione um item\""
+        "reflect": false
       }
     };
   }

package/dist/collection/components/ez-date-input/ez-date-input.js

@@ -1,6 +1,7 @@
 import { Host, h } from '@stencil/core';
 import { DateUtils, ElementIDUtils } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
+import initI18n from '../../utils/i18n';
 export class EzDateInput {
   constructor() {
     this._changePending = false;
@@ -117,7 +118,7 @@ export class EzDateInput {
       else {
         this.changeValue(undefined);
         this.ezCancelWaitingChange.emit();
-        this.errorMessage = "O valor digitado não é uma data válida";
+        this.errorMessage = this.i18n("ez-date-input.invalidDate");
       }
     }
     finally {
@@ -153,6 +154,9 @@ export class EzDateInput {
   disconnectedCallback() {
     this._popover.hide();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();

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

@@ -1,6 +1,7 @@
 import { Host, h } from '@stencil/core';
 import { DateUtils, ElementIDUtils, TimeFormatter } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
+import initI18n from '../../utils/i18n';
 export class EzDateTimeInput {
   constructor() {
     this._changePending = false;
@@ -166,7 +167,7 @@ export class EzDateTimeInput {
       else {
         this.changeValue(undefined);
         this.ezCancelWaitingChange.emit();
-        this.errorMessage = "O valor digitado não é uma data válida";
+        this.errorMessage = this.i18n("ez-date-time-input.invalidDate");
       }
     }
     finally {
@@ -204,6 +205,9 @@ export class EzDateTimeInput {
   disconnectedCallback() {
     this._popover.hide();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();