@sankhyalabs/sankhyablocks 9.2.0-dev.2 → 9.2.0-dev.21

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

@@ -7,37 +7,77 @@ export class SnkFilterPeriod {
     this._startDateLabel = 'Inicial';
     this._endDateLabel = 'Final';
     this._toLabel = 'até';
+    this.internalChange = {
+      start: false,
+      end: false
+    };
     this.config = undefined;
     this.getMessage = undefined;
-    this.value = undefined;
+    this.value = {
+      start: null,
+      end: null
+    };
     this.presentationMode = EPresentationMode.CHIP;
+    this.errorMessage = undefined;
+  }
+  configChanged(newValue, oldValue) {
+    if (this.internalChange.end) {
+      this.internalChange.end = false;
+      return;
+    }
+    if (this.internalChange.start) {
+      this.internalChange.start = false;
+      return;
+    }
+    if (newValue && (newValue.start !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.start) || newValue.end !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.end))) {
+      this.valueStart = this.parseDate(newValue.start);
+      this.valueEnd = this.parseDate(newValue.end);
+    }
+  }
+  ezChangeListener(event, field) {
+    this.errorMessage = undefined;
+    this.internalChange[field] = true;
+    this.value = Object.assign(Object.assign({}, (this.value || {})), { [field]: event.detail ? this.parseDate(event.detail) : null });
+    this.valueChanged.emit(this.value);
   }
   /**
-   * Emitido quando acontece a alteração de valor do componente snk-filter-period
+   * Define o foco no componente snk-filter-period.
    */
-  ezChangeListener() {
-    const start = this._startDate.value;
-    const end = this._endDate.value;
-    this.value = (start || end ? { start, end } : undefined);
-    this.valueChanged.emit(this.value);
+  async setFocus() {
+    this._startDate.setFocus();
+  }
+  /**
+   * Limpa o valor do componente restaurando o valor original da configuração.
+   */
+  async clearValue() {
+    this.value = this.config.value;
+    this.valueStart = this.getDate("start");
+    this.valueEnd = this.getDate("end");
   }
   componentDidLoad() {
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+      this._element.querySelectorAll('ez-date-input').forEach(input => {
+        const textInput = input.shadowRoot.querySelector('ez-text-input');
+        textInput.style.setProperty('--ez-text-input__min-width', '120px');
+      });
     }
   }
-  getDate(prop) {
-    const objValue = this.value ? this.value[prop] : null;
-    if (objValue instanceof Date) {
-      return objValue;
+  parseDate(date) {
+    if (date instanceof Date) {
+      return date;
     }
-    if (typeof objValue === "string") {
-      let date = new Date(objValue);
+    if (typeof date === "string") {
+      date = new Date(date);
       date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
       return date;
     }
     return null;
   }
+  getDate(prop) {
+    const objValue = this.value ? this.value[prop] : null;
+    return this.parseDate(objValue);
+  }
   /**
    * Exibe o componente snk-filter-period
    */
@@ -55,12 +95,14 @@ export class SnkFilterPeriod {
       this._endDateLabel = this.getMessage('snkFilterBar.labelEnd');
       this._toLabel = this.getMessage('snkFilterBar.labelTo');
     }
+    this.valueStart = this.getDate("start");
+    this.valueEnd = this.getDate("end");
   }
   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._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") })));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding-right--medium' : '', label: this._startDateLabel, ref: ref => this._startDate = ref, enabled: this.config.enabled, value: this.valueStart, errorMessage: this.errorMessage, onEzChange: (event) => this.ezChangeListener(event, 'start') }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, label: this._endDateLabel, ref: ref => this._endDate = ref, enabled: this.config.enabled, value: this.valueEnd, errorMessage: this.errorMessage, onEzChange: (event) => this.ezChangeListener(event, 'end') }))));
   }
   static get is() { return "snk-filter-period"; }
   static get properties() {
@@ -101,12 +143,16 @@ export class SnkFilterPeriod {
         }
       },
       "value": {
-        "type": "any",
-        "mutable": false,
+        "type": "unknown",
+        "mutable": true,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "Period",
+          "resolved": "Period",
+          "references": {
+            "Period": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -114,8 +160,7 @@ export class SnkFilterPeriod {
           "tags": [],
           "text": "Define o valor do componente snk-filter-period"
         },
-        "attribute": "value",
-        "reflect": false
+        "defaultValue": "{\n    start: null,\n    end: null\n  }"
       },
       "presentationMode": {
         "type": "number",
@@ -139,6 +184,23 @@ export class SnkFilterPeriod {
         "attribute": "presentation-mode",
         "reflect": false,
         "defaultValue": "EPresentationMode.CHIP"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para exibir mensagens de erro."
+        },
+        "attribute": "error-message",
+        "reflect": true
       }
     };
   }
@@ -162,6 +224,38 @@ export class SnkFilterPeriod {
   }
   static get methods() {
     return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Define o foco no componente snk-filter-period.",
+          "tags": []
+        }
+      },
+      "clearValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa o valor do componente restaurando o valor original da configura\u00E7\u00E3o.",
+          "tags": []
+        }
+      },
       "show": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -181,13 +275,10 @@ export class SnkFilterPeriod {
     };
   }
   static get elementRef() { return "_element"; }
-  static get listeners() {
+  static get watchers() {
     return [{
-        "name": "ezChange",
-        "method": "ezChangeListener",
-        "target": undefined,
-        "capture": false,
-        "passive": false
+        "propName": "value",
+        "methodName": "configChanged"
       }];
   }
 }

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

@@ -6,11 +6,13 @@ export class SnkFilterSearch {
     this._isSearchPlus = false;
     this.config = undefined;
     this.value = undefined;
+    this.errorMessage = undefined;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-search
    */
   async ezChangeListener(_evt) {
+    this.errorMessage = undefined;
     if (this._isSearchPlus) {
       this.value = await this._searchInput.getValueAsync();
     }
@@ -37,16 +39,25 @@ export class SnkFilterSearch {
     });
   }
   /**
-   * Exibe o componente snk-filter-search
+   * Define o foco no componente snk-filter-search.
    */
-  async show() {
+  async setFocus() {
     this._searchInput.setFocus();
   }
+  /**
+   * Limpa o valor do componente restaurando o valor original da configuração.
+   */
+  async clearValue() {
+    this.value = this.config.value;
+    if (this._searchInput) {
+      this._searchInput.value = this.config.value;
+    }
+  }
   getInputItem() {
     var _a;
     this._isSearchPlus = ((_a = this.config.props) === null || _a === void 0 ? void 0 : _a["useSearchPlus"]) == true;
     const TagName = this._isSearchPlus ? "ez-search-plus" : "ez-search";
-    return (h(TagName, { id: this.config.id, suppressEmptyOption: true, value: this.config.value, label: this.config.label, ref: ref => this._searchInput = ref, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument, this._isSearchPlus) }));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h(TagName, { id: this.config.id, suppressEmptyOption: true, value: this.config.value, label: this.config.label, enabled: this.config.enabled, ref: ref => this._searchInput = ref, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument, this._isSearchPlus), errorMessage: this.errorMessage })));
   }
   render() {
     if (!this.config || this.config.type !== FilterItemType.SEARCH) {
@@ -96,6 +107,23 @@ export class SnkFilterSearch {
           "tags": [],
           "text": "Define o valor do componente snk-filter-search"
         }
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para exibir mensagens de erro."
+        },
+        "attribute": "error-message",
+        "reflect": true
       }
     };
   }
@@ -119,7 +147,23 @@ export class SnkFilterSearch {
   }
   static get methods() {
     return {
-      "show": {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Define o foco no componente snk-filter-search.",
+          "tags": []
+        }
+      },
+      "clearValue": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -131,7 +175,7 @@ export class SnkFilterSearch {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Exibe o componente snk-filter-search",
+          "text": "Limpa o valor do componente restaurando o valor original da configura\u00E7\u00E3o.",
           "tags": []
         }
       }

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

@@ -4,14 +4,31 @@ export class SnkFilterText {
   constructor() {
     this.config = undefined;
     this.value = undefined;
+    this.errorMessage = undefined;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-text.
    */
   ezChangeListener(evt) {
+    this.errorMessage = undefined;
     this.value = evt.detail;
     this.valueChanged.emit(this.value);
   }
+  /**
+   * Define o foco no componente snk-filter-text.
+   */
+  async setFocus() {
+    this._textInputElement.setFocus();
+  }
+  /**
+   * Limpa o valor do componente restaurando o valor original da configuração.
+   */
+  async clearValue() {
+    this.value = this.config.value;
+    if (this._textInputElement) {
+      this._textInputElement.value = this.config.value;
+    }
+  }
   componentDidLoad() {
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
@@ -22,7 +39,7 @@ export class SnkFilterText {
     if (!this.config) {
       return undefined;
     }
-    return (h("ez-text-input", { id: this.config.id, ref: ref => this._textInputElement = ref, label: this.config.label, value: this.config.value, mask: (_a = this.config) === null || _a === void 0 ? void 0 : _a.mask, cleanValueMask: true }));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("ez-text-input", { id: this.config.id, ref: ref => this._textInputElement = ref, value: this.config.value, mask: (_a = this.config) === null || _a === void 0 ? void 0 : _a.mask, enabled: this.config.enabled, cleanValueMask: true, errorMessage: this.errorMessage })));
   }
   static get is() { return "snk-filter-text"; }
   static get properties() {
@@ -63,6 +80,23 @@ export class SnkFilterText {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para exibir mensagens de erro."
+        },
+        "attribute": "error-message",
+        "reflect": true
       }
     };
   }
@@ -84,6 +118,42 @@ export class SnkFilterText {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Define o foco no componente snk-filter-text.",
+          "tags": []
+        }
+      },
+      "clearValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa o valor do componente restaurando o valor original da configura\u00E7\u00E3o.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{

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

@@ -1,21 +1,38 @@
-import { h, Host, Fragment } from '@stencil/core';
-import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
-import FilterItemType from './filter-item-type.enum';
 import { ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
-import { EPresentationMode } from './editors/enum/presentationMode';
+import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
+import { Fragment, h, Host } from '@stencil/core';
 import { PersonalizedFilterUtils } from '../../snk-personalized-filter/subcomponents/snk-filter-param-config/utils/PersonalizedFilterUtils';
+import { EPresentationMode } from './editors/enum/presentationMode';
+import FilterItemType from './filter-item-type.enum';
 export class SnkFilterDetail {
   constructor() {
     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;
@@ -87,7 +104,7 @@ export class SnkFilterDetail {
     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 })))));
   }
@@ -219,6 +236,24 @@ export class SnkFilterDetail {
         "attribute": "show-hard-fixed",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "removalBlocked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o filtro pode ser removido."
+        },
+        "attribute": "removal-blocked",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -247,7 +282,23 @@ export class SnkFilterDetail {
   }
   static get methods() {
     return {
-      "show": {
+      "setFocusField": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Define o foco no campo do editor.",
+          "tags": []
+        }
+      },
+      "clearValue": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -259,7 +310,7 @@ export class SnkFilterDetail {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Exibe o componente snk-filter-detail.",
+          "text": "",
           "tags": []
         }
       }

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

@@ -1,9 +1,10 @@
-import { ElementIDUtils, DateUtils, MaskFormatter } from '@sankhyalabs/core';
+import { DateUtils, ElementIDUtils, KeyboardManager, MaskFormatter } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
-import FilterItemType from './filter-item-type.enum';
 import { FilterNumberVariation } from './editors/enum/filterNumberVariation';
+import FilterItemType from './filter-item-type.enum';
 export class SnkFilterItem {
   constructor() {
+    this._keyboardManager = undefined;
     this.detailIsVisible = undefined;
     this.config = undefined;
     this.getMessage = undefined;
@@ -27,13 +28,15 @@ export class SnkFilterItem {
     if (open) {
       await ((_a = this._chipElement) === null || _a === void 0 ? void 0 : _a.setBlur());
       await this._popover.showUnder(this._chipElement);
+      await this._filterDetail.setFocusField();
     }
   }
   /**
    * Oculta os detalhes de um item da lista.
    */
   async hideDetail() {
-    await this._popover.hide();
+    var _a;
+    await ((_a = this._popover) === null || _a === void 0 ? void 0 : _a.hide());
   }
   getConfigChanges() {
     var _a;
@@ -53,12 +56,15 @@ export class SnkFilterItem {
       this.filterChange.emit(configChanged);
     }
     else {
-      this.togglePopover();
+      this.togglePopover(event);
     }
   }
   async togglePopover(event) {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     event === null || event === void 0 ? void 0 : event.stopPropagation();
+    if (this.config.enabled === false) {
+      return;
+    }
     if (this.detailIsVisible) {
       await this.hideDetail();
     }
@@ -207,8 +213,9 @@ export class SnkFilterItem {
     return undefined;
   }
   hasActiveElements(value) {
-    var _a, _b, _c;
-    return ((_c = (_b = ((_a = value === null || value === void 0 ? void 0 : value.elements) !== null && _a !== void 0 ? _a : value)) === null || _b === void 0 ? void 0 : _b.filter(val => val === null || val === void 0 ? void 0 : val.check)) === null || _c === void 0 ? void 0 : _c.length) > 0;
+    var _a;
+    const list = Array.isArray(value) ? value : value === null || value === void 0 ? void 0 : value.elements;
+    return ((_a = list === null || list === void 0 ? void 0 : list.filter((val) => val === null || val === void 0 ? void 0 : val.check)) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   hasActiveValue(config) {
     return (config.type !== FilterItemType.MULTI_LIST && config.value !== undefined) || this.hasActiveElements(config.value);
@@ -223,12 +230,67 @@ export class SnkFilterItem {
     }
     return this.hasActiveValue(this.config);
   }
-  handleVisibilityPopover(event) {
+  async handleVisibilityPopover(event) {
     this.detailIsVisible = event.detail;
+    if (!this.detailIsVisible) {
+      await this._filterDetail.clearValue();
+    }
+  }
+  getCustomMessage(key, params) {
+    var _a;
+    return (_a = this.getMessage) === null || _a === void 0 ? void 0 : _a.call(this, `snkFilterBar.filterModal.${key}`, params);
+  }
+  hasValue() {
+    if (this.config.type === FilterItemType.MULTI_LIST) {
+      return this.hasActiveElements(this.config.value);
+    }
+    return this.config.value !== undefined && this.config.value !== null;
+  }
+  getTooltipMessage() {
+    var _a, _b;
+    if (this.config.required && !this.hasValue()) {
+      return {
+        message: (_a = this.config.requiredMessage) !== null && _a !== void 0 ? _a : this.getCustomMessage('validations.requiredFilter'),
+        type: 'error'
+      };
+    }
+    if (this.config.enabled === false && this.config.disabledMessage) {
+      return { message: this.config.disabledMessage, type: 'warning' };
+    }
+    return {
+      message: (_b = this.config.defaultMessage) !== null && _b !== void 0 ? _b : this.getLabel(true),
+      type: 'default'
+    };
+  }
+  getTypeChip(type) {
+    switch (type) {
+      case 'default':
+        return 'secondary';
+      case 'warning':
+        return 'warning-light';
+      case 'error':
+        return 'error-light';
+      case 'success':
+        return 'success-light';
+      default:
+        return type;
+    }
+  }
+  initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager({ element: this._filterItemElement, propagate: true });
+    this._keyboardManager
+      .bind("Escape", () => this.hideDetail());
+  }
+  connectedCallback() {
+    this.initKeyboardManager();
+  }
+  disconnectedCallback() {
+    this._keyboardManager.unbindAllShortcutKeys();
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (h(Host, null, this.showChips && (h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip(), onClick: (event) => this.togglePopover(event), disableAutoUpdateValue: true, type: "secondary" }, leftIcon && (h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, slot: "leftIcon" })), h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), slot: "rightIcon", id: "removeFilter", onClick: (event) => this.clearFilter(event) }))), h("ez-popover-core", { ref: elem => this._popover = elem, onEzVisibilityChange: (event) => this.handleVisibilityPopover(event) }, h("snk-filter-detail", { key: this.config.id, config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small ez-elevation--16", "data-element-id": this._idSnkFilterDetail, showHardFixed: this.showChips }))));
+    const { type, message } = this.getTooltipMessage();
+    return (h(Host, null, this.showChips && (h("ez-tooltip", { id: this.config.id, message: message, type: type, active: !this.detailIsVisible, strategy: "fixed" }, h("ez-chip", { id: this.config.id, ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.getEnabledChip(), onClick: (event) => this.togglePopover(event), disableAutoUpdateValue: true, type: this.getTypeChip(type), enabled: this.config.enabled }, leftIcon && (h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, slot: "leftIcon" })), h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), slot: "rightIcon", id: "removeFilter", onClick: (event) => this.clearFilter(event) })))), h("ez-popover-core", { ref: elem => this._popover = elem, onEzVisibilityChange: (event) => this.handleVisibilityPopover(event) }, h("snk-filter-detail", { ref: ref => this._filterDetail = ref, key: this.config.id, config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small ez-elevation--16", "data-element-id": this._idSnkFilterDetail, showHardFixed: this.showChips && !this.config.required, removalBlocked: this.config.required }))));
   }
   static get is() { return "snk-filter-item"; }
   static get encapsulation() { return "scoped"; }