@sankhyalabs/sankhyablocks 9.1.0-ms.5 → 9.1.0-ms.7

package/dist/cjs/{FormConfigHelper-c664dbae.js → FormConfigHelper-ebb77625.js}

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

package/dist/cjs/{ISave-e0be2362.js → ISave-18ffb73e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const core = require('@sankhyalabs/core');
-const DataFetcher = require('./DataFetcher-e23a263b.js');
+const DataFetcher = require('./DataFetcher-ad9fb3bb.js');
 
 function buildGridMetadata(rawValue) {
   const fieldsMetadata = buildFieldsMetadata(rawValue.fieldsMetadata);

package/dist/cjs/{SnkFormConfigManager-61bf3266.js → SnkFormConfigManager-65e5288e.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const ConfigStorage = require('./ConfigStorage-34aa43d8.js');
+const ConfigStorage = require('./ConfigStorage-1931defc.js');
 const core = require('@sankhyalabs/core');
-const formConfigFetcher = require('./form-config-fetcher-d8b78403.js');
+const formConfigFetcher = require('./form-config-fetcher-f6e66d64.js');
 const constants = require('./constants-6d82e405.js');
 
 class SnkFormConfigManager {
@@ -153,7 +153,7 @@ class SnkFormConfigManager {
     }
   }
   getConfig(dataUnit, ignoreReadOnlyFormFields) {
-    return this.getFormConfig(dataUnit, ignoreReadOnlyFormFields !== null && ignoreReadOnlyFormFields !== void 0 ? ignoreReadOnlyFormFields : true);
+    return this.getFormConfig(dataUnit, ignoreReadOnlyFormFields);
   }
   getFormConfigFetcher() {
     if (this._formConfigFetcher == undefined) {

package/dist/cjs/{auth-fetcher-8670a38f.js → auth-fetcher-afbe69ab.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const core = require('@sankhyalabs/core');
-const formConfigFetcher = require('./form-config-fetcher-d8b78403.js');
+const formConfigFetcher = require('./form-config-fetcher-f6e66d64.js');
 
 class AuthFetcher extends formConfigFetcher.ResourceFetcher {
   getData(resourceID) {

package/dist/cjs/config-header.cjs.entry.js

@@ -66,9 +66,9 @@ const ConfigHeader = class {
     if (!this.hasChanges && !this.optionConfigChanged)
       return;
     if (this.hasChanges) {
-      return (index.h("div", { class: "right-group" }, index.h("ez-button", { title: 'Cancelar', label: 'Cancelar', onClick: this.closeFormConfig.bind(this), size: "medium" }), index.h("ez-button", { title: 'Salvar', label: 'Salvar', class: 'ez-button--primary ez-padding-left--medium', onClick: () => this.saveFormConfig(), size: "medium" })));
+      return (index.h("div", { class: "right-group" }, index.h("ez-button", { title: this.getMessage('snkFormConfig.actions.cancel'), label: this.getMessage('snkFormConfig.actions.cancel'), onClick: this.closeFormConfig.bind(this), size: "medium" }), index.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 (index.h("div", { class: "right-group" }, index.h("ez-button", { title: 'Cancelar', label: 'Cancelar', onClick: this.closeFormConfig.bind(this), size: "medium" }), index.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 (index.h("div", { class: "right-group" }, index.h("ez-button", { title: this.getMessage('snkFormConfig.actions.cancel'), label: this.getMessage('snkFormConfig.actions.cancel'), onClick: this.closeFormConfig.bind(this), size: "medium" }), index.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 (index.h(index.Host, null, index.h("div", { class: 'left-group' }, index.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" }), index.h("h1", { class: "ez-title ez-title--primary ez-title--extra-large ez-padding--small" }, this.getMessage('snkFormConfig.title')), index.h("configs-button", { hasChanges: this.hasChanges, configOptions: this.configOptions, selectedConfig: this.selectedConfig, messagesBuilder: this.messagesBuilder })), this.renderSaveActions()));

package/dist/cjs/{dataunit-fetcher-c34a8217.js → dataunit-fetcher-c7253b02.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const core = require('@sankhyalabs/core');
-const DataFetcher = require('./DataFetcher-e23a263b.js');
+const DataFetcher = require('./DataFetcher-ad9fb3bb.js');
 const constants = require('@sankhyalabs/ezui/dist/collection/utils/constants');
 const UnitMetadata = require('@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata');
 const utils = require('@sankhyalabs/ezui/dist/collection/components/ez-grid/utils');
@@ -520,36 +520,37 @@ class DatasetStrategy {
 
 async function showAskCancelPaginationPopup() {
   return new Promise((resolve) => {
-    const { checkboxContainer, checkbox } = buildCheckboxContainer();
-    const popup = builPopup(resolve, checkbox);
+    const messagesBuilder = new DataFetcher.SnkMessageBuilder();
+    const { checkboxContainer, checkbox } = buildCheckboxContainer(messagesBuilder);
+    const popup = builPopup(resolve, checkbox, messagesBuilder);
     const contentContainer = buildContentContainer();
-    contentContainer.appendChild(buildMessage());
-    contentContainer.appendChild(checkboxContainer);
     const actionsContainer = buildActionsContainer();
-    actionsContainer.appendChild(buildContinuePaginationBtn(popup, checkbox, resolve));
-    actionsContainer.appendChild(buildCancelPaginationBtn(popup, resolve));
+    contentContainer.appendChild(checkboxContainer);
+    contentContainer.appendChild(buildMessage(messagesBuilder));
+    actionsContainer.appendChild(buildContinuePaginationBtn(popup, checkbox, resolve, messagesBuilder));
+    actionsContainer.appendChild(buildCancelPaginationBtn(popup, resolve, messagesBuilder));
     contentContainer.appendChild(actionsContainer);
     popup.appendChild(contentContainer);
     document.body.appendChild(popup);
   });
 }
-function buildCheckboxContainer() {
+function buildCheckboxContainer(messagesBuilder) {
   const checkboxContainer = document.createElement('div');
   checkboxContainer.style.marginBottom = '14px';
   checkboxContainer.style.display = 'flex';
   checkboxContainer.style.alignItems = 'center';
-  const { checkbox, checkboxLabel } = buildCheckbox();
+  const { checkbox, checkboxLabel } = buildCheckbox(messagesBuilder);
   checkboxContainer.appendChild(checkbox);
   checkboxContainer.appendChild(checkboxLabel);
   return { checkboxContainer, checkbox };
 }
-function buildCheckbox() {
+function buildCheckbox(messagesBuilder) {
   const checkbox = document.createElement('input');
   checkbox.type = 'checkbox';
   checkbox.id = 'loadAll';
   const checkboxLabel = document.createElement('label');
   checkboxLabel.htmlFor = 'loadAll';
-  checkboxLabel.textContent = 'Carregar tudo';
+  checkboxLabel.textContent = messagesBuilder === null || messagesBuilder === void 0 ? void 0 : messagesBuilder.getMessage("dataUnitDataLoaderHelper.checkbox.loadAll");
   checkboxLabel.style.marginLeft = '5px';
   return { checkbox, checkboxLabel };
 }
@@ -569,23 +570,23 @@ function buildContentContainer() {
   contentContainer.style.fontSize = 'var(--text--medium)';
   return contentContainer;
 }
-function buildMessage() {
+function buildMessage(messagesBuilder) {
   const message = document.createElement('div');
   const line1 = document.createElement('p');
   const line2 = document.createElement('p');
   const line3 = document.createElement('p');
   line3.style.fontWeight = 'var(--text-weight--large, 600)';
-  line1.textContent = 'Uma quantidade de registros muito grande está sendo carregada.';
-  line2.textContent = 'Recomendamos que a paginação seja cancelada e que seja criado um filtro para os registros.';
-  line3.textContent = 'Deseja cancelar o carregamento?';
+  line1.textContent = messagesBuilder === null || messagesBuilder === void 0 ? void 0 : messagesBuilder.getMessage("dataUnitDataLoaderHelper.pagination.line1");
+  line2.textContent = messagesBuilder === null || messagesBuilder === void 0 ? void 0 : messagesBuilder.getMessage("dataUnitDataLoaderHelper.pagination.line2");
+  line3.textContent = messagesBuilder === null || messagesBuilder === void 0 ? void 0 : messagesBuilder.getMessage("dataUnitDataLoaderHelper.pagination.line3");
   message.appendChild(line1);
   message.appendChild(line2);
   message.appendChild(line3);
   return message;
 }
-function buildCancelPaginationBtn(popup, resolve) {
+function buildCancelPaginationBtn(popup, resolve, messagesBuilder) {
   const cancelPaginationBtn = document.createElement('ez-button');
-  cancelPaginationBtn.label = 'Cancelar paginação';
+  cancelPaginationBtn.label = messagesBuilder === null || messagesBuilder === void 0 ? void 0 : messagesBuilder.getMessage("dataUnitDataLoaderHelper.buttons.cancel");
   cancelPaginationBtn.size = 'medium';
   cancelPaginationBtn.classList.add('ez-button--primary');
   cancelPaginationBtn.onclick = () => {
@@ -594,9 +595,9 @@ function buildCancelPaginationBtn(popup, resolve) {
   };
   return cancelPaginationBtn;
 }
-function buildContinuePaginationBtn(popup, checkBox, resolve) {
+function buildContinuePaginationBtn(popup, checkBox, resolve, messagesBuilder) {
   const continuePaginationBtn = document.createElement('ez-button');
-  continuePaginationBtn.label = 'Continuar';
+  continuePaginationBtn.label = messagesBuilder === null || messagesBuilder === void 0 ? void 0 : messagesBuilder.getMessage("dataUnitDataLoaderHelper.buttons.continue");
   continuePaginationBtn.size = 'medium';
   continuePaginationBtn.onclick = () => {
     document.body.removeChild(popup);
@@ -604,11 +605,11 @@ function buildContinuePaginationBtn(popup, checkBox, resolve) {
   };
   return continuePaginationBtn;
 }
-function builPopup(resolve, checkBox) {
+function builPopup(resolve, checkBox, messagesBuilder) {
   const popup = document.createElement('ez-popup');
   popup.opened = true;
   popup.size = 'x-small';
-  popup.ezTitle = 'Aviso';
+  popup.ezTitle = messagesBuilder === null || messagesBuilder === void 0 ? void 0 : messagesBuilder.getMessage("dataUnitDataLoaderHelper.pagination.title");
   popup.heightMode = "auto";
   popup.addEventListener('ezClosePopup', () => {
     document.body.removeChild(popup);

package/dist/cjs/field-config_2.cjs.entry.js

@@ -7,7 +7,7 @@ const core = require('@sankhyalabs/core');
 const constants = require('./constants-6d82e405.js');
 const DataType = require('@sankhyalabs/core/dist/dataunit/metadata/DataType');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
-const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+const FormConfigHelper = require('./FormConfigHelper-ebb77625.js');
 
 const fieldConfigCss = ".field-config-container.sc-field-config{font-family:'Roboto';color:#2b3a54;display:flex;flex-direction:column;gap:10px;width:330px;justify-content:space-between}.header.sc-field-config{display:flex;font-weight:500;font-size:16px}.actions.sc-field-config{display:flex;align-items:flex-end;gap:12px}";
 
@@ -237,7 +237,7 @@ const FieldConfig = class {
     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();
@@ -248,7 +248,7 @@ const FieldConfig = class {
     this._application = core.ApplicationContext.getContextValue('__SNK__APPLICATION__');
   }
   render() {
-    return (index.h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": 'Configuração do campo', onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, index.h("div", { class: 'field-config-container' }, index.h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), index.h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), value: this.getDefaultType() }, index.h("option", { value: constants.DEFAULT_TYPE.fixed }, this.getMessage('snkConfigOptions.options.valueFixed')), index.h("option", { value: constants.DEFAULT_TYPE.variable }, this.getMessage('snkConfigOptions.options.variable'))), this.renderDefaultValueEditor(), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: FormConfigHelper.getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: FormConfigHelper.getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), index.h("div", { class: 'actions' }, index.h("ez-button", { label: 'Cancelar', onClick: () => this.handleDiscardChanges() }), index.h("ez-button", { label: 'Confirmar', class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
+    return (index.h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": this.getMessage('snkConfigOptions.fieldConfig.title'), onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, index.h("div", { class: 'field-config-container' }, index.h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), index.h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), value: this.getDefaultType() }, index.h("option", { value: constants.DEFAULT_TYPE.fixed }, this.getMessage('snkConfigOptions.options.valueFixed')), index.h("option", { value: constants.DEFAULT_TYPE.variable }, this.getMessage('snkConfigOptions.options.variable'))), this.renderDefaultValueEditor(), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: FormConfigHelper.getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: FormConfigHelper.getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), index.h("div", { class: 'actions' }, index.h("ez-button", { label: this.getMessage('snkConfigOptions.fieldConfig.buttons.cancel'), onClick: () => this.handleDiscardChanges() }), index.h("ez-button", { label: this.getMessage('snkConfigOptions.fieldConfig.buttons.confirm'), class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
   }
   static get watchers() { return {
     "fieldLabel": ["observeFieldLabel"]
@@ -283,14 +283,17 @@ const FieldItem = class {
   }
   renderFieldConfig() {
     if (this.onLayoutConfig && this.dataUnit && this.messagesBuilder) {
-      return (index.h("field-config", { ref: ref => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => index.forceUpdate(this) }));
+      return (index.h("field-config", { ref: (ref) => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => index.forceUpdate(this) }));
     }
   }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
   renderActions() {
     if (this.onLayoutConfig) {
-      return (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: 'Remover' }), index.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 (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: this.getMessage('snkFieldConfig.titleRemove') }), index.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 (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: 'Adicionar ao Layout' })));
+    return (index.h("div", { class: 'actions hiddeble' }, index.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/cjs/fields-layout.cjs.entry.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1cf293c1.js');
 const core = require('@sankhyalabs/core');
 const sortable_esm = require('./sortable.esm-9a110bb7.js');
-const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+const FormConfigHelper = require('./FormConfigHelper-ebb77625.js');
 const constants = require('./constants-6d82e405.js');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
 
-const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:grid;gap:12px;min-height:65px;width:100%;padding:6px 0;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:\"Arraste e solte um campo aqui\";color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{content:\"Inclua estes campos nos grupos ou deixe-os separados no topo do formulário\";width:100%;display:block;font-size:16px;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
+const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:grid;gap:12px;min-height:65px;width:100%;padding:6px 0;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:var(--empty-content-message, \"Arraste e solte um campo aqui\");color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{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;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
 
 const FieldLayoutComponent = class {
   constructor(hostRef) {
@@ -31,8 +31,10 @@ const FieldLayoutComponent = class {
     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;
@@ -83,10 +85,9 @@ const FieldLayoutComponent = class {
   }
   buildNewGroupName() {
     var _a, _b;
-    const qtdWithNewGroupName = (_b = (_a = this.groupsListMemory.filter(g => g.name.includes(constants.GROUP_NAMES.newGroup))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-    return qtdWithNewGroupName === 0
-      ? constants.GROUP_NAMES.newGroup
-      : `${constants.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 !== constants.GROUP_NAMES.noGroup);
@@ -162,7 +163,7 @@ const FieldLayoutComponent = class {
       });
     }
     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) {
@@ -181,7 +182,7 @@ const FieldLayoutComponent = class {
       });
     }
     catch (e) {
-      console.error('Falha ao tornar grupo arrastável: ', containerId);
+      console.error(this.getMessage('snkFormConfig.errors.failMakeFieldContainerDraggable'), containerId);
     }
   }
   getContainerElement(id) {
@@ -316,21 +317,27 @@ const FieldLayoutComponent = class {
     var _a;
     if (((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === constants.TAB_NAMES.main)
       return;
-    return (index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.startGuideNameEdition(), size: "medium", iconName: 'edit', title: 'Renomear' }));
+    return (index.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(constants.GROUP_NAMES.noGroup);
+    this.setCustomCSSProperties();
   }
   render() {
     if (!this.selectedGuide) {
-      return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, index.h("span", { class: 'no-guide-selected' }, "Selecione uma guia e comece a configurar")));
+      return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, index.h("span", { class: 'no-guide-selected' }, this.getMessage('snkFormConfig.form.noGuideSelected'))));
     }
-    return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), index.h("div", { class: 'layout-container' }, index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { class: 'no-group-container' }, index.h("div", { id: constants.GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": constants.GROUP_NAMES.noGroup }, this.renderFixedFields())), index.h("hr", null), index.h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), index.h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, "Criar novo grupo"))));
+    return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), index.h("div", { class: 'layout-container' }, index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { class: 'no-group-container' }, index.h("div", { id: constants.GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": constants.GROUP_NAMES.noGroup }, this.renderFixedFields())), index.h("hr", null), index.h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), index.h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, this.getMessage('snkFormConfig.form.createNewGroup')))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "messagesBuilder": ["onMessagesBuilderChange"],
     "selectedGuide": ["observeSelectedGuide"],
     "groupsList": ["observeGroupList"],
     "isEditGuideNameActive": ["observeIsEditGuideNameActive"]

package/dist/cjs/fields-selector.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1cf293c1.js');
 const sortable_esm = require('./sortable.esm-9a110bb7.js');
-const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+const FormConfigHelper = require('./FormConfigHelper-ebb77625.js');
 const core = require('@sankhyalabs/core');
 require('./constants-6d82e405.js');
 
@@ -17,6 +17,7 @@ const FieldsSelector = class {
     this.availableFields = [];
     this.dataUnit = undefined;
     this.filterTerm = '';
+    this.messagesBuilder = undefined;
   }
   onAddField(evt) {
     const newIndex = evt.newIndex;
@@ -42,14 +43,14 @@ const FieldsSelector = class {
   }
   renderFields() {
     const fieldsToShow = core.ArrayUtils.applyStringFilter(this.filterTerm, this.availableFields);
-    return fieldsToShow.map(field => (index.h("field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field })));
+    return fieldsToShow.map(field => (index.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_esm.Sortable(this.el.querySelector(`#${FormConfigHelper.ID_AVAILABLE_FIELDS}`), {
@@ -61,11 +62,15 @@ const FieldsSelector = class {
       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 (index.h(index.Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, index.h("span", { class: 'fields-label ez-padding-bottom--small' }, "Campos dispon\u00EDveis"), index.h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: "Buscar campo", onEzChange: evt => this.filterTerm = evt.detail }), index.h("span", { class: 'fields-count' }, this.getCountText()), index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { id: FormConfigHelper.ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+    return (index.h(index.Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, index.h("span", { class: 'fields-label ez-padding-bottom--small' }, this.getMessage('snkFormConfig.availableFields.title')), index.h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.availableFields.labelSearchField'), onEzChange: evt => this.filterTerm = evt.detail }), index.h("span", { class: 'fields-count' }, this.getCountText()), index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { id: FormConfigHelper.ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/{form-config-fetcher-d8b78403.js → form-config-fetcher-f6e66d64.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const DataFetcher = require('./DataFetcher-e23a263b.js');
+const DataFetcher = require('./DataFetcher-ad9fb3bb.js');
 const core = require('@sankhyalabs/core');
 
 class ResourceFetcher {

package/dist/cjs/guides-configurator.cjs.entry.js

@@ -8,7 +8,7 @@ const core = require('@sankhyalabs/core');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
 const constants = require('./constants-6d82e405.js');
 
-const guidesConfiguratorCss = ".ezSidebarNavigator.sc-guides-configurator{--ez-sidebar-navigator--height:calc(100vh - 118px)}.navigator-container.sc-guides-configurator{height:calc(100vh - 175px);display:flex;flex-direction:column;justify-content:space-between}.collapsible-container.sc-guides-configurator{display:flex;flex-direction:column;gap:12px;flex-grow:1;max-height:calc(100vh - 240px);overflow:auto}.collapsible-item.sc-guides-configurator{padding:6px;border-radius:6px;border:1px solid #dce0e8}.add-button-container.sc-guides-configurator{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;gap:6px;cursor:pointer;justify-content:center}.add-button-container.sc-guides-configurator span.sc-guides-configurator{display:block}.guide-list.sc-guides-configurator{display:flex;flex-direction:column;width:100%;min-height:10px}.guide-list.hidden-empty-content.sc-guides-configurator::before{content:\"Nenhuma guia oculta\";display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.guide-list.visible-empty-content.sc-guides-configurator::before{content:\"Nenhuma guia visível\";display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.item-label.sc-guides-configurator{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}.guide-item.sc-guides-configurator{margin:0 3px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:5px 10px;border-radius:6px;transition:all 0.2s ease-in-out;height:32px}.guide-item.sc-guides-configurator .actions.sc-guides-configurator{display:flex;gap:8px;transition:0.2s ease-in-out;visibility:hidden;opacity:0}.guide-item.sc-guides-configurator:hover .actions.sc-guides-configurator{visibility:visible;opacity:1}ez-button.sc-guides-configurator{width:24px;align-items:center;justify-content:center;display:flex}.ghost.sc-guides-configurator{opacity:.5;background:#e2eaf4}.main-guide.sc-guides-configurator{padding:12px;margin:12px 0;border:1px solid #dce0e8;border-radius:6px;transition:all 0.2s ease-in-out}.guide-item.selected.sc-guides-configurator,.main-guide.selected.sc-guides-configurator{background:#E2F4EF}.guide-item.sc-guides-configurator:hover,.main-guide.sc-guides-configurator:hover{background:#f5fcfa}";
+const guidesConfiguratorCss = ".ezSidebarNavigator.sc-guides-configurator{--ez-sidebar-navigator--height:calc(100vh - 118px)}.navigator-container.sc-guides-configurator{height:calc(100vh - 175px);display:flex;flex-direction:column;justify-content:space-between}.collapsible-container.sc-guides-configurator{display:flex;flex-direction:column;gap:12px;flex-grow:1;max-height:calc(100vh - 240px);overflow:auto}.collapsible-item.sc-guides-configurator{padding:6px;border-radius:6px;border:1px solid #dce0e8}.add-button-container.sc-guides-configurator{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;gap:6px;cursor:pointer;justify-content:center}.add-button-container.sc-guides-configurator span.sc-guides-configurator{display:block}.guide-list.sc-guides-configurator{display:flex;flex-direction:column;width:100%;min-height:10px}.guide-list.hidden-empty-content.sc-guides-configurator::before{content:var(--no-hidden-guides-message, \"Nenhuma guia oculta\");display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.guide-list.visible-empty-content.sc-guides-configurator::before{content:var(--no-visible-guides-message, \"Nenhuma guia visível\");display:block;font-size:16px;font-weight:400;color:#AFB6C0;margin:auto;padding:8px}.item-label.sc-guides-configurator{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}.guide-item.sc-guides-configurator{margin:0 3px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:5px 10px;border-radius:6px;transition:all 0.2s ease-in-out;height:32px}.guide-item.sc-guides-configurator .actions.sc-guides-configurator{display:flex;gap:8px;transition:0.2s ease-in-out;visibility:hidden;opacity:0}.guide-item.sc-guides-configurator:hover .actions.sc-guides-configurator{visibility:visible;opacity:1}ez-button.sc-guides-configurator{width:24px;align-items:center;justify-content:center;display:flex}.ghost.sc-guides-configurator{opacity:.5;background:#e2eaf4}.main-guide.sc-guides-configurator{padding:12px;margin:12px 0;border:1px solid #dce0e8;border-radius:6px;transition:all 0.2s ease-in-out}.guide-item.selected.sc-guides-configurator,.main-guide.selected.sc-guides-configurator{background:#E2F4EF}.guide-item.sc-guides-configurator:hover,.main-guide.sc-guides-configurator:hover{background:#f5fcfa}";
 
 const GuidesConfigurator = class {
   constructor(hostRef) {
@@ -33,6 +33,9 @@ const GuidesConfigurator = class {
     this.selectedGuide = undefined;
     this.messagesBuilder = undefined;
   }
+  onMessagesBuilderChange() {
+    this.setCustomCSSProperties();
+  }
   observeVisibleGuides(newGuides) {
     this.initGuidesConfig(newGuides);
   }
@@ -99,7 +102,9 @@ const GuidesConfigurator = class {
     const guidesToShow = core.ArrayUtils.applyStringFilter(this.filterTerm, guides);
     return guidesToShow.map(guide => {
       var _a;
-      return (index.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) }, index.h("span", null, index.h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), index.h("span", { class: 'item-label' }, guide.label), index.h("div", { class: 'actions' }, index.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' }), index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", iconName: 'delete', title: 'Excluir' }))));
+      return (index.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) }, index.h("span", null, index.h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), index.h("span", { class: 'item-label' }, guide.label), index.h("div", { class: 'actions' }, index.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') }), index.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) {
@@ -145,16 +150,22 @@ const GuidesConfigurator = class {
   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 (index.h("ez-sidebar-navigator", { class: 'ezSidebarNavigator', type: 'fixed', size: 'md', titleMenu: 'Guias' }, index.h("div", { class: 'navigator-container' }, index.h("ez-filter-input", { slot: "content", mode: "slim", label: "Buscar guia", onEzChange: evt => this.filterTerm = evt.detail }), index.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' : ''}` }, index.h("span", null, (_c = this.mainGuide) === null || _c === void 0 ? void 0 : _c.label)), index.h("div", { class: 'collapsible-container' }, index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: "Guias vis\u00EDveis", headerSize: "large" }, index.h("div", { id: this.ID_VISIBLE_GUIDES, class: `guide-list ${!this.visibleGuides.length ? 'visible-empty-content' : ''}` }, this.renderItems(this.visibleGuides)))), index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: "Guias ocultas", headerSize: "large" }, index.h("div", { id: this.ID_HIDDEN_GUIDES, class: `guide-list ${!this.hiddenGuides.length ? 'hidden-empty-content' : ''}` }, this.renderItems(this.hiddenGuides))))), index.h("div", { class: 'add-button-container', onClick: this.handleAddGuide.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, "Criar nova guia")))));
+    return (index.h("ez-sidebar-navigator", { class: 'ezSidebarNavigator', type: 'fixed', size: 'md', titleMenu: this.getMessage('snkFormConfig.guidesConfigurator.title') }, index.h("div", { class: 'navigator-container' }, index.h("ez-filter-input", { slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.guidesConfigurator.searchGuide'), onEzChange: evt => this.filterTerm = evt.detail }), index.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' : ''}` }, index.h("span", null, (_c = this.mainGuide) === null || _c === void 0 ? void 0 : _c.label)), index.h("div", { class: 'collapsible-container' }, index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: this.getMessage('snkFormConfig.guidesConfigurator.visibleGuides'), headerSize: "large" }, index.h("div", { id: this.ID_VISIBLE_GUIDES, class: `guide-list ${!this.visibleGuides.length ? 'visible-empty-content' : ''}` }, this.renderItems(this.visibleGuides)))), index.h("div", { class: 'collapsible-item' }, index.h("ez-collapsible-box", { label: this.getMessage('snkFormConfig.guidesConfigurator.hiddenGuides'), headerSize: "large" }, index.h("div", { id: this.ID_HIDDEN_GUIDES, class: `guide-list ${!this.hiddenGuides.length ? 'hidden-empty-content' : ''}` }, this.renderItems(this.hiddenGuides))))), index.h("div", { class: 'add-button-container', onClick: this.handleAddGuide.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, this.getMessage('snkFormConfig.guidesConfigurator.createNewGuide'))))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "messagesBuilder": ["onMessagesBuilderChange"],
     "guidesList": ["observeVisibleGuides"],
     "selectedGuide": ["observeSelectedGuide"]
   }; }