@sankhyalabs/sankhyablocks 9.1.0-dev.1 → 9.1.0-dev.10

package/dist/collection/components/snk-filter-bar/filter-item/snk-filter-item.js

@@ -1,16 +1,9 @@
-import { ElementIDUtils, FloatingManager, DateUtils, MaskFormatter } from '@sankhyalabs/core';
+import { ElementIDUtils, DateUtils, MaskFormatter } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from './filter-item-type.enum';
 import { FilterNumberVariation } from './editors/enum/filterNumberVariation';
 export class SnkFilterItem {
   constructor() {
-    this.innerClickCheck = (_floatingContainer, node) => {
-      if (node.id != FloatingManager.MODAL_ELEMENT_ID) {
-        return true;
-      }
-      this.detailIsVisible = false;
-      return false;
-    };
     this.detailIsVisible = undefined;
     this.config = undefined;
     this.getMessage = undefined;
@@ -19,57 +12,28 @@ export class SnkFilterItem {
   observeDetailIsVisible(value) {
     this.visibleChanged.emit(value);
   }
+  /**
+   * Emitido quando o estado do filtro é alterado.
+   */
+  filterChangeListener() {
+    this.hideDetail();
+  }
   /**
    * Exibe os detalhes de um item da lista.
    */
   async showUp(open = false) {
-    return new Promise(resolve => {
-      var _a;
-      this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
-      if (open) {
-        this._closeCallback = resolve;
-        (_a = this._chipElement) === null || _a === void 0 ? void 0 : _a.blur();
-        window.requestAnimationFrame(() => {
-          this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, this.getFloatOptions());
-          this._popover.show();
-          this.detailIsVisible = true;
-        });
-      }
-    });
-  }
-  updatePosition() {
-    if (this._floatingID == undefined) {
-      return;
+    var _a;
+    this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
+    if (open) {
+      await ((_a = this._chipElement) === null || _a === void 0 ? void 0 : _a.setBlur());
+      await this._popover.showUnder(this._chipElement);
     }
-    FloatingManager.updateFloatPosition(this._popover, this._popoverContainer, this.getFloatOptions());
-  }
-  getFloatOptions() {
-    return {
-      autoClose: true,
-      innerClickTest: this.innerClickCheck,
-      backClickListener: () => this.onDetailCloseCallback(),
-      left: this.getOffsetLeft(),
-      top: this.getOffsetTop(),
-      useOverlay: true,
-      overlayClassName: 'ez-scrim ez-scrim--light',
-      isFixed: true
-    };
-  }
-  getOffsetLeft() {
-    const padding = getComputedStyle(this._filterItemElement).getPropertyValue("padding-left");
-    const rect = this._filterItemElement.getBoundingClientRect();
-    // Width baseado no conteudo do snk-filter-detail. Nesse momento ele retorna 0px pois ainda não foi criado em tela.
-    const filterDetailWidth = 430;
-    const adjustRightPosition = filterDetailWidth - (document.body.clientWidth - rect.left);
-    return `calc(${rect.x}px + ${padding} - ${adjustRightPosition > 0 ? adjustRightPosition : 0}px)`;
   }
-  getOffsetTop() {
-    const rect = this._filterItemElement.getBoundingClientRect();
-    return (rect.y + rect.height) + "px";
-  }
-  controlScrollPage() {
-    window.removeEventListener("scroll", this.updatePosition.bind(this));
-    window.addEventListener("scroll", this.updatePosition.bind(this));
+  /**
+   * Oculta os detalhes de um item da lista.
+   */
+  async hideDetail() {
+    await this._popover.hide();
   }
   getConfigChanges() {
     var _a;
@@ -82,51 +46,24 @@ export class SnkFilterItem {
     const newValue = hasMultiValues ? configToBeCleared.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
     return Object.assign(Object.assign({}, configToBeCleared), { value: newValue });
   }
-  /**
-   * Oculta os detalhes de um item da lista.
-   */
-  async hideDetail() {
-    if (this.detailIsVisible) {
-      if (this._floatingID != undefined) {
-        FloatingManager.close(this._floatingID);
-      }
+  clearFilter(event) {
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if (this.canClearFilter()) {
+      const configChanged = this.getConfigChanges();
+      this.filterChange.emit(configChanged);
     }
-  }
-  onDetailCloseCallback() {
-    this._floatingID = undefined;
-    this.detailIsVisible = false;
-    if (this._closeCallback) {
-      this._closeCallback();
-      this._closeCallback = undefined;
+    else {
+      this.togglePopover();
     }
   }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  clickListener(evt) {
-    if ([this._chipElement, this._leftIconElement, this._rightIconElement].includes(evt.target)) {
-      if (evt.target === this._rightIconElement && this.canClearFilter()) {
-        const configChanged = this.getConfigChanges();
-        this.filterChange.emit(configChanged);
-      }
-      else {
-        if (this.detailIsVisible) {
-          this.hideDetail();
-        }
-        else {
-          this.showUp(true);
-        }
-      }
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-      evt.stopPropagation();
+  async togglePopover(event) {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if (this.detailIsVisible) {
+      await this.hideDetail();
     }
-  }
-  mouseDownListener(evt) {
-    if (this.detailIsVisible && [this._chipElement, this._leftIconElement, this._rightIconElement].includes(evt.target)) {
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-      evt.stopPropagation();
+    else {
+      await this.showUp(true);
     }
   }
   getLabel(isTooltipLabel = false) {
@@ -247,20 +184,6 @@ export class SnkFilterItem {
       ElementIDUtils.addIDInfo(this._filterItemElement);
       this._idSnkFilterDetail = `filterDetail_${this.config.id}`;
     }
-    this.controlScrollPage();
-  }
-  componentDidRender() {
-    if (this._floatingID == undefined) {
-      if (this._popover) {
-        this._popover.remove();
-      }
-    }
-  }
-  /**
-   * Emitido quando o estado do filtro é alterado.
-   */
-  filterChangeListener() {
-    this.hideDetail();
   }
   canClearFilter() {
     const { value, groupedItems = [] } = this.config;
@@ -291,17 +214,34 @@ export class SnkFilterItem {
     return (config.type !== FilterItemType.MULTI_LIST && config.value !== undefined) || this.hasActiveElements(config.value);
   }
   getEnabledChip() {
+    if (this.detailIsVisible) {
+      return true;
+    }
     if (this.config.type === FilterItemType.PERSONALIZED) {
       const { groupedItems = [] } = this.config;
       return groupedItems.some(item => item.visible);
     }
     return this.hasActiveValue(this.config);
   }
+  handleVisibilityPopover(event) {
+    this.detailIsVisible = event.detail;
+  }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (h(Host, null, this.showChips && (h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip() }, leftIcon && (h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" })), h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" }))), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small ez-elevation--16", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail, showHardFixed: this.showChips }))));
+    return (h(Host, null, this.showChips && (h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip(), onClick: (event) => this.togglePopover(event), disableAutoUpdateValue: true }, leftIcon && (h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" })), h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter", onClick: (event) => this.clearFilter(event) }))), h("ez-popover-core", { ref: elem => this._popover = elem, onEzVisibilityChange: (event) => this.handleVisibilityPopover(event) }, h("snk-filter-detail", { key: this.config.id, config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small ez-elevation--16", "data-element-id": this._idSnkFilterDetail, showHardFixed: this.showChips }))));
   }
   static get is() { return "snk-filter-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-filter-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-filter-item.css"]
+    };
+  }
   static get properties() {
     return {
       "config": {
@@ -448,18 +388,6 @@ export class SnkFilterItem {
   }
   static get listeners() {
     return [{
-        "name": "click",
-        "method": "clickListener",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }, {
-        "name": "mousedown",
-        "method": "mouseDownListener",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }, {
         "name": "filterChange",
         "method": "filterChangeListener",
         "target": undefined,

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

@@ -1,6 +1,5 @@
 :host {
-  width: 32%;
-  min-width: 200px;
+  width: 100%;
   display: flex;
   padding: 12px 8px;
   border-radius: var(--border--radius-small, 4px);
@@ -12,25 +11,7 @@
   background: #FAFCFF;
 }
 
-:host.ghost{
-  width: 32% !important;
-}
-
-@container (max-width: 430px) {
-  :host,
-  :host.ghost{
-    width: 100% !important;
-  }
-}
-
-@container (min-width: 431px) and (max-width: 632px) {
-  :host,
-  :host.ghost {
-    width: 48% !important;
-  }
-}
-
-:host.full-width{
+:host.full-width {
   width: 100%;
 }
 
@@ -81,7 +62,6 @@ ez-icon {
   align-self: self-start;
 }
 
-
 .actions {
   display: flex;
   flex-direction: row;
@@ -105,4 +85,4 @@ ez-button {
 :host:hover .hiddeble {
   visibility: visible;
   opacity: 1;
-}
+}

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

@@ -15,9 +15,6 @@
   height: calc(100vh - 225px);
 }
 
-.groups-container {
-}
-
 .guide-header {
   display: flex;
   width: 100%;
@@ -51,15 +48,13 @@
   width: 100%;
 }
 
-
 .group-content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  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 {
@@ -79,7 +74,6 @@
   justify-content: center;
   pointer-events: none;
   transition: opacity 0.3s;
-  width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding: 10px;
@@ -94,7 +88,7 @@
   border-bottom: 1px solid #dce0e8;
 }
 
-.no-group-container::before{
+.no-group-container::before {
   content: "Inclua estes campos nos grupos ou deixe-os separados no topo do formulário";
   width: 100%;
   display: block;
@@ -117,7 +111,6 @@
   height: 55px;
 }
 
-
 .no-guide-selected {
   display: block;
   margin: auto;
@@ -129,5 +122,4 @@
 .ghost {
   opacity: .5;
   background: #c8fbe2;
-}
-
+}

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

@@ -36,3 +36,7 @@
   background: #c8fbe2;
 }
 
+.filter-input {
+  padding-right: var(--space--2xs, 8px);
+}
+

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

@@ -55,7 +55,7 @@ export class FieldsSelector {
     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' }, "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()))));
   }
   static get is() { return "fields-selector"; }
   static get encapsulation() { return "scoped"; }

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

@@ -83,6 +83,8 @@ export class SnkGrid {
     this.useSearchColumn = true;
     this.multipleEditionEnabled = true;
     this.paginationCounterMode = 'auto';
+    this.suppressCheckboxColumn = undefined;
+    this.compact = undefined;
   }
   getGridHeaderSelectedBtns() {
     const btns = [
@@ -211,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;
     });
   }
@@ -499,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 }, 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"; }
@@ -1112,6 +1113,40 @@ export class SnkGrid {
         "attribute": "pagination-counter-mode",
         "reflect": false,
         "defaultValue": "'auto'"
+      },
+      "suppressCheckboxColumn": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a coluna de chechbox deve ser suprimida"
+        },
+        "attribute": "suppress-checkbox-column",
+        "reflect": false
+      },
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a grade deve ser exibida em modo compacto"
+        },
+        "attribute": "compact",
+        "reflect": false
       }
     };
   }

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);
-}
+}