@sankhyalabs/sankhyablocks 5.5.0 → 5.6.0

package/dist/cjs/snk-grid.cjs.entry.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
 const UnitMetadata = require('@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata');
-const taskbarElements = require('./taskbar-elements-80285601.js');
+const taskbarElements = require('./taskbar-elements-bc2598f9.js');
 const ConfigStorage = require('./ConfigStorage-91adf3fe.js');
 const index$1 = require('./index-f400b1d6.js');
 const taskbarProcessor = require('./taskbar-processor-bce3f499.js');
+const index$2 = require('./index-de79181a.js');
 require('./form-config-fetcher-fa19680a.js');
 require('./DataFetcher-a9d0228f.js');
 require('./_commonjsHelpers-537d719a.js');
@@ -209,7 +210,7 @@ const SnkGrid = class {
         return (_c = (_b = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.records) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.__record__id__;
       }
     };
-    taskbarElements.store.set("exporterProviders", Object.assign(Object.assign({}, taskbarElements.store.get("exporterProviders")), { [this.configName]: dataExporterProvider }));
+    index$2.store.set("exporterProviders", Object.assign(Object.assign({}, index$2.store.get("exporterProviders")), { [this.configName]: dataExporterProvider }));
   }
   addElementID() {
     const dataInfo = { dataUnit: this._dataUnit };

package/dist/cjs/{snk-guides-viewer-e6a65393.js → snk-guides-viewer-9784c527.js}

@@ -5,7 +5,7 @@ const core = require('@sankhyalabs/core');
 const SnkFormConfigManager = require('./SnkFormConfigManager-e1a10283.js');
 const form = require('@sankhyalabs/ezui/dist/collection/utils/form');
 const taskbarProcessor = require('./taskbar-processor-bce3f499.js');
-const taskbarElements = require('./taskbar-elements-80285601.js');
+const taskbarElements = require('./taskbar-elements-bc2598f9.js');
 const constants = require('./constants-3787fa32.js');
 require('./DataFetcher-a9d0228f.js');
 require('./pesquisa-fetcher-954b74c3.js');

package/dist/cjs/snk-guides-viewer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const snkGuidesViewer = require('./snk-guides-viewer-e6a65393.js');
+const snkGuidesViewer = require('./snk-guides-viewer-9784c527.js');
 require('./index-21bd01e1.js');
 require('@sankhyalabs/core');
 require('./SnkFormConfigManager-e1a10283.js');
@@ -12,8 +12,9 @@ require('./DataFetcher-a9d0228f.js');
 require('./_commonjsHelpers-537d719a.js');
 require('@sankhyalabs/ezui/dist/collection/utils/form');
 require('./taskbar-processor-bce3f499.js');
-require('./taskbar-elements-80285601.js');
+require('./taskbar-elements-bc2598f9.js');
 require('./index-f400b1d6.js');
+require('./index-de79181a.js');
 require('./constants-3787fa32.js');
 require('./pesquisa-fetcher-954b74c3.js');
 

package/dist/cjs/snk-personalized-filter.cjs.entry.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-21bd01e1.js');
+const DataFetcher = require('./DataFetcher-a9d0228f.js');
+const index$1 = require('./index-f400b1d6.js');
+const index$2 = require('./index-de79181a.js');
+const core = require('@sankhyalabs/core');
+require('./_commonjsHelpers-537d719a.js');
+
+class PersonalizedFilterFetcher {
+  constructor() {
+    this.templateByQuery = new Map();
+    this.buildTemplates();
+  }
+  buildTemplates() {
+    const query = DataFetcher.dist.gql `
+    query($name: String!) {
+      $queryAlias$: fetchFilterFields(name: $name){
+        currentLink {
+          description
+          uri
+        }
+        links {
+          description
+          uri
+          fieldCount
+        }
+        fields {
+          name
+          description
+          uri
+          onlyDate
+          dataType
+          userInterface
+          properties {
+            name
+            value
+          }
+        }
+      }
+    }
+    `;
+    this.templateByQuery.set("fetchFilterFields", query);
+  }
+  loadFields(uri) {
+    return new Promise((resolve, reject) => {
+      DataFetcher.DataFetcher.get()
+        .callGraphQL({
+        values: { name: uri },
+        query: this.templateByQuery.get("fetchFilterFields"),
+      })
+        .then((resp) => {
+        let fields = resp.fields;
+        for (const field of fields) {
+          if (Array.isArray(field.properties) && field.properties.length > 0 && field.userInterface === "SEARCH") {
+            const propertiesConvertedObject = field.properties.reduce((accumulator, prop) => {
+              accumulator[prop.name] = prop.value;
+              return accumulator;
+            }, {});
+            field.properties = propertiesConvertedObject;
+          }
+        }
+        resolve(Object.assign(Object.assign({}, resp), { fields: fields }));
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+}
+
+const snkPersonalizedFilterCss = ":host{display:flex}";
+
+const SnkPersonalizedFilter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._personalizedFilterFetcher = new PersonalizedFilterFetcher();
+    this._dataSourceFetcher = {
+      fetchData: async (entity) => {
+        let entityURI = entity === null || entity === void 0 ? void 0 : entity.uri;
+        if (core.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: index$1.FilterUserConfigTypes.DECIMAL,
+      expression: "Financeiro.CODBCO",
+      operand: index$1.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 (index$2.store.get("filterFieldsDataSource") == undefined) {
+      index$2.store.set("filterFieldsDataSource", this._dataSourceFetcher);
+    }
+    if (!this.messagesBuilder) {
+      const snkApp = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      this.messagesBuilder = snkApp === null || snkApp === void 0 ? void 0 : snkApp.messagesBuilder;
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", null, index.h("snk-expression-item", { expression: this.items, canRemove: true, onEzFilterItemChange: (evt) => this.handleFilterItemChange(evt.detail), onEzFilterItemRemove: (evt) => this.handleFilterItemRemove(evt.detail), messagesBuilder: this.messagesBuilder }))));
+  }
+};
+SnkPersonalizedFilter.style = snkPersonalizedFilterCss;
+
+exports.snk_personalized_filter = SnkPersonalizedFilter;

package/dist/cjs/snk-simple-bar_2.cjs.entry.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
 const constants = require('./constants-3787fa32.js');
-const taskbarElements = require('./taskbar-elements-80285601.js');
+const taskbarElements = require('./taskbar-elements-bc2598f9.js');
 require('./DataFetcher-a9d0228f.js');
 require('./pesquisa-fetcher-954b74c3.js');
 const index$1 = require('./index-f400b1d6.js');
 const taskbarProcessor = require('./taskbar-processor-bce3f499.js');
+require('./index-de79181a.js');
 require('./_commonjsHelpers-537d719a.js');
 
 const snkSimpleBarCss = ".sc-snk-simple-bar-h{display:flex;height:100%;width:100%}.simple-bar__container.sc-snk-simple-bar{flex:1;display:flex;align-items:stretch;gap:var(--space--small)}.simple-bar__left-slot.sc-snk-simple-bar{min-width:280px;flex:1;display:flex;align-items:center}.simple-bar__right-slot.sc-snk-simple-bar{flex:1;display:flex;align-items:center;justify-content:flex-end}.simple-bar__column.sc-snk-simple-bar{flex:1;display:flex;flex-direction:column}";

package/dist/cjs/snk-taskbar.cjs.entry.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-21bd01e1.js');
 const core = require('@sankhyalabs/core');
 const AuthorizationConfig = require('./AuthorizationConfig-79ffae4b.js');
-const taskbarElements = require('./taskbar-elements-80285601.js');
+const taskbarElements = require('./taskbar-elements-bc2598f9.js');
 const index$1 = require('./index-f400b1d6.js');
+require('./index-de79181a.js');
 
 const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}";
 

package/dist/cjs/taskbar-elements-bc2598f9.js

@@ -0,0 +1,118 @@
+'use strict';
+
+const index = require('./index-21bd01e1.js');
+const index$2 = require('./index-f400b1d6.js');
+const index$1 = require('./index-de79181a.js');
+
+exports.TaskbarElement = void 0;
+(function (TaskbarElement) {
+  TaskbarElement["PREVIOUS"] = "PREVIOUS";
+  TaskbarElement["NEXT"] = "NEXT";
+  TaskbarElement["REFRESH"] = "REFRESH";
+  TaskbarElement["UPDATE"] = "UPDATE";
+  TaskbarElement["CLONE"] = "CLONE";
+  TaskbarElement["REMOVE"] = "REMOVE";
+  TaskbarElement["INSERT"] = "INSERT";
+  TaskbarElement["CANCEL"] = "CANCEL";
+  TaskbarElement["SAVE"] = "SAVE";
+  TaskbarElement["GRID_MODE"] = "GRID_MODE";
+  TaskbarElement["FORM_MODE"] = "FORM_MODE";
+  TaskbarElement["MORE_OPTIONS"] = "MORE_OPTIONS";
+  TaskbarElement["DIVIDER"] = "DIVIDER";
+  TaskbarElement["CONFIGURATOR"] = "CONFIGURATOR";
+  TaskbarElement["DATA_EXPORTER"] = "DATA_EXPORTER";
+  TaskbarElement["ATTACH"] = "ATTACH";
+})(exports.TaskbarElement || (exports.TaskbarElement = {}));
+exports.AuthorizationElements = void 0;
+(function (AuthorizationElements) {
+  AuthorizationElements["UPDATE"] = "UPDATE";
+  AuthorizationElements["CLONE"] = "CLONE";
+  AuthorizationElements["REMOVE"] = "REMOVE";
+  AuthorizationElements["INSERT"] = "INSERT";
+  AuthorizationElements["CONFIGURATOR"] = "CONFIGURATOR";
+})(exports.AuthorizationElements || (exports.AuthorizationElements = {}));
+exports.VisibleWhenForbidden = void 0;
+(function (VisibleWhenForbidden) {
+  VisibleWhenForbidden["CONFIGURATOR"] = "CONFIGURATOR";
+})(exports.VisibleWhenForbidden || (exports.VisibleWhenForbidden = {}));
+const buildCustomButton = (def, className, dataElementId, action, isEnabled) => {
+  const { hint, text, iconName } = def;
+  if (iconName) {
+    if (text) {
+      return iconTextButton(iconName, def.name, className, dataElementId, hint, text, action, isEnabled);
+    }
+    else {
+      return iconButton(iconName, def.name, className, dataElementId, hint, action, isEnabled);
+    }
+  }
+  else {
+    return textButton(def.name, className, dataElementId, text, hint, action, isEnabled);
+  }
+};
+const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions, configName, presentationMode) => {
+  var _a;
+  const title = getTitle(element);
+  switch (element) {
+    case exports.TaskbarElement.PREVIOUS:
+      return iconButton("chevron-left", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.NEXT:
+      return iconButton("chevron-right", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.REFRESH:
+      return iconButton("sync", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.UPDATE:
+      return iconButton("edit", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.CLONE:
+      return iconButton("copy", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.REMOVE:
+      return iconButton("delete", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.INSERT:
+      if (presentationMode === index$2.PresentationMode.PRIMARY) {
+        return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("plus", element, className, dataElementId, title, action, isEnabled);
+      }
+    case exports.TaskbarElement.CANCEL:
+      return textButton(element, className, dataElementId, title, title, action, isEnabled);
+    case exports.TaskbarElement.SAVE:
+      if (presentationMode === index$2.PresentationMode.PRIMARY) {
+        return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("save", element, className, dataElementId, title, action, isEnabled);
+      }
+    case exports.TaskbarElement.GRID_MODE:
+      return iconButton("table", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.FORM_MODE:
+      return iconButton("list", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.CONFIGURATOR:
+      return iconButton("settings-inverted", element, className, dataElementId, title, action, isEnabled);
+    case exports.TaskbarElement.MORE_OPTIONS:
+      return actionButton(element, className, dataElementId, title, action, isEnabled, actions);
+    case exports.TaskbarElement.DIVIDER:
+      return index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium", "data-taskbar-divider": true });
+    case exports.TaskbarElement.DATA_EXPORTER:
+      const provider = (_a = index$1.store.get("exporterProviders")) === null || _a === void 0 ? void 0 : _a[configName];
+      return index.h("snk-data-exporter", { class: className, provider: provider, "data-element-id": dataElementId });
+    case exports.TaskbarElement.ATTACH:
+      return iconButton("anexo", element, className, dataElementId, title, action, isEnabled);
+  }
+};
+function textButton(name, className, dataElementId, text, title, action, isEnabled) {
+  return index.h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) });
+}
+function iconButton(iconName, name, className, dataElementId, title, action, isEnabled) {
+  return index.h("ez-button", { title: title, mode: "icon", size: "small", class: className, "data-element-id": dataElementId, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
+}
+function iconTextButton(iconName, name, className, dataElementId, text, title, action, isEnabled) {
+  return index.h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) },
+    index.h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
+}
+function actionButton(element, className, dataElementId, title, action, isEnabled, actions) {
+  return actions && actions.length > 0
+    ? index.h("ez-actions-button", { title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
+    : undefined;
+}
+
+exports.buildCustomButton = buildCustomButton;
+exports.buildElem = buildElem;

package/dist/collection/collection-manifest.json

@@ -34,6 +34,8 @@
     "./components/snk-grid/snk-grid.js",
     "./components/snk-grid/subcomponents/snk-grid-config/snk-grid-config.js",
     "./components/snk-grid/subcomponents/snk-select-box/snk-select-box.js",
+    "./components/snk-personalized-filter/snk-personalized-filter.js",
+    "./components/snk-personalized-filter/subcomponents/snk-expression-item/snk-expression-item.js",
     "./components/snk-personalized-filter/subcomponents/snk-filter-param-config/snk-filter-param-config.js",
     "./components/snk-pesquisa/snk-pesquisa.js",
     "./components/snk-simple-bar/snk-simple-bar.js",

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-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."
+        }
+      }
+    };
+  }
+}