@sankhyalabs/sankhyablocks 5.6.0 → 5.7.0

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

@@ -4,71 +4,94 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
 const ezModalContainer = require('@sankhyalabs/ezui/dist/collection/components/ez-modal-container');
-const core = require('@sankhyalabs/core');
-const utils = require('@sankhyalabs/ezui/dist/collection/utils');
+const filterType_enum = require('./filter-type.enum-b14ce507.js');
+const filterItemType_enum = require('./filter-item-type.enum-aa823a00.js');
 
-const snkFilterModalCss = ".snk-filter__modal-container{width:359px;max-width:359px}";
+const snkFilterModalCss = "ez-modal{--ez-modal-content-padding:24px 12px}.snk-filter__modal-container{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)}";
 
 const SnkFilterModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this._filterArgument = undefined;
     this.getMessage = undefined;
-    this.items = undefined;
-    this.modalTitle = undefined;
-    this.modalSubTitle = undefined;
-    this.cancelButtonLabel = undefined;
-    this.okButtonLabel = undefined;
-    this.infoText = undefined;
-    this.useSearch = undefined;
-    this.processModalAction = undefined;
+    this.filters = undefined;
+    this.applyFilters = undefined;
+    this.clearAll = undefined;
+    this.closeModal = undefined;
   }
-  updateValue(id, value = undefined) {
-    this.items = this.items.map(item => {
-      if (item.id === id && item.enabled) {
-        if (value == undefined) {
-          value = !item.active;
-        }
-        return Object.assign(Object.assign({}, item), { active: value });
-      }
-      return item;
-    });
+  getCustomMessage(key, params) {
+    var _a;
+    return (_a = this.getMessage) === null || _a === void 0 ? void 0 : _a.call(this, `snkFilterBar.filterModal.${key}`, params);
+  }
+  handleClearAll() {
+    const cleanedFilters = this.clearAll(this.filters);
+    this.filters = cleanedFilters;
   }
-  getActiveFiltersMsg() {
-    const activeFilters = this.items.filter(item => item.active).length;
-    if (activeFilters === 0) {
-      return this.getMessage("snkFilterBar.noActiveFilters");
+  modalActionListener(evt) {
+    const modalAction = evt.detail;
+    switch (modalAction) {
+      case ezModalContainer.ModalAction.CANCEL:
+        this.handleClearAll();
+        break;
+      case ezModalContainer.ModalAction.OK:
+        this.applyFilters(this.filters);
+      case ezModalContainer.ModalAction.CLOSE:
+        this.closeModal();
     }
-    return this.getMessage(activeFilters > 1 ? "snkFilterBar.activeFilters" : "snkFilterBar.activeFilter", { ACTIVE_FILTERS: activeFilters });
   }
-  buildItems(list) {
-    return list.map(item => {
-      return (index.h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, index.h("ez-check", { id: `checkbox_${item.id}`, tabIndex: -1, class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: utils.CheckMode.SWITCH }), index.h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
-    });
+  handleFilterChange(filterConfig) {
+    this.filters = this.filters.map(filter => filter.id === filterConfig.id ? filterConfig : filter);
   }
-  itemKeyBoardSelect(event, item) {
-    if (event.key === "Enter" || event.key === " ") {
-      this.updateValue(item.id);
-    }
+  handleClearFilters(filterList) {
+    this.filters = this.filters.map(filter => filterList.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
   }
-  modalActionListener(evt) {
-    const modalAction = evt.detail;
-    if (modalAction === ezModalContainer.ModalAction.LOAD) {
-      if (this._filterInput) {
-        this._filterInput.setFocus();
+  renderFilterItem(filterItem, fullRow) {
+    return (index.h("snk-filter-modal-item", { class: fullRow ? 'ez-col ez-col--sd-12' : 'ez-col ez-col--sd-6 ez-padding--small', filterItem: filterItem, onFilterChange: (event) => this.handleFilterChange(event.detail) }));
+  }
+  mountFiltersLines(filters) {
+    const MAX_LINE_LENGTH = 2;
+    let currentLine = 0;
+    let forceAddCurrent = false;
+    const filtersLines = {};
+    for (let curr = 0; curr < filters.length; curr++) {
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      const item = filters[curr];
+      const isLast = curr === filters.length - 1;
+      const currentItemMatch = [filterItemType_enum.FilterItemType.TEXT, filterItemType_enum.FilterItemType.NUMBER].includes(item.type);
+      const nextItemMatch = isLast ? false : [filterItemType_enum.FilterItemType.TEXT, filterItemType_enum.FilterItemType.NUMBER].includes(filters[curr + 1].type);
+      if ((currentItemMatch && nextItemMatch) || forceAddCurrent) {
+        filtersLines[currentLine].push(item);
+        forceAddCurrent = filtersLines[currentLine].length < MAX_LINE_LENGTH;
+        if (filtersLines[currentLine].length === MAX_LINE_LENGTH)
+          ++currentLine;
+        continue;
       }
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      filtersLines[currentLine].push(item);
+      ++currentLine;
     }
-    else {
-      this.processModalAction(modalAction);
-    }
+    return Object.values(filtersLines);
+  }
+  renderFilterLine(filters) {
+    const fullLine = filters.length === 1;
+    return (index.h("div", { class: "ez-row" }, filters.map((filter) => this.renderFilterItem(filter, fullLine))));
+  }
+  renderCollapsibleFilterBox(label, listItems) {
+    if (!listItems.length)
+      return null;
+    const appliedFilters = listItems.filter(filterItem => !!filterItem.value).length;
+    const lines = this.mountFiltersLines(listItems);
+    return (index.h("ez-collapsible-box", { className: "snk-filter__modal-collapsible-box ez-padding--medium", headerSize: "medium", value: true, label: label }, !!appliedFilters && (index.h("ez-badge", { className: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters })), lines.map(this.renderFilterLine.bind(this)), index.h("div", { class: "ez-flex ez-flex--justify-end grow" }, index.h("ez-button", { className: "ez-button--tertiary", size: "medium", label: "Limpar", onClick: () => this.handleClearFilters(listItems) }))));
+  }
+  componentWillRender() {
+    this._modalTitle = this.getCustomMessage('title');
+    this._okButtonLabel = this.getCustomMessage('okButtonLabel');
+    this._cancelButtonLabel = this.getCustomMessage('cancelButtonLabel');
   }
   render() {
-    const allowCancel = this.items.filter(item => item.active).length > 0;
-    const items = (this.items ? core.ArrayUtils.applyStringFilter(this._filterArgument, this.items) : []);
-    return (index.h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ezModalContainer.ModalButtonStatus.ENABLED : ezModalContainer.ModalButtonStatus.DISABLED }, index.h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, index.h("div", null, this.useSearch ?
-      index.h("ez-filter-input", { ref: ref => this._filterInput = ref, label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail })
-      :
-        undefined), items.length > 0 ? index.h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, index.h("div", null, this.buildItems(items)), index.h("div", { class: "ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large" }, this.infoText))));
+    const customFilters = this.filters.filter(filter => filter.filterType === filterType_enum.FilterType.CUSTOM_FILTER);
+    const quickFilters = this.filters.filter(filter => filter.filterType === filterType_enum.FilterType.QUICK_FILTER);
+    const otherFilters = this.filters.filter(filter => filter.filterType === filterType_enum.FilterType.OTHER_FILTERS);
+    return (index.h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this._modalTitle, cancelButtonLabel: this._cancelButtonLabel, okButtonLabel: this._okButtonLabel, onEzModalAction: this.modalActionListener.bind(this) }, index.h("div", { class: "snk-filter__modal-content" }, this.renderCollapsibleFilterBox(this.getCustomMessage('customFilters'), customFilters), this.renderCollapsibleFilterBox(this.getCustomMessage('quickFilters'), quickFilters), otherFilters.map(filter => this.renderCollapsibleFilterBox(filter.label, [filter])))));
   }
 };
 SnkFilterModal.style = snkFilterModalCss;

package/dist/cjs/snk-filter-multi-select.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
-const filterItemType_enum = require('./filter-item-type.enum-3daf58d3.js');
+const filterItemType_enum = require('./filter-item-type.enum-aa823a00.js');
 
 const SnkFilterMultiSelect = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.value = undefined;
     this.config = undefined;
   }
@@ -17,6 +18,7 @@ const SnkFilterMultiSelect = class {
    */
   ezChangeListener(evt) {
     this.value = evt.detail.value;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-multi-select

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
-const filterItemType_enum = require('./filter-item-type.enum-3daf58d3.js');
+const filterItemType_enum = require('./filter-item-type.enum-aa823a00.js');
 
 const SnkFilterPeriod = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -17,6 +18,7 @@ const SnkFilterPeriod = class {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-number

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

@@ -4,13 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
-const filterItemType_enum = require('./filter-item-type.enum-3daf58d3.js');
+const filterItemType_enum = require('./filter-item-type.enum-aa823a00.js');
+const presentationMode = require('./presentationMode-52ec3bdd.js');
 
 const SnkFilterPeriod = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
+    this.presentationMode = presentationMode.EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-period
@@ -19,6 +22,7 @@ const SnkFilterPeriod = class {
     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) {
@@ -43,11 +47,16 @@ const SnkFilterPeriod = class {
   async show() {
     this._startDate.setFocus();
   }
+  buildLabel() {
+    if (this.presentationMode === presentationMode.EPresentationMode.CHIP) {
+      return index.h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9");
+    }
+  }
   render() {
     if (!this.config || this.config.type !== filterItemType_enum.FilterItemType.PERIOD) {
       return undefined;
     }
-    return (index.h("div", { class: "ez-col ez-col--nowrap" }, index.h("ez-date-input", { id: `${this.config.id}_start`, label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), index.h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9"), index.h("ez-date-input", { id: `${this.config.id}_end`, label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
+    return (index.h("div", { class: "ez-col ez-col--nowrap" }, index.h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === presentationMode.EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), this.buildLabel(), index.h("ez-date-input", { id: `${this.config.id}_end`, class: this.presentationMode === presentationMode.EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -6,11 +6,12 @@ const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
 const DataType = require('@sankhyalabs/core/dist/dataunit/metadata/DataType');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
-const filterItemType_enum = require('./filter-item-type.enum-3daf58d3.js');
+const filterItemType_enum = require('./filter-item-type.enum-aa823a00.js');
 
 const SnkFilterPersonalized = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
     this.fix = undefined;
@@ -42,6 +43,7 @@ const SnkFilterPersonalized = class {
     if (this.value.filter(item => item != undefined).length == 0) {
       this.value = null;
     }
+    this.valueChanged.emit(this.value || []);
   }
   doSearch(mode, argument, param) {
     const application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
-const filterItemType_enum = require('./filter-item-type.enum-3daf58d3.js');
+const filterItemType_enum = require('./filter-item-type.enum-aa823a00.js');
 
 const SnkFilterSearch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -17,6 +18,7 @@ const SnkFilterSearch = class {
    */
   ezChangeListener(_evt) {
     this.value = this._searchInput.value;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {

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

@@ -8,6 +8,7 @@ const core = require('@sankhyalabs/core');
 const SnkFilterText = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -16,6 +17,7 @@ const SnkFilterText = class {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {

package/dist/collection/collection-manifest.json

@@ -26,6 +26,7 @@
     "./components/snk-filter-bar/filter-item/editors/snk-filter-period.js",
     "./components/snk-filter-bar/filter-item/editors/snk-filter-search.js",
     "./components/snk-filter-bar/filter-item/editors/snk-filter-text.js",
+    "./components/snk-filter-bar/filter-modal/subcomponents/snk-filter-modal-item.js",
     "./components/snk-filter-field-search/snk-filter-field-search.js",
     "./components/snk-form/snk-form.js",
     "./components/snk-form/subcomponents/snk-config-options/snk-config-options.js",

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

@@ -0,0 +1,5 @@
+export var EPresentationMode;
+(function (EPresentationMode) {
+  EPresentationMode[EPresentationMode["CHIP"] = 0] = "CHIP";
+  EPresentationMode[EPresentationMode["MODAL"] = 1] = "MODAL";
+})(EPresentationMode || (EPresentationMode = {}));

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

@@ -1,10 +1,12 @@
 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.value = undefined;
     this.config = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   isSelected(option) {
     return this.value == undefined || this.value === option;
@@ -39,6 +41,7 @@ export class SnkFilterBinarySelect {
     else {
       this.value = undefined;
     }
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-binary-select
@@ -51,6 +54,9 @@ export class SnkFilterBinarySelect {
       return undefined;
     }
     const [optOne, optTwo] = this.config.props.options;
+    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-text--medium ez-text--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-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) })));
   }
   static get is() { return "snk-filter-binary-select"; }
@@ -92,9 +98,50 @@ export class SnkFilterBinarySelect {
           "tags": [],
           "text": "Define as configura\u00E7\u00F5es do componente snk-filter-binary-select"
         }
+      },
+      "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-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,12 @@
 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.config = undefined;
     this.value = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-period
@@ -13,6 +15,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 +40,16 @@ 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");
+    }
+  }
   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.config.label, 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.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
   }
   static get is() { return "snk-filter-period"; }
   static get properties() {
@@ -82,9 +90,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 [{