@sankhyalabs/sankhyablocks 5.7.0 → 5.8.0

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

@@ -4,6 +4,8 @@ import FilterItemType from '../filter-item-type.enum';
 import { EPresentationMode } from './enum/presentationMode';
 export class SnkFilterBinarySelect {
   constructor() {
+    this._noOptionValue = 'NO_VALUE';
+    this._radioButtonValue = undefined;
     this.value = undefined;
     this.config = undefined;
     this.presentationMode = EPresentationMode.CHIP;
@@ -15,15 +17,15 @@ export class SnkFilterBinarySelect {
    * 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) {
@@ -43,11 +45,13 @@ export class SnkFilterBinarySelect {
     }
     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) {
@@ -55,9 +59,9 @@ export class SnkFilterBinarySelect {
     }
     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("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-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) })));
+    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 }))));
   }
   static get is() { return "snk-filter-binary-select"; }
   static get properties() {
@@ -142,26 +146,6 @@ export class SnkFilterBinarySelect {
         }
       }];
   }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Exibe o componente snk-filter-binary-select",
-          "tags": []
-        }
-      }
-    };
-  }
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{

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

@@ -4,7 +4,10 @@ import FilterItemType from '../filter-item-type.enum';
 import { EPresentationMode } from './enum/presentationMode';
 export class SnkFilterPeriod {
   constructor() {
+    this._startDateLabel = 'Inicial';
+    this._endDateLabel = 'Final';
     this.config = undefined;
+    this.getMessage = undefined;
     this.value = undefined;
     this.presentationMode = EPresentationMode.CHIP;
   }
@@ -45,11 +48,15 @@ export class SnkFilterPeriod {
       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`, 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") })));
+    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") })));
   }
   static get is() { return "snk-filter-period"; }
   static get properties() {
@@ -74,6 +81,21 @@ export class SnkFilterPeriod {
           "text": "Define as configura\u00E7\u00F5es do componente snk-filter-period"
         }
       },
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, props?: any) => string",
+          "resolved": "(key: string, props?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado pra flexibilizar os verbetes e mensagens de acordo com o SnkMessageBuilder."
+        }
+      },
       "value": {
         "type": "any",
         "mutable": false,

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, Fragment } from '@stencil/core';
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import FilterItemType from './filter-item-type.enum';
 import { ElementIDUtils, DataType } from '@sankhyalabs/core';
@@ -11,7 +11,8 @@ export class SnkFilterDetail {
    * 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) {
@@ -44,13 +45,7 @@ export class SnkFilterDetail {
     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}`)}` }))));
@@ -122,7 +117,7 @@ export class SnkFilterDetail {
   }
   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" }))));
   }
   static get is() { return "snk-filter-detail"; }
   static get properties() {

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, FloatingManager } from '@sankhyalabs/core';
+import { ElementIDUtils, FloatingManager, DateUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import FilterItemType from './filter-item-type.enum';
 export class SnkFilterItem {
@@ -110,16 +110,17 @@ export class SnkFilterItem {
       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) {
@@ -138,14 +139,21 @@ export class SnkFilterItem {
         }
         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;
@@ -158,10 +166,30 @@ export class SnkFilterItem {
       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);
@@ -199,7 +227,7 @@ export class SnkFilterItem {
   }
   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 }))));
   }
   static get is() { return "snk-filter-item"; }
   static get properties() {

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

@@ -29,6 +29,7 @@ ez-modal {
 .snk-filter__modal-collapsible-box{
   border: 1px solid #DCE0E8;
   border-radius: var(--border--radius-medium);
+  padding: 12px 6px;
 }
 
 

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

@@ -74,7 +74,7 @@ export class SnkFilterModal {
       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 ez-padding--medium", 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) }))));
+    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');

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

@@ -1,4 +1,8 @@
 
 .grow{
     flex-grow: 1;
-  }
+  }
+
+.gap{
+  gap: 4px;
+}

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

@@ -31,7 +31,8 @@ export class SnkFilterModalItem {
     return { tag: "snk-filter-text" };
   }
   updateFilterValue(newValue) {
-    this.filterItem = Object.assign(Object.assign({}, this.filterItem), { value: 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;
@@ -45,7 +46,7 @@ export class SnkFilterModalItem {
   }
   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-text ez-title ez-title--small ez-padding--small sc-snk-filter-bar snk-filter-item__editor-header" }, 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)))));
+    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)))));
   }
   static get is() { return "snk-filter-modal-item"; }
   static get originalStyleUrls() {

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

@@ -232,7 +232,7 @@ export class SnkFilterBar {
   }
   async showFilterModal() {
     const callbackOnApplyFilter = (filters) => {
-      this.filterConfig = filters.map(this.normalizeItem);
+      this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
     };
     const factoryParams = {
       filterConfig: this.filterConfig,

package/dist/collection/components/snk-grid/snk-grid.js

@@ -213,10 +213,12 @@ export class SnkGrid {
         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) => {
@@ -266,13 +268,18 @@ export class SnkGrid {
   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() }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/lib/message/resources/snk-filter-bar.msg.js

@@ -26,6 +26,13 @@ const snkFilterBarMessages = {
   "modalInfoTextCreateEditPersonalized": "Use o layout antigo para criar ou editar filtros, em breve traremos uma nova experiência",
   "modalOkButtonLabel": "Aplicar",
   "modalCancelButtonLabel": "Limpar",
+  "binarySelectTooltip": "Exibindo registros",
+  "multiListToltip": "selecionado(a)s",
+  "onlyStartPeriodToltip": "A partir de",
+  "onlyEndPeriodToltip": "Até",
+  "fullPeriodTooltip": "Data de {{LABEL}}: {{START_LABEL}} até {{END_LABEL}}",
+  "labelStartDatePeriod": "Inicial",
+  "labelEndDatePeriod": "Final",
   "filters": "Filtros",
   "filterModal": {
     "title": "Filtros",

package/dist/components/SnkMessageBuilder.js

@@ -57,6 +57,13 @@ const snkFilterBarMessages = {
   "modalInfoTextCreateEditPersonalized": "Use o layout antigo para criar ou editar filtros, em breve traremos uma nova experiência",
   "modalOkButtonLabel": "Aplicar",
   "modalCancelButtonLabel": "Limpar",
+  "binarySelectTooltip": "Exibindo registros",
+  "multiListToltip": "selecionado(a)s",
+  "onlyStartPeriodToltip": "A partir de",
+  "onlyEndPeriodToltip": "Até",
+  "fullPeriodTooltip": "Data de {{LABEL}}: {{START_LABEL}} até {{END_LABEL}}",
+  "labelStartDatePeriod": "Inicial",
+  "labelEndDatePeriod": "Final",
   "filters": "Filtros",
   "filterModal": {
     "title": "Filtros",

package/dist/components/snk-filter-bar2.js

@@ -371,7 +371,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   async showFilterModal() {
     const callbackOnApplyFilter = (filters) => {
-      this.filterConfig = filters.map(this.normalizeItem);
+      this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
     };
     const factoryParams = {
       filterConfig: this.filterConfig,

package/dist/components/snk-filter-binary-select.js

@@ -8,6 +8,8 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     super();
     this.__registerHost();
     this.valueChanged = createEvent(this, "valueChanged", 7);
+    this._noOptionValue = 'NO_VALUE';
+    this._radioButtonValue = undefined;
     this.value = undefined;
     this.config = undefined;
     this.presentationMode = EPresentationMode.CHIP;
@@ -19,15 +21,15 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
    * 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) {
@@ -47,11 +49,13 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     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) {
@@ -59,16 +63,15 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     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("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-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) })));
+    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 this; }
 }, [0, "snk-filter-binary-select", {
     "value": [1544],
     "config": [16],
-    "presentationMode": [2, "presentation-mode"],
-    "show": [64]
+    "presentationMode": [2, "presentation-mode"]
   }, [[0, "ezChange", "ezChangeListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/snk-filter-detail2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 import { ElementIDUtils, DataType } from '@sankhyalabs/core';
@@ -15,7 +15,8 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * 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) {
@@ -48,13 +49,7 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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}`)}` }))));
@@ -126,7 +121,7 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   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 this; }
 }, [0, "snk-filter-detail", {