@sankhyalabs/ezui 6.4.2 → 6.5.0-dev.1

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;
@@ -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;
@@ -302,7 +304,8 @@ export class EzComboBox {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     if (this.options === undefined) {
       this.options = [];
       const optionsTags = this.el.querySelectorAll("option");
@@ -454,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, "data-element-id": this.el.getAttribute("data-element-id") }, 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, "data-element-id": this.el.getAttribute("data-element-id") }, 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"; }
@@ -810,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,
@@ -842,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();

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

@@ -2,6 +2,7 @@ import { h, forceUpdate, } from '@stencil/core';
 import { DialogType } from "./DialogType";
 import { ElementIDUtils, FloatingManager, KeyboardManager } from "@sankhyalabs/core";
 import FocusResolver from '../../utils/FocusResolver';
+import initI18n from '../../utils/i18n';
 class Message {
   constructor(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack, beforeClose) {
     this.title = title;
@@ -19,8 +20,6 @@ class Message {
 export class EzDialog {
   constructor() {
     this.PRIMARY_BUTTON_ID = "EZ_DIALOG_PRIMARY_BUTTON";
-    this.labelConfirm = 'Sim';
-    this.labelCancel = 'Não';
     this.btnConfirmDanger = false;
     this._messageQueue = [];
     this._canFocusOnPrimaryBtn = false;
@@ -137,6 +136,9 @@ export class EzDialog {
   getClassTitleLabel(message) {
     return this.getIconElement(message) == undefined ? "title title__label title__label--no-icon" : "title title__label";
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentWillRender() {
     if (!this._currentMessage) {
       if (this._messageQueue.length > 0) {
@@ -144,7 +146,7 @@ export class EzDialog {
       }
       else {
         if (this.opened) {
-          this._currentMessage = new Message(this.ezTitle, this.message, this.dialogType, this.confirm, this.personalizedIconPath, this.labelCancel, this.labelConfirm, this.btnConfirmDanger, null, this.beforeClose);
+          this._currentMessage = new Message(this.ezTitle, this.message, this.dialogType, this.confirm, this.personalizedIconPath, this.i18n("app.no"), this.i18n("app.yes"), this.btnConfirmDanger, null, this.beforeClose);
         }
       }
     }
@@ -152,9 +154,9 @@ export class EzDialog {
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
-      .bind("Enter", () => this.handleButtonClick(true), { description: "Botão de confirmação ou OK", element: this._element })
-      .bind("Escape", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element })
-      .bind("Esc", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element });
+      .bind("Enter", () => this.handleButtonClick(true), { description: this.i18n("ez-dialog.confirmButton"), element: this._element })
+      .bind("Escape", () => this.handleButtonClick(false), { description: this.i18n("ez-dialog.closeButton"), element: this._element })
+      .bind("Esc", () => this.handleButtonClick(false), { description: this.i18n("ez-dialog.closeButton"), element: this._element });
   }
   componentDidRender() {
     this.manageOverlay();

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

@@ -2,6 +2,7 @@ import { h, Host } from '@stencil/core';
 import { moveItems, transferAll, transferItems } from './doubleListHelper';
 import { ObjectUtils } from '@sankhyalabs/core';
 import { isContinuousSequence } from '../ez-list/ezListHelper';
+import initI18n from '../../utils/i18n';
 export class EzDoubleList {
   constructor() {
     this.LEFT_LIST_ID = 'LEFT-LIST-ID';
@@ -38,6 +39,9 @@ export class EzDoubleList {
       return;
     this.ezRightListChanged.emit(newValue);
   }
+  async componentWillLoad() {
+    this.i18n = await 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)];
@@ -214,7 +218,9 @@ export class EzDoubleList {
         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,
@@ -227,13 +233,15 @@ export class EzDoubleList {
           onChoose: this.handleChooseLeft.bind(this),
         },
       })), !this.useOnlyRightList &&
-      h("div", { class: 'actions__column' }, 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) }), h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: `Mover para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: `Mover para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferToLeft.bind(this) }), 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) })), h("div", { class: "list__container" }, this.rightList && this.renderList({
+      h("div", { class: 'actions__column' }, 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) }), 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) }), 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) }), 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) })), 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,
@@ -245,7 +253,7 @@ export class EzDoubleList {
         onDoubleClick: this.handleTransferToLeft.bind(this),
         onChoose: this.handleChooseRight.bind(this),
       },
-    })), h("div", { class: 'actions__column' }, 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) }), h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: "Mover para cima", size: "small", onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: "Mover para baixo", size: "small", onClick: this.handleMoveDown.bind(this) }), 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) }))));
+    })), h("div", { class: 'actions__column' }, 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) }), 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) }), 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) }), 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 is() { return "ez-double-list"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-file-item/ez-file-item.js

@@ -1,5 +1,6 @@
 import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
+import initI18n from '../../utils/i18n';
 export class EzFileItem {
   constructor() {
     this.canRemove = true;
@@ -10,7 +11,7 @@ export class EzFileItem {
   }
   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}%`);
   }
@@ -31,14 +32,16 @@ export class EzFileItem {
     }
     return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   render() {
     this._element.title = `${this.fileName} ${this.getFileSize()}`;
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
-    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, h("div", { class: "content" }, h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), h("label", { class: "file-name" }, this.fileName), h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ?
-      h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", onClick: evt => {
-          this.ezRemove.emit(this.fileName);
-          evt.stopPropagation();
-        } }) : undefined));
+    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, h("div", { class: "content" }, h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), h("label", { class: "file-name" }, this.fileName), h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ? (h("ez-icon", { "data-element-id": 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));
   }
   static get is() { return "ez-file-item"; }
   static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,8 @@ import { buildFormMetadata } from "../../utils/form/FormMetadata";
 import { FormLayout } from '../../utils/form/interfaces';
 import { changeTab, formReducer, loadMetadata, selectCurrentSheet, selectFormMetadata } from "./store/form.slice";
 import { buildFieldSearch } from "../../utils";
-import { focusOnFieldSerch, LABEL_SEARCH_FIELD, SEARCH_FIELD_FULL_WIDTH, SHORTCUT_SEARCH_FIELD } from "../../utils/searchColumn/search-column";
+import { focusOnFieldSerch, SEARCH_FIELD_FULL_WIDTH, SHORTCUT_SEARCH_FIELD } from "../../utils/searchColumn/search-column";
+import initI18n from "../../utils/i18n";
 export class EzForm {
   constructor() {
     this._customEditors = new Map();
@@ -90,7 +91,7 @@ export class EzForm {
     }
     this._fieldSearch = buildFieldSearch({
       value: StringUtils.generateUUID(),
-      label: LABEL_SEARCH_FIELD,
+      label: this._i18n("ez-form.labelSearchField"),
     }, ({ argument }) => this.fieldsOptionLoader(argument), (option) => this.onSelectField(option));
     return this._fieldSearch;
   }
@@ -127,7 +128,7 @@ export class EzForm {
         const container = this._container.getBoundingClientRect();
         await focusOnFieldSerch(this._fieldSearch);
         this._ezPopoverSearchField.showUnder(this._container, { horizontalGap: container.width - (SEARCH_FIELD_FULL_WIDTH), verticalGap: container.height * -1 });
-      }, { description: 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() {
@@ -163,6 +164,7 @@ export class EzForm {
     const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
     this.setSingleColumn(layoutFormConfig);
     this.registerNotifyListeners(layoutFormConfig);
+    this._i18n = await initI18n();
   }
   async setSingleColumn(layoutFormConfig) {
     if (!(layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config)) {

package/dist/collection/components/ez-form-view/ez-form-view.js

@@ -60,7 +60,8 @@ export class EzFormView {
   isItemFullWidth(userInterface) {
     return [
       UserInterface.FILE,
-      UserInterface.LONGTEXT
+      UserInterface.LONGTEXT,
+      UserInterface.HTML,
     ].includes(userInterface);
   }
   buildFormItemElement(item, classItem = "") {

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -1,5 +1,4 @@
 import { UserInterface } from "@sankhyalabs/core";
-import { REQUIRED_INFO } from "../../../utils/constants";
 import { buildCheckBox, buildSwitch } from "./templates/CheckBox.tpl";
 import { buildComboBox } from "./templates/ComboBox.tpl";
 import { buildDate, buildTime, buildDateTime, buildTimeSeconds } from "./templates/DateInput.tpl";
@@ -9,6 +8,8 @@ import { buildTextArea } from "./templates/TextArea.tpl";
 import { buildTextInput } from "./templates/TextInput.tpl";
 import { buildSearchPlus } from "./templates/SearchInputPlus.tpl";
 import { buildSearch } from "./templates/SearchInput.tpl";
+import { buildRichText } from "./templates/RichText.tpl";
+import { getI18n } from "../../../utils/i18n";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -23,9 +24,11 @@ uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
 uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
+uiBuilders.set(UserInterface.HTML, buildRichText);
 export const fieldBuilder = (field) => {
+  const i18n = getI18n();
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
-  const label = field.required ? `${field.label}${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;

package/dist/collection/components/ez-form-view/fieldbuilder/templates/RichText.tpl.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-rich-text", { key: name, enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
+};

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -5,7 +5,6 @@ import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 import { CellRendererStatus } from './components/cellRendererStatus';
 import SelectionHeader from './components/selectionHeader';
-import gridTerms from './i18n/pt-BR';
 import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } from '../../../../utils/constants';
 import GridEditionManager from './GridEditionManager';
 import { ModuleRegistry } from '@ag-grid-community/core';
@@ -14,6 +13,8 @@ import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { MenuModule } from '@ag-grid-enterprise/menu';
+import DOMPurify from 'dompurify';
+import { buildLocaleText } from './utils/buildLocaleText';
 import { agGridLicense } from '../../../../utils/ag-grid-license';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
@@ -169,6 +170,7 @@ export default class AgGridController {
     }
     if (this._grid === undefined) {
       LicenseManager.setLicenseKey(agGridLicense);
+      this._i18n = options.i18n;
       this._columnStateChangeCallback = options.onColumnStateChange;
       this._selectionChangeCallback = options.onSelectionChange;
       this._doubleClickCallBack = options.onDoubleClick;
@@ -182,7 +184,7 @@ export default class AgGridController {
       }
       this._gridOptions = {
         suppressHorizontalScroll: options.suppressHorizontalScroll,
-        localeText: gridTerms,
+        localeText: buildLocaleText(this._options.i18n),
         enableRangeSelection: this._multipleSelection,
         rowSelection: this._multipleSelection ? 'multiple' : 'single',
         sortingOrder: ['desc', 'asc', null],
@@ -298,7 +300,7 @@ export default class AgGridController {
   buildMenuItemOptionSort(params, sortOrder) {
     return {
       icon: sortOrder === 'asc' ? `<i class='ez-icon-ordem-ascendente'></i>` : `<i class='ez-icon-ordem-descendente'></i>`,
-      name: sortOrder === 'asc' ? 'Ordenar Ascendente' : 'Ordenar Descendente',
+      name: sortOrder === 'asc' ? this._i18n("ez-grid.sortAscending") : this._i18n("ez-grid.sortDescending"),
       action: () => this.sortDataByColumn(params, sortOrder),
     };
   }
@@ -307,7 +309,7 @@ export default class AgGridController {
     const columnLabel = params.column.getColDef().headerName;
     return {
       icon: `<i class='ez-icon-filter'></i>`,
-      name: 'Filtrar',
+      name: this._i18n("ez-grid.filter"),
       action: () => this.showFilterColumn({ columnName, columnLabel, leftPosition: this._filterColumnleftPosition, filteredOptions: this._filteredColumns.get(columnName) }),
     };
   }
@@ -333,7 +335,7 @@ export default class AgGridController {
     const isPinned = params.column.isPinned();
     return {
       icon: `<i class='ez-icon-${isPinned ? 'un-pin' : 'push-pin'}'></i>`,
-      name: isPinned ? 'Desafixar coluna' : 'Fixar coluna',
+      name: isPinned ? this._i18n("ez-grid.unpinColumn") : this._i18n("ez-grid.pinColumn"),
       action: () => {
         columnApi.applyColumnState({
           state: [{ colId: column.getColId(), pinned: column.isPinned() ? null : 'left' }],
@@ -938,7 +940,7 @@ export default class AgGridController {
       tooltip = (_c = source.props) === null || _c === void 0 ? void 0 : _c.get('gridHeaderTooltip');
     }
     else if (propSortable === false) {
-      tooltip = 'Coluna não pode ser ordenada';
+      tooltip = this._i18n('ez-grid.columnCantBeOrder');
     }
     const presentationFrom = (_d = source === null || source === void 0 ? void 0 : source.props) === null || _d === void 0 ? void 0 : _d.get(PRESENTATION_FROM_COL_PROP_NAME);
     return this._editionManager.configureColumn({
@@ -963,7 +965,11 @@ export default class AgGridController {
           return "";
         }
         if (params.value instanceof Promise) {
-          return "Carregando...";
+          return `${this._i18n("app.loading")}...`;
+        }
+        if (source.userInterface === UserInterface.HTML) {
+          this.setHTMLRender(params, source);
+          return "";
         }
         const customFormatter = this._customFormatters.get(source.name);
         if (customFormatter) {
@@ -981,6 +987,24 @@ export default class AgGridController {
       editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
+  setHTMLRender(params, source) {
+    const htmlSanitized = DOMPurify.sanitize(params.value);
+    params.colDef.cellRenderer = (cellParams) => {
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        const element = document.createElement('span');
+        element.innerHTML = htmlSanitized;
+        return element;
+      }
+      return cellParams.value;
+    };
+    params.colDef.cellStyle = (cellParams) => {
+      const defaultStyle = this.getStyleByColumn(source);
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        return Object.assign(defaultStyle, { padding: 0 });
+      }
+      return defaultStyle;
+    };
+  }
   setCustomFormatters(customFormatters) {
     this._customFormatters = customFormatters;
   }
@@ -1037,10 +1061,10 @@ export default class AgGridController {
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SWITCH) {
       if ((params === null || params === void 0 ? void 0 : params.value) === 'S' || (params === null || params === void 0 ? void 0 : params.value) === true || (params === null || params === void 0 ? void 0 : params.value) === 'true') {
-        return 'Sim';
+        return this._i18n("app.yes");
       }
       else if ((params === null || params === void 0 ? void 0 : params.value) === 'N' || (params === null || params === void 0 ? void 0 : params.value) === false || (params === null || params === void 0 ? void 0 : params.value) === 'false') {
-        return 'Não';
+        return this._i18n("app.no");
       }
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCH) {

package/dist/collection/components/ez-grid/controller/ag-grid/GridEditionManager.js

@@ -345,11 +345,14 @@ export default class GridEditionManager {
   }
   isColEditable(fieldName) {
     const fieldDefinition = this._dataUnit.getField(fieldName);
-    if (fieldDefinition) {
+    if (fieldDefinition && !this.isTypeFile(fieldDefinition)) {
       return !fieldDefinition.readOnly;
     }
     return false;
   }
+  isTypeFile(file) {
+    return file.userInterface === UserInterface.FILE;
+  }
   isSecondClick(cellClicked) {
     if (!this._lastCellClicked) {
       return false;

package/dist/collection/components/ez-grid/controller/ag-grid/test/constants/GridEditionMock.js

@@ -1,4 +1,5 @@
 import { StringUtils } from "@sankhyalabs/core";
+import initI18n from "../../../../../../utils/i18n";
 const columnsState = [{
     colId: StringUtils.generateUUID(),
   }];
@@ -24,7 +25,7 @@ export const gridEditionImplementation = {
       getColumnState: () => columnsState,
     } }))
 };
-export function buildOptions(dataUnit) {
+export async function buildOptions(dataUnit) {
   return ({
     allowMultipleSelection: true,
     dataUnit,
@@ -38,5 +39,6 @@ export function buildOptions(dataUnit) {
     useEnterLikeTab: true,
     enableContinuousInsert: false,
     enableGridInsert: false,
+    i18n: await initI18n(),
   });
 }

package/dist/collection/components/ez-grid/controller/ag-grid/utils/buildLocaleText.js

@@ -0,0 +1,67 @@
+export function buildLocaleText(i18n) {
+  return ({
+    page: i18n("ez-grid.pageLabel"),
+    more: i18n("ez-grid.remainingPageLabel"),
+    to: i18n("ez-grid.remainingTotalLabel"),
+    of: i18n("ez-grid.remainingTotalLabel"),
+    next: i18n("ez-grid.nextPage"),
+    previous: i18n("ez-grid.previousPage"),
+    loadingOoo: i18n("app.loading"),
+    noRowsToShow: i18n("ez-grid.noRowsToShow"),
+    pinColumn: i18n("ez-grid.pinColumn"),
+    unpinColumn: i18n("ez-grid.unpinColumn"),
+    filterOoo: i18n("ez-grid.filter"),
+    sortAscending: i18n("ez-grid.sortAscending"),
+    sortDescending: i18n("ez-grid.sortDescending"),
+    last: i18n("ez-grid.last"),
+    first: i18n("ez-grid.first"),
+    selectAll: i18n("ez-grid.selectAll"),
+    searchOoo: i18n("ez-grid.searchOoo"),
+    blanks: i18n("ez-grid.blanks"),
+    applyFilter: i18n("ez-grid.applyFilter"),
+    equals: i18n("ez-grid.equals"),
+    lessThan: i18n("ez-grid.lessThan"),
+    greaterThan: i18n("ez-grid.greaterThan"),
+    contains: i18n("ez-grid.contains"),
+    startsWith: i18n("ez-grid.startsWith"),
+    endsWith: i18n("ez-grid.endsWith"),
+    group: i18n("ez-grid.group"),
+    columns: i18n("ez-grid.columns"),
+    rowGroupColumns: i18n("ez-grid.rowGroupColumns"),
+    rowGroupColumnsEmptyMessage: i18n("ez-grid.rowGroupColumnsEmptyMessage"),
+    valueColumns: i18n("ez-grid.valueColumns"),
+    pivotMode: i18n("ez-grid.pivotMode"),
+    groups: i18n("ez-grid.groups"),
+    values: i18n("ez-grid.values"),
+    pivots: i18n("ez-grid.pivots"),
+    valueColumnsEmptyMessage: i18n("ez-grid.valueColumnsEmptyMessage"),
+    pivotColumnsEmptyMessage: i18n("ez-grid.pivotColumnsEmptyMessage"),
+    toolPanelButton: i18n("ez-grid.toolPanelButton"),
+    valueAggregation: i18n("ez-grid.valueAggregation"),
+    autosizeThiscolumn: i18n("ez-grid.autosizeThiscolumn"),
+    autosizeAllColumns: i18n("ez-grid.autosizeAllColumns"),
+    groupBy: i18n("ez-grid.groupBy"),
+    ungroupBy: i18n("ez-grid.ungroupBy"),
+    resetColumns: i18n("ez-grid.resetColumns"),
+    expandAll: i18n("ez-grid.expandAll"),
+    collapseAll: i18n("ez-grid.collapseAll"),
+    toolPanel: i18n("ez-grid.toolPanel"),
+    export: i18n("ez-grid.export"),
+    csvExport: i18n("ez-grid.csvExport"),
+    excelExport: i18n("ez-grid.excelExport"),
+    pinLeft: i18n("ez-grid.pinLeft"),
+    pinRight: i18n("ez-grid.pinRight"),
+    noPin: i18n("ez-grid.noPin"),
+    sum: i18n("ez-grid.sum"),
+    min: i18n("ez-grid.min"),
+    max: i18n("ez-grid.max"),
+    none: i18n("ez-grid.none"),
+    count: i18n("ez-grid.count"),
+    average: i18n("ez-grid.average"),
+    copy: i18n("ez-grid.copy"),
+    copyWithHeaders: i18n("ez-grid.copyWithHeaders"),
+    ctrlC: i18n("ez-grid.ctrlC"),
+    paste: i18n("ez-grid.paste"),
+    ctrlV: i18n("ez-grid.ctrlV"),
+  });
+}