@sankhyalabs/sankhyablocks 9.2.0-rc.1 → 9.2.0-rc.2

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

@@ -2,18 +2,20 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { DataType, StringUtils, ObjectUtils, ElementIDUtils, ErrorException, ApplicationContext, LockManager, LockManagerOperation } from '@sankhyalabs/core';
 import { EzScrollDirection } from '@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection';
 import { C as ConfigStorage } from './ConfigStorage.js';
+import { a as FilterOperand, P as PersonalizedFilterUtils } from './PersonalizedFilterUtils.js';
 import { toString } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { F as FilterItemType } from './filter-item-type.enum.js';
-import { a as FilterOperand, P as PersonalizedFilterUtils } from './PersonalizedFilterUtils.js';
 import { F as FilterNumberVariation } from './filterNumberVariation.js';
-import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
-import { d as defineCustomElement$a } from './snk-expression-group2.js';
-import { d as defineCustomElement$9 } from './snk-expression-item2.js';
-import { d as defineCustomElement$8 } from './snk-filter-advanced-mode2.js';
-import { d as defineCustomElement$7 } from './snk-filter-assistent-mode2.js';
-import { d as defineCustomElement$6 } from './snk-filter-detail2.js';
-import { d as defineCustomElement$5 } from './snk-filter-field-search2.js';
-import { d as defineCustomElement$4 } from './snk-filter-item2.js';
+import { d as defineCustomElement$d } from './snk-default-filter2.js';
+import { d as defineCustomElement$c } from './snk-expression-group2.js';
+import { d as defineCustomElement$b } from './snk-expression-item2.js';
+import { d as defineCustomElement$a } from './snk-filter-advanced-mode2.js';
+import { d as defineCustomElement$9 } from './snk-filter-assistent-mode2.js';
+import { d as defineCustomElement$8 } from './snk-filter-detail2.js';
+import { d as defineCustomElement$7 } from './snk-filter-field-search2.js';
+import { d as defineCustomElement$6 } from './snk-filter-item2.js';
+import { d as defineCustomElement$5 } from './snk-filter-modal2.js';
+import { d as defineCustomElement$4 } from './snk-filter-modal-item2.js';
 import { d as defineCustomElement$3 } from './snk-filter-param-config2.js';
 import { d as defineCustomElement$2 } from './snk-personalized-filter2.js';
 import { d as defineCustomElement$1 } from './snk-simple-bar2.js';
@@ -208,51 +210,6 @@ function buildPersonalized(item) {
   return { name: id, expression, params };
 }
 
-class SnkFilterModalFactory {
-  constructor({ filterConfig, configName, onComplete, getMessage, disablePersonalizedFilter, onAddPersonalizedFilter, onEditPersonalizedFilter, onDeletePersonalizedFilter }) {
-    this._filterConfig = filterConfig;
-    this._configName = configName;
-    this._onComplete = onComplete;
-    this._getMessage = getMessage;
-    this._disablePersonalizedFilter = disablePersonalizedFilter;
-    this._addPersonalizedFilterFn = onAddPersonalizedFilter;
-    this._editPersonalizedFilterFn = onEditPersonalizedFilter;
-    this._onDeletePersonalizedFilter = onDeletePersonalizedFilter;
-  }
-  applyFilters(newFilterConfig) {
-    this._onComplete(newFilterConfig);
-    this._closeModal();
-  }
-  buildFilterModal() {
-    const filterModal = document.createElement("snk-filter-modal");
-    filterModal.className = "ez-size-height--full";
-    filterModal.filters = this._filterConfig;
-    filterModal.configName = this._configName;
-    filterModal.disablePersonalizedFilter = this._disablePersonalizedFilter;
-    filterModal.getMessage = this._getMessage.bind(this);
-    filterModal.applyFilters = this.applyFilters.bind(this);
-    filterModal.closeModal = () => this._closeModal();
-    filterModal.addPersonalizedFilter = (isDefault) => this._addPersonalizedFilterFn(isDefault);
-    filterModal.editPersonalizedFilter = (id, isDefault) => this._editPersonalizedFilterFn(id, isDefault);
-    filterModal.deletePersonalizedFilter = (filter, configName, isDefault) => this._onDeletePersonalizedFilter(filter, configName, isDefault);
-    return filterModal;
-  }
-  async showModal() {
-    const filterModal = this.buildFilterModal();
-    const modalProps = {
-      content: filterModal,
-      position: 'right',
-      heightMode: 'full',
-      closeOutsideClick: false,
-      useScrimLight: true
-    };
-    this._closeModal = await ApplicationUtils.showModal(modalProps);
-  }
-  async closeModal() {
-    this._closeModal();
-  }
-}
-
 const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:1fr minmax(100px, 100%) 1fr 1fr;--snk-personalized-filter--z-index:var(--elevation--20, 20);--snk-personalized-filter--background-color:var(--background--xlight, #fff)}.snk-filter-bar__title.sc-snk-filter-bar{max-width:260px;display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:16px;font-family:var(--font-pattern, Arial);font-weight:var(--text-weight--large, 600);color:var(--color--title-primary, #2B3A54);margin-top:12px}[data-mode=\"hidden\"].sc-snk-filter-bar-h{width:0px;height:0px}[data-mode=\"button\"].sc-snk-filter-bar-h{grid-template-columns:1fr;width:fit-content}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.filter-bar__personalized-filter.sc-snk-filter-bar{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;z-index:var(--snk-personalized-filter--z-index);background-color:var(--snk-personalized-filter--background-color)}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small);height:80%}.snk-filter-bar__filter-item-container.sc-snk-filter-bar{display:flex;align-items:start;margin:var(--space--2, 2px) 0}.snk-filter-bar__scroller.sc-snk-filter-bar .sc-snk-filter-bar:first-child{margin-left:var(--space-extra-small, 3px)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:99%;height:100%}";
 
 const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -294,10 +251,13 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.filterBarLegacyConfigName = undefined;
     this.autoLoad = undefined;
     this.afterApplyConfig = undefined;
+    this.filterCustomConfig = undefined;
+    this.filterCustomConfigInterceptor = undefined;
     this.allowDefault = undefined;
     this.scrollerLocked = false;
     this.showPersonalizedFilter = false;
     this.personalizedFilterId = undefined;
+    this.isFilterModalOpen = false;
   }
   hasValidValue(item) {
     if (item.value === undefined || item.value === null)
@@ -445,7 +405,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return;
       }
       this._loadingPending = false;
-      this.doLoadData(this.dataUnit.getLastLoadRequest() != undefined);
+      this.doLoadData();
     }
     if (this._configUpdated) {
       this._configUpdated = false;
@@ -544,11 +504,11 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const unpinnedItems = [];
     this.filterConfig.sort((a, b) => this._filtersComparator(a, b))
       .filter(this.filterActiveFilter)
-      .forEach((item, index) => {
+      .forEach((item) => {
       item = ObjectUtils.copy(item);
       const itemId = `filter-${item.id}`;
-      const filterItem = (h("snk-filter-item", { onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFilterChange: (event) => this.updateFilter(event.detail), onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: index > 0 ? "ez-padding-left--medium" : "", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
-      if (item.fixed || item.hardFixed) {
+      const filterItem = (h("snk-filter-item", { onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFilterChange: (event) => this.updateFilter(event.detail), onFocusin: () => this.itemFocused(itemId), id: itemId, config: item, class: "ez-margin-horizontal--extra-small", getMessage: (key, props) => this.getMessage(key, props), key: item.id }));
+      if (item.fixed || item.hardFixed || item.required) {
         pinnedItems.push(filterItem);
       }
       else {
@@ -557,9 +517,9 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return filterItem;
     });
     const elements = [];
-    elements.push(...pinnedItems);
+    elements.push(...pinnedItems.reverse());
     if (pinnedItems.length > 0 && unpinnedItems.length > 0) {
-      elements.push(h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-filter-bar__divider" }));
+      elements.push(h("hr", { class: "ez-margin-horizontal--small ez-margin-vertical--auto ez-divider-vertical ez-divider--dark snk-filter-bar__divider" }));
     }
     elements.push(...unpinnedItems);
     return elements;
@@ -584,7 +544,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return normalized;
   }
   updateFilter(newItem) {
-    this.filterConfig = this.filterConfig.map(item => {
+    let config = this.filterConfig.map(item => {
       newItem = this.normalizeItem(newItem);
       if (item.id === newItem.id) {
         if (ObjectUtils.objectToString(item) != ObjectUtils.objectToString(newItem)) {
@@ -594,6 +554,10 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
       return item;
     }).sort((a, b) => this._filtersComparator(a, b));
+    if (this.filterCustomConfigInterceptor) {
+      config = this.filterCustomConfigInterceptor(config);
+    }
+    this.filterConfig = config;
   }
   loadPermitions() {
     this._application.isUserSup().then(value => this.allowDefault = value);
@@ -615,6 +579,12 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       else {
         config = await ConfigStorage.loadFilterBarConfig(this.configName, this.resourceID, { contextURI: this.dataUnit.name });
       }
+      if (this.filterCustomConfig) {
+        config = [...this.filterCustomConfig, ...config];
+      }
+      if (this.filterCustomConfigInterceptor) {
+        config = this.filterCustomConfigInterceptor(config);
+      }
       this.filterConfig = config.map(item => this.normalizeItem(item));
       this.filterConfig.sort((a, b) => this._filtersComparator(a, b));
     }
@@ -658,30 +628,13 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * @async
   */
   async showFilterModal() {
-    const callbackOnApplyFilter = (filters) => {
-      var _a;
-      this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
-      (_a = this.afterApplyConfig) === null || _a === void 0 ? void 0 : _a.call(this);
-    };
-    let filtersConfigCopy = ObjectUtils.copy(this.filterConfig);
-    filtersConfigCopy = filtersConfigCopy.sort((itemA, itemB) => {
-      return itemA.originOrder - itemB.originOrder;
-    });
-    const factoryParams = {
-      filterConfig: filtersConfigCopy,
-      configName: this.configName,
-      onComplete: callbackOnApplyFilter,
-      disablePersonalizedFilter: this.disablePersonalizedFilter,
-      getMessage: (key, props) => this.getMessage(key, props),
-      onAddPersonalizedFilter: (isDefault) => this.addPersonalizedFilter(isDefault),
-      onEditPersonalizedFilter: (id, isDefault) => this.editPersonalizedFilter(id, isDefault),
-      onDeletePersonalizedFilter: (filter, configName, isDefault) => this.deletePersonalizedFilter(filter, FilterItemType.PERSONALIZED, configName, isDefault),
-    };
-    this._filterModalFactory = new SnkFilterModalFactory(factoryParams);
-    await this._filterModalFactory.showModal();
+    if (this.isFilterModalOpen) {
+      return; // Evita abrir múltiplos modais
+    }
+    this.isFilterModalOpen = true;
   }
   addPersonalizedFilter(isDefault = false) {
-    this._filterModalFactory.closeModal();
+    this.isFilterModalOpen = false;
     this._isDefaultFilter = isDefault;
     this.personalizedFilterId = undefined;
     this.showPersonalizedFilter = true;
@@ -690,7 +643,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   editPersonalizedFilter(id, isDefault = false) {
-    this._filterModalFactory.closeModal();
+    this.isFilterModalOpen = false;
     this._isDefaultFilter = isDefault;
     this.showPersonalizedFilter = true;
     this.personalizedFilterId = id;
@@ -705,6 +658,15 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       ConfigStorage.removePersonalizedFilter(filter, this.resourceID, configName);
     }
   }
+  closeFilterModal() {
+    this.isFilterModalOpen = false;
+  }
+  applyFiltersFromModal(filters) {
+    var _a;
+    this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
+    (_a = this.afterApplyConfig) === null || _a === void 0 ? void 0 : _a.call(this);
+    this.isFilterModalOpen = false;
+  }
   handleHidePersonalizedFilter(reloadFilterBar) {
     if (reloadFilterBar) {
       this.loadConfigFromStorage().then(() => {
@@ -751,10 +713,14 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this.showPersonalizedFilter) {
       return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, isDefaultFilter: this._isDefaultFilter, onEzCancel: () => this.handleHidePersonalizedFilter(false), onEzAfterSave: () => this.handleHidePersonalizedFilter(true), entityUri: this.dataUnit.name, configName: this.configName, resourceID: this.resourceID });
     }
+    let filtersConfigCopy = ObjectUtils.copy(this.filterConfig);
+    filtersConfigCopy = filtersConfigCopy.sort((itemA, itemB) => {
+      return itemA.originOrder - itemB.originOrder;
+    });
     if (this.mode !== "regular") {
-      return (h(Host, { "data-mode": this.mode }, this.getPersonalizedFilterVariableItems(), this.mode === 'button' && (h("ez-button", { class: "ez-margin-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, this.getMessage("snkFilterBar.filters")), onClick: this.showFilterModal.bind(this) }))));
+      return (h(Host, { "data-mode": this.mode }, this.getPersonalizedFilterVariableItems(), this.mode === 'button' && (h("ez-button", { class: "ez-margin-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, this.getMessage("snkFilterBar.filters")), onClick: this.showFilterModal.bind(this) })), h("snk-filter-modal", { opened: this.isFilterModalOpen, filterConfig: this.filterConfig, configName: this.configName, disablePersonalizedFilter: this.disablePersonalizedFilter, getMessage: (key, props) => this.getMessage(key, props), applyFilters: (filters) => this.applyFiltersFromModal(filters), closeModal: () => this.closeFilterModal(), addPersonalizedFilter: (isDefault) => this.addPersonalizedFilter(isDefault), editPersonalizedFilter: (id, isDefault) => this.editPersonalizedFilter(id, isDefault), deletePersonalizedFilter: (filter, configName, isDefault) => this.deletePersonalizedFilter(filter, FilterItemType.PERSONALIZED, configName, isDefault), filterCustomConfigInterceptor: this.filterCustomConfigInterceptor })));
     }
-    return (h(Host, null, h("div", null, h("span", { class: "snk-filter-bar__title", title: this.title, "data-tooltip": this.title, "data-flow": "bottom" }, this.title)), h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium ez-margin-top--extra-small", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, this.getMessage("snkFilterBar.filters")), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
+    return (h(Host, null, h("div", null, h("span", { class: "snk-filter-bar__title", title: this.title, "data-tooltip": this.title, "data-flow": "bottom" }, this.title)), h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium ez-margin-top--extra-small", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, this.getMessage("snkFilterBar.filters")), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" })), h("snk-filter-modal", { opened: this.isFilterModalOpen, filterConfig: this.filterConfig, configName: this.configName, disablePersonalizedFilter: this.disablePersonalizedFilter, getMessage: (key, props) => this.getMessage(key, props), applyFilters: (filters) => this.applyFiltersFromModal(filters), closeModal: () => this.closeFilterModal(), addPersonalizedFilter: (isDefault) => this.addPersonalizedFilter(isDefault), editPersonalizedFilter: (id, isDefault) => this.editPersonalizedFilter(id, isDefault), deletePersonalizedFilter: (filter, configName, isDefault) => this.deletePersonalizedFilter(filter, FilterItemType.PERSONALIZED, configName, isDefault), filterCustomConfigInterceptor: this.filterCustomConfigInterceptor })));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -775,10 +741,13 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "filterBarLegacyConfigName": [1, "filter-bar-legacy-config-name"],
     "autoLoad": [4, "auto-load"],
     "afterApplyConfig": [16],
+    "filterCustomConfig": [16],
+    "filterCustomConfigInterceptor": [16],
     "allowDefault": [32],
     "scrollerLocked": [32],
     "showPersonalizedFilter": [32],
     "personalizedFilterId": [32],
+    "isFilterModalOpen": [32],
     "reload": [64],
     "getFilterItem": [64],
     "updateFilterItem": [64],
@@ -791,44 +760,59 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-filter-bar", "snk-expression-group", "snk-expression-item", "snk-filter-advanced-mode", "snk-filter-assistent-mode", "snk-filter-detail", "snk-filter-field-search", "snk-filter-item", "snk-filter-param-config", "snk-personalized-filter", "snk-simple-bar"];
+  const components = ["snk-filter-bar", "snk-default-filter", "snk-expression-group", "snk-expression-item", "snk-filter-advanced-mode", "snk-filter-assistent-mode", "snk-filter-detail", "snk-filter-field-search", "snk-filter-item", "snk-filter-modal", "snk-filter-modal-item", "snk-filter-param-config", "snk-personalized-filter", "snk-simple-bar"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-filter-bar":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SnkFilterBar);
       }
       break;
+    case "snk-default-filter":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
     case "snk-expression-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "snk-expression-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "snk-filter-advanced-mode":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "snk-filter-assistent-mode":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "snk-filter-detail":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "snk-filter-field-search":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "snk-filter-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "snk-filter-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "snk-filter-modal-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

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

@@ -13,6 +13,7 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.value = undefined;
     this.config = undefined;
     this.presentationMode = EPresentationMode.CHIP;
+    this.errorMessage = undefined;
   }
   isSelected(option) {
     return this.value == undefined || this.value === option;
@@ -21,6 +22,7 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
    * Emitido quando acontece a alteração de valor do componente snk-filter-binary-select
    */
   ezChangeListener(evt) {
+    this.errorMessage = undefined;
     if (this.presentationMode === EPresentationMode.MODAL) {
       if (!evt.detail) {
         this.assertCheckedOption(evt.target);
@@ -37,6 +39,23 @@ const SnkFilterBinarySelect$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   async resetValues() {
     this.ezChangeListener({ detail: this._noOptionValue });
   }
+  /**
+   * Limpa o valor do componente restaurando o valor original da configuração.
+   */
+  async clearValue() {
+    this.value = this.config.value;
+    this._radioButtonValue = this.value || this._noOptionValue;
+  }
+  /**
+   * Define o foco no componente snk-filter-binary-select.
+   */
+  async setFocus() {
+    if (this.presentationMode === EPresentationMode.MODAL) {
+      this._checkOne.setFocus();
+      return;
+    }
+    this._element.querySelector('ez-radio-button').focus();
+  }
   assertCheckedOption(updatingCheck) {
     if (updatingCheck === this._checkOne) {
       this._checkTwo.value = true;
@@ -78,16 +97,21 @@ 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-row ez-size-height--full" }, h("label", { class: "ez-text ez-title--small ez-title--primary ez-size-height--full ez-flex ez-flex--row ez-flex--align-items-center ez-col ez-col--sd-4" }, this.config.detailModal), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkOne = ref, id: `${this.config.id}_${optOne.name || "option1"}`, class: "sc-snk-filter-bar editor__ez-check", label: optOne.label, value: this.isSelected(optOne.name) })), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkTwo = ref, id: `${this.config.id}_${optTwo.name || "option2"}`, class: "sc-snk-filter-bar editor__ez-check", label: optTwo.label, value: this.isSelected(optTwo.name) })))));
+      return (h(Host, null, h("div", { class: "ez-row ez-size-height--full" }, h("label", { class: "ez-text ez-title--small ez-title--primary ez-size-height--full ez-flex ez-flex--row ez-flex--align-items-center ez-col ez-col--sd-4" }, this.config.detailModal), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkOne = ref, id: `${this.config.id}_${optOne.name || "option1"}`, class: "sc-snk-filter-bar editor__ez-check", label: optOne.label, enabled: this.config.enabled, value: this.isSelected(optOne.name) })), h("div", { class: "ez-col ez-col--sd-4" }, h("ez-check", { ref: (ref) => this._checkTwo = ref, id: `${this.config.id}_${optTwo.name || "option2"}`, class: "sc-snk-filter-bar editor__ez-check", label: optTwo.label, enabled: this.config.enabled, value: this.isSelected(optTwo.name) })), this.errorMessage &&
+        h("span", { class: 'ez-text ez-text--small ez-text--error ez-margin--small' }, this.errorMessage))));
     }
-    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 }))));
+    return (h(Host, null, h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, 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 })), this.errorMessage &&
+      h("span", { class: 'ez-text ez-text--small ez-text--error ez-margin--small' }, this.errorMessage))));
   }
   get _element() { return this; }
 }, [0, "snk-filter-binary-select", {
     "value": [1544],
     "config": [16],
     "presentationMode": [2, "presentation-mode"],
-    "resetValues": [64]
+    "errorMessage": [1537, "error-message"],
+    "resetValues": [64],
+    "clearValue": [64],
+    "setFocus": [64]
   }, [[0, "ezChange", "ezChangeListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/snk-filter-checkbox-list.js

@@ -8,8 +8,24 @@ const SnkFilterCheckboxList$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.__registerHost();
     this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
+    this.errorMessage = undefined;
     this.optionsList = [];
   }
+  /**
+   * Define o foco no componente snk-filter-checkbox-list.
+   */
+  async setFocus() {
+    var _a, _b;
+    (_b = (_a = this._element) === null || _a === void 0 ? void 0 : _a.querySelector('ez-check')) === null || _b === void 0 ? void 0 : _b.setFocus();
+  }
+  /**
+   * Limpa o valor do componente restaurando o valor original da configuração.
+   */
+  async clearValue() {
+    var _a;
+    this.config = Object.assign(Object.assign({}, this.config), { value: this.config.value });
+    this.valueChanged.emit((_a = this.config) === null || _a === void 0 ? void 0 : _a.value);
+  }
   componentDidLoad() {
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
@@ -17,13 +33,14 @@ const SnkFilterCheckboxList$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   handleToggleCheck(itemChanged, checked) {
     var _a, _b;
+    this.errorMessage = undefined;
     let configValueMap = (_a = this.config.value) !== null && _a !== void 0 ? _a : {};
     configValueMap[itemChanged.name] = checked;
     this.config = Object.assign(Object.assign({}, this.config), { value: configValueMap });
     this.valueChanged.emit((_b = this.config) === null || _b === void 0 ? void 0 : _b.value);
   }
   renderOptions() {
-    return this.optionsList.map(option => (h("ez-check", { label: option.label, onEzChange: (event) => this.handleToggleCheck(option, event.detail), value: !!this.isChecked(option.name) })));
+    return this.optionsList.map(option => (h("ez-check", { label: option.label, onEzChange: (event) => this.handleToggleCheck(option, event.detail), value: !!this.isChecked(option.name), enabled: this.config.enabled })));
   }
   isChecked(itemName) {
     var _a;
@@ -41,12 +58,16 @@ const SnkFilterCheckboxList$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     if (!this.config || this.config.type !== FilterItemType.CHECK_BOX_LIST) {
       return undefined;
     }
-    return (h("div", { class: 'ez-flex ez-flex--column' }, this.renderOptions()));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: 'ez-flex ez-flex--column' }, this.renderOptions(), this.errorMessage &&
+      h("span", { class: 'ez-text ez-text--small ez-text--error ez-margin--small' }, this.errorMessage))));
   }
   get _element() { return this; }
 }, [0, "snk-filter-checkbox-list", {
     "config": [1040],
-    "optionsList": [32]
+    "errorMessage": [1537, "error-message"],
+    "optionsList": [32],
+    "setFocus": [64],
+    "clearValue": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,9 +1,9 @@
 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, ObjectUtils } from '@sankhyalabs/core';
-import { E as EPresentationMode } from './presentationMode.js';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 import { P as PersonalizedFilterUtils } from './PersonalizedFilterUtils.js';
+import { E as EPresentationMode } from './presentationMode.js';
+import { F as FilterItemType } from './filter-item-type.enum.js';
 
 const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,13 +13,30 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.config = undefined;
     this.getMessage = undefined;
     this.showHardFixed = true;
+    this.removalBlocked = false;
   }
   /**
-   * Exibe o componente snk-filter-detail.
+   * Define o foco no campo do editor.
    */
-  async show() {
-    var _a, _b;
-    (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a["show"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  async setFocusField() {
+    var _a, _b, _c, _d;
+    if (!this._editor) {
+      return;
+    }
+    if (this._editor["setFocus"]) {
+      (_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a["setFocus"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    else if (this._editor["focus"]) {
+      (_d = (_c = this._editor) === null || _c === void 0 ? void 0 : _c["focus"]) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
+  }
+  async clearValue() {
+    if (!this._editor) {
+      return;
+    }
+    if (this._editor["clearValue"]) {
+      await this._editor["clearValue"]();
+    }
   }
   observeConfig(newValue) {
     var _a, _b;
@@ -91,7 +108,7 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return Object.assign(Object.assign({}, item), { visible: false, fixed: false, value: undefined });
   }
   getPopUpHeaderButtons() {
-    return (h(Fragment, null, !this.config.removalBlocked &&
+    return (h(Fragment, null, !this.removalBlocked && !this.config.removalBlocked &&
       this.buildIcon(this.getMessage("snkFilterBar.removeFilter"), "delete", () => this.removeItem()), this.showHardFixed && !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 })))));
   }
@@ -176,7 +193,9 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "config": [1040],
     "getMessage": [16],
     "showHardFixed": [4, "show-hard-fixed"],
-    "show": [64]
+    "removalBlocked": [4, "removal-blocked"],
+    "setFocusField": [64],
+    "clearValue": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {