@sankhyalabs/sankhyablocks 9.1.13 → 9.2.0-dev.1

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

@@ -17,26 +17,18 @@ export class SnkForm {
   }
   /**
    * Exibe a janela de configurações do formulário.
-   * @async
-   * @returns {Promise<void>}
    */
   async showConfig() {
     this._showFormConfig = true;
   }
   /**
    * Fecha a janela de configurações do formulário.
-   * @async
-   * @returns {Promise<void>}
    */
   async hideConfig() {
     this._showFormConfig = false;
   }
   /**
-   * Registra um editor customizado para campos do formulário.
-   * @async
-   * @param {string} fieldName - Nome do campo.
-   * @param {ICustomEditor} customEditor - Editor customizado.
-   * @returns {Promise<void>}
+   * Registra um editor customizado para campos da grade e formulário.
    */
   async addCustomEditor(fieldName, customEditor) {
     if (this._form) {
@@ -49,28 +41,10 @@ export class SnkForm {
   }
   /**
    * Altera/adiciona uma propriedade nos metadados do campo.
-   * @async
-   * @param {string} fieldName - Nome do campo.
-   * @param {string} propName - Nome da propriedade.
-   * @param {any} value - Valor da propriedade.
-   * @returns {Promise<void>}
    */
   async setFieldProp(fieldName, propName, value) {
     await this._form.setFieldProp(fieldName, propName, value);
   }
-  /**
-   * Valida o formulário.
-   * @async
-   * @returns {Promise<void>}
-   * @description
-   * Este método executa a validação do formulário, verificando se todos os campos estão
-   * preenchidos corretamente de acordo com as regras definidas.
-   * Se a validação falhar, uma exceção será lançada com os detalhes dos erros encontrados.
-   * Caso contrário, o método será resolvido sem erros.
-   */
-  async validate() {
-    await this._form.validate();
-  }
   closeConfig() {
     this.hideConfig();
   }
@@ -229,7 +203,7 @@ export class SnkForm {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Chave da configura\u00E7\u00E3o legada do formul\u00E1rio."
+          "text": "Chave da configura\u00E7\u00E3o legado do formul\u00E1rio."
         },
         "attribute": "form-legacy-config-name",
         "reflect": false
@@ -269,11 +243,8 @@ export class SnkForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Esta propriedade foi descontinuada. Ela n\u00E3o tem mais efeito sobre o componente."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Emitido quando o bot\u00E3o de voltar \u00E9 acionado."
         },
         "complexType": {
           "original": "void",
@@ -287,11 +258,8 @@ export class SnkForm {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Esta propriedade foi descontinuada. Ela n\u00E3o tem mais efeito sobre o componente."
-            }],
-          "text": ""
+          "tags": [],
+          "text": "Emitido sempre que houver click de bot\u00E3o ou a\u00E7\u00E3o."
         },
         "complexType": {
           "original": "string",
@@ -306,7 +274,7 @@ export class SnkForm {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio.\nOBS: Emitido no subcomponente snk-form-view"
+          "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
         },
         "complexType": {
           "original": "Array<HTMLElement>",
@@ -337,13 +305,7 @@ export class SnkForm {
         },
         "docs": {
           "text": "Exibe a janela de configura\u00E7\u00F5es do formul\u00E1rio.",
-          "tags": [{
-              "name": "async",
-              "text": undefined
-            }, {
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       },
       "hideConfig": {
@@ -359,30 +321,18 @@ export class SnkForm {
         },
         "docs": {
           "text": "Fecha a janela de configura\u00E7\u00F5es do formul\u00E1rio.",
-          "tags": [{
-              "name": "async",
-              "text": undefined
-            }, {
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       },
       "addCustomEditor": {
         "complexType": {
           "signature": "(fieldName: string, customEditor: ICustomEditor) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName - Nome do campo."
-                }],
-              "text": "- Nome do campo."
+              "tags": [],
+              "text": ""
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "customEditor - Editor customizado."
-                }],
-              "text": "- Editor customizado."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -396,43 +346,22 @@ export class SnkForm {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Registra um editor customizado para campos do formul\u00E1rio.",
-          "tags": [{
-              "name": "async",
-              "text": undefined
-            }, {
-              "name": "param",
-              "text": "fieldName - Nome do campo."
-            }, {
-              "name": "param",
-              "text": "customEditor - Editor customizado."
-            }, {
-              "name": "returns",
-              "text": undefined
-            }]
+          "text": "Registra um editor customizado para campos da grade e formul\u00E1rio.",
+          "tags": []
         }
       },
       "setFieldProp": {
         "complexType": {
           "signature": "(fieldName: string, propName: string, value: any) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName - Nome do campo."
-                }],
-              "text": "- Nome do campo."
+              "tags": [],
+              "text": ""
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "propName - Nome da propriedade."
-                }],
-              "text": "- Nome da propriedade."
+              "tags": [],
+              "text": ""
             }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "value - Valor da propriedade."
-                }],
-              "text": "- Valor da propriedade."
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -443,47 +372,7 @@ export class SnkForm {
         },
         "docs": {
           "text": "Altera/adiciona uma propriedade nos metadados do campo.",
-          "tags": [{
-              "name": "async",
-              "text": undefined
-            }, {
-              "name": "param",
-              "text": "fieldName - Nome do campo."
-            }, {
-              "name": "param",
-              "text": "propName - Nome da propriedade."
-            }, {
-              "name": "param",
-              "text": "value - Valor da propriedade."
-            }, {
-              "name": "returns",
-              "text": undefined
-            }]
-        }
-      },
-      "validate": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Valida o formul\u00E1rio.",
-          "tags": [{
-              "name": "async",
-              "text": undefined
-            }, {
-              "name": "returns",
-              "text": undefined
-            }, {
-              "name": "description",
-              "text": "Este m\u00E9todo executa a valida\u00E7\u00E3o do formul\u00E1rio, verificando se todos os campos est\u00E3o \npreenchidos corretamente de acordo com as regras definidas.\nSe a valida\u00E7\u00E3o falhar, uma exce\u00E7\u00E3o ser\u00E1 lan\u00E7ada com os detalhes dos erros encontrados.\nCaso contr\u00E1rio, o m\u00E9todo ser\u00E1 resolvido sem erros."
-            }]
+          "tags": []
         }
       }
     };

package/dist/collection/components/snk-form-config/FormConfigHelper.js

@@ -72,12 +72,11 @@ export function getValueByProperty(property, fieldDescriptor, defaultValue) {
 export function getIconName(userInterface) {
   return iconMap.get(userInterface) || 'text';
 }
-export function buildNewGuideName(guidesList) {
+export function buildNewGuideName(guidesList, getMessage) {
   var _a, _b;
-  const qtdWithNewGuideName = (_b = (_a = guidesList.filter(g => g.name.includes(TAB_NAMES.newGuide))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-  return qtdWithNewGuideName === 0
-    ? TAB_NAMES.newGuide
-    : `${TAB_NAMES.newGuide} (${qtdWithNewGuideName})`;
+  const newGuideText = getMessage('snkFormConfig.form.newGuide');
+  const qtdWithNewGuideName = (_b = (_a = guidesList.filter(g => g.name.includes(newGuideText))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+  return qtdWithNewGuideName === 0 ? newGuideText : `${newGuideText} (${qtdWithNewGuideName})`;
 }
 export function getFieldsToSave(guidesMap) {
   const fieldsToSave = [];

package/dist/collection/components/snk-form-config/config-header/config-header.js

@@ -56,9 +56,9 @@ export class ConfigHeader {
     if (!this.hasChanges && !this.optionConfigChanged)
       return;
     if (this.hasChanges) {
-      return (h("div", { class: "right-group" }, h("ez-button", { title: 'Cancelar', label: 'Cancelar', onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: 'Salvar', label: 'Salvar', class: 'ez-button--primary ez-padding-left--medium', onClick: () => this.saveFormConfig(), size: "medium" })));
+      return (h("div", { class: "right-group" }, h("ez-button", { title: this.getMessage('snkFormConfig.actions.cancel'), label: this.getMessage('snkFormConfig.actions.cancel'), onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: this.getMessage('snkFormConfig.actions.save'), label: this.getMessage('snkFormConfig.actions.save'), class: 'ez-button--primary ez-padding-left--medium', onClick: () => this.saveFormConfig(), size: "medium" })));
     }
-    return (h("div", { class: "right-group" }, h("ez-button", { title: 'Cancelar', label: 'Cancelar', onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: 'Salvar', label: this.getMessage('snkFormConfig.applyConfig'), class: 'ez-button--primary ez-padding-left--medium', onClick: async () => await this.applyOptionConfig(), size: "medium" })));
+    return (h("div", { class: "right-group" }, h("ez-button", { title: this.getMessage('snkFormConfig.actions.cancel'), label: this.getMessage('snkFormConfig.actions.cancel'), onClick: this.closeFormConfig.bind(this), size: "medium" }), h("ez-button", { title: this.getMessage('snkFormConfig.actions.save'), label: this.getMessage('snkFormConfig.applyConfig'), class: 'ez-button--primary ez-padding-left--medium', onClick: async () => await this.applyOptionConfig(), size: "medium" })));
   }
   render() {
     return (h(Host, null, h("div", { class: 'left-group' }, h("ez-button", { mode: "icon", title: this.getMessage('snkFormConfig.goBackTitle'), iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: this.closeFormConfig.bind(this), id: "formConfigToBack" }), h("h1", { class: "ez-title ez-title--primary ez-title--extra-large ez-padding--small" }, this.getMessage('snkFormConfig.title')), h("configs-button", { hasChanges: this.hasChanges, configOptions: this.configOptions, selectedConfig: this.selectedConfig, messagesBuilder: this.messagesBuilder })), this.renderSaveActions()));

package/dist/collection/components/snk-form-config/field-item/field-config/field-config.js

@@ -228,7 +228,7 @@ export class FieldConfig {
     this._popoupElement.opened = false;
   }
   applyErrorMessage() {
-    this.fieldLabelErrorMessage = `Informe um valor para ${this.getMessage('snkConfigOptions.label.nameField')}`;
+    this.fieldLabelErrorMessage = `${this.getMessage('snkConfigOptions.validation.requiredField')} ${this.getMessage('snkConfigOptions.label.nameField')}`;
   }
   handleDiscardChanges() {
     this.initializeValues();
@@ -239,7 +239,7 @@ export class FieldConfig {
     this._application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
   }
   render() {
-    return (h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": 'Configuração do campo', onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, h("div", { class: 'field-config-container' }, h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage('snkConfigOptions.options.valueFixed')), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage('snkConfigOptions.options.variable'))), this.renderDefaultValueEditor(), h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), h("div", { class: 'actions' }, h("ez-button", { label: 'Cancelar', onClick: () => this.handleDiscardChanges() }), h("ez-button", { label: 'Confirmar', class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
+    return (h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": this.getMessage('snkConfigOptions.fieldConfig.title'), onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, h("div", { class: 'field-config-container' }, h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage('snkConfigOptions.options.valueFixed')), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage('snkConfigOptions.options.variable'))), this.renderDefaultValueEditor(), h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), h("div", { class: 'actions' }, h("ez-button", { label: this.getMessage('snkConfigOptions.fieldConfig.buttons.cancel'), onClick: () => this.handleDiscardChanges() }), h("ez-button", { label: this.getMessage('snkConfigOptions.fieldConfig.buttons.confirm'), class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
   }
   static get is() { return "field-config"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-form-config/field-item/field-item.js

@@ -22,14 +22,17 @@ export class FieldItem {
   }
   renderFieldConfig() {
     if (this.onLayoutConfig && this.dataUnit && this.messagesBuilder) {
-      return (h("field-config", { ref: ref => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => forceUpdate(this) }));
+      return (h("field-config", { ref: (ref) => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => forceUpdate(this) }));
     }
   }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
   renderActions() {
     if (this.onLayoutConfig) {
-      return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: 'Remover' }), h("ez-button", { ref: ref => this._editIconRef = ref, mode: "icon", class: "ez-button--tertiary", onClick: this.showFieldConfig.bind(this), iconName: 'edit', size: "medium", title: 'Editar' })));
+      return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: this.getMessage('snkFieldConfig.titleRemove') }), h("ez-button", { ref: ref => this._editIconRef = ref, mode: "icon", class: "ez-button--tertiary", onClick: this.showFieldConfig.bind(this), iconName: 'edit', size: "medium", title: this.getMessage('snkFieldConfig.titleEdit') })));
     }
-    return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: 'Adicionar ao Layout' })));
+    return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: this.getMessage('snkFieldConfig.titleAddToLayout') })));
   }
   loadFieldDescriptor() {
     if (this.dataUnit) {

package/dist/collection/components/snk-form-config/fields-layout/fields-layout.css

@@ -62,7 +62,7 @@
 }
 
 .group-content.empty-content::before {
-  content: "Arraste e solte um campo aqui";
+  content: var(--empty-content-message, "Arraste e solte um campo aqui");
   color: #cbcfd7;
   font-size: 16px;
   font-weight: 500;
@@ -89,7 +89,7 @@
 }
 
 .no-group-container::before {
-  content: "Inclua estes campos nos grupos ou deixe-os separados no topo do formulário";
+  content: var(--no-group-message, "Inclua estes campos nos grupos ou deixe-os separados no topo do formulário");
   width: 100%;
   display: block;
   font-size: 16px;

package/dist/collection/components/snk-form-config/fields-layout/fields-layout.js

@@ -18,8 +18,10 @@ export class FieldLayoutComponent {
     this.dataUnit = undefined;
     this.messagesBuilder = undefined;
   }
-  handleFieldConfigChanged({ detail }) {
-    const updatedField = detail;
+  onMessagesBuilderChange() {
+    this.setCustomCSSProperties();
+  }
+  handleFieldConfigChanged({ detail: updatedField }) {
     const groupToUpdate = this.groupsListMemory.find(g => g.name === updatedField.group);
     if (!groupToUpdate)
       return;
@@ -70,10 +72,9 @@ export class FieldLayoutComponent {
   }
   buildNewGroupName() {
     var _a, _b;
-    const qtdWithNewGroupName = (_b = (_a = this.groupsListMemory.filter(g => g.name.includes(GROUP_NAMES.newGroup))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-    return qtdWithNewGroupName === 0
-      ? GROUP_NAMES.newGroup
-      : `${GROUP_NAMES.newGroup} (${qtdWithNewGroupName})`;
+    const newGroupMessage = this.getMessage('snkFormConfig.form.newGroup');
+    const qtdWithNewGroupName = (_b = (_a = this.groupsListMemory.filter(g => g.name.includes(newGroupMessage))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return qtdWithNewGroupName === 0 ? newGroupMessage : `${newGroupMessage} (${qtdWithNewGroupName})`;
   }
   makeDynamicFieldsContainersDraggable() {
     const draggableGroups = this.groupsList.filter((g) => g.name !== GROUP_NAMES.noGroup);
@@ -149,7 +150,7 @@ export class FieldLayoutComponent {
       });
     }
     catch (e) {
-      console.error('Falha ao tornar container de grupos arrastável: ', this.ID_GROUPS);
+      console.error(this.getMessage('snkFormConfig.errors.failMakeGroupsDraggable'), this.ID_GROUPS);
     }
   }
   makeFieldContainerDraggable(containerId) {
@@ -168,7 +169,7 @@ export class FieldLayoutComponent {
       });
     }
     catch (e) {
-      console.error('Falha ao tornar grupo arrastável: ', containerId);
+      console.error(this.getMessage('snkFormConfig.errors.failMakeFieldContainerDraggable'), containerId);
     }
   }
   getContainerElement(id) {
@@ -303,18 +304,23 @@ export class FieldLayoutComponent {
     var _a;
     if (((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === TAB_NAMES.main)
       return;
-    return (h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.startGuideNameEdition(), size: "medium", iconName: 'edit', title: 'Renomear' }));
+    return (h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.startGuideNameEdition(), size: "medium", iconName: 'edit', title: this.getMessage('snkFormConfig.buttons.rename') }));
+  }
+  setCustomCSSProperties() {
+    document.documentElement.style.setProperty('--empty-content-message', `"${this.getMessage('snkFormConfig.form.labelDropField')}"`);
+    document.documentElement.style.setProperty('--no-group-message', `"${this.getMessage('snkFormConfig.form.subTitleInfo')}"`);
   }
   componentDidRender() {
     this.makeGroupsDraggable();
     this.makeDynamicFieldsContainersDraggable();
     this.makeFieldContainerDraggable(GROUP_NAMES.noGroup);
+    this.setCustomCSSProperties();
   }
   render() {
     if (!this.selectedGuide) {
-      return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, h("span", { class: 'no-guide-selected' }, "Selecione uma guia e comece a configurar")));
+      return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, h("span", { class: 'no-guide-selected' }, this.getMessage('snkFormConfig.form.noGuideSelected'))));
     }
-    return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), h("div", { class: 'layout-container' }, h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { class: 'no-group-container' }, h("div", { id: GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": GROUP_NAMES.noGroup }, this.renderFixedFields())), h("hr", null), h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus" }), h("span", null, "Criar novo grupo"))));
+    return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), h("div", { class: 'layout-container' }, h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { class: 'no-group-container' }, h("div", { id: GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": GROUP_NAMES.noGroup }, this.renderFixedFields())), h("hr", null), h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus" }), h("span", null, this.getMessage('snkFormConfig.form.createNewGroup')))));
   }
   static get is() { return "fields-layout"; }
   static get encapsulation() { return "scoped"; }
@@ -556,6 +562,9 @@ export class FieldLayoutComponent {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "messagesBuilder",
+        "methodName": "onMessagesBuilderChange"
+      }, {
         "propName": "selectedGuide",
         "methodName": "observeSelectedGuide"
       }, {

package/dist/collection/components/snk-form-config/fields-selector/fields-selector.js

@@ -7,6 +7,7 @@ export class FieldsSelector {
     this.availableFields = [];
     this.dataUnit = undefined;
     this.filterTerm = '';
+    this.messagesBuilder = undefined;
   }
   onAddField(evt) {
     const newIndex = evt.newIndex;
@@ -32,14 +33,14 @@ export class FieldsSelector {
   }
   renderFields() {
     const fieldsToShow = ArrayUtils.applyStringFilter(this.filterTerm, this.availableFields);
-    return fieldsToShow.map(field => (h("field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field })));
+    return fieldsToShow.map(field => (h("field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field, messagesBuilder: this.messagesBuilder })));
   }
   getCountText() {
     if (!this.availableFields.length)
-      return 'Nenhum campo disponível';
+      return this.getMessage('snkFormConfig.availableFields.labelNoFields');
     if (this.availableFields.length === 1)
-      return '1 campo disponível';
-    return `${this.availableFields.length} campos disponíveis`;
+      return this.getMessage('snkFormConfig.availableFields.labelOneField');
+    return `${this.availableFields.length} ${this.getMessage('snkFormConfig.availableFields.labelAvailableFields')}`;
   }
   initializeDraggableContainer() {
     new Sortable(this.el.querySelector(`#${ID_AVAILABLE_FIELDS}`), {
@@ -51,11 +52,15 @@ export class FieldsSelector {
       onRemove: (evt) => this.onRemoveField(evt),
     });
   }
+  getMessage(key, params) {
+    var _a;
+    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
+  }
   componentDidRender() {
     this.initializeDraggableContainer();
   }
   render() {
-    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, this.getMessage('snkFormConfig.availableFields.title')), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.availableFields.labelSearchField'), onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
   }
   static get is() { return "fields-selector"; }
   static get encapsulation() { return "scoped"; }
@@ -111,6 +116,26 @@ export class FieldsSelector {
           "tags": [],
           "text": ""
         }
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }

package/dist/collection/components/snk-form-config/guides-configurator/guides-configurator.css

@@ -48,7 +48,7 @@
 }
 
 .guide-list.hidden-empty-content::before {
-  content: "Nenhuma guia oculta";
+  content: var(--no-hidden-guides-message, "Nenhuma guia oculta");
   display: block;
   font-size: 16px;
   font-weight: 400;
@@ -58,7 +58,7 @@
 }
 
 .guide-list.visible-empty-content::before {
-  content: "Nenhuma guia visível";
+  content: var(--no-visible-guides-message, "Nenhuma guia visível");
   display: block;
   font-size: 16px;
   font-weight: 400;

package/dist/collection/components/snk-form-config/guides-configurator/guides-configurator.js

@@ -21,6 +21,9 @@ export class GuidesConfigurator {
     this.selectedGuide = undefined;
     this.messagesBuilder = undefined;
   }
+  onMessagesBuilderChange() {
+    this.setCustomCSSProperties();
+  }
   observeVisibleGuides(newGuides) {
     this.initGuidesConfig(newGuides);
   }
@@ -87,7 +90,9 @@ export class GuidesConfigurator {
     const guidesToShow = ArrayUtils.applyStringFilter(this.filterTerm, guides);
     return guidesToShow.map(guide => {
       var _a;
-      return (h("div", { key: guide.name, "data-guide-name": guide.name, title: guide.label, class: `guide-item ${((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.label) === guide.label ? 'selected' : ''} ${this.filterTerm.length ? 'disable-sort' : ''}`, onClick: e => this.handleSelectGuide(guide, e) }, h("span", null, h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), h("span", { class: 'item-label' }, guide.label), h("div", { class: 'actions' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.toggleGuideVisibility(guide, e), size: "medium", iconName: guide.visible ? 'eye-off' : 'eye', title: guide.visible ? 'Ocultar' : 'Tornar visível' }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", iconName: 'delete', title: 'Excluir' }))));
+      return (h("div", { key: guide.name, "data-guide-name": guide.name, title: guide.label, class: `guide-item ${((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.label) === guide.label ? 'selected' : ''} ${this.filterTerm.length ? 'disable-sort' : ''}`, onClick: e => this.handleSelectGuide(guide, e) }, h("span", null, h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), h("span", { class: 'item-label' }, guide.label), h("div", { class: 'actions' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.toggleGuideVisibility(guide, e), size: "medium", iconName: guide.visible ? 'eye-off' : 'eye', title: guide.visible ?
+          this.getMessage('snkFormConfig.guidesConfigurator.actions.hide') :
+          this.getMessage('snkFormConfig.guidesConfigurator.actions.show') }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", iconName: 'delete', title: this.getMessage('snkFormConfig.guidesConfigurator.actions.delete') }))));
     });
   }
   getContainerElement(id) {
@@ -133,13 +138,18 @@ export class GuidesConfigurator {
   handleSelectMainGuide() {
     this.guideSelected.emit(this.mainGuide);
   }
+  setCustomCSSProperties() {
+    document.documentElement.style.setProperty('--no-hidden-guides-message', `"${this.getMessage('snkFormConfig.guidesConfigurator.noHiddenGuides')}"`);
+    document.documentElement.style.setProperty('--no-visible-guides-message', `"${this.getMessage('snkFormConfig.guidesConfigurator.noVisibleGuides')}"`);
+  }
   componentDidLoad() {
     this.initializeDraggableContainers();
     this.initGuidesConfig(this.guidesList);
+    this.setCustomCSSProperties();
   }
   render() {
     var _a, _b, _c;
-    return (h("ez-sidebar-navigator", { class: 'ezSidebarNavigator', type: 'fixed', size: 'md', titleMenu: 'Guias' }, h("div", { class: 'navigator-container' }, h("ez-filter-input", { slot: "content", mode: "slim", label: "Buscar guia", onEzChange: evt => this.filterTerm = evt.detail }), h("div", { onClick: this.handleSelectMainGuide.bind(this), class: `main-guide ${((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === ((_b = this.mainGuide) === null || _b === void 0 ? void 0 : _b.name) ? 'selected' : ''}` }, h("span", null, (_c = this.mainGuide) === null || _c === void 0 ? void 0 : _c.label)), h("div", { class: 'collapsible-container' }, h("div", { class: 'collapsible-item' }, h("ez-collapsible-box", { label: "Guias vis\u00EDveis", headerSize: "large" }, h("div", { id: this.ID_VISIBLE_GUIDES, class: `guide-list ${!this.visibleGuides.length ? 'visible-empty-content' : ''}` }, this.renderItems(this.visibleGuides)))), h("div", { class: 'collapsible-item' }, h("ez-collapsible-box", { label: "Guias ocultas", headerSize: "large" }, h("div", { id: this.ID_HIDDEN_GUIDES, class: `guide-list ${!this.hiddenGuides.length ? 'hidden-empty-content' : ''}` }, this.renderItems(this.hiddenGuides))))), h("div", { class: 'add-button-container', onClick: this.handleAddGuide.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus" }), h("span", null, "Criar nova guia")))));
+    return (h("ez-sidebar-navigator", { class: 'ezSidebarNavigator', type: 'fixed', size: 'md', titleMenu: this.getMessage('snkFormConfig.guidesConfigurator.title') }, h("div", { class: 'navigator-container' }, h("ez-filter-input", { slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.guidesConfigurator.searchGuide'), onEzChange: evt => this.filterTerm = evt.detail }), h("div", { onClick: this.handleSelectMainGuide.bind(this), class: `main-guide ${((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === ((_b = this.mainGuide) === null || _b === void 0 ? void 0 : _b.name) ? 'selected' : ''}` }, h("span", null, (_c = this.mainGuide) === null || _c === void 0 ? void 0 : _c.label)), h("div", { class: 'collapsible-container' }, h("div", { class: 'collapsible-item' }, h("ez-collapsible-box", { label: this.getMessage('snkFormConfig.guidesConfigurator.visibleGuides'), headerSize: "large" }, h("div", { id: this.ID_VISIBLE_GUIDES, class: `guide-list ${!this.visibleGuides.length ? 'visible-empty-content' : ''}` }, this.renderItems(this.visibleGuides)))), h("div", { class: 'collapsible-item' }, h("ez-collapsible-box", { label: this.getMessage('snkFormConfig.guidesConfigurator.hiddenGuides'), headerSize: "large" }, h("div", { id: this.ID_HIDDEN_GUIDES, class: `guide-list ${!this.hiddenGuides.length ? 'hidden-empty-content' : ''}` }, this.renderItems(this.hiddenGuides))))), h("div", { class: 'add-button-container', onClick: this.handleAddGuide.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus" }), h("span", null, this.getMessage('snkFormConfig.guidesConfigurator.createNewGuide'))))));
   }
   static get is() { return "guides-configurator"; }
   static get encapsulation() { return "scoped"; }
@@ -307,6 +317,9 @@ export class GuidesConfigurator {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "messagesBuilder",
+        "methodName": "onMessagesBuilderChange"
+      }, {
         "propName": "guidesList",
         "methodName": "observeVisibleGuides"
       }, {

package/dist/collection/components/snk-form-config/snk-form-config.js

@@ -87,7 +87,7 @@ export class SnkFormConfig {
       this.originalConfigSelected = userConfig.find((config) => config.origin === origin);
     }
     catch (error) {
-      console.error('Falha ao buscar configurações de formulário definida pelo usuário.');
+      console.error(this.getMessage('snkFormConfig.errors.failFetchUserConfig'));
       console.error(error);
     }
   }
@@ -243,7 +243,7 @@ export class SnkFormConfig {
     this.hasChanges = true;
   }
   handleCreateNewGuide() {
-    const newGuideName = buildNewGuideName(this.guidesList);
+    const newGuideName = buildNewGuideName(this.guidesList, this.getMessage.bind(this));
     const newGuide = {
       name: newGuideName,
       label: newGuideName,
@@ -276,7 +276,7 @@ export class SnkFormConfig {
     await this.initializeUserConfig();
   }
   render() {
-    return (h(Host, null, h("config-header", { configOptions: this.configOptions, selectedConfig: this.configSelected, messagesBuilder: this.messagesBuilder, hasChanges: this.hasChanges, optionConfigChanged: this.optionConfigChanged, onConfigClose: () => this.configClose.emit(), onSaveConfig: async () => await this.handleSaveConfig() }), h("div", { class: "ez-padding--medium" }, h("div", { class: "ez-flex sidebarNavigator__container" }, h("guides-configurator", { messagesBuilder: this.messagesBuilder, guidesList: this.guidesList, selectedGuide: this.selectedGuide, onGuideSelected: this.handleSelectGuide.bind(this), onGuideListChanged: this.handleGuideListChanged.bind(this), onCreateNewGuide: this.handleCreateNewGuide.bind(this), onGuideDeleted: this.handleGuideDeleted.bind(this) }), h("fields-layout", { ref: ref => this.refFieldsLayout = ref, selectedGuide: this.selectedGuide, guideNames: this.getGuideNames(), groupsList: this.groupsList, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, onGuideRenamed: this.handleGuideRenamed.bind(this), onLayoutChanged: this.handleLayoutChanged.bind(this), onSetFieldListAsAvailable: this.handleSetFieldListAsAvailable.bind(this) }), h("fields-selector", { dataUnit: this.dataUnit, availableFields: this.availableFields, onFieldListChanged: this.handleAvailableFieldListChanged.bind(this) })))));
+    return (h(Host, null, h("config-header", { configOptions: this.configOptions, selectedConfig: this.configSelected, messagesBuilder: this.messagesBuilder, hasChanges: this.hasChanges, optionConfigChanged: this.optionConfigChanged, onConfigClose: () => this.configClose.emit(), onSaveConfig: async () => await this.handleSaveConfig() }), h("div", { class: "ez-padding--medium" }, h("div", { class: "ez-flex sidebarNavigator__container" }, h("guides-configurator", { messagesBuilder: this.messagesBuilder, guidesList: this.guidesList, selectedGuide: this.selectedGuide, onGuideSelected: this.handleSelectGuide.bind(this), onGuideListChanged: this.handleGuideListChanged.bind(this), onCreateNewGuide: this.handleCreateNewGuide.bind(this), onGuideDeleted: this.handleGuideDeleted.bind(this) }), h("fields-layout", { ref: ref => this.refFieldsLayout = ref, selectedGuide: this.selectedGuide, guideNames: this.getGuideNames(), groupsList: this.groupsList, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, onGuideRenamed: this.handleGuideRenamed.bind(this), onLayoutChanged: this.handleLayoutChanged.bind(this), onSetFieldListAsAvailable: this.handleSetFieldListAsAvailable.bind(this) }), h("fields-selector", { dataUnit: this.dataUnit, availableFields: this.availableFields, onFieldListChanged: this.handleAvailableFieldListChanged.bind(this), messagesBuilder: this.messagesBuilder })))));
   }
   static get is() { return "snk-form-config"; }
   static get encapsulation() { return "scoped"; }