@sankhyalabs/sankhyablocks 5.6.0 → 5.8.0

package/dist/esm/snk-filter-binary-select.entry.js

@@ -1,12 +1,17 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-cfd4bb13.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cfd4bb13.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
+import { E as EPresentationMode } from './presentationMode-783bbf9d.js';
 
 const SnkFilterBinarySelect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this._noOptionValue = 'NO_VALUE';
+    this._radioButtonValue = undefined;
     this.value = undefined;
     this.config = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   isSelected(option) {
     return this.value == undefined || this.value === option;
@@ -15,15 +20,15 @@ const SnkFilterBinarySelect = class {
    * Emitido quando acontece a alteração de valor do componente snk-filter-binary-select
    */
   ezChangeListener(evt) {
-    if (!evt.detail) {
-      this.assertCheckedOption(evt.target);
-    }
-    this.updateValue();
-  }
-  componentDidLoad() {
-    if (this._element) {
-      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      if (!evt.detail) {
+        this.assertCheckedOption(evt.target);
+      }
+      this.updateValue();
+      return;
     }
+    this.value = evt.detail === this._noOptionValue ? undefined : evt.detail;
+    this._radioButtonValue = evt.detail;
   }
   assertCheckedOption(updatingCheck) {
     if (updatingCheck === this._checkOne) {
@@ -41,19 +46,25 @@ const SnkFilterBinarySelect = class {
     else {
       this.value = undefined;
     }
+    this.valueChanged.emit(this.value);
   }
-  /**
-   * Exibe o componente snk-filter-binary-select
-   */
-  async show() {
-    this._checkOne.setFocus();
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
+  componentWillLoad() {
+    this._radioButtonValue = this.value || this._noOptionValue;
   }
   render() {
     if (!this.config || this.config.type !== FilterItemType.BINARY_SELECT) {
       return undefined;
     }
     const [optOne, optTwo] = this.config.props.options;
-    return (h(Host, null, h("ez-check", { id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) })));
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      return (h(Host, null, h("div", { class: "ez-flex ez-flex--row ez-flex--align-items-center" }, h("label", { class: "ez-text ez-title--small ez-title--primary", style: { flex: '1 1 0', width: '0px' } }, this.config.detailModal), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optOne.name || "option1"}`, label: optOne.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkOne = ref, value: this.isSelected(optOne.name) }), h("ez-check", { compact: true, style: { flex: '1 1 0', width: '0px' }, id: `${this.config.id}_${optTwo.name || "option2"}`, label: optTwo.label, class: "sc-snk-filter-bar editor__ez-check", ref: (ref) => this._checkTwo = ref, value: this.isSelected(optTwo.name) }))));
+    }
+    return (h(Host, null, h("ez-radio-button", { value: this._radioButtonValue }, h("ez-radio-button-option", { id: `${this.config.id}_${optOne.name || "option1"}`, class: "sc-snk-filter-bar editor__ez-check", label: optOne.label, value: optOne.name }), h("ez-radio-button-option", { id: `${this.config.id}_${optTwo.name || "option2"}`, class: "sc-snk-filter-bar editor__ez-check", label: optTwo.label, value: optTwo.name }), h("ez-radio-button-option", { id: `${this.config.id}_option3`, class: "sc-snk-filter-bar editor__ez-check", label: `${optOne.label} + ${optTwo.label}`, value: this._noOptionValue }))));
   }
   get _element() { return getElement(this); }
 };

package/dist/esm/snk-filter-detail.entry.js

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

package/dist/esm/snk-filter-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cfd4bb13.js';
-import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
-import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
+import { FloatingManager, DateUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
 
 const SnkFilterItem = class {
   constructor(hostRef) {
@@ -114,16 +114,17 @@ const SnkFilterItem = class {
       evt.stopPropagation();
     }
   }
-  getLabel() {
+  getLabel(isTooltipLabel = false) {
     const { type, value, label, props } = this.config;
     if (value) {
       if (type === FilterItemType.BINARY_SELECT) {
         const [optOne, optTwo] = props.options;
+        const tooltip = this.getMessage('snkFilterBar.binarySelectTooltip');
         if (optOne.name === value) {
-          return optOne.label;
+          return isTooltipLabel ? `${tooltip} ${String(optOne.label).toLowerCase()}` : optOne.label;
         }
         if (optTwo.name === value) {
-          return optTwo.label;
+          return isTooltipLabel ? `${tooltip} ${String(optTwo.label).toLowerCase()}` : optTwo.label;
         }
       }
       if (type === FilterItemType.MULTI_SELECT) {
@@ -142,14 +143,21 @@ const SnkFilterItem = class {
         }
         const dateFormater = new Intl.DateTimeFormat("pt-BR");
         if (end && start) {
-          return `${label}: ${dateFormater.format(start)} a ${dateFormater.format(end)}`;
+          const isSameYear = start.getFullYear() === end.getFullYear();
+          const formatOptions = Object.assign({ day: '2-digit', month: '2-digit' }, ((!isSameYear || isTooltipLabel) && { year: '2-digit' }));
+          const startLabel = DateUtils.formatDate(start, formatOptions);
+          const endLabel = DateUtils.formatDate(end, formatOptions);
+          if (isTooltipLabel) {
+            return this.getMessage('snkFilterBar.fullPeriodTooltip', { LABEL: label, START_LABEL: startLabel, END_LABEL: endLabel });
+          }
+          return `${label}: ${startLabel} \u2192 ${endLabel}`;
         }
         else {
           if (start) {
-            return `${label}: A partir de ${dateFormater.format(start)}`;
+            return `${label}: ${this.getMessage('snkFilterBar.onlyStartPeriodToltip')} ${dateFormater.format(start)}`;
           }
           else if (end) {
-            return `${label}: Até ${dateFormater.format(end)}`;
+            return `${label}: ${this.getMessage('snkFilterBar.onlyEndPeriodToltip')} ${dateFormater.format(end)}`;
           }
           else {
             return label;
@@ -162,10 +170,30 @@ const SnkFilterItem = class {
       if (type === FilterItemType.PERSONALIZED) {
         return label;
       }
+      if (type === FilterItemType.MULTI_LIST) {
+        const selectedOptions = value.filter(item => item.check);
+        const checkedAmount = selectedOptions.length;
+        if (checkedAmount > 1) {
+          if (isTooltipLabel) {
+            const selectedOptionsDescrptions = selectedOptions.map(item => item.description);
+            return `${label}: ${selectedOptionsDescrptions.join(',')}`;
+          }
+          return `${label}: ${checkedAmount} ${this.getMessage('snkFilterBar.multiListToltip')}`;
+        }
+        return `${label}: ${value.description}`;
+      }
       return `${label}: ${value}`;
     }
     return label;
   }
+  applyTooltip() {
+    if (!this.config.value)
+      return undefined;
+    return {
+      'data-tooltip': this.getLabel(true),
+      'data-flow': 'bottom'
+    };
+  }
   componentDidLoad() {
     if (this._filterItemElement) {
       ElementIDUtils.addIDInfo(this._filterItemElement);
@@ -203,7 +231,7 @@ const SnkFilterItem = class {
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, id: this.config.id }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
+    return (h(Host, Object.assign({}, this.applyTooltip()), h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
   }
   get _filterItemElement() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/snk-filter-modal-item.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cfd4bb13.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
+import { F as FilterType } from './filter-type.enum-a80c1b6b.js';
+import { E as EPresentationMode } from './presentationMode-783bbf9d.js';
+
+const snkFilterModalItemCss = ".grow{flex-grow:1}.gap{gap:4px}";
+
+const SnkFilterModalItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterChange = createEvent(this, "filterChange", 7);
+    this.filterItem = undefined;
+  }
+  observeFilterItem(newValue) {
+    this.filterChange.emit(newValue);
+  }
+  getContentEditorConfig() {
+    const variations = { presentationMode: EPresentationMode.MODAL };
+    switch (this.filterItem.type) {
+      case FilterItemType.BINARY_SELECT:
+        return { tag: "snk-filter-binary-select", variations };
+      case FilterItemType.MULTI_SELECT:
+        return { tag: "snk-filter-multi-select" };
+      case FilterItemType.PERIOD:
+        return { tag: "snk-filter-period", variations };
+      case FilterItemType.SEARCH:
+        return { tag: "snk-filter-search" };
+      case FilterItemType.NUMBER:
+        return { tag: "snk-filter-number" };
+      case FilterItemType.PERSONALIZED:
+        return { tag: "snk-filter-personalized" };
+      case FilterItemType.MULTI_LIST:
+        return { tag: "snk-entity-list" };
+    }
+    return { tag: "snk-filter-text" };
+  }
+  updateFilterValue(newValue) {
+    const isVisble = !this.filterItem.visible ? newValue !== undefined : true;
+    this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: newValue, visible: isVisble });
+  }
+  canShowDetailModal() {
+    return this.filterItem.filterType !== FilterType.OTHER_FILTERS && this.filterItem.type !== FilterItemType.BINARY_SELECT;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
+    }
+  }
+  render() {
+    const { tag: ContentEditor, variations } = this.getContentEditorConfig();
+    return (h(Host, null, h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, h("div", { class: "ez-title ez-title--small ez-title--primary grow" }, this.filterItem.detailModal))), h(ContentEditor, Object.assign({ config: this.filterItem, value: this.filterItem.value, onValueChanged: (event) => this.updateFilterValue(event.detail), "data-element-id": this._idContentEditor }, variations)))));
+  }
+  get _element() { return getElement(this); }
+  static get watchers() { return {
+    "filterItem": ["observeFilterItem"]
+  }; }
+};
+SnkFilterModalItem.style = snkFilterModalItemCss;
+
+export { SnkFilterModalItem as snk_filter_modal_item };

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

@@ -1,70 +1,93 @@
 import { r as registerInstance, h } from './index-cfd4bb13.js';
-import { ModalAction, ModalButtonStatus } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
-import { ArrayUtils } from '@sankhyalabs/core';
-import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
+import { ModalAction } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
+import { F as FilterType } from './filter-type.enum-a80c1b6b.js';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.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);padding:12px 6px}";
 
 const SnkFilterModal = class {
   constructor(hostRef) {
     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 ModalAction.CANCEL:
+        this.handleClearAll();
+        break;
+      case ModalAction.OK:
+        this.applyFilters(this.filters);
+      case ModalAction.CLOSE:
+        this.closeModal();
     }
-    return this.getMessage(activeFilters > 1 ? "snkFilterBar.activeFilters" : "snkFilterBar.activeFilter", { ACTIVE_FILTERS: activeFilters });
   }
-  buildItems(list) {
-    return list.map(item => {
-      return (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" }, 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: CheckMode.SWITCH }), 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 === ModalAction.LOAD) {
-      if (this._filterInput) {
-        this._filterInput.setFocus();
+  renderFilterItem(filterItem, fullRow) {
+    return (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.TEXT, FilterItemType.NUMBER].includes(item.type);
+      const nextItemMatch = isLast ? false : [FilterItemType.TEXT, 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 (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 (h("ez-collapsible-box", { className: "snk-filter__modal-collapsible-box", headerSize: "medium", value: true, label: label }, !!appliedFilters && (h("ez-badge", { className: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters })), lines.map(this.renderFilterLine.bind(this)), h("div", { class: "ez-flex ez-flex--justify-end grow" }, 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 ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : []);
-    return (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 ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
-      h("ez-filter-input", { ref: ref => this._filterInput = ref, label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail })
-      :
-        undefined), items.length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.buildItems(items)), 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.CUSTOM_FILTER);
+    const quickFilters = this.filters.filter(filter => filter.filterType === FilterType.QUICK_FILTER);
+    const otherFilters = this.filters.filter(filter => filter.filterType === FilterType.OTHER_FILTERS);
+    return (h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this._modalTitle, cancelButtonLabel: this._cancelButtonLabel, okButtonLabel: this._okButtonLabel, onEzModalAction: this.modalActionListener.bind(this) }, 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/esm/snk-filter-multi-select.entry.js

@@ -1,10 +1,11 @@
-import { r as registerInstance, h, g as getElement } from './index-cfd4bb13.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cfd4bb13.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
 
 const SnkFilterMultiSelect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.value = undefined;
     this.config = undefined;
   }
@@ -13,6 +14,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/esm/snk-filter-number.entry.js

@@ -1,10 +1,11 @@
-import { r as registerInstance, h, g as getElement } from './index-cfd4bb13.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cfd4bb13.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
 
 const SnkFilterPeriod = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -13,6 +14,7 @@ const SnkFilterPeriod = class {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-number

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

@@ -1,12 +1,18 @@
-import { r as registerInstance, h, g as getElement } from './index-cfd4bb13.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cfd4bb13.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
-import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
+import { E as EPresentationMode } from './presentationMode-783bbf9d.js';
 
 const SnkFilterPeriod = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this._startDateLabel = 'Inicial';
+    this._endDateLabel = 'Final';
     this.config = undefined;
+    this.getMessage = undefined;
     this.value = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-period
@@ -15,6 +21,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) {
@@ -39,11 +46,20 @@ const SnkFilterPeriod = class {
   async show() {
     this._startDate.setFocus();
   }
+  buildLabel() {
+    if (this.presentationMode === EPresentationMode.CHIP) {
+      return h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9");
+    }
+  }
+  componentWillLoad() {
+    this._startDateLabel = this.getMessage('snkFilterBar.labelStartDatePeriod');
+    this._endDateLabel = this.getMessage('snkFilterBar.labelEndDatePeriod');
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.PERIOD) {
       return undefined;
     }
-    return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9"), h("ez-date-input", { id: `${this.config.id}_end`, label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
+    return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this._startDateLabel, ref: ref => this._startDate = ref, value: this.getDate("start") }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this._endDateLabel, ref: ref => this._endDate = ref, value: this.getDate("end") })));
   }
   get _element() { return getElement(this); }
 };

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

@@ -1,12 +1,13 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-cfd4bb13.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cfd4bb13.js';
 import { ElementIDUtils, UserInterface, ApplicationContext } from '@sankhyalabs/core';
 import { convertType } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
-import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
 
 const SnkFilterPersonalized = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
     this.fix = undefined;
@@ -38,6 +39,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 = ApplicationContext.getContextValue("__SNK__APPLICATION__");

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

@@ -1,10 +1,11 @@
-import { r as registerInstance, h, g as getElement } from './index-cfd4bb13.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cfd4bb13.js';
 import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
-import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
+import { F as FilterItemType } from './filter-item-type.enum-5028ed3f.js';
 
 const SnkFilterSearch = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -13,6 +14,7 @@ const SnkFilterSearch = class {
    */
   ezChangeListener(_evt) {
     this.value = this._searchInput.value;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {

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

@@ -1,9 +1,10 @@
-import { r as registerInstance, h, g as getElement } from './index-cfd4bb13.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cfd4bb13.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
 const SnkFilterText = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -12,6 +13,7 @@ const SnkFilterText = class {
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {

package/dist/esm/snk-grid.entry.js

@@ -222,10 +222,12 @@ const SnkGrid = class {
         if (!this._dataUnit) {
           this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
             this._dataUnit = evt.detail;
+            this._dataUnitLoadLockerResolver = this._dataUnit.addLoadingLocker();
             this.addElementID();
           });
         }
         else {
+          this._dataUnitLoadLockerResolver = this._dataUnit.addLoadingLocker();
           this.addElementID();
         }
         this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
@@ -275,13 +277,18 @@ const SnkGrid = class {
   getPrimaryButton() {
     return this.presentationMode === PresentationMode.PRIMARY ? "INSERT" : "";
   }
+  onEzGridReady() {
+    var _a;
+    (_a = this._dataUnitLoadLockerResolver) === null || _a === void 0 ? void 0 : _a.call(this);
+    this._dataUnitLoadLockerResolver = undefined;
+  }
   render() {
     var _a, _b;
     if (!this._dataUnit) {
       return undefined;
     }
     return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-margin-bottom--medium" }, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder }), ((_b = (_a = this._snkFilterBar) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-      h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton() })), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig() }))));
+      h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton() })), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, onComponentReady: () => this.onEzGridReady() }, h("snk-taskbar", { dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig() }))));
   }
   get _element() { return getElement(this); }
 };