@sankhyalabs/sankhyablocks 10.1.0-dev.6 → 10.1.0-dev.60

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

@@ -0,0 +1,326 @@
+import { ObjectUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { h } from '@stencil/core';
+export class SnkDynaformGuidesConfigurator {
+  constructor() {
+    this.sortLogic = (a, b) => {
+      var _a, _b;
+      const orderA = (_a = a.order) !== null && _a !== void 0 ? _a : Number.MAX_VALUE;
+      const orderB = (_b = b.order) !== null && _b !== void 0 ? _b : Number.MAX_VALUE;
+      return orderA - orderB;
+    };
+    this.handleAddGuide = () => {
+      this.createNewGuide.emit();
+    };
+    this.mainGuide = undefined;
+    this.visibleGuides = [];
+    this.hiddenGuides = [];
+    this.guidesList = [];
+    this.selectedGuide = undefined;
+    this.mainGuideName = undefined;
+    this.messagesBuilder = undefined;
+  }
+  observeGuidesList(newGuides) {
+    this.initGuidesConfig(newGuides);
+  }
+  observeMainGuideName() {
+    this.initGuidesConfig(this.guidesList);
+  }
+  observeSelectedGuide(newGuide) {
+    this.guideSelected.emit(newGuide);
+  }
+  componentWillLoad() {
+    this.initGuidesConfig(this.guidesList);
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  initGuidesConfig(newGuides) {
+    const mainName = this.mainGuideName;
+    const isMain = (guide) => !!mainName && guide.name === mainName;
+    const visibleAux = newGuides.filter(guide => guide.visible && !isMain(guide));
+    const hiddenAux = newGuides.filter(guide => !guide.visible && !isMain(guide));
+    this.visibleGuides = [...visibleAux].sort(this.sortLogic);
+    this.hiddenGuides = [...hiddenAux].sort(this.sortLogic);
+    this.mainGuide = newGuides.find(g => isMain(g));
+  }
+  handleSelectGuide(guide, evt) {
+    evt.stopPropagation();
+    this.selectedGuide = guide;
+  }
+  toggleGuideVisibility(guide, evt) {
+    evt.stopPropagation();
+    const updatedGuide = Object.assign(Object.assign({}, guide), { visible: !guide.visible });
+    let visibleAux;
+    let hiddenAux;
+    if (guide.visible) {
+      visibleAux = this.visibleGuides.filter(g => g.name !== guide.name);
+      hiddenAux = [...this.hiddenGuides, updatedGuide];
+    }
+    else {
+      visibleAux = [...this.visibleGuides, updatedGuide];
+      hiddenAux = this.hiddenGuides.filter(g => g.name !== guide.name);
+    }
+    this.applyGuidesUpdate([...visibleAux, ...hiddenAux]);
+  }
+  adjustListOrder(guideList) {
+    return guideList.map((g, index) => (Object.assign(Object.assign({}, g), { order: index })));
+  }
+  applyGuidesUpdate(updatedGuideList) {
+    let newGuidesList = this.adjustListOrder(updatedGuideList);
+    if (this.mainGuide) {
+      newGuidesList = [this.mainGuide, ...newGuidesList];
+    }
+    if (!ObjectUtils.equals(newGuidesList, this.guidesList)) {
+      this.guideListChanged.emit(newGuidesList);
+    }
+  }
+  async handleDeleteGuide(guide, e) {
+    e.stopPropagation();
+    const title = this.getMessage('snkFormConfig.confirm.title');
+    const message = this.getMessage('snkFormConfig.confirm.deleteGuide').replace('{0}', guide.label);
+    const canRemove = await ApplicationUtils.confirm(title, message);
+    if (!canRemove)
+      return;
+    this.guideDeleted.emit(guide);
+    const deletedMessage = this.getMessage('snkFormConfig.info.successfullyGuideDeleted').replace('{0}', guide.label);
+    ApplicationUtils.info(deletedMessage);
+  }
+  buildTabs() {
+    return this.visibleGuides.map((guide, i) => ({
+      tabKey: guide.name,
+      label: guide.label,
+      index: i,
+    }));
+  }
+  handleTabChange(tab) {
+    var _a;
+    if (!tab)
+      return;
+    const guide = this.guidesList.find(g => g.name === tab.tabKey);
+    if (guide && guide.name !== ((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name)) {
+      this.selectedGuide = guide;
+    }
+  }
+  handleReorder(reorderedTabs) {
+    const visibleReordered = reorderedTabs
+      .map(t => this.visibleGuides.find(g => g.name === t.tabKey))
+      .filter(Boolean);
+    this.applyGuidesUpdate([...visibleReordered, ...this.hiddenGuides]);
+  }
+  renderTabActions() {
+    return this.visibleGuides.map((guide, i) => {
+      const slotIndex = i;
+      const isProtected = guide.isCustom || guide.isDetail;
+      return (h("div", { key: guide.name, slot: `tab${slotIndex}`, class: "tab-actions", onClick: (e) => e.stopPropagation() }, h("ez-button", { mode: "icon", class: "ez-button--tertiary tab-action-btn", size: "small", iconName: "eye-off", title: this.getMessage('snkFormConfig.guidesConfigurator.actions.hide'), onClick: (e) => this.toggleGuideVisibility(guide, e) }), h("ez-button", { mode: "icon", class: "ez-button--tertiary tab-action-btn", size: "small", iconName: "delete", isDisabled: isProtected, title: isProtected
+          ? this.getMessage('snkFormConfig.guidesConfigurator.canNotDeleteCustomGuide')
+          : this.getMessage('snkFormConfig.guidesConfigurator.actions.delete'), onClick: (e) => this.handleDeleteGuide(guide, e) })));
+    });
+  }
+  renderHiddenGuidesBar() {
+    if (this.hiddenGuides.length === 0)
+      return null;
+    return (h("div", { class: "hidden-guides-bar" }, h("span", { class: "hidden-guides-label" }, this.getMessage('snkFormConfig.guidesConfigurator.hiddenGuides'), ":"), this.hiddenGuides.map(guide => {
+      const isProtected = guide.isCustom || guide.isDetail;
+      return (h("div", { key: guide.name, class: "hidden-guide-chip", title: guide.label }, h("span", { class: "chip-label", onClick: (e) => this.handleSelectGuide(guide, e) }, guide.label), h("ez-button", { mode: "icon", class: "ez-button--tertiary", size: "small", iconName: "eye", title: this.getMessage('snkFormConfig.guidesConfigurator.actions.show'), onClick: (e) => this.toggleGuideVisibility(guide, e) }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", size: "small", iconName: "delete", isDisabled: isProtected, title: isProtected
+          ? this.getMessage('snkFormConfig.guidesConfigurator.canNotDeleteCustomGuide')
+          : this.getMessage('snkFormConfig.guidesConfigurator.actions.delete'), onClick: (e) => this.handleDeleteGuide(guide, e) })));
+    })));
+  }
+  render() {
+    var _a;
+    const tabs = this.buildTabs();
+    return (h("div", { class: "guides-tab-configurator" }, h("div", { class: "tab-bar-row" }, h("ez-tabselector", { class: "guides-tabselector", tabs: tabs, selectedTab: (_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name, reorderable: true, onEzChange: (evt) => this.handleTabChange(evt.detail), onEzReorder: (evt) => this.handleReorder(evt.detail) }, this.renderTabActions()), h("ez-button", { label: this.getMessage('snkFormConfig.guidesConfigurator.createNewGuide'), variant: "secondary", size: "medium", leftIconName: "plus", onClick: this.handleAddGuide })), this.renderHiddenGuidesBar()));
+  }
+  static get is() { return "snk-dynaform-guides-configurator"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-dynaform-guides-configurator.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-dynaform-guides-configurator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "guidesList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IGuideConfig[]",
+          "resolved": "IGuideConfig[]",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "selectedGuide": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IGuideConfig",
+          "resolved": "IGuideConfig",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "mainGuideName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "main-guide-name",
+        "reflect": false
+      },
+      "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": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "mainGuide": {},
+      "visibleGuides": {},
+      "hiddenGuides": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "guideSelected",
+        "name": "guideSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IGuideConfig",
+          "resolved": "IGuideConfig",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        }
+      }, {
+        "method": "guideListChanged",
+        "name": "guideListChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IGuideConfig[]",
+          "resolved": "IGuideConfig[]",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        }
+      }, {
+        "method": "guideDeleted",
+        "name": "guideDeleted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IGuideConfig",
+          "resolved": "IGuideConfig",
+          "references": {
+            "IGuideConfig": {
+              "location": "import",
+              "path": "../FormConfigHelper"
+            }
+          }
+        }
+      }, {
+        "method": "createNewGuide",
+        "name": "createNewGuide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "guidesList",
+        "methodName": "observeGuidesList"
+      }, {
+        "propName": "mainGuideName",
+        "methodName": "observeMainGuideName"
+      }, {
+        "propName": "selectedGuide",
+        "methodName": "observeSelectedGuide"
+      }];
+  }
+}

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

@@ -17,16 +17,20 @@ export class SnkFilterPeriod {
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-number
    */
-  ezChangeListener(evt) {
+  ezInputListener(evt) {
     this.errorMessage = undefined;
+    const value = evt.detail;
     if (this.getVariation() === FilterNumberVariation.INTERVAL) {
-      const start = this._startInterval.value;
-      const end = this._endInterval.value;
-      this.value = (!isNaN(start) || !isNaN(end) ? { start, end } : undefined);
+      if (evt.target === this._startInterval && !isNaN(value)) {
+        this.value = Object.assign(this.value, { start: value });
+      }
+      if (evt.target === this._endInterval && !isNaN(value)) {
+        this.value = Object.assign(this.value, { end: value });
+      }
       this.valueChanged.emit(this.value);
       return;
     }
-    this.value = evt.detail;
+    this.value = value;
     this.valueChanged.emit(this.value);
   }
   /**
@@ -101,7 +105,7 @@ export class SnkFilterPeriod {
     if (this.getVariation() === FilterNumberVariation.INTERVAL) {
       return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: "ez-col ez-col--nowrap" }, h("ez-number-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding-right--medium' : '', label: this._startIntervalLabel, ref: ref => this._startInterval = ref, value: this.getIntervalValue("start"), enabled: this.config.enabled, precision: (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.precision, errorMessage: this.errorMessage }), this.buildLabel(), h("ez-number-input", { id: `${this.config.id}_end`, label: this._endIntervalLabel, ref: ref => this._endInterval = ref, value: this.getIntervalValue("end"), enabled: this.config.enabled, precision: (_b = this.config.props) === null || _b === void 0 ? void 0 : _b.precision, errorMessage: this.errorMessage }))));
     }
-    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("ez-number-input", { id: this.config.id, ref: ref => this._numberElement = ref, value: this.config.value, precision: (_c = this.config.props) === null || _c === void 0 ? void 0 : _c.precision, enabled: this.config.enabled, errorMessage: this.errorMessage })));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("ez-number-input", { id: this.config.id, label: this.config.label, ref: ref => this._numberElement = ref, value: this.config.value, precision: (_c = this.config.props) === null || _c === void 0 ? void 0 : _c.precision, enabled: this.config.enabled, errorMessage: this.errorMessage })));
   }
   static get is() { return "snk-filter-number"; }
   static get properties() {
@@ -281,8 +285,8 @@ export class SnkFilterPeriod {
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{
-        "name": "ezChange",
-        "method": "ezChangeListener",
+        "name": "ezInput",
+        "method": "ezInputListener",
         "target": undefined,
         "capture": false,
         "passive": false

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

@@ -7,16 +7,17 @@ export class SnkFilterPeriod {
     this._startDateLabel = 'Inicial';
     this._endDateLabel = 'Final';
     this._toLabel = 'até';
+    this._defaultEmptyValue = {
+      start: null,
+      end: null
+    };
     this.internalChange = {
       start: false,
       end: false
     };
     this.config = undefined;
     this.getMessage = undefined;
-    this.value = {
-      start: null,
-      end: null
-    };
+    this.value = this._defaultEmptyValue;
     this.presentationMode = EPresentationMode.CHIP;
     this.errorMessage = undefined;
   }
@@ -29,6 +30,10 @@ export class SnkFilterPeriod {
       this.internalChange.start = false;
       return;
     }
+    if ((!newValue && oldValue) || (!(newValue === null || newValue === void 0 ? void 0 : newValue.start) && !(newValue === null || newValue === void 0 ? void 0 : newValue.end))) {
+      this.clearValue();
+      return;
+    }
     if (newValue && (newValue.start !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.start) || newValue.end !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.end))) {
       this.valueStart = this.parseDate(newValue.start);
       this.valueEnd = this.parseDate(newValue.end);
@@ -50,9 +55,11 @@ export class SnkFilterPeriod {
    * Limpa o valor do componente restaurando o valor original da configuração.
    */
   async clearValue() {
-    this.value = this.config.value;
+    this.value = this.config.value || this._defaultEmptyValue;
     this.valueStart = this.getDate("start");
     this.valueEnd = this.getDate("end");
+    this._startDate.value = this.valueStart;
+    this._endDate.value = this.valueEnd;
   }
   componentDidLoad() {
     if (this._element) {
@@ -102,7 +109,7 @@ export class SnkFilterPeriod {
     if (!this.config || this.config.type !== FilterItemType.PERIOD) {
       return undefined;
     }
-    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding-right--medium' : '', label: this._startDateLabel, ref: ref => this._startDate = ref, enabled: this.config.enabled, value: this.valueStart, errorMessage: this.errorMessage, onEzChange: (event) => this.ezChangeListener(event, 'start') }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, label: this._endDateLabel, ref: ref => this._endDate = ref, enabled: this.config.enabled, value: this.valueEnd, errorMessage: this.errorMessage, onEzChange: (event) => this.ezChangeListener(event, 'end') }))));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding-right--medium' : '', label: this._startDateLabel, ref: ref => this._startDate = ref, enabled: this.config.enabled, value: this.valueStart, errorMessage: this.errorMessage, onEzInput: (event) => this.ezChangeListener(event, 'start') }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, label: this._endDateLabel, ref: ref => this._endDate = ref, enabled: this.config.enabled, value: this.valueEnd, errorMessage: this.errorMessage, onEzInput: (event) => this.ezChangeListener(event, 'end') }))));
   }
   static get is() { return "snk-filter-period"; }
   static get properties() {
@@ -160,7 +167,7 @@ export class SnkFilterPeriod {
           "tags": [],
           "text": "Define o valor do componente snk-filter-period"
         },
-        "defaultValue": "{\n    start: null,\n    end: null\n  }"
+        "defaultValue": "this._defaultEmptyValue"
       },
       "presentationMode": {
         "type": "number",

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

@@ -39,7 +39,7 @@ export class SnkFilterText {
     if (!this.config) {
       return undefined;
     }
-    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("ez-text-input", { id: this.config.id, ref: ref => this._textInputElement = ref, value: this.config.value, mask: (_a = this.config) === null || _a === void 0 ? void 0 : _a.mask, enabled: this.config.enabled, cleanValueMask: true, errorMessage: this.errorMessage })));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("ez-text-input", { id: this.config.id, label: this.config.label, ref: ref => this._textInputElement = ref, value: this.config.value, mask: (_a = this.config) === null || _a === void 0 ? void 0 : _a.mask, enabled: this.config.enabled, cleanValueMask: true, errorMessage: this.errorMessage })));
   }
   static get is() { return "snk-filter-text"; }
   static get properties() {

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

@@ -158,7 +158,7 @@ export class SnkFilterDetail {
   }
   onKeyDonwListener(event) {
     if (event.key === "Enter") {
-      this._applyButton.setFocus().then(() => this.apply());
+      this.apply();
     }
   }
   buildRightSlot(item) {

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

@@ -1,4 +1,8 @@
 ez-popover-core {
     --ez-popover__box--z-index: var(--elevation--20, 20);
     --ez-popover__box--overlay-z-index: var(--elevation--16, 16);
-}
+}
+
+ez-chip {
+    --ez-label-chip__label__container--margin: var(--space--4, 4px);
+}

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

@@ -9,6 +9,7 @@ export class SnkFilterItem {
     this.config = undefined;
     this.getMessage = undefined;
     this.showChips = true;
+    this.sizeChips = 'default';
   }
   observeDetailIsVisible(value) {
     this.visibleChanged.emit(value);
@@ -16,7 +17,7 @@ export class SnkFilterItem {
   /**
    * Emitido quando o estado do filtro é alterado.
    */
-  filterChangeListener() {
+  filterChangeListener(_event) {
     this.hideDetail();
   }
   /**
@@ -218,6 +219,10 @@ export class SnkFilterItem {
     return ((_a = list === null || list === void 0 ? void 0 : list.filter((val) => val === null || val === void 0 ? void 0 : val.check)) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   hasActiveValue(config) {
+    var _a, _b;
+    if (config.type === FilterItemType.PERIOD) {
+      return (!!((_a = config.value) === null || _a === void 0 ? void 0 : _a.start) || !!((_b = config.value) === null || _b === void 0 ? void 0 : _b.end));
+    }
     return (config.type !== FilterItemType.MULTI_LIST && config.value !== undefined) || this.hasActiveElements(config.value);
   }
   getEnabledChip() {
@@ -290,7 +295,7 @@ export class SnkFilterItem {
   render() {
     const leftIcon = this.getLeftIconName();
     const { type, message } = this.getTooltipMessage();
-    return (h(Host, null, this.showChips && (h("ez-tooltip", { id: this.config.id, message: message, type: type, active: !this.detailIsVisible, strategy: "fixed" }, 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, type: this.getTypeChip(type), enabled: this.config.enabled }, leftIcon && (h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, slot: "leftIcon" })), h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), 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", { ref: ref => this._filterDetail = ref, 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 && !this.config.required, removalBlocked: this.config.required }))));
+    return (h(Host, null, this.showChips && (h("ez-tooltip", { id: this.config.id, message: message, type: type, active: !this.detailIsVisible, strategy: "fixed" }, h("ez-chip", { id: this.config.id, size: this.sizeChips, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip(), onClick: (event) => this.togglePopover(event), disableAutoUpdateValue: true, type: this.getTypeChip(type), enabled: this.config.enabled }, leftIcon && (h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, slot: "leftIcon" })), h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), 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", { ref: ref => this._filterDetail = ref, 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 && !this.config.required, removalBlocked: this.config.required }))));
   }
   static get is() { return "snk-filter-item"; }
   static get encapsulation() { return "scoped"; }
@@ -357,6 +362,27 @@ export class SnkFilterItem {
         "attribute": "show-chips",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "sizeChips": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'medium' | 'large'",
+          "resolved": "\"default\" | \"large\" | \"medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "description",
+              "text": "Define o tamanho dos chips da barra de filtros, podendo ser 'default', 'medium' ou 'large'."
+            }],
+          "text": ""
+        },
+        "attribute": "size-chips",
+        "reflect": false,
+        "defaultValue": "'default'"
       }
     };
   }

package/dist/collection/components/snk-filter-bar/filter-modal/snk-filter-modal.css

@@ -1,5 +1,6 @@
 ez-modal {
   --ez-modal-content-padding: 24px 12px;
+  --ez-modal-content-min-width: 370px;
 }
 
 .snk-filter-modal__container {
@@ -25,7 +26,12 @@ ez-modal {
 }
 
 .snk-filter-modal__rendered-items::-webkit-scrollbar {
-  width: var(--space--small);
+  width: var(--space--small
+);
   min-width: var(--space--small);
   max-width: var(--space--small);
 }
+
+.ez-padding-right--medium:nth-child(even) {
+  padding-right: 0;
+}