@sankhyalabs/sankhyablocks 6.5.0 → 6.6.1

package/dist/cjs/{snk-filter-personalized.cjs.entry.js → snk-personalized-filter-editor.cjs.entry.js}

@@ -9,7 +9,7 @@ const presentationMode = require('./presentationMode-52ec3bdd.js');
 const EzScrollDirection = require('@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
 
-const snkFilterPersonalizedCss = ".sc-snk-filter-personalized-h{--snk-filter-personalized__max-height:21;--snk-filter-personalized__max-width:21.5}.SnkFilterPersonalized_list-container.sc-snk-filter-personalized{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}.SnkFilterPersonalized_list-container-chip.sc-snk-filter-personalized{width:400px}.SnkFilterPersonalized_list-scroller.sc-snk-filter-personalized{display:block;max-height:calc(var(--space--2xl) * var(--snk-filter-personalized__max-height));cursor:auto;--ez-scroller__max-height:300px}.SnkFilterPersonalized_checkbox.sc-snk-filter-personalized{display:grid;grid-template-columns:auto auto;justify-content:start}.SnkFilterPersonalized_list-container.sc-snk-filter-personalized:has(.SnkFilterPersonalized_list-item--chip){gap:var(--space--small, 6px);max-width:calc(var(--space--md) * var(--snk-filter-personalized__max-width))}.SnkFilterPersonalized_list-item--modal.sc-snk-filter-personalized{display:flex;border-radius:var(--border--radius-regular)}.SnkFilterPersonalized_list-item--modal.sc-snk-filter-personalized:hover{background-color:var(--background--medium, #f0f3f7)}.SnkFilterPersonalized_list-actions.sc-snk-filter-personalized{display:none;align-items:center}.SnkFilterPersonalized_list-item--modal.sc-snk-filter-personalized:hover .SnkFilterPersonalized_list-actions.sc-snk-filter-personalized{display:flex}.SnkFilterPersonalized_list-item--chip.sc-snk-filter-personalized{display:flex;flex-direction:column;border:var(--border--small, 1px solid) var(--color-strokes, #DCE0E8);border-radius:var(--border--radius-regular)}.SnkFilterPersonalized_list-item--chip.sc-snk-filter-personalized .sc-snk-filter-personalized:first-of-type{gap:var(--space--3xs)}";
+const snkPersonalizedFilterEditorCss = ".sc-snk-personalized-filter-editor-h{--snk-filter-personalized__max-height:21;--snk-filter-personalized__max-width:21.5}.SnkFilterPersonalized_list-container.sc-snk-personalized-filter-editor{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}.SnkFilterPersonalized_list-container-chip.sc-snk-personalized-filter-editor{width:400px}.SnkFilterPersonalized_list-scroller.sc-snk-personalized-filter-editor{display:block;max-height:calc(var(--space--2xl) * var(--snk-filter-personalized__max-height));cursor:auto;--ez-scroller__max-height:300px}.SnkFilterPersonalized_checkbox.sc-snk-personalized-filter-editor{display:grid;grid-template-columns:auto auto;justify-content:start}.SnkFilterPersonalized_list-container.sc-snk-personalized-filter-editor:has(.SnkFilterPersonalized_list-item--chip){gap:var(--space--small, 6px);max-width:calc(var(--space--md) * var(--snk-filter-personalized__max-width))}.SnkFilterPersonalized_list-item--modal.sc-snk-personalized-filter-editor{display:flex;border-radius:var(--border--radius-regular)}.SnkFilterPersonalized_list-item--modal.sc-snk-personalized-filter-editor:hover{background-color:var(--background--medium, #f0f3f7)}.SnkFilterPersonalized_list-actions.sc-snk-personalized-filter-editor{display:none;align-items:center}.SnkFilterPersonalized_list-item--modal.sc-snk-personalized-filter-editor:hover .SnkFilterPersonalized_list-actions.sc-snk-personalized-filter-editor{display:flex}.SnkFilterPersonalized_list-item--chip.sc-snk-personalized-filter-editor{display:flex;flex-direction:column;border:var(--border--small, 1px solid) var(--color-strokes, #DCE0E8);border-radius:var(--border--radius-regular)}.SnkFilterPersonalized_list-item--chip.sc-snk-personalized-filter-editor .sc-snk-personalized-filter-editor:first-of-type{gap:var(--space--3xs)}";
 
 const SnkFilterPersonalized = class {
   constructor(hostRef) {
@@ -53,10 +53,15 @@ const SnkFilterPersonalized = class {
     var _a, _b;
     const CheckboxElement = () => (index.h("ez-check", Object.assign({ class: "SnkFilterPersonalized_checkbox", id: `param_${item.id}`, key: item.id, compact: true, value: item.visible, label: item.label, onEzChange: ({ detail: visible }) => this.handleItemChange.bind(this)(visible, item.id) }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`checkboxFilter_${item.id}`)}` })));
     const isVariable = !!((_b = (_a = item.props) === null || _a === void 0 ? void 0 : _a.personalizedFilter) === null || _b === void 0 ? void 0 : _b.parameters.length);
-    return (index.h("div", { class: `${!this.isModalMode() ? "SnkFilterPersonalized_list-item--chip" : ""}` }, index.h("li", { class: `${this.isModalMode() ? "SnkFilterPersonalized_list-item--modal" : ""}` }, index.h("div", { class: "ez-flex ez-flex--align-items-center ez-margin-right--small ez-size-width--full" }, index.h(CheckboxElement, null), this.isModalMode() ?
+    return (index.h("div", { class: `${!this.isModalMode() ? "SnkFilterPersonalized_list-item--chip" : ""}` }, index.h("li", { class: `${this.isModalMode() ? "SnkFilterPersonalized_list-item--modal" : ""}` }, index.h("div", { class: "ez-flex ez-flex--align-items-center ez-margin-right--small ez-size-width--full" }, index.h(CheckboxElement, null), this.buildModalListActions(item, isVariable))), (item.visible && isVariable) && (index.h("div", { class: "ez-row ez-padding--small" }, this.getFormField(item)))));
+  }
+  buildModalListActions(item, isVariable) {
+    if (!this.isModalMode())
+      return;
+    return (this.isModalMode() ?
       index.h("div", { class: "SnkFilterPersonalized_list-actions" }, index.h("ez-button", { size: "small", mode: "icon", iconName: "edit", title: this.getMessage('snkPersonalizedFilter.listActions.edit'), onClick: () => this.editFilter.emit(item.id) }), index.h("ez-button", { size: "small", mode: "icon", iconName: "delete", title: this.getMessage('snkPersonalizedFilter.listActions.delete'), onClick: this.handleDeleteFilter.bind(this, item) }))
       :
-        isVariable && (index.h("ez-badge", Object.assign({ class: "ez-badge--warning-subtle ez-margin-right--small", label: this.getMessage('snkPersonalizedFilter.info.badgeVariable'), size: "medium" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`variableBadge_${item.id}`)}` }))))), (item.visible && isVariable) && (index.h("div", { class: "ez-row ez-padding--small" }, this.getFormField(item)))));
+        isVariable && (index.h("ez-badge", Object.assign({ class: "ez-badge--warning-subtle ez-margin-right--small", label: this.getMessage('snkPersonalizedFilter.info.badgeVariable'), size: "medium" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`variableBadge_${item.id}`)}` }))));
   }
   isModalMode() {
     return this.presentationMode === presentationMode.EPresentationMode.MODAL;
@@ -123,7 +128,7 @@ const SnkFilterPersonalized = class {
     });
     this.emitChange();
   }
-  handleFilterChange({ detail: query = "" }) {
+  handleSearchFilterList({ detail: query = "" }) {
     this.items = query ? this.originalItems.filter(item => item.label.toLowerCase().includes(query.toLowerCase())) : this.originalItems;
   }
   handleFilterItemChange(value, formProp) {
@@ -156,11 +161,11 @@ const SnkFilterPersonalized = class {
   }
   handleDeleteFilter(item) {
     this._application.confirm(this.getMessage('snkPersonalizedFilter.deleteConfirm.title'), this.getMessage('snkPersonalizedFilter.deleteConfirm.message', { filterName: item.label })).then((actionConfirmed) => {
-      if (actionConfirmed) {
-        this.deleteFilter.emit(item);
-        this.items = this.originalItems = this.originalItems.filter(originalItem => originalItem.id !== item.id);
-        this.emitChange();
-      }
+      if (!actionConfirmed)
+        return;
+      this.deleteFilter.emit(item);
+      this.items = this.originalItems = this.originalItems.filter(originalItem => originalItem.id !== item.id);
+      this.emitChange();
     });
   }
   componentDidLoad() {
@@ -172,16 +177,34 @@ const SnkFilterPersonalized = class {
     this._application = core.ApplicationContext.getContextValue('__SNK__APPLICATION__');
     this.items = this.originalItems = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.groupedItems) || [];
   }
+  buildModeModalHeader() {
+    if (this.presentationMode !== presentationMode.EPresentationMode.MODAL)
+      return;
+    return (index.h("div", { class: "ez-margin-bottom--medium" }, index.h(index.Fragment, null, index.h("ez-filter-input", Object.assign({ label: this.config.label, onEzChange: this.handleSearchFilterList.bind(this) }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo("filterSearch")}` })), index.h("span", { class: "ez-text ez-title--small ez-title--primary" }, " ", this.config.detailTitle, " "))));
+  }
+  buildModeModalFooter() {
+    if (this.presentationMode !== presentationMode.EPresentationMode.MODAL)
+      return;
+    return (index.h("div", { class: "ez-flex ez-flex--justify-end grow ez-margin-top--medium" }, index.h("ez-button", { class: "ez-button--tertiary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.clear'), onClick: this.handleClearFilters.bind(this) }), index.h("ez-button", { class: "ez-button--secondary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.create'), onClick: () => this.addFilter.emit() })));
+  }
+  buildContainerFiltersCreated() {
+    if (this.items.length) {
+      return (index.h("ez-scroller", { class: "SnkFilterPersonalized_list-scroller", direction: EzScrollDirection.EzScrollDirection.VERTICAL }, index.h("ul", { class: `SnkFilterPersonalized_list-container ${!this.isModalMode() ? "SnkFilterPersonalized_list-container-chip" : ""}` }, this.items.map((itemConfig) => this.getItemContent(itemConfig)))));
+    }
+    else {
+      return (index.h("div", { class: "ez-margin--auto" }, index.h("span", { class: "ez-text ez-text--secondary ez-text--small" }, this.getMessage('snkPersonalizedFilter.info.noDataFound'))));
+    }
+  }
   render() {
     if (!this.config || this.config.type !== filterItemType_enum.FilterItemType.PERSONALIZED)
       return undefined;
-    return (index.h(index.Host, null, index.h("div", { class: "ez-margin-bottom--medium" }, this.presentationMode === presentationMode.EPresentationMode.MODAL && (index.h(index.Fragment, null, index.h("ez-filter-input", Object.assign({ label: this.config.label, onEzChange: this.handleFilterChange.bind(this) }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo("filterSearch")}` })), index.h("span", { class: "ez-text ez-title--small ez-title--primary" }, " ", this.config.detailTitle, " ")))), this.items.length ? (index.h("ez-scroller", { class: "SnkFilterPersonalized_list-scroller", direction: EzScrollDirection.EzScrollDirection.VERTICAL }, index.h("ul", { class: `SnkFilterPersonalized_list-container ${!this.isModalMode() ? "SnkFilterPersonalized_list-container-chip" : ""}` }, this.items.map((itemConfig) => this.getItemContent(itemConfig))))) : (index.h("div", { class: "ez-margin--auto" }, index.h("span", { class: "ez-text ez-text--secondary ez-text--small" }, this.getMessage('snkPersonalizedFilter.info.noDataFound')))), this.presentationMode === presentationMode.EPresentationMode.MODAL && (index.h("div", { class: "ez-flex ez-flex--justify-end grow ez-margin-top--medium" }, index.h("ez-button", { class: "ez-button--tertiary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.clear'), onClick: this.handleClearFilters.bind(this) }), index.h("ez-button", { class: "ez-button--secondary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.create'), onClick: () => this.addFilter.emit() })))));
+    return (index.h(index.Host, null, this.buildModeModalHeader(), this.buildContainerFiltersCreated(), this.buildModeModalFooter()));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {
     "config": ["configWatcher"]
   }; }
 };
-SnkFilterPersonalized.style = snkFilterPersonalizedCss;
+SnkFilterPersonalized.style = snkPersonalizedFilterEditorCss;
 
-exports.snk_filter_personalized = SnkFilterPersonalized;
+exports.snk_personalized_filter_editor = SnkFilterPersonalized;

package/dist/cjs/snk-personalized-filter.cjs.entry.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f9e81701.js');
 const core = require('@sankhyalabs/core');
-const PersonalizedFilterUtils = require('./PersonalizedFilterUtils-7d959e91.js');
+const PersonalizedFilterUtils = require('./PersonalizedFilterUtils-cfcd9af2.js');
 const ConfigStorage = require('./ConfigStorage-0a738cdc.js');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
-const IExpressionItem = require('./IExpressionItem-1090c3fd.js');
+const IExpressionItem = require('./IExpressionItem-0e32ebb7.js');
 const index$1 = require('./index-102ba62d.js');
-require('./index-614af008.js');
 require('./filter-item-type.enum-aa823a00.js');
 require('./form-config-fetcher-92bc8fe7.js');
 require('./DataFetcher-a9d0228f.js');
@@ -25,13 +24,18 @@ const SnkPersonalizedFilter = class {
     this.ezCancel = index.createEvent(this, "ezCancel", 7);
     this.ezSave = index.createEvent(this, "ezSave", 7);
     this._personalizedFilterFetcher = new ConfigStorage.PersonalizedFilterFetcher();
+    this._filterMetadataStorage = new Map();
     this._dataSourceFetcher = {
       fetchData: async (entity) => {
         let entityURI = entity === null || entity === void 0 ? void 0 : entity.uri;
         if (core.StringUtils.isEmpty(entityURI)) {
           entityURI = this.entityUri;
         }
-        return await this._personalizedFilterFetcher.loadFields(entityURI);
+        if (!this._filterMetadataStorage.has(entityURI)) {
+          const filterMetadata = await this._personalizedFilterFetcher.loadFields(entityURI);
+          this._filterMetadataStorage.set(entityURI, filterMetadata);
+        }
+        return this._filterMetadataStorage.get(entityURI);
       }
     };
     this._filterAssistentMode = true;
@@ -144,11 +148,11 @@ const SnkPersonalizedFilter = class {
     utils.ApplicationUtils.confirm(this.getMessage("snkPersonalizedFilter.confirmCancel.title"), this.getMessage("snkPersonalizedFilter.confirmCancel.description"))
       .then((canCancel) => {
       var _a;
-      if (canCancel) {
-        this._filterAssistent = core.ObjectUtils.copy((_a = this._originalFilterAssistent) !== null && _a !== void 0 ? _a : {});
-        this.ezCancel.emit();
-        this._elButtonSave.enabled = false;
-      }
+      if (!canCancel)
+        return;
+      this._filterAssistent = core.ObjectUtils.copy((_a = this._originalFilterAssistent) !== null && _a !== void 0 ? _a : {});
+      this.ezCancel.emit();
+      this._elButtonSave.enabled = false;
     });
   }
   handleTitleChange(name) {
@@ -181,14 +185,21 @@ const SnkPersonalizedFilter = class {
     }
     return (index.h("div", { class: "ez-flex" }, index.h("ez-alert", { alertType: "warn" }, this._filterAssistent.warningMessage)));
   }
+  buildContainerPersonalizedFilter() {
+    var _a, _b, _c;
+    if (this._filterAssistentMode) {
+      return (index.h(index.Fragment, null, index.h("div", { class: "ez-padding-top--small snk-personalized-filter__group" }, index.h("snk-expression-group", { ref: (el) => this._mainExpressionGroup = el, group: (_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.assistent, messagesBuilder: this.messagesBuilder, onEzFilterGroupChange: this.handleFilterGroupChange.bind(this), filterId: this.filterId, entityURI: this.entityUri })), index.h("div", null, index.h("div", { class: "snk-personalized-filter__expression-input--line" }), index.h("ez-collapsible-box", { label: this.getMessage("snkPersonalizedFilter.info.titleCollapsible"), headerSize: "medium", value: true }, index.h("div", { class: "ez-box" }, index.h("div", { class: "ez-box__container" }, index.h("ez-text-area", { ref: (el) => this._elTextAreaExpression = el, enabled: false, label: this.getMessage("snkPersonalizedFilter.info.labelExpression"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.expression })))))));
+    }
+    else {
+      return (index.h(index.Fragment, null, index.h("span", { class: "ez-text ez-text--small ez-text--bold ez-padding-bottom--medium" }, this.getMessage("snkPersonalizedFilter.info.applyExpression")), index.h("ez-text-area", { label: this.getMessage("snkPersonalizedFilter.info.labelExpression"), value: (_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.expression, onEzChange: (evt) => this.handleExpressionChange(evt.detail) }), this.getWarningMessageComponent()));
+    }
+  }
   render() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     if (!((_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.assistent) && this._filterAssistentMode) {
       return;
     }
-    return (index.h(index.Host, null, index.h("div", { class: "snk-personalized-filter" }, index.h("div", null, index.h("snk-simple-bar", { label: this.filterId ? this.getMessage("snkPersonalizedFilter.info.titleEdit") : this.getMessage("snkPersonalizedFilter.info.titleAdd"), onExit: () => this.handleCancel() }, index.h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, index.h("ez-button", { size: "small", label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), index.h("ez-button", { size: "small", ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), index.h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, index.h("div", { class: "ez-box__container" }, index.h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, index.h("div", { class: "ez-flex" }, index.h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail) })), this._filterAssistentMode ?
-      index.h(index.Fragment, null, index.h("div", { class: "ez-padding-top--small snk-personalized-filter__group" }, index.h("snk-expression-group", { ref: (el) => this._mainExpressionGroup = el, group: (_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.assistent, messagesBuilder: this.messagesBuilder, onEzFilterGroupChange: this.handleFilterGroupChange.bind(this), filterId: this.filterId, entityURI: this.entityUri })), index.h("div", null, index.h("div", { class: "snk-personalized-filter__expression-input--line" }), index.h("ez-collapsible-box", { label: this.getMessage("snkPersonalizedFilter.info.titleCollapsible"), headerSize: "medium", value: true }, index.h("div", { class: "ez-box" }, index.h("div", { class: "ez-box__container" }, index.h("ez-text-area", { ref: (el) => this._elTextAreaExpression = el, enabled: false, label: this.getMessage("snkPersonalizedFilter.info.labelExpression"), value: (_d = this._filterAssistent) === null || _d === void 0 ? void 0 : _d.expression })))))) :
-      index.h(index.Fragment, null, index.h("span", { class: "ez-text ez-text--small ez-text--bold ez-padding-bottom--medium" }, "Express\u00E3o a ser aplicada:"), index.h("ez-text-area", { label: this.getMessage("snkPersonalizedFilter.info.labelExpression"), value: (_e = this._filterAssistent) === null || _e === void 0 ? void 0 : _e.expression, onEzChange: (evt) => this.handleExpressionChange(evt.detail) }), this.getWarningMessageComponent())))))));
+    return (index.h(index.Host, null, index.h("div", { class: "snk-personalized-filter" }, index.h("div", null, index.h("snk-simple-bar", { label: this.filterId ? this.getMessage("snkPersonalizedFilter.info.titleEdit") : this.getMessage("snkPersonalizedFilter.info.titleAdd"), onExit: () => this.handleCancel() }, index.h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, index.h("ez-button", { size: "small", label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), index.h("ez-button", { size: "small", ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), index.h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, index.h("div", { class: "ez-box__container" }, index.h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, index.h("div", { class: "ez-flex" }, index.h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail) })), this.buildContainerPersonalizedFilter()))))));
   }
   static get watchers() { return {
     "filterId": ["loadFilter"]

package/dist/cjs/snk-simple-crud.cjs.entry.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f9e81701.js');
 const core = require('@sankhyalabs/core');
-const constants = require('./constants-d187e03e.js');
-const taskbarElements = require('./taskbar-elements-7f91f4cd.js');
+const constants$1 = require('./constants-d187e03e.js');
+const taskbarElements = require('./taskbar-elements-b98dd6e9.js');
 require('./DataFetcher-a9d0228f.js');
 require('./pesquisa-fetcher-954b74c3.js');
-const index$1 = require('./index-614af008.js');
+const index$1 = require('./index-0e663819.js');
 const taskbarProcessor = require('./taskbar-processor-bce3f499.js');
+const constants = require('@sankhyalabs/ezui/dist/collection/utils/constants');
+const SnkMultiSelectionListDataSource = require('./SnkMultiSelectionListDataSource-804ff4c7.js');
 require('./index-102ba62d.js');
 require('./_commonjsHelpers-537d719a.js');
 
@@ -19,7 +21,7 @@ class InMemoryLoader {
     this.metadata = metadata;
     this._dataUnit = new core.DataUnit("InMemoryDataUnit");
     this._dataUnit.metadataLoader = () => this.metadaLoader();
-    this._dataUnit.dataLoader = (_dataUnit, request) => this.dataLoader(_dataUnit, request);
+    this._dataUnit.dataLoader = (dataUnit, request) => this.dataLoader(dataUnit, request);
     this._dataUnit.saveLoader = (_dataUnit, changes) => this.saveLoader(_dataUnit, changes);
     this._dataUnit.removeLoader = (_dataUnit, recordIds) => this.removeLoader(_dataUnit, recordIds);
     this.dataUnit.loadMetadata().then(() => this.dataUnit.loadData());
@@ -56,8 +58,9 @@ class InMemoryLoader {
   metadaLoader() {
     return Promise.resolve(this._metadata);
   }
-  dataLoader(_dataUnit, request) {
-    let records = [...this._records];
+  dataLoader(dataUnit, request) {
+    const filters = this.getColumnFilters(dataUnit);
+    let records = this.applyFilters(filters);
     if (request.sort) {
       request.sort.forEach(sort => {
         records = records.sort((recordA, recordB) => {
@@ -70,6 +73,25 @@ class InMemoryLoader {
     }
     return Promise.resolve({ records: records });
   }
+  applyFilters(filters) {
+    let records = [...this._records];
+    filters.forEach(filter => {
+      records = records.filter(record => { var _a; return filter.values.includes((_a = record[filter.column]) === null || _a === void 0 ? void 0 : _a.toString()); });
+    });
+    return records;
+  }
+  getColumnFilters(dataUnit) {
+    var _a, _b;
+    const allFilters = (_a = dataUnit.getFilters()) !== null && _a !== void 0 ? _a : [];
+    const columnFilters = (_b = allFilters.filter(filter => { var _a; return (_a = filter.name) === null || _a === void 0 ? void 0 : _a.includes(constants.DISTINCT_FILTER_NAME_PREFIX); })) !== null && _b !== void 0 ? _b : [];
+    return columnFilters.map(filter => {
+      var _a, _b;
+      return {
+        column: (_b = (_a = filter.name) === null || _a === void 0 ? void 0 : _a.replace(constants.DISTINCT_FILTER_NAME_PREFIX, "")) !== null && _b !== void 0 ? _b : "",
+        values: filter.params.map(param => param.value),
+      };
+    });
+  }
   getSortFn(type) {
     switch (type) {
       case core.DataType.NUMBER:
@@ -135,6 +157,7 @@ const SnkSimpleCrud = class {
     this.actionClick = index.createEvent(this, "actionClick", 7);
     this.REGULAR_DEFAULT_BTNS = ["INSERT", "REFRESH", "PREVIOUS", "NEXT", "DIVIDER"];
     this.REGULAR_SELECTED_BTNS = ["INSERT", "REFRESH", "PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "DIVIDER"];
+    this._multiSelectionListDataSource = new SnkMultiSelectionListDataSource.SnkMultiSelectionListDataSource();
     this._taskbarProcessor = new taskbarProcessor.TaskbarProcessor({
       "snkSimpleCrudTaskbar.form_regular": this.resolveInMemoryBtns(this.REGULAR_DEFAULT_BTNS).concat(taskbarElements.TaskbarElement.GRID_MODE),
       "snkSimpleCrudTaskbar.grid_regular": this.resolveInMemoryBtns(this.REGULAR_DEFAULT_BTNS).concat(taskbarElements.TaskbarElement.FORM_MODE),
@@ -142,11 +165,11 @@ const SnkSimpleCrud = class {
       "snkSimpleCrudTaskbar.grid_selected": this.resolveInMemoryBtns(this.REGULAR_SELECTED_BTNS).concat(taskbarElements.TaskbarElement.FORM_MODE),
       "snkSimpleCrudTaskbar.finish_edition": ["CANCEL", "SAVE"]
     });
-    this._currentViewMode = constants.VIEW_MODE.GRID;
+    this._currentViewMode = constants$1.VIEW_MODE.GRID;
     this._config = undefined;
     this.dataState = undefined;
     this.dataUnit = undefined;
-    this.mode = constants.SIMPLE_CRUD_MODE.SERVER;
+    this.mode = constants$1.SIMPLE_CRUD_MODE.SERVER;
     this.gridConfig = undefined;
     this.formConfig = undefined;
     this.multipleSelection = undefined;
@@ -156,7 +179,7 @@ const SnkSimpleCrud = class {
   }
   resolveInMemoryBtns(taskbarButtons) {
     const newTaskBarConfig = [...taskbarButtons];
-    if (this.mode === constants.SIMPLE_CRUD_MODE.IN_MEMORY) {
+    if (this.mode === constants$1.SIMPLE_CRUD_MODE.IN_MEMORY) {
       newTaskBarConfig.splice(1, 1);
     }
     return newTaskBarConfig;
@@ -173,15 +196,15 @@ const SnkSimpleCrud = class {
   actionClickListener(evt) {
     const act = evt.detail;
     if (act === taskbarElements.TaskbarElement.GRID_MODE) {
-      this.goToView(constants.VIEW_MODE.GRID);
+      this.goToView(constants$1.VIEW_MODE.GRID);
     }
     else if (act === taskbarElements.TaskbarElement.FORM_MODE) {
-      this.goToView(constants.VIEW_MODE.FORM);
+      this.goToView(constants$1.VIEW_MODE.FORM);
     }
     evt.stopPropagation();
   }
   onModeChange() {
-    if (this.mode == constants.SIMPLE_CRUD_MODE.IN_MEMORY) {
+    if (this.mode == constants$1.SIMPLE_CRUD_MODE.IN_MEMORY) {
       this.initInMemoryDataUnit();
     }
   }
@@ -196,6 +219,12 @@ const SnkSimpleCrud = class {
   componentWillLoad() {
     this.processMetadata();
     this.onModeChange();
+    this.configDatasource();
+  }
+  configDatasource() {
+    const application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this._multiSelectionListDataSource.setApplication(application);
+    this._multiSelectionListDataSource.setDataUnit(this.dataUnit);
   }
   getTaskBarId() {
     var _a, _b, _c;
@@ -205,9 +234,9 @@ const SnkSimpleCrud = class {
     if (((_b = this.dataState) === null || _b === void 0 ? void 0 : _b.selectionInfo) &&
       !this.dataState.selectionInfo.isAllRecords() &&
       ((_c = this.dataState.selectionInfo.records) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-      return this._currentViewMode === constants.VIEW_MODE.GRID ? "snkSimpleCrudTaskbar.grid_selected" : "snkSimpleCrudTaskbar.form_selected";
+      return this._currentViewMode === constants$1.VIEW_MODE.GRID ? "snkSimpleCrudTaskbar.grid_selected" : "snkSimpleCrudTaskbar.form_selected";
     }
-    return this._currentViewMode === constants.VIEW_MODE.GRID ? "snkSimpleCrudTaskbar.grid_regular" : "snkSimpleCrudTaskbar.form_regular";
+    return this._currentViewMode === constants$1.VIEW_MODE.GRID ? "snkSimpleCrudTaskbar.grid_regular" : "snkSimpleCrudTaskbar.form_regular";
   }
   initInMemoryDataUnit() {
     this._inMemoryLoader = new InMemoryLoader(this._metadata);
@@ -281,7 +310,7 @@ const SnkSimpleCrud = class {
   }
   render() {
     var _a;
-    return (index.h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onInsertionMode: () => this.goToView(constants.VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, index.h("header", null, index.h("slot", { name: "snkSimpleCrudHeader" })), index.h("section", { class: "ez-flex ez-box ez-box--shadow" }, index.h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: index$1.PresentationMode.SECONDARY }), index.h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, index.h("stack-item", null, index.h("ez-grid", { dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(constants.VIEW_MODE.FORM) }, index.h("div", { slot: "footer" }, index.h("slot", { name: "snkSimpleCrudFooter" })))), index.h("stack-item", null, index.h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig }))))));
+    return (index.h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onInsertionMode: () => this.goToView(constants$1.VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, index.h("header", null, index.h("slot", { name: "snkSimpleCrudHeader" })), index.h("section", { class: "ez-flex ez-box ez-box--shadow" }, index.h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: index$1.PresentationMode.SECONDARY }), index.h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, index.h("stack-item", null, index.h("ez-grid", { dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(constants$1.VIEW_MODE.FORM), columnfilterDataSource: this._multiSelectionListDataSource }, index.h("div", { slot: "footer" }, index.h("slot", { name: "snkSimpleCrudFooter" })))), index.h("stack-item", null, index.h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig }))))));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/snk-taskbar.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f9e81701.js');
 const core = require('@sankhyalabs/core');
 const AuthorizationConfig = require('./AuthorizationConfig-79ffae4b.js');
-const taskbarElements = require('./taskbar-elements-7f91f4cd.js');
-const index$1 = require('./index-614af008.js');
+const taskbarElements = require('./taskbar-elements-b98dd6e9.js');
+const index$1 = require('./index-0e663819.js');
 require('./index-102ba62d.js');
 
 const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}";

package/dist/cjs/{taskbar-elements-7f91f4cd.js → taskbar-elements-b98dd6e9.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-f9e81701.js');
-const index$2 = require('./index-614af008.js');
+const index$2 = require('./index-0e663819.js');
 const index$1 = require('./index-102ba62d.js');
 
 exports.TaskbarElement = void 0;

package/dist/collection/collection-manifest.json

@@ -19,8 +19,8 @@
     "./components/snk-data-exporter/snk-data-exporter.js",
     "./components/snk-data-exporter/exporter-email-sender/snk-exporter-email-sender.js",
     "./components/snk-entity-list/snk-entity-list.js",
-    "./components/snk-filter-bar/filter-item/editors/snk-filter-personalized/snk-filter-personalized.js",
     "./components/snk-filter-bar/snk-filter-bar.js",
+    "./components/snk-filter-bar/filter-item/editors/snk-personalized-filter-editor/snk-personalized-filter-editor.js",
     "./components/snk-filter-bar/filter-item/snk-filter-detail.js",
     "./components/snk-filter-bar/filter-item/editors/snk-filter-binary-select.js",
     "./components/snk-filter-bar/filter-item/editors/snk-filter-multi-select.js",

package/dist/collection/components/snk-filter-bar/filter-item/dataunitfilter/data-unit-filter-builder.js

@@ -1,7 +1,7 @@
 import { DataType } from "@sankhyalabs/core";
 import { toString } from "@sankhyalabs/core/dist/dataunit/metadata/DataType";
 import FilterItemType from "../filter-item-type.enum";
-import { FilterOperand } from "../../../../lib/@types";
+import { FilterOperand } from "../../../snk-personalized-filter/interfaces/index";
 const buildFilter = (item) => {
   switch (item.type) {
     case FilterItemType.DEFAULT_FILTER:

package/dist/collection/components/snk-filter-bar/filter-item/editors/{snk-filter-personalized/snk-filter-personalized.js → snk-personalized-filter-editor/snk-personalized-filter-editor.js}

@@ -41,10 +41,15 @@ export class SnkFilterPersonalized {
     var _a, _b;
     const CheckboxElement = () => (h("ez-check", Object.assign({ class: "SnkFilterPersonalized_checkbox", id: `param_${item.id}`, key: item.id, compact: true, value: item.visible, label: item.label, onEzChange: ({ detail: visible }) => this.handleItemChange.bind(this)(visible, item.id) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`checkboxFilter_${item.id}`)}` })));
     const isVariable = !!((_b = (_a = item.props) === null || _a === void 0 ? void 0 : _a.personalizedFilter) === null || _b === void 0 ? void 0 : _b.parameters.length);
-    return (h("div", { class: `${!this.isModalMode() ? "SnkFilterPersonalized_list-item--chip" : ""}` }, h("li", { class: `${this.isModalMode() ? "SnkFilterPersonalized_list-item--modal" : ""}` }, h("div", { class: "ez-flex ez-flex--align-items-center ez-margin-right--small ez-size-width--full" }, h(CheckboxElement, null), this.isModalMode() ?
+    return (h("div", { class: `${!this.isModalMode() ? "SnkFilterPersonalized_list-item--chip" : ""}` }, h("li", { class: `${this.isModalMode() ? "SnkFilterPersonalized_list-item--modal" : ""}` }, h("div", { class: "ez-flex ez-flex--align-items-center ez-margin-right--small ez-size-width--full" }, h(CheckboxElement, null), this.buildModalListActions(item, isVariable))), (item.visible && isVariable) && (h("div", { class: "ez-row ez-padding--small" }, this.getFormField(item)))));
+  }
+  buildModalListActions(item, isVariable) {
+    if (!this.isModalMode())
+      return;
+    return (this.isModalMode() ?
       h("div", { class: "SnkFilterPersonalized_list-actions" }, h("ez-button", { size: "small", mode: "icon", iconName: "edit", title: this.getMessage('snkPersonalizedFilter.listActions.edit'), onClick: () => this.editFilter.emit(item.id) }), h("ez-button", { size: "small", mode: "icon", iconName: "delete", title: this.getMessage('snkPersonalizedFilter.listActions.delete'), onClick: this.handleDeleteFilter.bind(this, item) }))
       :
-        isVariable && (h("ez-badge", Object.assign({ class: "ez-badge--warning-subtle ez-margin-right--small", label: this.getMessage('snkPersonalizedFilter.info.badgeVariable'), size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`variableBadge_${item.id}`)}` }))))), (item.visible && isVariable) && (h("div", { class: "ez-row ez-padding--small" }, this.getFormField(item)))));
+        isVariable && (h("ez-badge", Object.assign({ class: "ez-badge--warning-subtle ez-margin-right--small", label: this.getMessage('snkPersonalizedFilter.info.badgeVariable'), size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`variableBadge_${item.id}`)}` }))));
   }
   isModalMode() {
     return this.presentationMode === EPresentationMode.MODAL;
@@ -111,7 +116,7 @@ export class SnkFilterPersonalized {
     });
     this.emitChange();
   }
-  handleFilterChange({ detail: query = "" }) {
+  handleSearchFilterList({ detail: query = "" }) {
     this.items = query ? this.originalItems.filter(item => item.label.toLowerCase().includes(query.toLowerCase())) : this.originalItems;
   }
   handleFilterItemChange(value, formProp) {
@@ -144,11 +149,11 @@ export class SnkFilterPersonalized {
   }
   handleDeleteFilter(item) {
     this._application.confirm(this.getMessage('snkPersonalizedFilter.deleteConfirm.title'), this.getMessage('snkPersonalizedFilter.deleteConfirm.message', { filterName: item.label })).then((actionConfirmed) => {
-      if (actionConfirmed) {
-        this.deleteFilter.emit(item);
-        this.items = this.originalItems = this.originalItems.filter(originalItem => originalItem.id !== item.id);
-        this.emitChange();
-      }
+      if (!actionConfirmed)
+        return;
+      this.deleteFilter.emit(item);
+      this.items = this.originalItems = this.originalItems.filter(originalItem => originalItem.id !== item.id);
+      this.emitChange();
     });
   }
   componentDidLoad() {
@@ -160,21 +165,39 @@ export class SnkFilterPersonalized {
     this._application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
     this.items = this.originalItems = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.groupedItems) || [];
   }
+  buildModeModalHeader() {
+    if (this.presentationMode !== EPresentationMode.MODAL)
+      return;
+    return (h("div", { class: "ez-margin-bottom--medium" }, h(Fragment, null, h("ez-filter-input", Object.assign({ label: this.config.label, onEzChange: this.handleSearchFilterList.bind(this) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("filterSearch")}` })), h("span", { class: "ez-text ez-title--small ez-title--primary" }, " ", this.config.detailTitle, " "))));
+  }
+  buildModeModalFooter() {
+    if (this.presentationMode !== EPresentationMode.MODAL)
+      return;
+    return (h("div", { class: "ez-flex ez-flex--justify-end grow ez-margin-top--medium" }, h("ez-button", { class: "ez-button--tertiary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.clear'), onClick: this.handleClearFilters.bind(this) }), h("ez-button", { class: "ez-button--secondary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.create'), onClick: () => this.addFilter.emit() })));
+  }
+  buildContainerFiltersCreated() {
+    if (this.items.length) {
+      return (h("ez-scroller", { class: "SnkFilterPersonalized_list-scroller", direction: EzScrollDirection.VERTICAL }, h("ul", { class: `SnkFilterPersonalized_list-container ${!this.isModalMode() ? "SnkFilterPersonalized_list-container-chip" : ""}` }, this.items.map((itemConfig) => this.getItemContent(itemConfig)))));
+    }
+    else {
+      return (h("div", { class: "ez-margin--auto" }, h("span", { class: "ez-text ez-text--secondary ez-text--small" }, this.getMessage('snkPersonalizedFilter.info.noDataFound'))));
+    }
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.PERSONALIZED)
       return undefined;
-    return (h(Host, null, h("div", { class: "ez-margin-bottom--medium" }, this.presentationMode === EPresentationMode.MODAL && (h(Fragment, null, h("ez-filter-input", Object.assign({ label: this.config.label, onEzChange: this.handleFilterChange.bind(this) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("filterSearch")}` })), h("span", { class: "ez-text ez-title--small ez-title--primary" }, " ", this.config.detailTitle, " ")))), this.items.length ? (h("ez-scroller", { class: "SnkFilterPersonalized_list-scroller", direction: EzScrollDirection.VERTICAL }, h("ul", { class: `SnkFilterPersonalized_list-container ${!this.isModalMode() ? "SnkFilterPersonalized_list-container-chip" : ""}` }, this.items.map((itemConfig) => this.getItemContent(itemConfig))))) : (h("div", { class: "ez-margin--auto" }, h("span", { class: "ez-text ez-text--secondary ez-text--small" }, this.getMessage('snkPersonalizedFilter.info.noDataFound')))), this.presentationMode === EPresentationMode.MODAL && (h("div", { class: "ez-flex ez-flex--justify-end grow ez-margin-top--medium" }, h("ez-button", { class: "ez-button--tertiary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.clear'), onClick: this.handleClearFilters.bind(this) }), h("ez-button", { class: "ez-button--secondary", size: "medium", label: this.getMessage('snkPersonalizedFilter.footerActions.create'), onClick: () => this.addFilter.emit() })))));
+    return (h(Host, null, this.buildModeModalHeader(), this.buildContainerFiltersCreated(), this.buildModeModalFooter()));
   }
-  static get is() { return "snk-filter-personalized"; }
+  static get is() { return "snk-personalized-filter-editor"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["snk-filter-personalized.css"]
+      "$": ["snk-personalized-filter-editor.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["snk-filter-personalized.css"]
+      "$": ["snk-personalized-filter-editor.css"]
     };
   }
   static get properties() {
@@ -292,7 +315,7 @@ export class SnkFilterPersonalized {
           "references": {
             "IPersonalizedFilter": {
               "location": "import",
-              "path": "../../../../snk-personalized-filter/subcomponents/snk-filter-param-config/interfaces/IPersonalizedFilter"
+              "path": "../../../../snk-personalized-filter/interfaces/IPersonalizedFilter"
             }
           }
         }

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

@@ -47,12 +47,9 @@ export class SnkFilterDetail {
         return { tag: "snk-filter-number" };
       case FilterItemType.PERSONALIZED:
         const snkFilterPersonalizedProps = {
-          tag: "snk-filter-personalized", props: {
+          tag: "snk-personalized-filter-editor", props: {
             presentationMode: EPresentationMode.CHIP,
-            onValueChanged: ({ detail }) => {
-              const groupedItems = (detail === null || detail === void 0 ? void 0 : detail.items) || this.config.groupedItems;
-              this.config = Object.assign(Object.assign({}, this.config), { groupedItems, visible: (groupedItems || []).filter(item => item.visible).length > 0 });
-            }
+            onValueChanged: evt => this.handleValueChanged(evt),
           }
         };
         return snkFilterPersonalizedProps;
@@ -61,6 +58,10 @@ export class SnkFilterDetail {
     }
     return { tag: "snk-filter-text" };
   }
+  handleValueChanged({ detail }) {
+    const groupedItems = (detail === null || detail === void 0 ? void 0 : detail.items) || this.config.groupedItems;
+    this.config = Object.assign(Object.assign({}, this.config), { groupedItems, visible: (groupedItems || []).filter(item => item.visible).length > 0 });
+  }
   removeItem() {
     const hasMultiValues = this.config.type === FilterItemType.MULTI_LIST && Array.isArray(this.config.value);
     const newValue = hasMultiValues ? this.config.value.map((valueItem) => (Object.assign(Object.assign({}, valueItem), { check: false }))) : undefined;
@@ -70,6 +71,9 @@ export class SnkFilterDetail {
     }
     this.changeConfig(removedConfig);
   }
+  removeItemFromGroup(item) {
+    return Object.assign(Object.assign({}, item), { visible: false, fixed: false, value: undefined });
+  }
   getPopUpHeaderButtons() {
     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 })))));
   }

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

@@ -177,11 +177,7 @@ export class SnkFilterItem {
         return `${label}: ${value.value} - ${value.label}`;
       }
       if (type === FilterItemType.PERSONALIZED) {
-        const activeCount = groupedItems.reduce((total, item) => {
-          if (!!item.visible)
-            return total + 1;
-          return total;
-        }, 0);
+        const activeCount = this.calculateActiveCount(groupedItems);
         if (activeCount <= 0)
           return label;
         return `${label}: ${this.getMessage('snkFilterBar.personalizedCount', { activeCount })}`;
@@ -205,6 +201,13 @@ export class SnkFilterItem {
     }
     return label;
   }
+  calculateActiveCount(groupedItems) {
+    return groupedItems.reduce((total, item) => {
+      if (!!item.visible)
+        return total + 1;
+      return total;
+    }, 0);
+  }
   applyTooltip() {
     if (!this.config.value)
       return undefined;
@@ -253,13 +256,19 @@ export class SnkFilterItem {
     }
     return undefined;
   }
+  hasActiveElements(value) {
+    var _a, _b, _c;
+    return ((_c = (_b = ((_a = value === null || value === void 0 ? void 0 : value.elements) !== null && _a !== void 0 ? _a : value)) === null || _b === void 0 ? void 0 : _b.filter(val => val === null || val === void 0 ? void 0 : val.check)) === null || _c === void 0 ? void 0 : _c.length) > 0;
+  }
+  hasActiveValue(config) {
+    return (config.type !== FilterItemType.MULTI_LIST && config.value !== undefined) || this.hasActiveElements(config.value);
+  }
   getEnabledChip() {
-    var _a, _b, _c, _d;
     if (this.config.type === FilterItemType.PERSONALIZED) {
       const { groupedItems = [] } = this.config;
       return groupedItems.some(item => item.visible);
     }
-    return (FilterItemType.MULTI_LIST != this.config.type && this.config.value != undefined) || (((_d = (_c = ((_b = (_a = this.config.value) === null || _a === void 0 ? void 0 : _a.elements) !== null && _b !== void 0 ? _b : this.config.value)) === null || _c === void 0 ? void 0 : _c.filter(value => value === null || value === void 0 ? void 0 : value.check)) === null || _d === void 0 ? void 0 : _d.length) > 0);
+    return this.hasActiveValue(this.config);
   }
   render() {
     const leftIcon = this.getLeftIconName();

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

@@ -66,7 +66,7 @@ export class SnkFilterModal {
     });
   }
   handleClose() {
-    const hasChangesToSave = JSON.stringify(this.filters) !== JSON.stringify(this._originalFilterConfig);
+    const hasChangesToSave = ObjectUtils.objectToString(this.filters) !== ObjectUtils.objectToString(this._originalFilterConfig);
     if (!hasChangesToSave) {
       this.closeModal();
       return;
@@ -76,13 +76,19 @@ export class SnkFilterModal {
         this.closeModal();
     });
   }
-  validatePersonalizedFilter() {
+  handleApplyFilters() {
     const filterPersonalized = this.filters.find(filter => filter.filterType === FilterType.CUSTOM_FILTER);
+    if (this.isValidCustomFilter(filterPersonalized)) {
+      this.applyFilters(this.filters);
+    }
+  }
+  isValidCustomFilter(filterPersonalized) {
     const isValid = PersonalizedFilterUtils.validateVariableValues(filterPersonalized);
     if (!isValid) {
-      return ApplicationUtils.alert(this.getCustomMessage('validations.notFullFilled.title'), this.getCustomMessage('validations.notFullFilled.message'));
+      ApplicationUtils.alert(this.getCustomMessage('validations.notFullFilled.title'), this.getCustomMessage('validations.notFullFilled.message'));
+      return false;
     }
-    this.applyFilters(this.filters);
+    return true;
   }
   modalActionListener(evt) {
     const modalAction = evt.detail;
@@ -91,7 +97,7 @@ export class SnkFilterModal {
         this.handleClearAll();
         break;
       case ModalAction.OK:
-        this.validatePersonalizedFilter();
+        this.handleApplyFilters();
         break;
       case ModalAction.CLOSE:
         this.handleClose();