@sankhyalabs/sankhyablocks 5.5.0 → 5.7.0

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

@@ -1,4 +1,121 @@
-import { S as SnkFilterModal$1, d as defineCustomElement$1 } from './snk-filter-modal2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { ModalAction } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
+import { F as FilterType, d as defineCustomElement$2 } from './snk-filter-modal-item2.js';
+import { F as FilterItemType } from './filter-item-type.enum.js';
+
+const snkFilterModalCss = "ez-modal{--ez-modal-content-padding:24px 12px}.snk-filter__modal-container{width:344px;max-width:344px;overflow:hidden}.snk-filter__modal-content{display:flex;flex-direction:column;gap:12px;max-height:760px;overflow-x:clip;overflow-y:auto;padding-right:4px}.snk-filter__modal-content::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}.snk-filter__modal-collapsible-box{border:1px solid #DCE0E8;border-radius:var(--border--radius-medium)}";
+
+const SnkFilterModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.getMessage = undefined;
+    this.filters = undefined;
+    this.applyFilters = undefined;
+    this.clearAll = undefined;
+    this.closeModal = undefined;
+  }
+  getCustomMessage(key, params) {
+    var _a;
+    return (_a = this.getMessage) === null || _a === void 0 ? void 0 : _a.call(this, `snkFilterBar.filterModal.${key}`, params);
+  }
+  handleClearAll() {
+    const cleanedFilters = this.clearAll(this.filters);
+    this.filters = cleanedFilters;
+  }
+  modalActionListener(evt) {
+    const modalAction = evt.detail;
+    switch (modalAction) {
+      case ModalAction.CANCEL:
+        this.handleClearAll();
+        break;
+      case ModalAction.OK:
+        this.applyFilters(this.filters);
+      case ModalAction.CLOSE:
+        this.closeModal();
+    }
+  }
+  handleFilterChange(filterConfig) {
+    this.filters = this.filters.map(filter => filter.id === filterConfig.id ? filterConfig : filter);
+  }
+  handleClearFilters(filterList) {
+    this.filters = this.filters.map(filter => filterList.includes(filter) ? (Object.assign(Object.assign({}, filter), { value: undefined })) : filter);
+  }
+  renderFilterItem(filterItem, fullRow) {
+    return (h("snk-filter-modal-item", { class: fullRow ? 'ez-col ez-col--sd-12' : 'ez-col ez-col--sd-6 ez-padding--small', filterItem: filterItem, onFilterChange: (event) => this.handleFilterChange(event.detail) }));
+  }
+  mountFiltersLines(filters) {
+    const MAX_LINE_LENGTH = 2;
+    let currentLine = 0;
+    let forceAddCurrent = false;
+    const filtersLines = {};
+    for (let curr = 0; curr < filters.length; curr++) {
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      const item = filters[curr];
+      const isLast = curr === filters.length - 1;
+      const currentItemMatch = [FilterItemType.TEXT, FilterItemType.NUMBER].includes(item.type);
+      const nextItemMatch = isLast ? false : [FilterItemType.TEXT, FilterItemType.NUMBER].includes(filters[curr + 1].type);
+      if ((currentItemMatch && nextItemMatch) || forceAddCurrent) {
+        filtersLines[currentLine].push(item);
+        forceAddCurrent = filtersLines[currentLine].length < MAX_LINE_LENGTH;
+        if (filtersLines[currentLine].length === MAX_LINE_LENGTH)
+          ++currentLine;
+        continue;
+      }
+      filtersLines[currentLine] = filtersLines[currentLine] || [];
+      filtersLines[currentLine].push(item);
+      ++currentLine;
+    }
+    return Object.values(filtersLines);
+  }
+  renderFilterLine(filters) {
+    const fullLine = filters.length === 1;
+    return (h("div", { class: "ez-row" }, filters.map((filter) => this.renderFilterItem(filter, fullLine))));
+  }
+  renderCollapsibleFilterBox(label, listItems) {
+    if (!listItems.length)
+      return null;
+    const appliedFilters = listItems.filter(filterItem => !!filterItem.value).length;
+    const lines = this.mountFiltersLines(listItems);
+    return (h("ez-collapsible-box", { className: "snk-filter__modal-collapsible-box ez-padding--medium", headerSize: "medium", value: true, label: label }, !!appliedFilters && (h("ez-badge", { className: "ez-badge--primary-subtle", slot: "rightSlot", label: appliedFilters })), lines.map(this.renderFilterLine.bind(this)), h("div", { class: "ez-flex ez-flex--justify-end grow" }, h("ez-button", { className: "ez-button--tertiary", size: "medium", label: "Limpar", onClick: () => this.handleClearFilters(listItems) }))));
+  }
+  componentWillRender() {
+    this._modalTitle = this.getCustomMessage('title');
+    this._okButtonLabel = this.getCustomMessage('okButtonLabel');
+    this._cancelButtonLabel = this.getCustomMessage('cancelButtonLabel');
+  }
+  render() {
+    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" }, this.renderCollapsibleFilterBox(this.getCustomMessage('customFilters'), customFilters), this.renderCollapsibleFilterBox(this.getCustomMessage('quickFilters'), quickFilters), otherFilters.map(filter => this.renderCollapsibleFilterBox(filter.label, [filter])))));
+  }
+  static get style() { return snkFilterModalCss; }
+}, [0, "snk-filter-modal", {
+    "getMessage": [16],
+    "filters": [1040],
+    "applyFilters": [16],
+    "clearAll": [16],
+    "closeModal": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-filter-modal", "snk-filter-modal-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-filter-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFilterModal$1);
+      }
+      break;
+    case "snk-filter-modal-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
 
 const SnkFilterModal = SnkFilterModal$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
@@ -6,6 +6,7 @@ const SnkFilterMultiSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   constructor() {
     super();
     this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.value = undefined;
     this.config = undefined;
   }
@@ -14,6 +15,7 @@ const SnkFilterMultiSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
    */
   ezChangeListener(evt) {
     this.value = evt.detail.value;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-multi-select

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
@@ -6,6 +6,7 @@ const SnkFilterPeriod = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -14,6 +15,7 @@ const SnkFilterPeriod = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   /**
    * Exibe o componente snk-filter-number

package/dist/components/snk-filter-param-config.js

@@ -1,276 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { StringUtils, DataType, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
-import { ModalAction } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
-import { F as FilterOperand, a as FilterConfigType, b as FilterEntities, c as FilterUserConfigTypes } from './index2.js';
-
-class PersonalizedFilterUtils {
-  /**
-   * Cria uma expressão de filtro a partir de um IExpressionItem.
-   * @param expressionItem - Objeto com os parâmetros necessários para montar a expressão.
-   * @returns Retorna a expressão de filtro.
-   */
-  static buildFilterExpression(expressionItem) {
-    if (expressionItem == undefined) {
-      return;
-    }
-    const value = this.buildVariableParameterValue(expressionItem);
-    let expression = expressionItem.expression || "";
-    switch (expressionItem.operand) {
-      case FilterOperand.IN:
-        expression += ` ${expressionItem.operand} (${value})`;
-        break;
-      case FilterOperand.NULL:
-      case FilterOperand.NOT_NULL:
-        expression += ` IS ${value}`;
-        break;
-      case FilterOperand.LIKE:
-        expression += ` LIKE '%${value}%'`;
-        break;
-      case FilterOperand.START_WITH:
-        expression += ` LIKE '${value}%'`;
-        break;
-      case FilterOperand.FINISHED_WITH:
-        expression += ` LIKE '%${value}'`;
-        break;
-      default:
-        expression += ` ${expressionItem.operand} ${value}`;
-    }
-    return expression;
-  }
-  /**
-   * Obtém o valor do parâmetro a partir de um IExpressionItem.
-   * @param expressionItem - Objeto com os parâmetros necessários para montar a expressão.
-   * @returns Retorna o valor do parâmetro.
-   */
-  static buildVariableParameterValue(expressionItem) {
-    if (expressionItem == undefined) {
-      return;
-    }
-    if (expressionItem.systemConfig != undefined) {
-      const systemConfig = expressionItem.systemConfig;
-      return `?:{entidade=${systemConfig.entity || ""};campo=${systemConfig.fieldName || ""}}`;
-    }
-    if (expressionItem.userConfig != undefined) {
-      const userConfig = expressionItem.userConfig;
-      return `?:{desc=${userConfig.description || ""};tipo=${userConfig.type || ""}}`;
-    }
-    return `?:{entidade=${expressionItem.entityName || ""};campo=${expressionItem.fieldName || ""}}`;
-  }
-}
-
-const snkFilterParamConfigCss = ".sc-snk-filter-param-config-h{--snk-filter-param-config__expression--color:var(--title--primary, #2b3a54);display:flex;position:relative}.snk-filter-param-config__expression.sc-snk-filter-param-config{--text-area__input--disabled--color:var(--snk-filter-param-config__expression--color)}";
-
-const SnkFilterParamConfig$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this._opened = false;
-    this._configType = FilterConfigType.SYSTEM_CONFIG;
-    this._expressionItem = undefined;
-    this._informedInstance = false;
-    this._canSave = false;
-    this.messagesBuilder = undefined;
-  }
-  open(expressionItem) {
-    this._opened = true;
-    this._expressionItem = expressionItem;
-    this.loadValues();
-    return new Promise(accept => {
-      this._promiseResolver = accept;
-    });
-  }
-  close() {
-    this._opened = false;
-    return new Promise(accept => {
-      this._promiseResolver = accept;
-    });
-  }
-  /**
-   * 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:
-   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
-   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-filter-param-config.msg.ts"
-   */
-  getMessage(key, params) {
-    return this.messagesBuilder.getMessage(key, params);
-  }
-  getConfigValue(configName, inputName, inputAlias = "") {
-    var _a, _b, _c;
-    return ((_b = (_a = this._expressionItem) === null || _a === void 0 ? void 0 : _a[configName]) === null || _b === void 0 ? void 0 : _b[inputName])
-      || ((_c = this._expressionItem) === null || _c === void 0 ? void 0 : _c[inputAlias || inputName]);
-  }
-  loadValues() {
-    var _a;
-    const entityName = this.getConfigValue("systemConfig", "entity", "entityName");
-    const fieldName = this.getConfigValue("systemConfig", "fieldName");
-    const description = this.getConfigValue("userConfig", "description");
-    const type = this.getConfigValue("userConfig", "type");
-    if (((_a = this._expressionItem) === null || _a === void 0 ? void 0 : _a.userConfig) != undefined) {
-      this._configType = FilterConfigType.USER_CONFIG;
-    }
-    else {
-      this._configType = FilterConfigType.SYSTEM_CONFIG;
-    }
-    if (!StringUtils.isEmpty(entityName) && !StringUtils.isEmpty(fieldName)) {
-      this._instanceElement.value = { value: entityName, label: "" };
-      this._fieldElement.value = { value: fieldName, label: "" };
-    }
-    if (!StringUtils.isEmpty(description) && !StringUtils.isEmpty(type)) {
-      this._descriptionElement.value = description;
-      this._typeElement.value = type;
-    }
-    this.buildFilterExpression();
-  }
-  changeDefinitionUsed(option) {
-    this._configType = option !== null && option !== void 0 ? option : FilterConfigType.SYSTEM_CONFIG;
-    if (this._configType === FilterConfigType.SYSTEM_CONFIG) {
-      const entityName = this.getConfigValue("systemConfig", "entity", "entityName");
-      const fieldName = this.getConfigValue("systemConfig", "fieldName");
-      this._instanceElement.value = this._instanceElement.value || { value: entityName, label: "" };
-      this._fieldElement.value = this._fieldElement.value || { value: fieldName, label: "" };
-    }
-    else if (this._configType === FilterConfigType.USER_CONFIG) {
-      const description = this.getConfigValue("userConfig", "description");
-      const type = this.getConfigValue("userConfig", "type");
-      this._descriptionElement.value = this._descriptionElement.value || description;
-      this._typeElement.value = this._typeElement.value || type;
-    }
-    this.buildFilterExpression();
-  }
-  getTypeValue() {
-    var _a;
-    const value = (_a = this._typeElement) === null || _a === void 0 ? void 0 : _a.value;
-    return ((value === null || value === void 0 ? void 0 : value.value) || value);
-  }
-  getExpressionValues() {
-    var _a, _b, _c, _d, _e;
-    let systemConfig;
-    let userConfig;
-    if (this._configType === FilterConfigType.SYSTEM_CONFIG) {
-      const entity = (_b = (_a = this._instanceElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.value;
-      const fieldName = (_d = (_c = this._fieldElement) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.value;
-      systemConfig = { entity, fieldName };
-    }
-    else if (this._configType === FilterConfigType.USER_CONFIG) {
-      const description = (_e = this._descriptionElement) === null || _e === void 0 ? void 0 : _e.value;
-      const type = this.getTypeValue();
-      userConfig = { description, type };
-    }
-    return Object.assign(Object.assign(Object.assign({}, this._expressionItem), { systemConfig }), { userConfig });
-  }
-  isEnabled(value) {
-    return this._configType === value;
-  }
-  isInformedInstance() {
-    var _a, _b;
-    return !StringUtils.isEmpty((_b = (_a = this._instanceElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.value);
-  }
-  save() {
-    var _a;
-    this._expressionItem = Object.assign(Object.assign({}, this.getExpressionValues()), { expression: (_a = this._expressionElement) === null || _a === void 0 ? void 0 : _a.value });
-    this._promiseResolver(this._expressionItem);
-    this._opened = false;
-  }
-  buildFilterExpression() {
-    var _a;
-    this._informedInstance = this.isInformedInstance();
-    const expression = PersonalizedFilterUtils.buildFilterExpression(this.getExpressionValues());
-    this._expressionElement.value = expression || ((_a = this._expressionItem) === null || _a === void 0 ? void 0 : _a.expression);
-    this._canSave = this.getCanSave();
-  }
-  handleChangeInstance() {
-    this._informedInstance = this.isInformedInstance();
-    if (this._fieldElement != undefined && !StringUtils.isEmpty(this._fieldElement.value)) {
-      this._fieldElement.value = null;
-    }
-    this.buildFilterExpression();
-  }
-  getInstanceCriteria() {
-    var _a, _b;
-    const value = (_b = (_a = this._instanceElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.value;
-    return {
-      expression: "this.NOMETAB = (SELECT NOMETAB FROM TDDINS WHERE NOMEINSTANCIA = ?)",
-      params: [
-        {
-          name: "NOMEINSTANCIA",
-          dataType: DataType.TEXT,
-          value
-        }
-      ]
-    };
-  }
-  onSearch({ mode, argument }, entity) {
-    if (this._application == undefined) {
-      return;
-    }
-    const isField = entity === FilterEntities.FIELD;
-    const criteria = isField ? this.getInstanceCriteria() : undefined;
-    const messageKey = `snkFilterParamConfig.label${isField ? "Field" : "Instance"}`;
-    const entityDescription = this.getMessage(messageKey);
-    const searchOptions = {
-      descriptionFieldName: isField ? "DESCRCAMPO" : "DESCRINSTANCIA",
-      codeFieldName: isField ? "NOMECAMPO" : "NOMEINSTANCIA",
-      showInactives: false
-    };
-    const options = {
-      entity,
-      entityDescription,
-      criteria,
-      searchOptions
-    };
-    return this._application.executePreparedSearch(mode, argument, options);
-  }
-  getElementID(sufix) {
-    return {
-      [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)
-    };
-  }
-  getCanSave() {
-    var _a;
-    if (this._configType === FilterConfigType.USER_CONFIG) {
-      const description = (_a = this._descriptionElement) === null || _a === void 0 ? void 0 : _a.value;
-      const type = this.getTypeValue();
-      return !StringUtils.isEmpty(description) && !StringUtils.isEmpty(type);
-    }
-    return true;
-  }
-  componentWillLoad() {
-    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-  }
-  render() {
-    ElementIDUtils.addIDInfoIfNotExists(this._element, 'snkFilterParamConfig');
-    return (h("ez-popup", Object.assign({ useHeader: false, size: "small", heightMode: "auto", opened: this._opened }, this.getElementID("popup")), h("ez-modal-container", Object.assign({ onEzModalAction: (evt) => {
-        if (evt.detail === ModalAction.CLOSE)
-          this.close();
-      }, modalTitle: this.getMessage("snkFilterParamConfig.modalTitle") }, this.getElementID("modalContainer")), h("div", { class: "ez-flex" }, h("div", { class: "ez-col ez-col--sd-6 ez-flex--column" }, h("ez-radio-button", Object.assign({ value: this._configType, onEzChange: (evt) => this.changeDefinitionUsed(evt.detail) }, this.getElementID("systemConfigOption")), h("ez-radio-button-option", { label: this.getMessage("snkFilterParamConfig.labelSystemConfig"), value: FilterConfigType.SYSTEM_CONFIG })), h("ez-search", Object.assign({ ref: (ref) => this._instanceElement = ref, label: this.getMessage("snkFilterParamConfig.labelInstance"), enabled: this.isEnabled(FilterConfigType.SYSTEM_CONFIG), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, onEzChange: () => this.handleChangeInstance(), optionLoader: (searchArgument) => this.onSearch(searchArgument, FilterEntities.INSTANCE) }, this.getElementID("configFindEntity"))), h("ez-search", Object.assign({ ref: (ref) => this._fieldElement = ref, label: this.getMessage("snkFilterParamConfig.labelField"), enabled: this.isEnabled(FilterConfigType.SYSTEM_CONFIG) && this._informedInstance, suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, onEzChange: () => this.buildFilterExpression(), optionLoader: (searchArgument) => this.onSearch(searchArgument, FilterEntities.FIELD) }, this.getElementID("configFindField")))), h("div", { class: "ez-flex ez-padding--medium" }, h("hr", { class: "ez-divider-vertical" })), h("div", { class: "ez-col ez-col--sd-6 ez-flex--column" }, h("ez-radio-button", Object.assign({ value: this._configType, onEzChange: (evt) => this.changeDefinitionUsed(evt.detail) }, this.getElementID("userConfigOption")), h("ez-radio-button-option", { label: this.getMessage("snkFilterParamConfig.labelUserConfig"), value: FilterConfigType.USER_CONFIG })), h("ez-text-input", Object.assign({ ref: (ref) => this._descriptionElement = ref, label: this.getMessage("snkFilterParamConfig.labelDescription"), enabled: this.isEnabled(FilterConfigType.USER_CONFIG), onEzChange: () => this.buildFilterExpression() }, this.getElementID("configParamLabel"))), h("ez-combo-box", Object.assign({ ref: (ref) => this._typeElement = ref, label: this.getMessage("snkFilterParamConfig.labelType"), enabled: this.isEnabled(FilterConfigType.USER_CONFIG), suppressEmptyOption: true, onEzChange: () => this.buildFilterExpression() }, this.getElementID("configParamType")), Object.keys(FilterUserConfigTypes).map((configType) => {
-      return (h("option", { value: FilterUserConfigTypes[configType] }, this.getMessage(`snkFilterParamConfig.labelTypeValues.${configType.toLowerCase()}`)));
-    })))), h("ez-text-area", Object.assign({ ref: (ref) => this._expressionElement = ref, class: "snk-filter-param-config__expression", label: this.getMessage("snkFilterParamConfig.labelExpression"), enabled: false }, this.getElementID("presentationExpression"))), h("div", { class: "ez-col ez-col--sd-12 ez-flex--justify-end ez-margin-vertical--small" }, h("ez-button", Object.assign({ class: "ez-padding-right--medium", label: this.getMessage("snkFilterParamConfig.labelCancel"), onClick: () => this.close() }, this.getElementID("cancelEditParam"))), h("ez-button", Object.assign({ class: "ez-button--primary", label: this.getMessage("snkFilterParamConfig.labelSave"), onClick: () => this.save(), enabled: this._canSave }, this.getElementID("saveEditParam")))))));
-  }
-  get _element() { return this; }
-  static get style() { return snkFilterParamConfigCss; }
-}, [2, "snk-filter-param-config", {
-    "messagesBuilder": [1040],
-    "_opened": [32],
-    "_configType": [32],
-    "_expressionItem": [32],
-    "_informedInstance": [32],
-    "_canSave": [32],
-    "open": [64],
-    "close": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["snk-filter-param-config"];
-  components.forEach(tagName => { switch (tagName) {
-    case "snk-filter-param-config":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SnkFilterParamConfig$1);
-      }
-      break;
-  } });
-}
+import { S as SnkFilterParamConfig$1, d as defineCustomElement$1 } from './snk-filter-param-config2.js';
 
 const SnkFilterParamConfig = SnkFilterParamConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/snk-filter-param-config.entry.js → components/snk-filter-param-config2.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, g as getElement } from './index-cfd4bb13.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { StringUtils, DataType, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import { ModalAction } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
-import { F as FilterOperand, c as FilterConfigType, d as FilterEntities, e as FilterUserConfigTypes } from './index-6519a79e.js';
+import { a as FilterOperand, d as FilterConfigType, e as FilterEntities, F as FilterUserConfigTypes } from './index2.js';
 
 class PersonalizedFilterUtils {
   /**
@@ -58,11 +58,12 @@ class PersonalizedFilterUtils {
   }
 }
 
-const snkFilterParamConfigCss = ".sc-snk-filter-param-config-h{--snk-filter-param-config__expression--color:var(--title--primary, #2b3a54);display:flex;position:relative}.snk-filter-param-config__expression.sc-snk-filter-param-config{--text-area__input--disabled--color:var(--snk-filter-param-config__expression--color)}";
+const snkFilterParamConfigCss = ":host{--snk-filter-param-config__expression--color:var(--title--primary, #2b3a54);display:flex;position:relative}.snk-filter-param-config__expression{--text-area__input--disabled--color:var(--snk-filter-param-config__expression--color)}";
 
-const SnkFilterParamConfig = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const SnkFilterParamConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this._opened = false;
     this._configType = FilterConfigType.SYSTEM_CONFIG;
     this._expressionItem = undefined;
@@ -91,7 +92,8 @@ const SnkFilterParamConfig = class {
    * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-filter-param-config.msg.ts"
    */
   getMessage(key, params) {
-    return this.messagesBuilder.getMessage(key, params);
+    var _a;
+    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
   }
   getConfigValue(configName, inputName, inputAlias = "") {
     var _a, _b, _c;
@@ -245,8 +247,30 @@ const SnkFilterParamConfig = class {
       return (h("option", { value: FilterUserConfigTypes[configType] }, this.getMessage(`snkFilterParamConfig.labelTypeValues.${configType.toLowerCase()}`)));
     })))), h("ez-text-area", Object.assign({ ref: (ref) => this._expressionElement = ref, class: "snk-filter-param-config__expression", label: this.getMessage("snkFilterParamConfig.labelExpression"), enabled: false }, this.getElementID("presentationExpression"))), h("div", { class: "ez-col ez-col--sd-12 ez-flex--justify-end ez-margin-vertical--small" }, h("ez-button", Object.assign({ class: "ez-padding-right--medium", label: this.getMessage("snkFilterParamConfig.labelCancel"), onClick: () => this.close() }, this.getElementID("cancelEditParam"))), h("ez-button", Object.assign({ class: "ez-button--primary", label: this.getMessage("snkFilterParamConfig.labelSave"), onClick: () => this.save(), enabled: this._canSave }, this.getElementID("saveEditParam")))))));
   }
-  get _element() { return getElement(this); }
-};
-SnkFilterParamConfig.style = snkFilterParamConfigCss;
+  get _element() { return this; }
+  static get style() { return snkFilterParamConfigCss; }
+}, [0, "snk-filter-param-config", {
+    "messagesBuilder": [1040],
+    "_opened": [32],
+    "_configType": [32],
+    "_expressionItem": [32],
+    "_informedInstance": [32],
+    "_canSave": [32],
+    "open": [64],
+    "close": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-filter-param-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-filter-param-config":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFilterParamConfig);
+      }
+      break;
+  } });
+}
 
-export { SnkFilterParamConfig as snk_filter_param_config };
+export { SnkFilterParamConfig as S, defineCustomElement as d };

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

@@ -1,13 +1,16 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
+import { E as EPresentationMode } from './presentationMode.js';
 
 const SnkFilterPeriod$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
+    this.presentationMode = EPresentationMode.CHIP;
   }
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-period
@@ -16,6 +19,7 @@ const SnkFilterPeriod$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const start = this._startDate.value;
     const end = this._endDate.value;
     this.value = (start || end ? { start, end } : undefined);
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {
@@ -40,16 +44,22 @@ const SnkFilterPeriod$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   async show() {
     this._startDate.setFocus();
   }
+  buildLabel() {
+    if (this.presentationMode === EPresentationMode.CHIP) {
+      return h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9");
+    }
+  }
   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`, label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9"), h("ez-date-input", { id: `${this.config.id}_end`, label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
+    return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding--small' : '', label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
   }
   get _element() { return this; }
 }, [0, "snk-filter-period", {
     "config": [16],
     "value": [8],
+    "presentationMode": [2, "presentation-mode"],
     "show": [64]
   }, [[0, "ezChange", "ezChangeListener"]]]);
 function defineCustomElement$1() {

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { ElementIDUtils, UserInterface, ApplicationContext } from '@sankhyalabs/core';
 import { convertType } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
@@ -8,6 +8,7 @@ const SnkFilterPersonalized$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   constructor() {
     super();
     this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
     this.fix = undefined;
@@ -39,6 +40,7 @@ const SnkFilterPersonalized$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     if (this.value.filter(item => item != undefined).length == 0) {
       this.value = null;
     }
+    this.valueChanged.emit(this.value || []);
   }
   doSearch(mode, argument, param) {
     const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
@@ -6,6 +6,7 @@ const SnkFilterSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   constructor() {
     super();
     this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -14,6 +15,7 @@ const SnkFilterSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    */
   ezChangeListener(_evt) {
     this.value = this._searchInput.value;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {

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

@@ -1,10 +1,11 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
 const SnkFilterText$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.config = undefined;
     this.value = undefined;
   }
@@ -13,6 +14,7 @@ const SnkFilterText$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    */
   ezChangeListener(evt) {
     this.value = evt.detail;
+    this.valueChanged.emit(this.value);
   }
   componentDidLoad() {
     if (this._element) {