@sankhyalabs/ezui 6.2.1 → 6.3.0-dev.2

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const ezListHelper = require('./ezListHelper-0d3970b4.js');
+const index$1 = require('./index-425b1f67.js');
 
 function moveItems(selectedItemsList, itemsList, foward) {
   if (!selectedItemsList.length)
@@ -129,6 +130,9 @@ const EzDoubleList = class {
       return;
     this.ezRightListChanged.emit(newValue);
   }
+  async componentWillLoad() {
+    this.i18n = await index$1.initI18n();
+  }
   async handleChangeLeft({ detail }) {
     if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.RIGHT_LIST_ID) {
       this.leftList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
@@ -305,7 +309,9 @@ const EzDoubleList = class {
         title: this.leftTitle,
         isFiltering: this.isFilteringLeft,
         filteredList: this.leftFilteredList,
-        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST) ? this.emptyMessage.LEFT_LIST : `Nenhum ${this.entityLabel} disponível`,
+        emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST)
+          ? this.emptyMessage.LEFT_LIST
+          : this.i18n("ez-double-list.noItemsAvailable", { entity: this.entityLabel }),
         slotConfig: {
           itemRightSlotBuilder: (_c = (_b = this.slotsListBuilder) === null || _b === void 0 ? void 0 : _b.LEFT_LIST) === null || _c === void 0 ? void 0 : _c.itemRightSlotBuilder,
           itemLeftSlotBuilder: (_e = (_d = this.slotsListBuilder) === null || _d === void 0 ? void 0 : _d.LEFT_LIST) === null || _e === void 0 ? void 0 : _e.itemLeftSlotBuilder,
@@ -318,13 +324,15 @@ const EzDoubleList = class {
           onChoose: this.handleChooseLeft.bind(this),
         },
       })), !this.useOnlyRightList &&
-      index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferAllToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: `Mover para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: `Mover para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferToLeft.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), index.h("div", { class: "list__container" }, this.rightList && this.renderList({
+      index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: this.i18n("ez-double-list.moveAllTo", { list: this.rightListLabel }), size: "small", onClick: this.handleTransferAllToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: this.i18n("ez-double-list.moveTo", { list: this.rightListLabel }), size: "small", onClick: this.handleTransferToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: this.i18n("ez-double-list.moveTo", { list: this.leftListLabel }), size: "small", onClick: this.handleTransferToLeft.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: this.i18n("ez-double-list.moveAllTo", { list: this.leftListLabel }), size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), index.h("div", { class: "list__container" }, this.rightList && this.renderList({
       idSortableList: this.RIGHT_LIST_ID,
       list: this.rightList,
       title: this.rightTitle,
       isFiltering: this.isFilteringRight,
       filteredList: this.rightFilteredList,
-      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST) ? this.emptyMessage.RIGHT_LIST : `Nenhum ${this.entityLabel} selecionado`,
+      emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST)
+        ? this.emptyMessage.RIGHT_LIST
+        : this.i18n("ez-double-list.noItemsSelected", { entity: this.entityLabel }),
       slotConfig: {
         itemRightSlotBuilder: (_h = (_g = this.slotsListBuilder) === null || _g === void 0 ? void 0 : _g.RIGHT_LIST) === null || _h === void 0 ? void 0 : _h.itemRightSlotBuilder,
         itemLeftSlotBuilder: (_k = (_j = this.slotsListBuilder) === null || _j === void 0 ? void 0 : _j.RIGHT_LIST) === null || _k === void 0 ? void 0 : _k.itemLeftSlotBuilder,
@@ -336,7 +344,7 @@ const EzDoubleList = class {
         onDoubleClick: this.handleTransferToLeft.bind(this),
         onChoose: this.handleChooseRight.bind(this),
       },
-    })), index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: "Mover para primeira posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToTop.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: "Mover para cima", size: "small", onClick: this.handleMoveUp.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: "Mover para baixo", size: "small", onClick: this.handleMoveDown.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: "Mover para \u00FAltima posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
+    })), index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: this.i18n("ez-double-list.moveToFirstPosition"), size: "small", onClick: this.handleMoveToTop.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: this.i18n("ez-double-list.moveUp"), size: "small", onClick: this.handleMoveUp.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: this.i18n("ez-double-list.moveDown"), size: "small", onClick: this.handleMoveDown.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: this.i18n("ez-double-list.moveToLastPosition"), size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
   }
   static get watchers() { return {
     "leftList": ["observeLeftList"],

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
+const index$1 = require('./index-425b1f67.js');
 
 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)}";
 
@@ -20,7 +21,7 @@ const EzFileItem = class {
   }
   observeProgress(newProgress) {
     if (newProgress < 0 || newProgress > 100) {
-      throw new Error("O progresso de upload deve ser um número entre 0 e 100.");
+      throw new Error(this.i18n("ez-file-item.invalidProgress"));
     }
     this._element.style.setProperty("--ez-file-item--upload-progress", `${100 - newProgress}%`);
   }
@@ -41,14 +42,16 @@ const EzFileItem = class {
     }
     return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
   }
+  async componentWillLoad() {
+    this.i18n = await index$1.initI18n();
+  }
   render() {
     this._element.title = `${this.fileName} ${this.getFileSize()}`;
     core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
-    return (index.h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, index.h("div", { class: "content" }, index.h("ez-icon", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), index.h("label", { class: "file-name" }, this.fileName), index.h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ?
-      index.h("ez-icon", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", onClick: evt => {
-          this.ezRemove.emit(this.fileName);
-          evt.stopPropagation();
-        } }) : undefined));
+    return (index.h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, index.h("div", { class: "content" }, index.h("ez-icon", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), index.h("label", { class: "file-name" }, this.fileName), index.h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ? (index.h("ez-icon", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", title: this.i18n("app.remove"), onClick: evt => {
+        this.ezRemove.emit(this.fileName);
+        evt.stopPropagation();
+      } })) : undefined));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -0,0 +1,129 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
+
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+const EzFilterInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.ezSearching = index.createEvent(this, "ezSearching", 7);
+    this.ezFocusIn = index.createEvent(this, "ezFocusIn", 7);
+    this._searchingText = "";
+    this.handleFocus = () => {
+      if (this._searchingText === "") {
+        this._textInput.value = "";
+      }
+      else {
+        this._textInput.value = this._searchingText;
+      }
+      this.ezFocusIn.emit();
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.asyncSearch = false;
+    this.canShowError = true;
+    this.autoFocus = false;
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    this._textInput.setFocus(options);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /**
+   * Método responsável por setar um novo valor ao campo.
+   */
+  async setValue(newValue) {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this._searchingText = "";
+    }
+    else {
+      this._textInput.value = newValue;
+    }
+  }
+  /**
+   * Método responsável por resetar o valor do campo para o ultimo valor inputado.
+   */
+  async endSearch() {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (this._textInput.value !== this.value) {
+      this._textInput.value = this.value;
+    }
+  }
+  handleChange(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (this.asyncSearch) {
+      this._searchingText = newValue;
+      this.ezSearching.emit(newValue);
+    }
+    else if (newValue !== this.value) {
+      this.value = newValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  render() {
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"]
+  }; }
+};
+EzFilterInput.style = ezFilterInputCss;
+
+exports.ez_filter_input = EzFilterInput;

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const constants = require('./constants-569271bc.js');
 const CheckMode = require('./CheckMode-ecb90b87.js');
+const index$1 = require('./index-425b1f67.js');
 
 const buildSwitch = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, true);
@@ -99,6 +99,11 @@ const buildSearch = ({ name, label, readOnly, required, contextName, canShowErro
     index.h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };
 
+const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+  return (index.h("div", { class: "ez-col ez-col--sd-12" },
+    index.h("ez-rich-text", { key: name, enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
+};
+
 const uiBuilders = new Map();
 uiBuilders.set(core.UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(core.UserInterface.SWITCH, buildSwitch);
@@ -113,9 +118,11 @@ uiBuilders.set(core.UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(core.UserInterface.SEARCH, buildSearch);
 uiBuilders.set(core.UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(core.UserInterface.LONGTEXT, buildTextArea);
+uiBuilders.set(core.UserInterface.HTML, buildRichText);
 const fieldBuilder = (field) => {
+  const i18n = index$1.getI18n();
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
-  const label = field.required ? `${field.label}${constants.REQUIRED_INFO}` : field.label;
+  const label = field.required ? `${field.label}${i18n("app.requiredInfo")}` : field.label;
   const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
   //@ts-ignore
   builtElement.$attrs$['data-form-item'] = field.name;
@@ -220,7 +227,8 @@ const EzFormView = class {
   isItemFullWidth(userInterface) {
     return [
       core.UserInterface.FILE,
-      core.UserInterface.LONGTEXT
+      core.UserInterface.LONGTEXT,
+      core.UserInterface.HTML,
     ].includes(userInterface);
   }
   buildFormItemElement(item, classItem = "") {

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a7b0c73d.js');
+const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const searchColumn = require('./search-column-27d1f72f.js');
+const searchColumn = require('./search-column-78dd20d5.js');
+const index = require('./index-425b1f67.js');
 const FormLayout = require('./FormLayout-18853e70.js');
-require('./ApplicationUtils-c9d1205c.js');
+require('./ApplicationUtils-6a76ac09.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 
@@ -157,11 +158,12 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
       });
     }
   }
+  const i18n = index.getI18n();
   Array.from(sheets.entries())
     .sort(sortTabs)
     .forEach(([key, fields]) => {
     metadata.addSheet({
-      label: (key.label === "__main") ? "Principal" : key.label,
+      label: (key.label === "__main") ? i18n("ez-form.mainTab") : key.label,
       name: key.name || key.label,
       fields
     });
@@ -556,11 +558,11 @@ const ezFormCss = ".sc-ez-form-h{display:flex;flex-direction:column;width:100%}.
 
 const EzForm = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezFormRequestClearFieldToFocus = index.createEvent(this, "ezFormRequestClearFieldToFocus", 7);
-    this.ezFormSetFields = index.createEvent(this, "ezFormSetFields", 7);
-    this.ezReady = index.createEvent(this, "ezReady", 7);
-    this.formItemsReady = index.createEvent(this, "formItemsReady", 7);
+    index$1.registerInstance(this, hostRef);
+    this.ezFormRequestClearFieldToFocus = index$1.createEvent(this, "ezFormRequestClearFieldToFocus", 7);
+    this.ezFormSetFields = index$1.createEvent(this, "ezFormSetFields", 7);
+    this.ezReady = index$1.createEvent(this, "ezReady", 7);
+    this.formItemsReady = index$1.createEvent(this, "formItemsReady", 7);
     this._customEditors = new Map();
     this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.onDataUnitAction = (action) => {
@@ -622,7 +624,7 @@ const EzForm = class {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
       const idTabSelector = `selector`;
-      result.push(index.h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
+      result.push(index$1.h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
     result = result.concat(this.buildFormContent(currentSheet));
     return result;
@@ -634,7 +636,7 @@ const EzForm = class {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${core.StringUtils.replaceAccentuatedChars(core.StringUtils.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (index.h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, index.h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), index.h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
+    return (index$1.h("div", { class: "dynamic-content ez-box--no-outline", "data-element-id": idFormSheet, ref: elem => (this._container = elem), tabindex: "0" }, index$1.h("ez-popover", { ref: elem => (this._ezPopoverSearchField = elem), overlayType: "none" }, this.renderFieldColumn()), index$1.h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
   }
   renderFieldColumn() {
     if (this._fieldSearch != undefined) {
@@ -642,7 +644,7 @@ const EzForm = class {
     }
     this._fieldSearch = searchColumn.buildFieldSearch({
       value: core.StringUtils.generateUUID(),
-      label: searchColumn.LABEL_SEARCH_FIELD,
+      label: this._i18n("ez-form.labelSearchField"),
     }, ({ argument }) => this.fieldsOptionLoader(argument), (option) => this.onSelectField(option));
     return this._fieldSearch;
   }
@@ -679,7 +681,7 @@ const EzForm = class {
         const container = this._container.getBoundingClientRect();
         await searchColumn.focusOnFieldSerch(this._fieldSearch);
         this._ezPopoverSearchField.showUnder(this._container, { horizontalGap: container.width - (searchColumn.SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
-      }, { description: searchColumn.LABEL_SEARCH_FIELD, element: (_b = this.elementFocusSearchField) !== null && _b !== void 0 ? _b : this._element });
+      }, { description: this._i18n("ez-form.labelSearchField"), element: (_b = this.elementFocusSearchField) !== null && _b !== void 0 ? _b : this._element });
     }
   }
   componentDidLoad() {
@@ -707,7 +709,7 @@ const EzForm = class {
     this.dataUnit.subscribe(this.onDataUnitAction);
     this._dataBinder = new searchColumn.DataBinder(this.dataUnit);
     this._store = createStore(formReducer);
-    this._store.subscribe(() => index.forceUpdate(this));
+    this._store.subscribe(() => index$1.forceUpdate(this));
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
@@ -715,6 +717,7 @@ const EzForm = class {
     const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
     this.setSingleColumn(layoutFormConfig);
     this.registerNotifyListeners(layoutFormConfig);
+    this._i18n = await index.initI18n();
   }
   async setSingleColumn(layoutFormConfig) {
     if (!(layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config)) {
@@ -793,9 +796,9 @@ const EzForm = class {
     return tabs;
   }
   render() {
-    return (index.h(index.Host, null, this.isStatic() ? null : this.getDynamicContent()));
+    return (index$1.h(index$1.Host, null, this.isStatic() ? null : this.getDynamicContent()));
   }
-  get _element() { return index.getElement(this); }
+  get _element() { return index$1.getElement(this); }
   static get watchers() { return {
     "config": ["observeConfig"]
   }; }