@sankhyalabs/sankhyablocks 5.6.0 → 5.8.0

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

@@ -1,10 +1,14 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from '../filter-item-type.enum';
+import { EPresentationMode } from './enum/presentationMode';
 export class SnkFilterBinarySelect {
   constructor() {
+    this._noOptionValue = 'NO_VALUE';
+    this._radioButtonValue = undefined;
     this.value = undefined;
     this.config = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   isSelected(option) {
     return this.value == undefined || this.value === option;
@@ -13,15 +17,15 @@ export class SnkFilterBinarySelect {
    * Emitido quando acontece a alteração de valor do componente snk-filter-binary-select
    */
   ezChangeListener(evt) {
-    if (!evt.detail) {
-      this.assertCheckedOption(evt.target);
-    }
-    this.updateValue();
-  }
-  componentDidLoad() {
-    if (this._element) {
-      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      if (!evt.detail) {
+        this.assertCheckedOption(evt.target);
+      }
+      this.updateValue();
+      return;
     }
+    this.value = evt.detail === this._noOptionValue ? undefined : evt.detail;
+    this._radioButtonValue = evt.detail;
   }
   assertCheckedOption(updatingCheck) {
     if (updatingCheck === this._checkOne) {
@@ -39,19 +43,25 @@ export class SnkFilterBinarySelect {
     else {
       this.value = undefined;
     }
+    this.valueChanged.emit(this.value);
   }
-  /**
-   * Exibe o componente snk-filter-binary-select
-   */
-  async show() {
-    this._checkOne.setFocus();
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
+  componentWillLoad() {
+    this._radioButtonValue = this.value || this._noOptionValue;
   }
   render() {
     if (!this.config || this.config.type !== FilterItemType.BINARY_SELECT) {
       return undefined;
     }
     const [optOne, optTwo] = this.config.props.options;
-    return (h(Host, null, h("ez-check", { id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) })));
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      return (h(Host, null, h("div", { class: "ez-flex ez-flex--row ez-flex--align-items-center" }, h("label", { class: "ez-text ez-title--small ez-title--primary", style: { flex: '1 1 0', width: '0px' } }, this.config.detailModal), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) }))));
+    }
+    return (h(Host, null, h("ez-radio-button", { value: this._radioButtonValue }, h("ez-radio-button-option", { id: `${this.config.id}_${optOne.name || "option1"}`, class: "sc-snk-filter-bar editor__ez-check", label: optOne.label, value: optOne.name }), h("ez-radio-button-option", { id: `${this.config.id}_${optTwo.name || "option2"}`, class: "sc-snk-filter-bar editor__ez-check", label: optTwo.label, value: optTwo.name }), h("ez-radio-button-option", { id: `${this.config.id}_option3`, class: "sc-snk-filter-bar editor__ez-check", label: `${optOne.label} + ${optTwo.label}`, value: this._noOptionValue }))));
   }
   static get is() { return "snk-filter-binary-select"; }
   static get properties() {
@@ -92,29 +102,50 @@ export class SnkFilterBinarySelect {
           "tags": [],
           "text": "Define as configura\u00E7\u00F5es do componente snk-filter-binary-select"
         }
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "show": {
+      },
+      "presentationMode": {
+        "type": "number",
+        "mutable": false,
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "original": "EPresentationMode",
+          "resolved": "EPresentationMode.CHIP | EPresentationMode.MODAL",
           "references": {
-            "Promise": {
-              "location": "global"
+            "EPresentationMode": {
+              "location": "import",
+              "path": "./enum/presentationMode"
             }
-          },
-          "return": "Promise<void>"
+          }
         },
+        "required": false,
+        "optional": false,
         "docs": {
-          "text": "Exibe o componente snk-filter-binary-select",
-          "tags": []
-        }
+          "tags": [],
+          "text": "Define a varia\u00E7\u00E3o do componente"
+        },
+        "attribute": "presentation-mode",
+        "reflect": false,
+        "defaultValue": "EPresentationMode.CHIP"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{

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

@@ -11,6 +11,7 @@ export class SnkFilterMultiSelect {
    */
   ezChangeListener(evt) {
     this.value = evt.detail.value;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-multi-select
@@ -71,6 +72,24 @@ export class SnkFilterMultiSelect {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

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

@@ -11,6 +11,7 @@ export class SnkFilterPeriod {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-number
@@ -72,6 +73,24 @@ export class SnkFilterPeriod {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

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

@@ -1,10 +1,15 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
 import FilterItemType from '../filter-item-type.enum';
+import { EPresentationMode } from './enum/presentationMode';
 export class SnkFilterPeriod {
   constructor() {
+    this._startDateLabel = 'Inicial';
+    this._endDateLabel = 'Final';
     this.config = undefined;
+    this.getMessage = undefined;
     this.value = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-period
@@ -13,6 +18,7 @@ export class SnkFilterPeriod {
     const start = this._startDate.value;
     const end = this._endDate.value;
     this.value = (start || end ? { start, end } : undefined);
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {
@@ -37,11 +43,20 @@ export class SnkFilterPeriod {
   async show() {
     this._startDate.setFocus();
   }
+  buildLabel() {
+    if (this.presentationMode === EPresentationMode.CHIP) {
+      return h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9");
+    }
+  }
+  componentWillLoad() {
+    this._startDateLabel = this.getMessage('snkFilterBar.labelStartDatePeriod');
+    this._endDateLabel = this.getMessage('snkFilterBar.labelEndDatePeriod');
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.PERIOD) {
       return undefined;
     }
-    return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9"), h("ez-date-input", { id: `${this.config.id}_end`, label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
+    return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this._startDateLabel, ref: ref => this._startDate = ref, value: this.getDate("start") }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this._endDateLabel, ref: ref => this._endDate = ref, value: this.getDate("end") })));
   }
   static get is() { return "snk-filter-period"; }
   static get properties() {
@@ -66,6 +81,21 @@ export class SnkFilterPeriod {
           "text": "Define as configura\u00E7\u00F5es do componente snk-filter-period"
         }
       },
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, props?: any) => string",
+          "resolved": "(key: string, props?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
+        }
+      },
       "value": {
         "type": "any",
         "mutable": false,
@@ -82,9 +112,50 @@ export class SnkFilterPeriod {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "presentationMode": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "EPresentationMode",
+          "resolved": "EPresentationMode.CHIP | EPresentationMode.MODAL",
+          "references": {
+            "EPresentationMode": {
+              "location": "import",
+              "path": "./enum/presentationMode"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a varia\u00E7\u00E3o do componente"
+        },
+        "attribute": "presentation-mode",
+        "reflect": false,
+        "defaultValue": "EPresentationMode.CHIP"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

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

@@ -36,6 +36,7 @@ export class SnkFilterPersonalized {
     if (this.value.filter(item => item != undefined).length == 0) {
       this.value = null;
     }
+    this.valueChanged.emit(this.value || []);
   }
   doSearch(mode, argument, param) {
     const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
@@ -171,6 +172,24 @@ export class SnkFilterPersonalized {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

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

@@ -11,6 +11,7 @@ export class SnkFilterSearch {
    */
   ezChangeListener(_evt) {
     this.value = this._searchInput.value;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {
@@ -85,6 +86,24 @@ export class SnkFilterSearch {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

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

@@ -10,6 +10,7 @@ export class SnkFilterText {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {
@@ -64,6 +65,24 @@ export class SnkFilterText {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o valor do filtro \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{

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

@@ -8,5 +8,6 @@ var FilterItemType;
   FilterItemType["NUMBER"] = "NUMBER";
   FilterItemType["DEFAULT_FILTER"] = "DEFAULT_FILTER";
   FilterItemType["PERSONALIZED"] = "PERSONALIZED";
+  FilterItemType["MULTI_LIST"] = "MULTI_LIST";
 })(FilterItemType || (FilterItemType = {}));
 export default FilterItemType;

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, Fragment } from '@stencil/core';
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import FilterItemType from './filter-item-type.enum';
 import { ElementIDUtils, DataType } from '@sankhyalabs/core';
@@ -11,7 +11,8 @@ export class SnkFilterDetail {
    * Exibe o componente snk-filter-detail.
    */
   async show() {
-    this._editor["show"]();
+    var _a, _b;
+    (_b = (_a = this._editor)["show"]) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   componentDidLoad() {
     if (this._element) {
@@ -44,13 +45,7 @@ export class SnkFilterDetail {
     this.changeConfig(Object.assign(Object.assign({}, this.config), { visible: false, fixed: false, value: undefined }));
   }
   getPopUpHeaderButtons() {
-    if (this.config.hardFixed) {
-      return undefined;
-    }
-    return ([
-      this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()),
-      this.buildIcon(this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), this.config.fixed ? "un-pin" : "push-pin", () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })))
-    ]);
+    return (h(Fragment, null, !this.config.removalBlocked && this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()), !this.config.hardFixed && this.buildIcon(this.getMessage(this.config.fixed ? "snkFilterBar.unpinFilter" : "snkFilterBar.pinFilter"), this.config.fixed ? "un-pin" : "push-pin", () => this.changeConfig(Object.assign(Object.assign({}, this.config), { fixed: !this.config.fixed })))));
   }
   buildIcon(title, iconName, action) {
     return (h("button", { onClick: () => action(), class: "sc-snk-filter-bar snk-filter-item__editor-header-button", ref: elem => elem && this.buildIdButton(elem, title) }, h("ez-icon", Object.assign({ title: title, iconName: iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`_${title}`)}` }))));
@@ -122,7 +117,7 @@ export class SnkFilterDetail {
   }
   render() {
     const ContentEditor = this.getContentEditor();
-    return (h(Host, null, h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-text ez-title ez-title--small ez-padding--small sc-snk-filter-bar snk-filter-item__editor-header" }, this.config.detailTitle), this.getPopUpHeaderButtons()), h(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt), "data-element-id": this._idContentEditor }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), h("ez-button", { ref: ref => this._applyButton = ref, label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.apply(), size: "small", class: "ez-button--primary ez-padding-left--medium" }))));
+    return (h(Host, null, h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-text ez-title ez-title--small ez-padding--small sc-snk-filter-bar snk-filter-item__editor-header" }, this.config.detailTitle), this.getPopUpHeaderButtons()), h(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt), "data-element-id": this._idContentEditor, getMessage: this.getMessage }), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), h("ez-button", { ref: ref => this._applyButton = ref, label: this.getMessage("snkFilterBar.applyFilter"), onClick: () => this.apply(), size: "small", class: "ez-button--primary ez-padding-left--medium" }))));
   }
   static get is() { return "snk-filter-detail"; }
   static get properties() {

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, FloatingManager } from '@sankhyalabs/core';
+import { ElementIDUtils, FloatingManager, DateUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from './filter-item-type.enum';
 export class SnkFilterItem {
@@ -110,16 +110,17 @@ export class SnkFilterItem {
       evt.stopPropagation();
     }
   }
-  getLabel() {
+  getLabel(isTooltipLabel = false) {
     const { type, value, label, props } = this.config;
     if (value) {
       if (type === FilterItemType.BINARY_SELECT) {
         const [optOne, optTwo] = props.options;
+        const tooltip = this.getMessage('snkFilterBar.binarySelectTooltip');
         if (optOne.name === value) {
-          return optOne.label;
+          return isTooltipLabel ? `${tooltip} ${String(optOne.label).toLowerCase()}` : optOne.label;
         }
         if (optTwo.name === value) {
-          return optTwo.label;
+          return isTooltipLabel ? `${tooltip} ${String(optTwo.label).toLowerCase()}` : optTwo.label;
         }
       }
       if (type === FilterItemType.MULTI_SELECT) {
@@ -138,14 +139,21 @@ export class SnkFilterItem {
         }
         const dateFormater = new Intl.DateTimeFormat("pt-BR");
         if (end && start) {
-          return `${label}: ${dateFormater.format(start)} a ${dateFormater.format(end)}`;
+          const isSameYear = start.getFullYear() === end.getFullYear();
+          const formatOptions = Object.assign({ day: '2-digit', month: '2-digit' }, ((!isSameYear || isTooltipLabel) && { year: '2-digit' }));
+          const startLabel = DateUtils.formatDate(start, formatOptions);
+          const endLabel = DateUtils.formatDate(end, formatOptions);
+          if (isTooltipLabel) {
+            return this.getMessage('snkFilterBar.fullPeriodTooltip', { LABEL: label, START_LABEL: startLabel, END_LABEL: endLabel });
+          }
+          return `${label}: ${startLabel} \u2192 ${endLabel}`;
         }
         else {
           if (start) {
-            return `${label}: A partir de ${dateFormater.format(start)}`;
+            return `${label}: ${this.getMessage('snkFilterBar.onlyStartPeriodToltip')} ${dateFormater.format(start)}`;
           }
           else if (end) {
-            return `${label}: Até ${dateFormater.format(end)}`;
+            return `${label}: ${this.getMessage('snkFilterBar.onlyEndPeriodToltip')} ${dateFormater.format(end)}`;
           }
           else {
             return label;
@@ -158,10 +166,30 @@ export class SnkFilterItem {
       if (type === FilterItemType.PERSONALIZED) {
         return label;
       }
+      if (type === FilterItemType.MULTI_LIST) {
+        const selectedOptions = value.filter(item => item.check);
+        const checkedAmount = selectedOptions.length;
+        if (checkedAmount > 1) {
+          if (isTooltipLabel) {
+            const selectedOptionsDescrptions = selectedOptions.map(item => item.description);
+            return `${label}: ${selectedOptionsDescrptions.join(',')}`;
+          }
+          return `${label}: ${checkedAmount} ${this.getMessage('snkFilterBar.multiListToltip')}`;
+        }
+        return `${label}: ${value.description}`;
+      }
       return `${label}: ${value}`;
     }
     return label;
   }
+  applyTooltip() {
+    if (!this.config.value)
+      return undefined;
+    return {
+      'data-tooltip': this.getLabel(true),
+      'data-flow': 'bottom'
+    };
+  }
   componentDidLoad() {
     if (this._filterItemElement) {
       ElementIDUtils.addIDInfo(this._filterItemElement);
@@ -199,7 +227,7 @@ export class SnkFilterItem {
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, id: this.config.id }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, 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", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
+    return (h(Host, Object.assign({}, this.applyTooltip()), h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, 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", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
   }
   static get is() { return "snk-filter-item"; }
   static get properties() {

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

@@ -1,5 +1,35 @@
 
+ez-modal {
+  --ez-modal-content-padding: 24px 12px;
+}
+
 .snk-filter__modal-container{
-  width: 359px;
-  max-width: 359px;
+  width: 344px;
+  max-width: 344px;
+  overflow: hidden;
+}
+
+.snk-filter__modal-content{
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 760px;
+  overflow-x: clip;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.snk-filter__modal-content::-webkit-scrollbar {
+  width: var(--space--small);
+  min-width: var(--space--small);
+  max-width: var(--space--small);
 }
+
+
+.snk-filter__modal-collapsible-box{
+  border: 1px solid #DCE0E8;
+  border-radius: var(--border--radius-medium);
+  padding: 12px 6px;
+}
+
+