@sankhyalabs/sankhyablocks 5.4.3 → 5.6.0

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils, VersionUtils } from '@sankhyalabs/core';
 import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
 import { PresentationMode } from '../../lib';
 import { VIEW_MODE } from '../../lib/utils/constants';
@@ -12,6 +12,7 @@ export class SnkCrud {
   constructor() {
     this._dataUnit = undefined;
     this._dataState = undefined;
+    this.attachmentRegisterKey = undefined;
     this._currentViewMode = VIEW_MODE.GRID;
     this.configName = undefined;
     this.actionsList = undefined;
@@ -33,15 +34,17 @@ export class SnkCrud {
     this.setViewMode(VIEW_MODE.FORM);
   }
   async executeAction(act) {
-    if (act === TaskbarElement.GRID_MODE) {
-      this.setViewMode(VIEW_MODE.GRID);
-    }
-    else if (act === TaskbarElement.FORM_MODE || act === TaskbarElement.UPDATE) {
-      this.gridToForm(act !== TaskbarElement.UPDATE);
-    }
-    else if (act === TaskbarElement.CONFIGURATOR) {
-      this._snkConfigurator.open();
-    }
+    if (act === TaskbarElement.GRID_MODE)
+      return this.setViewMode(VIEW_MODE.GRID);
+    if (act === TaskbarElement.FORM_MODE || act === TaskbarElement.UPDATE)
+      return this.gridToForm(act !== TaskbarElement.UPDATE);
+    if (act === TaskbarElement.CONFIGURATOR)
+      return this._snkConfigurator.open();
+    if (act === "ATTACH")
+      return this.setViewMode(VIEW_MODE.ATTACHMENT);
+  }
+  handleAttachBack() {
+    this.setViewMode(VIEW_MODE.GRID);
   }
   setViewMode(viewMode) {
     this._viewStack.show(viewMode);
@@ -104,8 +107,15 @@ export class SnkCrud {
       this.messagesBuilder = this._snkDataUnit.messagesBuilder;
     }
   }
+  async canRenderAttachment() {
+    var _a, _b, _c, _d, _e;
+    const isValidVersion = VersionUtils.isRequiredVersion((_a = window.envContext) === null || _a === void 0 ? void 0 : _a.sysVersion, '4.22');
+    const recordCriteria = await ((_c = (_b = this._snkDataUnit) === null || _b === void 0 ? void 0 : _b.getSelectedRecordsIDsInfo) === null || _c === void 0 ? void 0 : _c.call(_b));
+    this.attachmentRegisterKey = (_d = recordCriteria.find(criteria => !!criteria.value)) === null || _d === void 0 ? void 0 : _d.value;
+    return isValidVersion && ((_e = this._dataState) === null || _e === void 0 ? void 0 : _e.selectedRecord) !== undefined;
+  }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form" }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
+    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form" }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, this.canRenderAttachment() && (h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.handleAttachBack.bind(this) }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -288,6 +298,7 @@ export class SnkCrud {
     return {
       "_dataUnit": {},
       "_dataState": {},
+      "attachmentRegisterKey": {},
       "_currentViewMode": {}
     };
   }

package/dist/collection/components/snk-data-unit/snk-data-unit.js

@@ -55,6 +55,7 @@ export class SnkDataUnit {
     this.dataUnit = undefined;
     this.beforeSave = undefined;
     this.afterSave = undefined;
+    this.useCancelConfirm = true;
   }
   observePageSize() {
     if (this.dataUnit) {
@@ -204,6 +205,8 @@ export class SnkDataUnit {
           }
           break;
         case Action.EDITION_CANCELED:
+          if (!this.useCancelConfirm)
+            return resolve(action);
           if (this.dataState.hasDirtyRecords) {
             const cancelConfirmation = this.getMessage("snkDataUnit.cancelConfirmation");
             if ((_a = action.payload) === null || _a === void 0 ? void 0 : _a.fromParent) {
@@ -563,6 +566,24 @@ export class SnkDataUnit {
           "tags": [],
           "text": "Executado ap\u00F3s a a\u00E7\u00E3o de salvar."
         }
+      },
+      "useCancelConfirm": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se ser\u00E1 usado mensagem de confirma\u00E7\u00E3o padr\u00E3o na tentativa de cancelar a edi\u00E7\u00E3o."
+        },
+        "attribute": "use-cancel-confirm",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -6,61 +6,63 @@ const SNK_CONTEXT_KEY = "__SNK__APPLICATION__";
 export class SnkFilterFieldSearch {
   constructor() {
     this._filterMetadataStorage = new Map();
-    this._dataSource = null;
+    this._currentMetadata = null;
     this._filterText = "";
     this._isLoading = false;
     this.searchable = true;
+    this.fieldsDataSource = undefined;
     this.breadcrumbItems = [];
     this.linkItems = [];
     this.fieldItems = [];
   }
   /**
-   * Define a fonte de dados do componente.
-   * @param {IFilterLink} currentLink - Link atual da entidade.
-   * @param {IFilterMetadata} fetchData - callback que executa a busca de dados.
-   * @throws {Error} - Quando os metadados não forem válidos.
-   * @throws {Error} - Quando o link atual não for do tipo link.
-  */
-  async setDataSource(currentLink, fetchData) {
+   * Realiza a abertura do componente e faz a primeira carga
+   * de dados.
+   * */
+  async show() {
     var _a;
+    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.show();
+    return this.loadData();
+  }
+  /**
+   * Filtra a fonte de dados do componente.
+   * @param {string} filterText - Texto para filtrar a fonte de dados.
+   * @throws {Error} - Quando o componente estiver com a propriedade searchable como true.
+  */
+  async applyFilter(filterText) {
+    if (this.searchable)
+      throw new Error('This method is not available when searchable is true');
+    this.handleFilterChange(filterText);
+  }
+  async loadData() {
     this._isLoading = true;
-    let metadata = this._filterMetadataStorage.get(currentLink.uri);
+    let metadata;
+    if (this._currentLink != undefined) {
+      metadata = this._filterMetadataStorage.get(this._currentLink.uri);
+    }
     if (!metadata) {
-      metadata = await fetchData(currentLink);
-      this._filterMetadataStorage.set(currentLink.uri, metadata);
+      metadata = await this.fieldsDataSource.fetchData(this._currentLink);
+      this._currentLink = metadata.currentLink;
+      this._filterMetadataStorage.set(this._currentLink.uri, metadata);
     }
     const { fields, links } = metadata || {};
     if (!Array.isArray(fields) || !Array.isArray(links))
       throw new Error('Invalid metadata');
-    if (currentLink.type !== SelectedItemType.LINK)
-      throw new Error('The current link must be a link type');
-    this._dataSource = metadata;
-    this._currentLink = currentLink;
+    this._currentMetadata = metadata;
     this.mapDataSourceToLinkItems();
     this.mapDataSourceToFieldItems();
     this._isLoading = false;
-    (_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.show();
     this._ezFieldList.scrollToTop();
     this._ezLinkList.scrollToTop();
   }
-  /**
-   * Filtra a fonte de dados do componente.
-   * @param {string} filterText - Texto para filtrar a fonte de dados.
-   * @throws {Error} - Quando o componente estiver com a propriedade searchable como true.
-  */
-  async filterDataSource(filterText) {
-    if (this.searchable)
-      throw new Error('This method is not available when searchable is true');
-    this.handleFilterChange(filterText);
-  }
   mapDataSourceToLinkItems() {
     var _a;
-    const { links } = this._dataSource;
+    const { links } = this._currentMetadata;
     const filterLinkLabelMessage = this.getMessage('snkFilterFieldSearch.linkLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
     const items = links.map(link => (Object.assign({ label: link.description }, link)));
     this.linkItems = [{
         group: filterLinkLabelMessage,
-        items
+        items,
       }];
     if (this.breadcrumbItems.length === 0) {
       this.breadcrumbItems = [Object.assign({ id: JSUtils.generateUUID(), label: this._currentLink.description }, this._currentLink)];
@@ -68,7 +70,7 @@ export class SnkFilterFieldSearch {
   }
   mapDataSourceToFieldItems() {
     var _a;
-    const { fields } = this._dataSource;
+    const { fields } = this._currentMetadata;
     const filterFieldLabelMessage = this.getMessage('snkFilterFieldSearch.fieldLabel', { link: (_a = this._currentLink) === null || _a === void 0 ? void 0 : _a.description });
     const filteredFields = fields.filter(field => {
       if (!this._currentLink)
@@ -100,7 +102,10 @@ export class SnkFilterFieldSearch {
     else {
       this.breadcrumbItems = [...this.breadcrumbItems, Object.assign({ id: JSUtils.generateUUID(), label: item.description }, item)];
     }
-    this.ezSelectFilterItem.emit(Object.assign(Object.assign({}, item), { type: SelectedItemType.LINK }));
+    const selectedItem = Object.assign(Object.assign({}, item), { type: SelectedItemType.LINK });
+    this._currentLink = selectedItem;
+    this.ezSelectFilterItem.emit(selectedItem);
+    this.loadData();
   }
   handleSelectField({ detail: item }) {
     var _a;
@@ -141,7 +146,7 @@ export class SnkFilterFieldSearch {
   render() {
     var _a;
     const searchLabelMessage = this.getMessage('snkFilterFieldSearch.searchLabel');
-    return (h("ez-popover", Object.assign({ ref: (el) => this._ezPopover = el, role: "dialog", "aria-hidden": !((_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.opened) }, this.getElementID('EzPopover')), h("div", { class: "snk-filter-field-search__container" }, h("header", { class: "snk-filter-field-search__header" }, this.searchable && !!searchLabelMessage && (h("ez-filter-input", Object.assign({ class: "snk-filter-field-search__input", label: searchLabelMessage, asyncSearch: true, canShowError: false, onEzSearching: (event) => this.handleFilterChange.bind(this)(event.detail), "aria-label": searchLabelMessage, "aria-required": "false", "aria-invalid": "false" }, this.getElementID('EzFilterInput')))), this.breadcrumbItems.length > 0 && (h("ez-breadcrumb", Object.assign({ items: this.breadcrumbItems, onSelectedItem: this.handleSelectLink.bind(this), role: "navigation", "aria-current": "step" }, this.getElementID('EzBreadcrumb')))), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })), h("section", { class: "snk-filter-field-search__section" }, h("ez-list", Object.assign({ ref: (el) => this._ezLinkList = el, class: "snk-filter-field-search__list", id: "filterLinkList", useGroups: true, dataSource: this.linkItems, onEzSelectItem: this.handleSelectLink.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ({ fieldCount }) => h("ez-badge", { label: fieldCount }), "aria-describedby": "filterLinkLabel" }, this.getElementID('EzListLinks'))), h("ez-list", Object.assign({ ref: (el) => this._ezFieldList = el, class: "snk-filter-field-search__list", id: "filterFieldList", useGroups: true, dataSource: this.fieldItems, onEzSelectItem: this.handleSelectField.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ListItem, "aria-describedby": "filterFieldLabel" }, this.getElementID('EzListFields')))))));
+    return (h("ez-popover", Object.assign({ ref: (el) => this._ezPopover = el, role: "dialog", overlayType: "none", "aria-hidden": !((_a = this._ezPopover) === null || _a === void 0 ? void 0 : _a.opened) }, this.getElementID('EzPopover')), h("div", { class: "snk-filter-field-search__container" }, h("header", { class: "snk-filter-field-search__header" }, this.searchable && !!searchLabelMessage && (h("ez-filter-input", Object.assign({ class: "snk-filter-field-search__input", label: searchLabelMessage, asyncSearch: true, canShowError: false, onEzSearching: (event) => this.handleFilterChange.bind(this)(event.detail), "aria-label": searchLabelMessage, "aria-required": "false", "aria-invalid": "false" }, this.getElementID('EzFilterInput')))), this.breadcrumbItems.length > 0 && (h("ez-breadcrumb", Object.assign({ items: this.breadcrumbItems, onSelectedItem: this.handleSelectLink.bind(this), role: "navigation", "aria-current": "step" }, this.getElementID('EzBreadcrumb')))), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })), h("section", { class: "snk-filter-field-search__section" }, h("ez-list", Object.assign({ ref: (el) => this._ezLinkList = el, class: "snk-filter-field-search__list", id: "filterLinkList", useGroups: true, dataSource: this.linkItems, onEzSelectItem: this.handleSelectLink.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ({ fieldCount }) => h("ez-badge", { label: fieldCount }), "aria-describedby": "filterLinkLabel" }, this.getElementID('EzListLinks'))), h("ez-list", Object.assign({ ref: (el) => this._ezFieldList = el, class: "snk-filter-field-search__list", id: "filterFieldList", useGroups: true, dataSource: this.fieldItems, onEzSelectItem: this.handleSelectField.bind(this), hoverFeedback: true, ezSelectable: true, itemSlotBuilder: ListItem, "aria-describedby": "filterFieldLabel" }, this.getElementID('EzListFields')))))));
   }
   static get is() { return "snk-filter-field-search"; }
   static get encapsulation() { return "scoped"; }
@@ -174,6 +179,26 @@ export class SnkFilterFieldSearch {
         "attribute": "searchable",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "fieldsDataSource": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FilterFieldsDataSource",
+          "resolved": "FilterFieldsDataSource",
+          "references": {
+            "FilterFieldsDataSource": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a fonte de dados que o componente vai utilizar\npara carregamento dos campos."
+        }
       }
     };
   }
@@ -216,55 +241,23 @@ export class SnkFilterFieldSearch {
   }
   static get methods() {
     return {
-      "setDataSource": {
+      "show": {
         "complexType": {
-          "signature": "(currentLink: IFilterLink, fetchData: DataFetcher) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "currentLink - Link atual da entidade."
-                }],
-              "text": "- Link atual da entidade."
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "fetchData - callback que executa a busca de dados."
-                }],
-              "text": "- callback que executa a busca de dados."
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "IFilterLink": {
-              "location": "import",
-              "path": "./interfaces"
-            },
-            "DataFetcher": {
-              "location": "import",
-              "path": "./interfaces"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Define a fonte de dados do componente.",
-          "tags": [{
-              "name": "param",
-              "text": "currentLink - Link atual da entidade."
-            }, {
-              "name": "param",
-              "text": "fetchData - callback que executa a busca de dados."
-            }, {
-              "name": "throws",
-              "text": "{Error} - Quando os metadados n\u00E3o forem v\u00E1lidos."
-            }, {
-              "name": "throws",
-              "text": "{Error} - Quando o link atual n\u00E3o for do tipo link."
-            }]
+          "text": "Realiza a abertura do componente e faz a primeira carga \nde dados.",
+          "tags": []
         }
       },
-      "filterDataSource": {
+      "applyFilter": {
         "complexType": {
           "signature": "(filterText: string) => Promise<void>",
           "parameters": [{

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

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
-import { ApplicationContext, DataType, ElementIDUtils } from '@sankhyalabs/core';
+import { ApplicationContext, DataType, ElementIDUtils, VersionUtils } from '@sankhyalabs/core';
 import { UserInterface } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { PresentationMode } from '../../lib/@types';
 import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
@@ -15,7 +16,7 @@ export class SnkGrid {
     });
     this._headerTaskbarProcessor = new TaskbarProcessor({
       "snkGridHeaderTaskbar.unselected": ["REFRESH", "DATA_EXPORTER"],
-      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH", "DATA_EXPORTER"],
+      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", this.getAttachAvailable(), "REFRESH", "DATA_EXPORTER"],
       "snkGridHeaderTaskbar.detail.unselected": ["REFRESH"],
       "snkGridHeaderTaskbar.detail.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
     });
@@ -56,6 +57,13 @@ export class SnkGrid {
   async setConfig(config) {
     this.setGridConfig(config);
   }
+  getAttachAvailable() {
+    var _a;
+    const isValidVersion = VersionUtils.isRequiredVersion((_a = window.envContext) === null || _a === void 0 ? void 0 : _a.sysVersion, '4.22');
+    if (isValidVersion)
+      return TaskbarElement.ATTACH;
+    return "";
+  }
   openGridConfig() {
     this._grid.getColumnsState()
       .then((gridColumns) => {
@@ -225,7 +233,7 @@ export class SnkGrid {
     const disabledButtons = [];
     if ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.selectionInfo) {
       if (this._dataState.selectionInfo.length > 1) {
-        disabledButtons.push("CLONE");
+        disabledButtons.push(TaskbarElement.CLONE, "ATTACH");
       }
       if (this._dataState.selectionInfo.isAllRecords()) {
         disabledButtons.push("REMOVE");

package/dist/collection/components/snk-personalized-filter/snk-personalized-filter.css

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+}
+  

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

@@ -0,0 +1,87 @@
+import { h, Host } from '@stencil/core';
+import PersonalizedFilterFetcher from "../../lib/http/data-fetcher/fetchers/personalized-filter-fetcher";
+import { FilterOperand, FilterUserConfigTypes } from "../../lib/@types";
+import store from '../../lib/store';
+import { ApplicationContext, StringUtils } from '@sankhyalabs/core';
+export class SnkPersonalizedFilter {
+  constructor() {
+    this._personalizedFilterFetcher = new PersonalizedFilterFetcher();
+    this._dataSourceFetcher = {
+      fetchData: async (entity) => {
+        let entityURI = entity === null || entity === void 0 ? void 0 : entity.uri;
+        if (StringUtils.isEmpty(entityURI)) {
+          entityURI = "dd://Financeiro/br.com.sankhya.fin.cad.receber"; //TODO: Receber como prop
+        }
+        return await this._personalizedFilterFetcher.loadFields(entityURI);
+      }
+    };
+    this.items = {
+      entityName: "Financeiro",
+      fieldName: "CODBCO",
+      description: "Financeiro >> Banco",
+      type: FilterUserConfigTypes.DECIMAL,
+      expression: "Financeiro.CODBCO",
+      operand: FilterOperand.EQUAL,
+      paramVariable: false,
+      value: "61",
+      systemConfig: null,
+      userConfig: null
+    };
+    this.handleFilterItemChange = (changes) => {
+      console.log("Campo do ExpressionItem alterado");
+      console.log(changes);
+    };
+    this.handleFilterItemRemove = (expression) => {
+      console.log("Event de deleção disparado");
+      console.log(expression);
+    };
+    this.messagesBuilder = undefined;
+  }
+  componentWillLoad() {
+    if (store.get("filterFieldsDataSource") == undefined) {
+      store.set("filterFieldsDataSource", this._dataSourceFetcher);
+    }
+    if (!this.messagesBuilder) {
+      const snkApp = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      this.messagesBuilder = snkApp === null || snkApp === void 0 ? void 0 : snkApp.messagesBuilder;
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", null, h("snk-expression-item", { expression: this.items, canRemove: true, onEzFilterItemChange: (evt) => this.handleFilterItemChange(evt.detail), onEzFilterItemRemove: (evt) => this.handleFilterItemRemove(evt.detail), messagesBuilder: this.messagesBuilder }))));
+  }
+  static get is() { return "snk-personalized-filter"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-personalized-filter.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-personalized-filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/snk-personalized-filter/subcomponents/snk-expression-item/filter-operands/filter-operands.js

@@ -0,0 +1,34 @@
+import { FilterOperand } from "../../../../../lib/@types";
+import { UserInterface } from '@sankhyalabs/core';
+export const FilterOperandDefault = [
+  { value: FilterOperand.EQUAL, label: "Igual (=)" },
+  { value: FilterOperand.DIFFERENT, label: "Diferente (<>)" },
+  { value: FilterOperand.LIKE, label: "Contendo (LIKE)" },
+  { value: FilterOperand.IN, label: "Contido em (IN)" },
+  { value: FilterOperand.START_WITH, label: "Iniciado com (%?)" },
+  { value: FilterOperand.FINISHED_WITH, label: "Terminado com (?%)" },
+  { value: FilterOperand.NULL, label: "Vazio (NULL)" },
+  { value: FilterOperand.NOT_NULL, label: "Não Vazio (NOT NULL)" },
+  { value: FilterOperand.LARGER, label: "Maior (>)" },
+  { value: FilterOperand.LARGER_EQUAL, label: "Maior ou Igual (>=)" },
+  { value: FilterOperand.SMALLER, label: "Menor (<)" },
+  { value: FilterOperand.SMALLER_EQUAL, label: "Menor ou Igual (<=)" }
+];
+export const FilterOperandTypeTextSearch = [
+  { value: FilterOperand.EQUAL, label: "Igual (=)" },
+  { value: FilterOperand.DIFFERENT, label: "Diferente (<>)" },
+  { value: FilterOperand.LIKE, label: "Contendo (LIKE)" },
+  { value: FilterOperand.IN, label: "Contido em (IN)" },
+  { value: FilterOperand.START_WITH, label: "Iniciado com (%?)" },
+  { value: FilterOperand.FINISHED_WITH, label: "Terminado com (?%)" },
+  { value: FilterOperand.NULL, label: "Vazio (NULL)" },
+  { value: FilterOperand.NOT_NULL, label: "Não Vazio (NOT NULL)" }
+];
+export const FIELD_TYPE_SEARCH_AND_TEXT = [
+  UserInterface.SEARCH,
+  UserInterface.SHORTTEXT,
+  UserInterface.PASSWORD,
+  UserInterface.MASKEDTEXT,
+  UserInterface.LONGTEXT,
+  UserInterface.HTML
+];

package/dist/collection/components/snk-personalized-filter/subcomponents/snk-expression-item/snk-expression-item.css

@@ -0,0 +1,97 @@
+:host {
+  /*private*/
+  display: flex;
+  width: 100%;
+
+  /*@doc Define a cor de fundo do componente.*/
+  --snk-expression-item--background-color: var(--background--xlight, #fff);
+
+  /* Spacing */
+  /*@doc Define o espaçamento interno entre os itens*/
+  --snk-expression-item__itens--padding: var(--space--small, 6px);
+
+  /* Sizes */
+  /*@doc Define o tamanho do campo operator*/
+  --snk-expression-item__width--input-operator: 220px;
+  /*@doc Define o tamanho do campo value*/
+  --snk-expression-item__width--input-value: 240px;
+  /*@doc Define o tamanho do campo value-variable*/
+  --snk-expression-item__width--input-value-variable: 176px;
+
+  /* Bordes */
+  /*@doc Define o arredondamento das bordas*/
+  --snk-expression-item--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a cor da borda.*/
+  --snk-expression-item--border-color: var(--color--strokes, #DCE0E8);
+  /*@doc Define largura e estilo da borda.*/
+  --snk-expression-item--border-style: var(--border--small, 1px solid);
+}
+
+.box{
+  /*private*/
+  width: 100%;
+  height: 100%;
+  background: var(--snk-expression-item--background-color);
+
+  /*public*/
+  margin: var(--space--small, 6px);
+  border: var(--snk-expression-item--border-color) var(--snk-expression-item--border-style);
+  border-radius: var(--snk-expression-item--border-radius);
+}
+
+.box__container{
+  /*private*/
+  display: flex;
+  align-items: center;  
+  justify-content: space-between;
+  white-space: nowrap;
+
+  /*public*/
+  margin: var(--space--small, 6px);
+}
+
+.box__container--input-filter{
+  width: 100%;
+}
+
+.box__container--input-operator{
+  /*private*/
+  display: flex;
+  /*public*/
+  width: var(--snk-expression-item__width--input-operator);
+  min-width: var(--snk-expression-item__width--input-operator);
+}
+
+.box__container--input-value{
+  /*private*/
+  display: flex;
+  /*public*/
+  width: var(--snk-expression-item__width--input-value);
+  min-width: var(--snk-expression-item__width--input-value);
+}
+
+.box__container--input-value-variable{
+  /*private*/
+  display: flex;
+  /*public*/
+  width: var(--snk-expression-item__width--input-value-variable);
+  min-width: var(--snk-expression-item__width--input-value-variable);
+}
+
+.box__container--button-delete{
+  display: flex;
+}
+
+.box__container > div {
+  padding-left: var(--snk-expression-item__itens--padding);
+  padding-right: var(--snk-expression-item__itens--padding);
+}
+
+.box__container--button-delete--icon {
+  width: 42px;
+  min-width: 42px;
+}
+
+.box__container--input-value-variable--icon{
+  cursor: pointer;
+}