@sankhyalabs/sankhyablocks 5.6.0 → 5.8.0

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-21bd01e1.js');
 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 core = require('@sankhyalabs/core');
 
 const SnkFilterDetail = class {
@@ -18,7 +18,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) {
@@ -51,13 +52,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 (index.h(index.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 (index.h("button", { onClick: () => action(), class: "sc-snk-filter-bar snk-filter-item__editor-header-button", ref: elem => elem && this.buildIdButton(elem, title) }, index.h("ez-icon", Object.assign({ title: title, iconName: iconName }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`_${title}`)}` }))));
@@ -129,7 +124,7 @@ const SnkFilterDetail = class {
   }
   render() {
     const ContentEditor = this.getContentEditor();
-    return (index.h(index.Host, null, index.h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, index.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()), index.h(ContentEditor, { ref: ref => this._editor = ref, value: this.config.value, config: this.config, onKeyDown: evt => this.onKeyDonwListener(evt), "data-element-id": this._idContentEditor }), index.h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), index.h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, index.h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), index.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 (index.h(index.Host, null, index.h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, index.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()), index.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 }), index.h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), index.h("div", { class: "ez-col ez-col--sd-12 ez-align--right" }, index.h("ez-button", { label: this.getMessage("snkFilterBar.cleanFilter"), onClick: () => this.clear(), size: "small" }), index.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 index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ 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 SnkFilterItem = class {
   constructor(hostRef) {
@@ -118,16 +118,17 @@ const SnkFilterItem = class {
       evt.stopPropagation();
     }
   }
-  getLabel() {
+  getLabel(isTooltipLabel = false) {
     const { type, value, label, props } = this.config;
     if (value) {
       if (type === filterItemType_enum.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_enum.FilterItemType.MULTI_SELECT) {
@@ -146,14 +147,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 = core.DateUtils.formatDate(start, formatOptions);
+          const endLabel = core.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;
@@ -166,10 +174,30 @@ const SnkFilterItem = class {
       if (type === filterItemType_enum.FilterItemType.PERSONALIZED) {
         return label;
       }
+      if (type === filterItemType_enum.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) {
       core.ElementIDUtils.addIDInfo(this._filterItemElement);
@@ -207,7 +235,7 @@ const SnkFilterItem = class {
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (index.h(index.Host, null, index.h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, id: this.config.id }, leftIcon ? index.h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, index.h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), index.h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, index.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 (index.h(index.Host, Object.assign({}, this.applyTooltip()), index.h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined }, leftIcon ? index.h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, index.h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), index.h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, index.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 index.getElement(this); }
   static get watchers() { return {

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

@@ -0,0 +1,67 @@
+'use strict';
+
+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-aa823a00.js');
+const filterType_enum = require('./filter-type.enum-b14ce507.js');
+const presentationMode = require('./presentationMode-52ec3bdd.js');
+
+const snkFilterModalItemCss = ".grow{flex-grow:1}.gap{gap:4px}";
+
+const SnkFilterModalItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.filterChange = index.createEvent(this, "filterChange", 7);
+    this.filterItem = undefined;
+  }
+  observeFilterItem(newValue) {
+    this.filterChange.emit(newValue);
+  }
+  getContentEditorConfig() {
+    const variations = { presentationMode: presentationMode.EPresentationMode.MODAL };
+    switch (this.filterItem.type) {
+      case filterItemType_enum.FilterItemType.BINARY_SELECT:
+        return { tag: "snk-filter-binary-select", variations };
+      case filterItemType_enum.FilterItemType.MULTI_SELECT:
+        return { tag: "snk-filter-multi-select" };
+      case filterItemType_enum.FilterItemType.PERIOD:
+        return { tag: "snk-filter-period", variations };
+      case filterItemType_enum.FilterItemType.SEARCH:
+        return { tag: "snk-filter-search" };
+      case filterItemType_enum.FilterItemType.NUMBER:
+        return { tag: "snk-filter-number" };
+      case filterItemType_enum.FilterItemType.PERSONALIZED:
+        return { tag: "snk-filter-personalized" };
+      case filterItemType_enum.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_enum.FilterType.OTHER_FILTERS && this.filterItem.type !== filterItemType_enum.FilterItemType.BINARY_SELECT;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+      const dataElementIdDoFilterItem = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      this._idContentEditor = `${dataElementIdDoFilterItem}_${this.filterItem.id}`;
+    }
+  }
+  render() {
+    const { tag: ContentEditor, variations } = this.getContentEditorConfig();
+    return (index.h(index.Host, null, index.h("div", { class: "ez-flex ez-flex--column grow" }, this.canShowDetailModal() && (index.h("div", { class: "col ez-col--sd-12 ez-align--right ez-padding-medium ez-flex--align-items-center" }, index.h("div", { class: "ez-title ez-title--small ez-title--primary grow" }, this.filterItem.detailModal))), index.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 index.getElement(this); }
+  static get watchers() { return {
+    "filterItem": ["observeFilterItem"]
+  }; }
+};
+SnkFilterModalItem.style = snkFilterModalItemCss;
+
+exports.snk_filter_modal_item = SnkFilterModalItem;

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);padding:12px 6px}";
 
 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", 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,19 @@ 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._startDateLabel = 'Inicial';
+    this._endDateLabel = 'Final';
     this.config = undefined;
+    this.getMessage = undefined;
     this.value = undefined;
+    this.presentationMode = presentationMode.EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-period
@@ -19,6 +25,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 +50,20 @@ 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");
+    }
+  }
+  componentWillLoad() {
+    this._startDateLabel = this.getMessage('snkFilterBar.labelStartDatePeriod');
+    this._endDateLabel = this.getMessage('snkFilterBar.labelEndDatePeriod');
+  }
   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._startDateLabel, 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._endDateLabel, 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/cjs/snk-grid.cjs.entry.js

@@ -226,10 +226,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) => {
@@ -279,13 +281,18 @@ const SnkGrid = class {
   getPrimaryButton() {
     return this.presentationMode === index$1.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 (index.h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, index.h("div", { class: "snk-grid__header ez-margin-bottom--medium" }, index.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 &&
-      index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), index.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() })), index.h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === index$1.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 }, index.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 })), index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("slot", { name: "SnkGridFooter" })), index.h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, index.h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig() }))));
+      index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), index.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() })), index.h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === index$1.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() }, index.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 })), index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("slot", { name: "SnkGridFooter" })), index.h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, index.h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(core.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 index.getElement(this); }
 };

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 = {}));