@sankhyalabs/sankhyablocks 8.16.0-dev.11 → 8.16.0-dev.111

package/dist/collection/components/snk-data-unit/snk-data-unit.js

@@ -1,11 +1,12 @@
-import { Host, h } from '@stencil/core';
-import { Action, ApplicationContext, DataUnitAction, ObjectUtils, StringUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+import { Action, ApplicationContext, DataUnitAction, ObjectUtils, StringUtils, } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { OperationMap, SnkMessageBuilder } from '../../lib/message/SnkMessageBuilder';
 import { DatasetStrategy } from '../../lib/http/data-fetcher/fetchers/data-unit/loadstrategy/DatasetStrategy';
 import { getRecordValue } from '../../lib/dataUnit/ValueFormatter';
-import { getSelectedIDs } from '../snk-data-exporter/utils/RecordIDUtils';
 import { convertType } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
+import { getSelectedRecordsIDsInfo } from '../../lib/utils/GetSelectedRecordsIDsInfo';
+import { showConfirmMultipleUpdatePopup } from './MultipleUpdateHelper';
 export class SnkDataUnit {
   constructor() {
     this._onDataUnitResolve = [];
@@ -14,9 +15,10 @@ export class SnkDataUnit {
     this._fieldsWithRmPrecision = [];
     this._metadataByRow = new Map();
     this._rowMetadataCache = new Map();
+    this._formFieldsConfig = [];
     this.REGEX_DATAUNIT_NAME = /dd:\/\/(.+?)\//;
     this._dataUnitObserver = async (action) => {
-      const duState = this.buildDataState(action.type);
+      const duState = await this.buildDataState(action.type);
       this.dataState = duState;
       this.messagesBuilder.currentOperation = this.getMessageOperation();
       switch (action.type) {
@@ -92,6 +94,10 @@ export class SnkDataUnit {
       this.messagesBuilderUpdated.emit(newValue);
     }
   }
+  onMasterFormConfigChange({ detail }) {
+    var _a;
+    this._formFieldsConfig = (_a = detail === null || detail === void 0 ? void 0 : detail.fields) !== null && _a !== void 0 ? _a : [];
+  }
   /**
    * Obtém o dataUnit.
    */
@@ -110,7 +116,7 @@ export class SnkDataUnit {
    * @returns Retorna a lista de IDs dos registros selecionados.
    */
   async getSelectedRecordsIDsInfo() {
-    return Promise.resolve(getSelectedIDs(this.dataUnit));
+    return getSelectedRecordsIDsInfo(this.dataUnit);
   }
   /**
    * Retorna os campos que possuem a propriedade "rmp" (Row Metadata Provider).
@@ -130,14 +136,22 @@ export class SnkDataUnit {
   async getRowMetadata(record) {
     return this.doGetRowMetadata(record);
   }
-  doGetRowMetadata(record) {
+  async doGetRowMetadata(record) {
     const selectedRecord = this.dataUnit.getSelectedRecord();
     if (!record && !selectedRecord) {
       return;
     }
     const currentRecord = record || selectedRecord;
     const recordId = typeof currentRecord === 'string' ? currentRecord : currentRecord.__record__id__;
-    const rowMetadata = this._metadataByRow.get(recordId);
+    let rowMetadata = this._metadataByRow.get(recordId);
+    /*
+      Nao fazemos cache de metadataByRow pra registros novos, pois a chave do mesmo
+      muda ao ser salvo, por isso essa tratativa é necessária para que o dataState fique com metadados
+      corretos nao confiando apenas no _metadataByRow
+    */
+    if (this.dataUnit.isNewRecord(recordId) && !rowMetadata) {
+      rowMetadata = await this.handleLoadRowMetadata(selectedRecord);
+    }
     if (!rowMetadata) {
       return;
     }
@@ -243,7 +257,9 @@ export class SnkDataUnit {
     return new DataUnitAction(Action.RECORDS_COPIED, this.handleRecordsCopied(action.payload));
   }
   async interceptDataChange(action) {
-    if (this.isAllowed("UPDATE")) {
+    var _a;
+    const recordId = (_a = this.dataUnit.getSelectedRecord()) === null || _a === void 0 ? void 0 : _a.__record__id__;
+    if (this.isAllowed("UPDATE") || this.dataUnit.isNewRecord(recordId)) {
       return action;
     }
     if (this._openedAlert) {
@@ -256,9 +272,13 @@ export class SnkDataUnit {
     this._openedAlert = false;
   }
   async interceptSavingData(action) {
-    if (!this.beforeSave) {
-      return action;
+    if (this.dataUnit.isMultipleEdition) {
+      const confirm = await this.confirmMultipleSavingData();
+      if (!confirm)
+        return undefined;
     }
+    if (!this.beforeSave)
+      return action;
     const continueAction = this.beforeSave(this.dataUnit);
     if (continueAction instanceof Promise) {
       const result = await continueAction;
@@ -266,6 +286,46 @@ export class SnkDataUnit {
     }
     return continueAction ? action : undefined;
   }
+  async confirmMultipleSavingData() {
+    const selectedRecords = this.dataUnit.getSelectionInfo().records;
+    const title = this.getMessage('snkDataUnit.multipleUpdateConfirmationTitle');
+    const message = this.getMessage('snkDataUnit.multipleUpdateConfirmationMessage', { size: selectedRecords.length });
+    const labelBtnCancel = this.getMessage('snkDataUnit.confirm.cancel');
+    const labelBtnConfirm = this.getMessage('snkDataUnit.confirm.updateMultipleConfirm');
+    return await showConfirmMultipleUpdatePopup({
+      title,
+      message,
+      labelBtnConfirm,
+      labelBtnCancel,
+      changingFields: this.getChangingFields(),
+    });
+  }
+  getChangingFields() {
+    const changes = this.dataUnit.buildChangesToSave();
+    if (!(changes === null || changes === void 0 ? void 0 : changes.length))
+      return [];
+    const change = changes[0];
+    const changingFields = Object.keys(change.updatingFields).map(key => this.buildChangingField(key, change[key]));
+    return changingFields;
+  }
+  buildChangingField(key, value) {
+    const fieldLabel = this.dataUnit.getField(key).label;
+    const formattedValue = this.dataUnit.getFormattedValue(key, value);
+    return {
+      label: fieldLabel,
+      value: formattedValue,
+      tabName: this.getFieldTabName(key),
+    };
+  }
+  getFieldTabName(fieldName) {
+    var _a;
+    const tab = (_a = this._formFieldsConfig.find(f => f.name === fieldName)) === null || _a === void 0 ? void 0 : _a.tab;
+    if (!tab)
+      return undefined;
+    if (typeof tab === 'string')
+      return tab;
+    return tab.label;
+  }
   interceptDataSaved(action) {
     if (this.afterSave) {
       this.afterSave(this.dataUnit);
@@ -285,7 +345,17 @@ export class SnkDataUnit {
     }
     const cancelConfirmationTitle = this.getMessage("snkDataUnit.cancelConfirmationTitle");
     const confirm = await ApplicationUtils.confirm(cancelConfirmationTitle, cancelConfirmation);
-    confirm && this.showSuccessMessage(this.getMessage("snkDataUnit.cancelInfo"));
+    if (confirm) {
+      let editionCanceledMessage;
+      if (this.dataUnit.isMultipleEdition) {
+        const selectedRecords = this.dataUnit.getSelectionInfo().records;
+        editionCanceledMessage = this.buildMultipleUpdateMessage(selectedRecords, true);
+      }
+      else {
+        editionCanceledMessage = this.getMessage("snkDataUnit.cancelInfo");
+      }
+      this.showSuccessMessage(editionCanceledMessage);
+    }
     return confirm ? action : undefined;
   }
   async interceptRemovingRecords(action) {
@@ -331,7 +401,7 @@ export class SnkDataUnit {
       case Action.RECORDS_COPIED:
         return this.interceptRecordsCopied(action);
       case Action.DATA_CHANGED:
-        await this.handleLoadRowMetadata(action);
+        await this.handleLoadRowMetadata(action.payload);
         return await this.interceptDataChange(action);
       case Action.CHANGING_DATA:
         return await this.interceptDataChange(action);
@@ -351,8 +421,9 @@ export class SnkDataUnit {
         return action;
     }
   }
-  async handleLoadRowMetadata(action) {
-    const record = action.type === Action.DATA_CHANGED ? action.payload : action.payload.changes[0].record;
+  async handleLoadRowMetadata(record) {
+    if (!record)
+      return;
     const keysPayload = Object.keys(record);
     const rmpField = keysPayload.find((field) => this._fieldsWithRmp.includes(field));
     if (rmpField) {
@@ -431,7 +502,7 @@ export class SnkDataUnit {
   isAllowed(flag) {
     return this._permissions ? this._permissions.isSup || this._permissions[flag] : false;
   }
-  buildDataState(actionType) {
+  async buildDataState(actionType) {
     var _a;
     const selectionInfo = this.dataUnit.getSelectionInfo();
     const isStartingInsertionMode = (this.dataUnit.hasDirtyRecords() || this.dataUnit.hasWaitingChanges()) && (selectionInfo === null || selectionInfo === void 0 ? void 0 : selectionInfo.isEmpty());
@@ -439,7 +510,7 @@ export class SnkDataUnit {
     let rowMetadata = (_a = this.dataState) === null || _a === void 0 ? void 0 : _a.rowMetadata;
     const allowedOverwrite = [Action.SELECTION_CHANGED, Action.EDITION_CANCELED, Action.NEXT_SELECTED, Action.PREVIOUS_SELECTED];
     if (selectedRecord && (!rowMetadata || allowedOverwrite.includes(actionType))) {
-      rowMetadata = this.doGetRowMetadata(selectedRecord);
+      rowMetadata = await this.doGetRowMetadata(selectedRecord);
     }
     else if (rowMetadata) {
       rowMetadata.getProp = this.buildGetPropRowMetadata(rowMetadata);
@@ -461,32 +532,54 @@ export class SnkDataUnit {
     });
   }
   async handleDataSaved(action) {
-    const newRowMetadata = await this.handleLoadRowMetadata(action);
+    var _a, _b, _c;
+    const changes = (_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.changes;
+    const affectedRecords = (_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.records;
+    const newRowMetadata = await this.handleLoadRowMetadata((_c = changes === null || changes === void 0 ? void 0 : changes[0]) === null || _c === void 0 ? void 0 : _c.record);
     if (newRowMetadata) {
       newRowMetadata.getProp = this.buildGetPropRowMetadata(newRowMetadata);
     }
-    const recordId = action.payload.records[0].__record__id__;
+    const recordId = affectedRecords[0].__record__id__;
     this._metadataByRow.set(recordId, newRowMetadata);
-    this.dataState = this.buildDataState();
-    if (this.ignoreSaveMessage) {
-      return;
+    this.dataState = await this.buildDataState();
+    let saveOperation = changes[0]._operation.toLowerCase();
+    if (saveOperation == 'copy') {
+      saveOperation = OperationMap.CLONE;
     }
-    const saveOperation = action.payload.changes[0]._operation.toLowerCase();
-    const msg = this.getMessage("snkDataUnit.saveInfo", action.payload.records[0], saveOperation);
+    if (this.canIgnoreOperationMessage(saveOperation))
+      return;
+    let msg = this.buildOperationMessage(saveOperation, affectedRecords);
     if (msg != undefined) {
       this.showSuccessMessage(msg);
     }
   }
+  canIgnoreOperationMessage(saveOperation) {
+    return this.ignoreSaveMessage && !this.isCloneOrInsertOperation(saveOperation);
+  }
+  isCloneOrInsertOperation(saveOperation) {
+    return [OperationMap.CLONE, OperationMap.INSERT].includes(saveOperation);
+  }
+  buildOperationMessage(saveOperation, records) {
+    if (this.isMultiplesUpdate(saveOperation, records)) {
+      return this.buildMultipleUpdateMessage(records);
+    }
+    return this.getMessage('snkDataUnit.saveInfo', records[0], saveOperation);
+  }
+  buildMultipleUpdateMessage(records, isCancel) {
+    /**
+     * FIXME: No futuro, precisamos pensar em um mecanismo para deixar as mensagens de feedback mais dinâmicas.
+     * Podemo ocorrer cenários onde temos mais de um registro selecionado e também cenários onde a chave primária
+     * de um registro se trata de uma chave composta.
+     */
+    const key = `snkDataUnit.${isCancel ? 'cancelInfo' : 'saveInfo'}`;
+    return this.getMessage(key, { records: records }, OperationMap.UPDATE_MULTIPLES);
+  }
+  isMultiplesUpdate(saveOperation, records) {
+    return saveOperation === OperationMap.UPDATE && records.length > 1;
+  }
   handleRecordsRemoved(action) {
     var _a, _b;
-    const cachedRecords = action.payload.cachedRecords;
-    let removeFinishMsg;
-    if ((cachedRecords === null || cachedRecords === void 0 ? void 0 : cachedRecords.length) > 1) {
-      removeFinishMsg = this.getMessage("snkDataUnit.removeAllInfo", { size: cachedRecords.length });
-    }
-    else {
-      removeFinishMsg = this.getMessage("snkDataUnit.removeInfo", action.payload.cachedRecords[0]);
-    }
+    let removeFinishMsg = this.buildRemoveFinishMessage(action);
     if (removeFinishMsg != undefined) {
       this.showSuccessMessage(removeFinishMsg);
     }
@@ -497,6 +590,14 @@ export class SnkDataUnit {
       this.dataUnit.gotoPage(page);
     }
   }
+  buildRemoveFinishMessage(action) {
+    const records = action.payload.records;
+    if (!records || !records.length)
+      return undefined;
+    if ((records === null || records === void 0 ? void 0 : records.length) > 1)
+      return this.getMessage('snkDataUnit.removeAllInfo', { size: records.length });
+    return this.getMessage('snkDataUnit.removeInfo', records);
+  }
   /**
    * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
    * através de um pequeno modulo na estrutura da aplicação:
@@ -540,21 +641,30 @@ export class SnkDataUnit {
       return await this._application.getDataUnit(this.entityName, cacheName, null, this.configName, this.resourceID);
     }
   }
+  updateMetadataWithRMP() {
+    this.fillFieldsWithRmp(this.dataUnit.metadata);
+    this.fillFieldsWithRmPrecision(this.dataUnit.metadata);
+    const dataUnitUpdatedMetadata = this.handleDULinksOnMetadataLoaded(this.dataUnit.metadata);
+    this.dataUnit.metadata = dataUnitUpdatedMetadata;
+  }
   async loadDataUnit() {
-    var _a;
+    var _a, _b;
     if (this.dataUnit == null && this._application && this.entityName) {
       this.dataUnit = await this.getDataUnitParentOrChild();
     }
     if (this.dataUnit) {
       this.dataUnit.pageSize = this.pageSize;
       this.dataUnit.unsubscribe(this._dataUnitObserver);
-      this.dataUnit.addInterceptor(this);
       this.dataUnit.subscribe(this._dataUnitObserver);
-      await this.dataUnit.loadMetadata();
-      if ((_a = this.dataUnit.records) === null || _a === void 0 ? void 0 : _a.length) {
-        this.getMetadataByRow(this.dataUnit);
+      if ((_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.metadata) {
+        this.updateMetadataWithRMP();
       }
-      this.dataState = this.buildDataState();
+      this.dataUnit.addInterceptor(this);
+      if ((_b = this.dataUnit.records) === null || _b === void 0 ? void 0 : _b.length) {
+        const { records } = this.getMetadataByRow(this.dataUnit);
+        this.dataUnit.records = records;
+      }
+      this.dataState = await this.buildDataState();
       let resolver;
       while (resolver = this._onDataUnitResolve.pop()) {
         resolver(this.dataUnit);
@@ -1132,6 +1242,15 @@ export class SnkDataUnit {
         "methodName": "observeMessagesBuilder"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "snkMasterFormConfigChange",
+        "method": "onMasterFormConfigChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 class DataStateImpl {
   constructor(datastate) {

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

@@ -125,7 +125,7 @@ function buildNumber(item) {
   const variation = props.variation;
   if (variation === FilterNumberVariation.INTERVAL) {
     const { start, end } = value !== null && value !== void 0 ? value : { start: 0, end: 0 };
-    if (start && end) {
+    if (!isNaN(start) && !isNaN(end)) {
       return {
         name: id,
         expression: props.intervalExpression.fullfill,
@@ -135,7 +135,7 @@ function buildNumber(item) {
         ]
       };
     }
-    if (start) {
+    if (!isNaN(start)) {
       return {
         name: id,
         expression: props.intervalExpression.onlystart,
@@ -144,7 +144,7 @@ function buildNumber(item) {
         ]
       };
     }
-    if (end) {
+    if (!isNaN(end)) {
       return {
         name: id,
         expression: props.intervalExpression.onlyend,

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

@@ -74,7 +74,7 @@ export class SnkFilterBinarySelect {
     }
     const [optOne, optTwo] = this.config.props.options;
     if (this.presentationMode === EPresentationMode.MODAL) {
-      return (h(Host, null, h("div", { class: "ez-row ez-size-height--full" }, h("label", { class: "ez-text ez-title--small ez-title--primary ez-size-height--full ez-flex ez-flex--row ez-flex--align-items-center ez-col ez-col--sd-4" }, this.config.detailModal), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkOne = ref, id: `${this.config.id}_${optOne.name || "option1"}`, class: "sc-snk-filter-bar editor__ez-check", label: optOne.label, value: this.isSelected(optOne.name), compact: true })), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkTwo = ref, id: `${this.config.id}_${optTwo.name || "option2"}`, class: "sc-snk-filter-bar editor__ez-check", label: optTwo.label, value: this.isSelected(optTwo.name), compact: true })))));
+      return (h(Host, null, h("div", { class: "ez-row ez-size-height--full" }, h("label", { class: "ez-text ez-title--small ez-title--primary ez-size-height--full ez-flex ez-flex--row ez-flex--align-items-center ez-col ez-col--sd-4" }, this.config.detailModal), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkOne = ref, id: `${this.config.id}_${optOne.name || "option1"}`, class: "sc-snk-filter-bar editor__ez-check", label: optOne.label, value: this.isSelected(optOne.name) })), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkTwo = ref, id: `${this.config.id}_${optTwo.name || "option2"}`, class: "sc-snk-filter-bar editor__ez-check", label: optTwo.label, 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 }))));
   }

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

@@ -19,7 +19,7 @@ export class SnkFilterCheckboxList {
     this.valueChanged.emit((_b = this.config) === null || _b === void 0 ? void 0 : _b.value);
   }
   renderOptions() {
-    return this.optionsList.map(option => (h("ez-check", { label: option.label, compact: true, onEzChange: (event) => this.handleToggleCheck(option, event.detail), value: !!this.isChecked(option.name) })));
+    return this.optionsList.map(option => (h("ez-check", { label: option.label, onEzChange: (event) => this.handleToggleCheck(option, event.detail), value: !!this.isChecked(option.name) })));
   }
   isChecked(itemName) {
     var _a;

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

@@ -19,7 +19,7 @@ export class SnkFilterPeriod {
     if (this.getVariation() === FilterNumberVariation.INTERVAL) {
       const start = this._startInterval.value;
       const end = this._endInterval.value;
-      this.value = (start || end ? { start, end } : undefined);
+      this.value = (!isNaN(start) || !isNaN(end) ? { start, end } : undefined);
       this.valueChanged.emit(this.value);
       return;
     }

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

@@ -3,14 +3,20 @@ import { h } from '@stencil/core';
 import FilterItemType from '../filter-item-type.enum';
 export class SnkFilterSearch {
   constructor() {
+    this._isSearchPlus = false;
     this.config = undefined;
     this.value = undefined;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-search
    */
-  ezChangeListener(_evt) {
-    this.value = this._searchInput.value;
+  async ezChangeListener(_evt) {
+    if (this._isSearchPlus) {
+      this.value = await this._searchInput.getValueAsync();
+    }
+    else {
+      this.value = this._searchInput.value;
+    }
     this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
@@ -18,10 +24,11 @@ export class SnkFilterSearch {
       ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
     }
   }
-  doSearch(mode, argument) {
+  doSearch(mode, argument, isSearchPlus = false) {
     const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    const loader = isSearchPlus ? application.executePreparedSearchPlus : application.executePreparedSearch;
     return new Promise((resolve, reject) => {
-      application.executePreparedSearch(mode, argument, this.config.props.searchContext)
+      loader.bind(application)(mode, argument, this.config.props.searchContext)
         .then(result => {
         resolve(result);
       }).catch(reason => {
@@ -35,11 +42,17 @@ export class SnkFilterSearch {
   async show() {
     this._searchInput.setFocus();
   }
+  getInputItem() {
+    var _a;
+    this._isSearchPlus = ((_a = this.config.props) === null || _a === void 0 ? void 0 : _a["useSearchPlus"]) == true;
+    const TagName = this._isSearchPlus ? "ez-search-plus" : "ez-search";
+    return (h(TagName, { id: this.config.id, suppressEmptyOption: true, value: this.config.value, label: this.config.label, ref: ref => this._searchInput = ref, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument, this._isSearchPlus) }));
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.SEARCH) {
       return undefined;
     }
-    return (h("ez-search", { id: this.config.id, suppressEmptyOption: true, value: this.config.value, label: this.config.label, ref: ref => this._searchInput = ref, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument) }));
+    return this.getInputItem();
   }
   static get is() { return "snk-filter-search"; }
   static get properties() {

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

@@ -18,10 +18,11 @@ export class SnkFilterText {
     }
   }
   render() {
+    var _a;
     if (!this.config) {
       return undefined;
     }
-    return (h("ez-text-input", { id: this.config.id, ref: ref => this._textInputElement = ref, label: this.config.label, value: this.config.value }));
+    return (h("ez-text-input", { id: this.config.id, ref: ref => this._textInputElement = ref, label: this.config.label, value: this.config.value, mask: (_a = this.config) === null || _a === void 0 ? void 0 : _a.mask, cleanValueMask: true }));
   }
   static get is() { return "snk-filter-text"; }
   static get properties() {

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

@@ -48,6 +48,7 @@
 .SnkFilterPersonalized_list-actions {
     display: none;
     align-items: center;
+    gap: var(--space--3xs);
 }
 
 .SnkFilterPersonalized_list-item--modal:hover .SnkFilterPersonalized_list-actions {
@@ -64,3 +65,15 @@
 .SnkFilterPersonalized_list-item--chip :first-of-type {
     gap: var(--space--3xs);
 }
+
+.SnkFilterPersonalized_list-icon {
+    --ez-icon--color: var(--title--primary, #2B3A54);
+    cursor: pointer;
+}
+
+.SnkFilterPersonalized_list-icon:hover {
+    outline: none;
+    color: var(--color--primary-600, #007a5a);
+    fill: var(--color--primary-600, #007a5a);
+    --ez-icon--color: var(--color--primary-600, #007a5a);
+}

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

@@ -39,15 +39,15 @@ export class SnkFilterPersonalized {
   }
   getItemContent(item) {
     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 CheckboxElement = () => (h("ez-check", Object.assign({ class: "SnkFilterPersonalized_checkbox", id: `param_${item.id}`, key: item.id, 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.buildModalListActions(item, isVariable))), (item.visible && isVariable) && (h("div", { class: "ez-row ez-padding--small" }, this.getFormField(item)))));
+    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-flex--justify-between 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) }))
+      h("div", { class: "SnkFilterPersonalized_list-actions" }, h("ez-icon", { class: 'SnkFilterPersonalized_list-icon', iconName: "edit", title: this.getMessage('snkPersonalizedFilter.listActions.edit'), onClick: () => this.editFilter.emit(item.id) }), h("ez-icon", { class: 'SnkFilterPersonalized_list-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}`)}` }))));
   }

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

@@ -0,0 +1,8 @@
+var FilterItemTypeMask;
+(function (FilterItemTypeMask) {
+  FilterItemTypeMask["CEP"] = "#####-###";
+  FilterItemTypeMask["TELEFONE"] = "(##) ####-####";
+  FilterItemTypeMask["CPF"] = "###.###.###-##";
+  FilterItemTypeMask["CNPJ"] = "##.###.###/####-##";
+})(FilterItemTypeMask || (FilterItemTypeMask = {}));
+export default FilterItemTypeMask;

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, FloatingManager, DateUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, FloatingManager, DateUtils, MaskFormatter } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from './filter-item-type.enum';
 import { FilterNumberVariation } from './editors/enum/filterNumberVariation';
@@ -24,9 +24,11 @@ export class SnkFilterItem {
    */
   async showUp(open = false) {
     return new Promise(resolve => {
+      var _a;
       this._filterItemElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
       if (open) {
         this._closeCallback = resolve;
+        (_a = this._chipElement) === null || _a === void 0 ? void 0 : _a.blur();
         window.requestAnimationFrame(() => {
           this._floatingID = FloatingManager.float(this._popover, this._popoverContainer, this.getFloatOptions());
           this._popover.show();
@@ -201,16 +203,20 @@ export class SnkFilterItem {
       }
       if (type === FilterItemType.NUMBER && props.variation === FilterNumberVariation.INTERVAL) {
         const { start, end } = value;
-        if (start && end) {
+        if (!isNaN(start) && !isNaN(end)) {
           return this.getMessage('snkFilterBar.fullIntervalTooltip', { LABEL: label, START_LABEL: start, END_LABEL: end });
         }
-        if (start) {
+        if (!isNaN(start)) {
           return `${label}: ${this.getMessage('snkFilterBar.onlyStartToltip')} ${Number(start)}`;
         }
-        if (end) {
+        if (!isNaN(end)) {
           return `${label}: ${this.getMessage('snkFilterBar.onlyEndToltip')} ${Number(end)}`;
         }
       }
+      if (this.config.mask) {
+        const _maskFormatter = new MaskFormatter(this.config.mask);
+        return `${label}: ${_maskFormatter.format(value)}`;
+      }
       return `${label}: ${value}`;
     }
     return label;

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

@@ -24,7 +24,7 @@ ez-modal {
 
 .snk-filter-modal__rendered-items {
   max-height: 760px;
-  overflow-x: clip;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 

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

@@ -144,7 +144,9 @@ export class SnkFilterModal {
       this.filters = ObjectUtils.copy(filterListCopy);
       return;
     }
-    this.filters.find(filter => filter.id === filterItem.id).value = undefined;
+    const filter = this.filters.find(filter => filter.id === filterItem.id);
+    filter.value = undefined;
+    this.filters = ObjectUtils.copy(this.filters);
   }
   uncheckFilterValues(valueList) {
     valueList.forEach(value => {

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

@@ -18,7 +18,7 @@
   font-family: var(--font-pattern, Arial);
   font-weight: var(--text-weight--large, 600);
   color: var(--color--title-primary, #2B3A54);
-  margin-top: 8px;
+  margin-top: 12px;
 }
 
 :host([data-mode="hidden"]) {
@@ -99,13 +99,9 @@
   margin-bottom: var(--space--small);
 }
 
-.snk-filter-bar__scroller {
-  height: calc(100% + var(--space-extra-small, 3px));
-}
-
 .snk-filter-bar__filter-item-container {
   display: flex;
-  align-self: center;
+  align-items: start;
 }
 
 .snk-filter-bar__scroller :first-child {