@sankhyalabs/sankhyablocks 9.1.14 → 9.2.0-dev.10

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"; }

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

@@ -97,9 +97,6 @@ export class SnkGrid {
       btns.unshift(TaskbarElement.UPDATE_MULTIPLE);
     return btns;
   }
-  async refreshColumnFilterDataSource() {
-    await this._grid.refreshColumnFilterDataSource();
-  }
   /**
    * Recarrega a configuração da grade.
    * @description Este método força o recarregamento da configuração da grade a partir do `ConfigStorage`. A operação é assíncrona, mas o método não aguarda sua conclusão.
@@ -1294,22 +1291,6 @@ export class SnkGrid {
   }
   static get methods() {
     return {
-      "refreshColumnFilterDataSource": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
       "reloadConfig": {
         "complexType": {
           "signature": "() => Promise<void>",

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

@@ -1,4 +1,4 @@
-import { StringUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { h, Host } from '@stencil/core';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
@@ -75,23 +75,10 @@ export class SnkGridConfig {
     this._orderListItems = newSortableList;
   }
   createColumnList() {
-    let visibleGroup = {
-      group: this.getMessage('snkGridConfig.group.visible'),
-      items: [],
-    };
-    let hiddenGroup = {
-      group: this.getMessage('snkGridConfig.group.hidden'),
-      items: [],
-      sort: ORDER_VALUES.asc.value,
-    };
-    this.columns.forEach((column) => {
-      var _a;
-      let item = {
-        label: column.label,
-        selected: false,
-        sort: (_a = column === null || column === void 0 ? void 0 : column.sort) !== null && _a !== void 0 ? _a : ORDER_VALUES.asc.value,
-        id: column.name,
-      };
+    const visibleGroup = this.buildVisibleGroup();
+    const hiddenGroup = this.buildHiddenGroup();
+    this.columns.forEach(column => {
+      const item = this.buildListItemFromColumn(column);
       if (column.hidden) {
         hiddenGroup.items.push(item);
       }
@@ -104,6 +91,19 @@ export class SnkGridConfig {
     this._hiddenList = hiddenGroup.items;
     this.createOrderList();
   }
+  buildVisibleGroup() {
+    return {
+      group: this.getMessage('snkGridConfig.group.visible'),
+      items: [],
+    };
+  }
+  buildHiddenGroup() {
+    return {
+      group: this.getMessage('snkGridConfig.group.hidden'),
+      items: [],
+      sort: ORDER_VALUES.asc.value,
+    };
+  }
   createOrderListSlotDataElementId(item) {
     return `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
   }
@@ -116,7 +116,7 @@ export class SnkGridConfig {
     return (h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, "data-element-id": dataElementId, onEzChange: (evt) => {
         evt.stopPropagation();
         this.updateOrder(evt.detail, item.label);
-      } }));
+      }, preventAutoFocus: true }));
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
@@ -151,25 +151,21 @@ export class SnkGridConfig {
       this.closeConfig();
       return;
     }
-    let newColumnList = [];
-    this._columListItems.forEach((group) => {
-      group.items.forEach((item) => {
-        const baseColumn = this.columns.find((column) => column.label === item.label);
-        let newColumnItem = Object.assign({}, baseColumn);
-        if (group.group === this.getMessage('snkGridConfig.group.hidden')) {
-          newColumnItem.hidden = true;
-        }
-        else {
-          newColumnItem.hidden = false;
-        }
-        newColumnList.push(newColumnItem);
-      });
-    });
-    this.columns = newColumnList;
+    this.updateColumns();
     this._dataChanged = false;
     this.closeConfig();
     this.save();
   }
+  updateColumns() {
+    this.columns = this._columListItems.flatMap((group) => group.items.map((item) => this.buildColumnFromListItem(item, group)));
+  }
+  buildColumnFromListItem(item, group) {
+    const baseColumn = this.columns.find((column) => column.label === item.label);
+    if (!baseColumn) {
+      throw new Error(`Column with label "${item.label}" not found.`);
+    }
+    return Object.assign(Object.assign({}, baseColumn), { hidden: group.group === this.getMessage('snkGridConfig.group.hidden') });
+  }
   saveGridConfigOnStorage(_newConfig) {
     ConfigStorage.saveGridConfig(_newConfig, this.configName, this.resourceID)
       .then((savedConfig) => {
@@ -339,13 +335,55 @@ export class SnkGridConfig {
       },
     };
   }
+  renderResetConfigBtn() {
+    if (!this.resourceID)
+      return;
+    return h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.reset'), onClick: () => this.setDefaultConfig() });
+  }
+  async setDefaultConfig() {
+    var _a;
+    if (!this.resourceID)
+      return;
+    this._dataChanged = true;
+    const config = await ConfigStorage.getDefaultGridConfig(this.resourceID);
+    const defaultVisibleCols = (_a = config === null || config === void 0 ? void 0 : config.columns.map(col => col.name)) !== null && _a !== void 0 ? _a : [];
+    const visibleGroup = this.buildVisibleGroup();
+    const hiddenGroup = this.buildHiddenGroup();
+    const visibleItemsMap = new Map();
+    this.columns.forEach(column => {
+      const item = this.buildListItemFromColumn(column);
+      if (defaultVisibleCols.includes(column.name)) {
+        visibleItemsMap.set(column.name, item);
+      }
+      else {
+        hiddenGroup.items.push(item);
+      }
+    });
+    visibleGroup.items = defaultVisibleCols
+      .map(name => visibleItemsMap.get(name))
+      .filter(item => item);
+    this._columListItems = [visibleGroup, hiddenGroup];
+    this._visibleList = visibleGroup.items;
+    this._hiddenList = hiddenGroup.items;
+    this.updateColumns();
+    this.createOrderList();
+  }
+  buildListItemFromColumn(column) {
+    var _a;
+    return {
+      label: column.label,
+      selected: false,
+      sort: (_a = column === null || column === void 0 ? void 0 : column.sort) !== null && _a !== void 0 ? _a : ORDER_VALUES.asc.value,
+      id: column.name,
+    };
+  }
   render() {
-    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "ez-margin-bottom--medium" }, h("label", { class: "title" }, this.getMessage('snkGridConfig.gridConfiguration')), h("label", { class: "subtitle" }, this.getMessage('snkGridConfig.columnVisibilityOrder'))), h("div", { class: "button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", class: "ez-button--tertiary", onClick: () => this.closeConfig() })))), h("div", { class: "grid-config__body" }, h("ez-collapsible-box", { id: 'group-select-columns', label: this.getMessage('snkGridConfig.columnsSelection'), "header-size": "medium", key: 'key_group-select-columns', value: this._collapsibleBoxListSelect, onEzChange: ({ detail }) => this._collapsibleBoxListOrder = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { leftList: this._hiddenList, leftTitle: this.getMessage('snkGridConfig.availableColumns'), rightList: this._visibleList, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), onEzRightListChanged: ({ detail }) => this.handleRightListChange(detail), emptyMessage: {
+    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "ez-margin-bottom--medium" }, h("label", { class: "title" }, this.getMessage('snkGridConfig.gridConfiguration')), h("label", { class: "subtitle" }, this.getMessage('snkGridConfig.columnVisibilityOrder'))), h("div", { class: "button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", class: "ez-button--tertiary", onClick: () => this.closeConfig() })))), h("div", { class: 'grid-config__body' }, h("ez-collapsible-box", { id: 'group-select-columns', label: this.getMessage('snkGridConfig.columnsSelection'), "header-size": "medium", key: 'key_group-select-columns', value: this._collapsibleBoxListSelect, onEzChange: ({ detail }) => this._collapsibleBoxListOrder = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { leftList: this._hiddenList, leftTitle: this.getMessage('snkGridConfig.availableColumns'), rightList: this._visibleList, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), onEzRightListChanged: ({ detail }) => this.handleRightListChange(detail), emptyMessage: {
         LEFT_LIST: this.getMessage('snkGridConfig.emptyMensage.left'),
         RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
       }, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), emptyMessage: {
         RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
-      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' })))), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.cancel'), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage('snkGridConfig.complete'), class: "ez-button--primary", onClick: () => this.finish() }))));
+      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' })))), h("div", { class: "grid-config__footer" }, this.renderResetConfigBtn(), h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.cancel'), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage('snkGridConfig.complete'), class: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get is() { return "snk-grid-config"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-grid-config/snk-select-box/snk-select-box.js

@@ -3,9 +3,10 @@ import { ORDER_VALUES } from '../../../lib/utils/constants';
 export class SelectBox {
   constructor() {
     this.selectedOption = ORDER_VALUES.none;
+    this.preventAutoFocus = false;
   }
   render() {
-    return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true }, Object.keys(ORDER_VALUES).map((key) => {
+    return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true, preventAutoFocus: this.preventAutoFocus }, Object.keys(ORDER_VALUES).map((key) => {
       return h("option", { value: ORDER_VALUES[key].value }, ORDER_VALUES[key].label);
     })));
   }
@@ -46,6 +47,24 @@ export class SelectBox {
         "attribute": "selected-option",
         "reflect": false,
         "defaultValue": "ORDER_VALUES.none"
+      },
+      "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"
       }
     };
   }

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

@@ -6,6 +6,7 @@ const FORM_COL_CONFIG_PREFIX = 'formColCfg.';
 export class SnkLayoutFormConfig {
   constructor() {
     this._formConfigFetcher = new FormConfigFetcher();
+    this.messagesBuilder = undefined;
     this.layoutType = FormLayout.CASCADE;
   }
   /**
@@ -30,8 +31,12 @@ export class SnkLayoutFormConfig {
   toggleLayout(key) {
     this.layoutType = key;
   }
+  getMessage(key, params) {
+    var _a;
+    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
+  }
   render() {
-    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: "Layout em cascata", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o organizados em uma coluna \u00FAnica.")), h("div", null, h("ez-check", { label: "Layout lado a lado", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o dispostos lado a lado, ajustando-se automaticamente \u00E0 largura da tela."))));
+    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.cascadeLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.cascadeLayout.description'))), h("div", null, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.sideBySideLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.sideBySideLayout.description')))));
   }
   static get is() { return "snk-layout-form-config"; }
   static get encapsulation() { return "scoped"; }
@@ -45,6 +50,30 @@ export class SnkLayoutFormConfig {
       "$": ["snk-layout-form-config.css"]
     };
   }
+  static get properties() {
+    return {
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
   static get states() {
     return {
       "layoutType": {}