@sankhyalabs/sankhyablocks 8.15.0-dev.7 → 8.15.0-dev.70

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

@@ -209,11 +209,12 @@ function buildPersonalized(item) {
 }
 
 class SnkFilterModalFactory {
-  constructor({ filterConfig, configName, onComplete, getMessage, onAddPersonalizedFilter, onEditPersonalizedFilter, onDeletePersonalizedFilter }) {
+  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;
@@ -227,6 +228,7 @@ class SnkFilterModalFactory {
     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();
@@ -251,7 +253,7 @@ class SnkFilterModalFactory {
   }
 }
 
-const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns: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__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)}.snk-filter-bar__scroller.sc-snk-filter-bar{height:calc(100% + var(--space-extra-small, 3px))}.snk-filter-bar__filter-item-container.sc-snk-filter-bar{display:flex;align-self:center}.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 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:8px}[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)}.snk-filter-bar__scroller.sc-snk-filter-bar{height:calc(100% + var(--space-extra-small, 3px))}.snk-filter-bar__filter-item-container.sc-snk-filter-bar{display:flex;align-self:center}.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 {
   constructor() {
@@ -261,6 +263,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._updateSequence = [];
     this._loadingPending = false;
     this._configUpdated = false;
+    this._firstLoad = true;
     this._pendingVariables = false;
     this._customfiltersToBeUpdated = [];
     this._calculateSortIndex = (item) => {
@@ -277,16 +280,26 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return this._calculateSortIndex(b) - this._calculateSortIndex(a);
     };
     this.dataUnit = undefined;
+    this.title = undefined;
     this.configName = undefined;
     this.resourceID = undefined;
+    this.mode = "regular";
     this.filterConfig = undefined;
     this.messagesBuilder = undefined;
+    this.disablePersonalizedFilter = undefined;
+    this.filterBarLegacyConfigName = undefined;
+    this.autoLoad = undefined;
     this.allowDefault = undefined;
     this.scrollerLocked = false;
     this.showPersonalizedFilter = false;
     this.personalizedFilterId = undefined;
   }
   observeFilterConfig(newValue, oldValue) {
+    if (ObjectUtils.equals(newValue, oldValue))
+      return;
+    this.handleFilterConfigsChanged(oldValue, newValue);
+  }
+  handleFilterConfigsChanged(oldValue, newValue) {
     if (oldValue != undefined && newValue == undefined) {
       this._loadingPending = true;
       this._configUpdated = true;
@@ -324,7 +337,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * Faz o recarregamento da filterbar buscando o state no servidor.
    */
   async reload() {
-    this.loadConfigFromStorage();
+    this.loadConfigFromStorage(true);
   }
   /**
    * Retorna um item de filtro pelo ID.
@@ -413,13 +426,30 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return;
       }
       this._loadingPending = false;
-      this.dataUnit.loadData(undefined, undefined, true);
+      this.doLoadData(this.dataUnit.getLastLoadRequest() != undefined);
     }
     if (this._configUpdated) {
       this._configUpdated = false;
       ConfigStorage.saveFilterBarConfig(this.filterConfig, this.configName, this.resourceID);
     }
   }
+  async doLoadData(forceReload = false) {
+    try {
+      if (this._firstLoad && this.autoLoad === false) {
+        return;
+      }
+      if (this._firstLoad && !forceReload && this.autoLoad === undefined) {
+        let autoLoad = await this._application.getBooleanParam("global.carregar.registros.iniciar.tela");
+        if (!autoLoad) {
+          return;
+        }
+      }
+      this.dataUnit.loadData(undefined, undefined, true);
+    }
+    finally {
+      this._firstLoad = false;
+    }
+  }
   /**
    * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
    * através de um pequeno modulo na estrutura da aplicação:
@@ -428,6 +458,9 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    */
   getMessage(key, params, defaultValue) {
     var _a;
+    if (this.messagesBuilder == undefined && this._application) {
+      this.messagesBuilder = this._application.messagesBuilder;
+    }
     return ((_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params)) || defaultValue;
   }
   getFilter(_dataUnit) {
@@ -454,7 +487,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   registryFilterProvider() {
     this.dataUnit.addFilterProvider(this);
     if (this.filterConfig) {
-      this.dataUnit.loadData(undefined, undefined, true);
+      this.doLoadData();
     }
   }
   itemFocused(selectedItem) {
@@ -472,6 +505,17 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   filterActiveFilter(item) {
     return item.visible || item.removalBlocked;
   }
+  filterPersonalizedItems(item) {
+    return item.type === FilterItemType.PERSONALIZED;
+  }
+  getPersonalizedFilterVariableItems() {
+    return this.filterConfig
+      .filter(this.filterPersonalizedItems)
+      .map(item => {
+      const itemId = `filter-${item.id}`;
+      return (h("snk-filter-item", { key: item.id, id: itemId, config: Object.assign({}, item), onFocusin: () => this.itemFocused(itemId), onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFilterChange: (event) => this.updateFilter(event.detail), getMessage: (key, props) => this.getMessage(key, props), showChips: false }));
+    });
+  }
   getFilterItems() {
     const pinnedItems = [];
     const unpinnedItems = [];
@@ -531,7 +575,15 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   loadPermitions() {
     this._application.isUserSup().then(value => this.allowDefault = value);
   }
-  loadConfigFromStorage() {
+  addFilterBarLegacyConfigName() {
+    if (this.filterBarLegacyConfigName && this.configName) {
+      ConfigStorage.addFilterBarLegacyConfig(this.configName, this.filterBarLegacyConfigName);
+    }
+  }
+  async loadConfigFromStorage(clearCache) {
+    if (clearCache) {
+      await ConfigStorage.deleteFilterBarConfigCache(this.configName, this.resourceID);
+    }
     return new Promise(accept => {
       ConfigStorage.loadFilterBarConfig(this.configName, this.resourceID, { contextURI: this.dataUnit.name })
         .then((filters) => {
@@ -574,6 +626,9 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   filterChangeListener(evt) {
     this.updateFilter(evt.detail);
   }
+  /**
+   * Abre o modal de filtros
+  */
   async showFilterModal() {
     const callbackOnApplyFilter = (filters) => {
       this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
@@ -586,6 +641,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       filterConfig: filtersConfigCopy,
       configName: this.configName,
       onComplete: callbackOnApplyFilter,
+      disablePersonalizedFilter: this.disablePersonalizedFilter,
       getMessage: (key, props) => this.getMessage(key, props),
       onAddPersonalizedFilter: () => this.addPersonalizedFilter(),
       onEditPersonalizedFilter: (id) => this.editPersonalizedFilter(id),
@@ -630,6 +686,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     if (this._application) {
       this.loadPermitions();
+      this.addFilterBarLegacyConfigName();
       this.loadConfigFromStorage();
     }
     this.attachDataUnit();
@@ -644,7 +701,10 @@ 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, onEzCancel: () => this.handleHidePersonalizedFilter(false), onEzAfterSave: () => this.handleHidePersonalizedFilter(true), entityUri: this.dataUnit.name, configName: this.configName, resourceID: this.resourceID });
     }
-    return (h(Host, null, 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", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
+    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, 'Filtros'), onClick: this.showFilterModal.bind(this) }))));
+    }
+    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", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -653,10 +713,15 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return snkFilterBarCss; }
 }, [2, "snk-filter-bar", {
     "dataUnit": [1040],
+    "title": [1],
     "configName": [1, "config-name"],
     "resourceID": [1, "resource-i-d"],
+    "mode": [1],
     "filterConfig": [1040],
     "messagesBuilder": [1040],
+    "disablePersonalizedFilter": [4, "disable-personalized-filter"],
+    "filterBarLegacyConfigName": [1, "filter-bar-legacy-config-name"],
+    "autoLoad": [4, "auto-load"],
     "allowDefault": [32],
     "scrollerLocked": [32],
     "showPersonalizedFilter": [32],
@@ -665,7 +730,8 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "getFilterItem": [64],
     "updateFilterItem": [64],
     "addFilterItem": [64],
-    "removeFilterItem": [64]
+    "removeFilterItem": [64],
+    "showFilterModal": [64]
   }, [[0, "filterChange", "filterChangeListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -12,6 +12,7 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.filterChange = createEvent(this, "filterChange", 7);
     this.config = undefined;
     this.getMessage = undefined;
+    this.showHardFixed = true;
   }
   /**
    * Exibe o componente snk-filter-detail.
@@ -89,7 +90,9 @@ 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 && 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 })))));
+    return (h(Fragment, null, !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 })))));
   }
   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}`)}` }))));
@@ -170,6 +173,7 @@ const SnkFilterDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
 }, [0, "snk-filter-detail", {
     "config": [1040],
     "getMessage": [16],
+    "showHardFixed": [4, "show-hard-fixed"],
     "show": [64]
   }]);
 function defineCustomElement() {

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

@@ -20,6 +20,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.detailIsVisible = undefined;
     this.config = undefined;
     this.getMessage = undefined;
+    this.showChips = true;
   }
   observeDetailIsVisible(value) {
     this.visibleChanged.emit(value);
@@ -51,19 +52,22 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       autoClose: true,
       innerClickTest: this.innerClickCheck,
       backClickListener: () => this.onDetailCloseCallback(),
-      left: this.getScrollOffsetLeft(),
-      top: this.getScrollOffsetTop(),
+      left: this.getOffsetLeft(),
+      top: this.getOffsetTop(),
       useOverlay: true,
       overlayClassName: 'ez-scrim ez-scrim--light',
       isFixed: true
     };
   }
-  getScrollOffsetLeft() {
+  getOffsetLeft() {
     const padding = getComputedStyle(this._filterItemElement).getPropertyValue("padding-left");
     const rect = this._filterItemElement.getBoundingClientRect();
-    return `calc(${rect.x}px + ${padding})`;
+    // Width baseado no conteudo do snk-filter-detail. Nesse momento ele retorna 0px pois ainda não foi criado em tela.
+    const filterDetailWidth = 430;
+    const adjustRightPosition = filterDetailWidth - (document.body.clientWidth - rect.left);
+    return `calc(${rect.x}px + ${padding} - ${adjustRightPosition > 0 ? adjustRightPosition : 0}px)`;
   }
-  getScrollOffsetTop() {
+  getOffsetTop() {
     const rect = this._filterItemElement.getBoundingClientRect();
     return (rect.y + rect.height) + "px";
   }
@@ -260,6 +264,9 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   canClearFilter() {
     const { value, groupedItems = [] } = this.config;
+    if (value != undefined && this.config.type === FilterItemType.MULTI_LIST) {
+      return value.some((item) => item.check);
+    }
     return value !== undefined || groupedItems.some(item => item.visible);
   }
   getRightIconName() {
@@ -292,7 +299,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (h(Host, null, h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip() }, 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 ez-elevation--16", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
+    return (h(Host, null, this.showChips && (h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip() }, leftIcon && (h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" })), 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 ez-elevation--16", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail, showHardFixed: this.showChips }))));
   }
   get _filterItemElement() { return this; }
   static get watchers() { return {
@@ -301,6 +308,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [0, "snk-filter-item", {
     "config": [1040],
     "getMessage": [16],
+    "showChips": [4, "show-chips"],
     "detailIsVisible": [32],
     "showUp": [64],
     "hideDetail": [64]

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

@@ -22,6 +22,7 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.editPersonalizedFilter = undefined;
     this.deletePersonalizedFilter = undefined;
     this.filtersToDelete = [];
+    this.disablePersonalizedFilter = undefined;
   }
   /**
    * Emitido quando um filtro personalizado é deletado.
@@ -236,7 +237,7 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     const customFilters = this.filters.filter(filter => filter.filterType === FilterType.CUSTOM_FILTER);
     const quickFilters = this.filters.filter(filter => filter.filterType === FilterType.QUICK_FILTER);
     const otherFilters = this.filters.filter(filter => filter.filterType === FilterType.OTHER_FILTERS);
-    return (h("ez-modal-container", { class: "snk-filter-modal__container", modalTitle: this._modalTitle, cancelButtonLabel: this._cancelButtonLabel, okButtonLabel: this._okButtonLabel, onEzModalAction: this.modalActionListener.bind(this) }, h("div", { class: "snk-filter-modal__content ez-col--sd-12" }, this.renderCollapsibleFilterBox(this.getCustomMessage('customFilters'), customFilters, false, false), this.renderCollapsibleFilterBox(this.getCustomMessage('quickFilters'), quickFilters, false), otherFilters.map(filter => this.renderCollapsibleFilterBox(filter.label, [filter], true)))));
+    return (h("ez-modal-container", { class: "snk-filter-modal__container", modalTitle: this._modalTitle, cancelButtonLabel: this._cancelButtonLabel, okButtonLabel: this._okButtonLabel, onEzModalAction: this.modalActionListener.bind(this) }, h("div", { class: "snk-filter-modal__content ez-col--sd-12" }, !this.disablePersonalizedFilter && this.renderCollapsibleFilterBox(this.getCustomMessage('customFilters'), customFilters, false, false), this.renderCollapsibleFilterBox(this.getCustomMessage('quickFilters'), quickFilters, false), otherFilters.map(filter => this.renderCollapsibleFilterBox(filter.label, [filter], true)))));
   }
   static get style() { return snkFilterModalCss; }
 }, [0, "snk-filter-modal", {
@@ -248,7 +249,8 @@ const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "addPersonalizedFilter": [16],
     "editPersonalizedFilter": [16],
     "deletePersonalizedFilter": [16],
-    "filtersToDelete": [16]
+    "filtersToDelete": [16],
+    "disablePersonalizedFilter": [4, "disable-personalized-filter"]
   }, [[0, "deleteFilter", "deletePersonalizedFilterListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -14,7 +14,8 @@ const SnkFilterMultiSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
    * Emitido quando acontece a alteração de valor do componente snk-filter-multi-select
    */
   ezChangeListener(evt) {
-    this.value = evt.detail.value;
+    var _a;
+    this.value = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value;
     this.valueChanged.emit(this.value);
   }
   /**

package/dist/components/snk-form-config2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as Sortable, d as defineCustomElement$1 } from './snk-tab-config2.js';
-import { ObjectUtils, ElementIDUtils, ArrayUtils } from '@sankhyalabs/core';
+import { ObjectUtils, ElementIDUtils, ArrayUtils, ApplicationContext } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { C as CONFIG_EVENTS, b as CONFIG_SORTABLE_EVENTS, c as TAB_NAMES, A as ACTION_CONFIG, D as DEFAULT_TYPE } from './constants.js';
 import { U as UserConfigType } from './form-config-fetcher.js';
@@ -34,6 +34,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._formFieldsStyle = "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding-right--small ez-padding-bottom--medium sc-snk-form-config";
     this._fieldsAvailableStyle = "ez-col ez-col--sd-12 ez-col--tb-12 ez-margin-bottom--medium ez-margin-right--medium sc-snk-form-config";
     this._fieldFloatingStyle = "form-config__field-config--dragged";
+    this._sortableTimer = 100;
     this._formConfigOptions = [];
     this._fieldConfigSelected = undefined;
     this._layoutFormConfig = undefined;
@@ -48,20 +49,27 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.messagesBuilder = undefined;
   }
   observeConfigManager() {
-    this.loadConfig();
+    this.loadConfig(this._sortableTimer);
   }
-  loadFields() {
+  loadFields(updateTimer = 0) {
     this._layoutFormConfig = [];
-    this.buildFields();
+    if (updateTimer > 0) {
+      setTimeout(() => {
+        this.buildFields();
+      }, updateTimer);
+    }
+    else {
+      this.buildFields();
+    }
   }
   buildFields() {
     this.buildFormConfig();
     this.buildAvailableFields();
   }
-  loadFormConfig() {
+  loadFormConfig(updateTimer) {
     var _a;
     this._formConfig = this.getConfig();
-    this.loadFields();
+    this.loadFields(updateTimer);
     this.controlFieldConfig();
     if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
       this._filterFieldsAvailable.value = "";
@@ -104,12 +112,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   resetChangeConfig() {
-    this.loadFormConfig();
+    this.loadFormConfig(this._sortableTimer);
     this.clearTempGroups();
   }
   resetChangeOptionConfig() {
     this._formConfigChanged = false;
-    this.loadConfig();
+    this.loadConfig(this._sortableTimer);
     this.clearTempGroups();
   }
   getTabsToSave() {
@@ -324,7 +332,9 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       && oldContainer.id === newContainer.id) {
       evt.cancel();
       this._fieldsAvailable = [];
-      this.buildAvailableFields();
+      setTimeout(() => {
+        this.buildAvailableFields();
+      }, this._sortableTimer);
       return true;
     }
     return false;
@@ -367,7 +377,11 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         if (isNewGroup) {
           this.clearTempGroups(true);
         }
-        this.updateFieldsToSave();
+        const sortableTimer = oldContainer.dataset.groupName !== newContainer.dataset.groupName
+          || (newContainer.id === CONTAINER_ID.withoutGroup && oldContainer.id === CONTAINER_ID.fieldsAvailable)
+          ? this._sortableTimer
+          : 0;
+        this.updateFieldsToSave(sortableTimer);
       }, this._renderTimer);
       return true;
     }
@@ -397,12 +411,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return;
     }
   }
-  updateFieldsToSave() {
+  updateFieldsToSave(updateTimer = 0) {
     const fields = this.getFieldsToSave();
     if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
       this._formConfig.fields = fields;
     }
-    this.loadFields();
+    this.loadFields(updateTimer);
     this._formConfigChanged = true;
   }
   controlSortableField() {
@@ -432,7 +446,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   controlStopDraggingGroup(evt) {
     if (evt.data.newIndex !== evt.data.oldIndex) {
       setTimeout(() => {
-        this.updateFieldsToSave();
+        this.updateFieldsToSave(this._sortableTimer);
       }, this._renderTimer);
     }
   }
@@ -505,7 +519,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
     if (tabs.length > 0) {
       this._formConfig.tabs = tabs;
-      this.loadFields();
+      this.loadFields(this._sortableTimer);
       this.controlFieldConfig();
       this._formConfigChanged = true;
     }
@@ -529,13 +543,13 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (config != undefined) {
       this._formConfig = config;
       this._tabSelected = 1;
-      this.loadFields();
+      this.loadFields(this._sortableTimer);
       this.controlFieldConfig();
       this.clearTempGroups();
     }
   }
-  loadConfig() {
-    this.loadFormConfig();
+  loadConfig(updateTimer = 0) {
+    this.loadFormConfig(updateTimer);
     this.loadUserConfig();
   }
   addNewGroup() {
@@ -576,7 +590,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
     }
     else {
-      this.updateFieldsToSave();
+      this.updateFieldsToSave(this._sortableTimer);
     }
   }
   checkGroupExists(newLabel, indexGroup, isTempGroup = false) {
@@ -622,7 +636,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         field.group = newLabel;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -836,14 +850,14 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._formConfigChanged = true;
     this.resetSortables();
   }
-  controlRemoveFieldConfig(fieldConfig) {
+  controlRemoveFieldConfig(fieldConfig, updateTimer) {
     var _a;
     this._formConfigChanged = false;
     if (fieldConfig == undefined) {
       return;
     }
     this._formConfig.fields = (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.filter((field) => field.name !== fieldConfig.name);
-    this.loadFields();
+    this.loadFields(updateTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
     this.resetSortables();
@@ -852,14 +866,14 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.controlSortableField();
     this.controlSortableGroup();
   }
-  handleFieldConfigChange(evt) {
+  handleFieldConfigChange(evt, updateTimer = 0) {
     const { field: fieldConfig, type: actionType } = evt.detail;
     if (actionType === ACTION_CONFIG.configuration) {
       this.controlFieldConfig(fieldConfig);
       return;
     }
     if (actionType === ACTION_CONFIG.remove) {
-      this.controlRemoveFieldConfig(fieldConfig);
+      this.controlRemoveFieldConfig(fieldConfig, updateTimer);
       return;
     }
     if (actionType === ACTION_CONFIG.add) {
@@ -880,7 +894,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         tab.label = newLabel;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -900,7 +914,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this._formConfig.tabs = (_a = this._formConfig.tabs) === null || _a === void 0 ? void 0 : _a.filter((tab) => {
           return tab.label !== tabSelected.detail.label;
         });
-        this.loadFields();
+        this.loadFields(this._sortableTimer);
         this.controlFieldConfig();
         this._formConfigChanged = true;
       }
@@ -913,7 +927,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         tab.visible = !tab.visible;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -938,6 +952,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.controlSortableField();
     this.controlSortableGroup();
   }
+  async componentWillRender() {
+    if (this.messagesBuilder == undefined) {
+      const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      this.messagesBuilder = application.messagesBuilder;
+    }
+  }
   componentWillLoad() {
     this.loadConfig();
   }