@sankhyalabs/sankhyablocks 9.1.0-dev.2 → 9.1.0-dev.21

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", { 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

@@ -213,7 +213,6 @@ export class SnkGrid {
     this._grid.getColumnsState()
       .then((gridColumns) => {
       this._snkGridConfig.columns = gridColumns.filter(c => c.name);
-      this._snkGridConfig.selectedIndex = 0;
       this._popUpGridConfig = true;
     });
   }
@@ -501,7 +500,7 @@ export class SnkGrid {
       return undefined;
     }
     return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large ez-box--no-outline", tabindex: "0" }, h("div", { class: "snk-grid__header ez-margin-bottom--extra-small" }, this._showSnkFilterBar &&
-      h(Fragment, null, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, title: this.filterBarTitle, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this.resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail), disablePersonalizedFilter: this.disablePersonalizedFilter, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" })), h("snk-taskbar", { class: "ez-padding-left--medium ez-padding-top--extra-small", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.topTaskbarCustomSlotId, overflowStrategy: 'none', actionsSettingsList: this.getActionsSettingsList() }, h("slot", { name: this.topTaskbarCustomSlotId }))), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: (evt) => this.gridDoubleClick.emit(evt.detail), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this._enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, useSearchColumn: this.useSearchColumn, suppressHorizontalScroll: this.suppressHorizontalScroll, paginationCounterMode: this.paginationCounterMode, suppressCheckboxColumn: this.suppressCheckboxColumn, compact: this.compact }, h("snk-taskbar", { id: 'teste', dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this.getGridHeaderButtons(), presentationMode: this.presentationMode, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.getActionsList(), primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.gridHeaderCustomSlotId, actionsSettingsList: this.getActionsSettingsList() }, h("slot", { name: this.gridHeaderCustomSlotId }))), h("div", { class: "ez-col ez-col--sd-12 snk-grid-container__footer" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
+      h(Fragment, null, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, title: this.filterBarTitle, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this.resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail), disablePersonalizedFilter: this.disablePersonalizedFilter, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" })), h("snk-taskbar", { class: "ez-padding-left--medium ez-padding-top--extra-small", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.topTaskbarCustomSlotId, overflowStrategy: 'none', actionsSettingsList: this.getActionsSettingsList() }, h("slot", { name: this.topTaskbarCustomSlotId }))), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: (evt) => this.gridDoubleClick.emit(evt.detail), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this._enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, useSearchColumn: this.useSearchColumn, suppressHorizontalScroll: this.suppressHorizontalScroll, paginationCounterMode: this.paginationCounterMode, suppressCheckboxColumn: this.suppressCheckboxColumn, compact: this.compact }, h("snk-taskbar", { id: 'teste', dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this.getGridHeaderButtons(), presentationMode: this.presentationMode, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.getActionsList(), primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.gridHeaderCustomSlotId, actionsSettingsList: this.getActionsSettingsList() }, h("slot", { name: this.gridHeaderCustomSlotId }))), h("div", { class: "ez-col ez-col--sd-12 snk-grid-container__footer" }, h("slot", { name: "SnkGridFooter" })), h("ez-popup", { size: "medium", heightMode: "auto", useHeader: false, opened: this._popUpGridConfig, onEzClosePopup: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -1192,6 +1191,21 @@ export class SnkGrid {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "componentReady",
+        "name": "componentReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o componente estiver completamente carregado."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get methods() {

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

@@ -55,17 +55,14 @@
     /*@doc Define a largura da barra de rolagem do componente.*/
     --snk-grid-config__scrollbar--width: var(--space--small, 6px);
 
-    display: grid;
-    grid-template-rows: auto 1fr auto;
+    display: flex;
+    flex-direction: column;
     max-height: 100%;
     width: 100%;
 }
 
-@media screen and (min-width: 480px) {
-    :host {
-        width: 359px;
-        max-width: 359px;
-    }
+.grid-config__body {
+  overflow: auto;
 }
 
 .padding-right--medium {
@@ -134,42 +131,11 @@ ez-list {
 .grid-config__main {
     overflow-y: auto;
     scrollbar-width: thin;
+    width: 100%;
+    padding-bottom: 20px;
 
     /*public*/
     scrollbar-color: var(--snk-grid-config__scrollbar--color-clicked) var(--snk-grid-config__scrollbar--color-background);
-    padding-right: var(--snk-grid-config__main--padding-right);
-}
-
-.grid-config__main::-webkit-scrollbar {
-    /*public*/
-    width: var(--snk-grid-config__scrollbar--width);
-    max-width: var(--snk-grid-config__scrollbar--width);
-    min-width: var(--snk-grid-config__scrollbar--width);
-    background-color: var(--snk-grid-config__scrollbar--color-background);
-}
-
-.grid-config__main::-webkit-scrollbar-track {
-    /*public*/
-    background-color: var(--snk-grid-config__scrollbar--color-background);
-    border-radius: var(--snk-grid-config__scrollbar--border-radius);
-}
-
-.grid-config__main::-webkit-scrollbar-thumb {
-    /*public*/
-    background-color: var(--snk-grid-config__scrollbar--color-default);
-    border-radius: var(--snk-grid-config__scrollbar--border-radius);
-}
-
-.grid-config__main::-webkit-scrollbar-thumb:vertical:hover,
-.grid-config__main::-webkit-scrollbar-thumb:horizontal:hover {
-    /*public*/
-    background-color: var(--snk-grid-config__scrollbar--color-hover);
-}
-
-.grid-config__main::-webkit-scrollbar-thumb:vertical:active,
-.grid-config__main::-webkit-scrollbar-thumb:horizontal:active {
-    /*public*/
-    background-color: var(--snk-grid-config__scrollbar--color-clicked);
 }
 
 .group-name {
@@ -178,4 +144,4 @@ ez-list {
     font-size: var(--snk-grid-config__group--font-size);
     font-weight: var(--snk-grid-config__group--font-weight);
     padding-bottom: var(--snk-grid-config__group--padding-bottom);
-}
+}