@sankhyalabs/sankhyablocks 1.3.2 → 1.3.5

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4720dab8.js');
+const index = require('./index-8272993f.js');
 const core = require('@sankhyalabs/core');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
+const UnitMetadata = require('@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6433,6 +6434,30 @@ Object.defineProperty(exports, "GraphQLWebSocketClient", { enumerable: true, get
 //# sourceMappingURL=index.js.map
 });
 
+class UrlUtils {
+  static getQueryParams(queryString) {
+    const params = new Map();
+    const re = /[?&]?([^=]+)=([^&]*)/g;
+    let tokens;
+    //Necessário por causa da tela Histórico Padrão que possui resourceID com acento
+    queryString = window.unescape(queryString);
+    queryString = queryString.split("+").join(" ");
+    while ((tokens = re.exec(queryString))) {
+      params.set(window.decodeURIComponent(tokens[1]), tokens[2]);
+    }
+    //Inserimos a urlBase no params.
+    params.set("urlBase", this.getUrlBase());
+    if (window["moduleID"] && window["URIServiceBroker"]) {
+      params.set("moduleID", window["moduleID"]);
+      params.set("URIServiceBroker", window["URIServiceBroker"]);
+    }
+    return params;
+  }
+  static getUrlBase() {
+    return `${location.protocol}"//"${location.hostname}${location.port ? ":" + location.port : ""}`;
+  }
+}
+
 class HttpFetcher {
   constructor() {
     this.watingRequestsById = new Map();
@@ -6479,6 +6504,52 @@ class HttpFetcher {
       return (_a = this.getWatingRequest(reqKey)) === null || _a === void 0 ? void 0 : _a.promise;
     }
   }
+  resolveURL() {
+    if (window['mock_url'])
+      return window['mock_url'];
+    return UrlUtils.getUrlBase();
+  }
+  getContext() {
+    const urlParams = UrlUtils.getQueryParams(location.search);
+    return {
+      baseUrl: `${this.resolveURL()}/mge/service.sbr`,
+      appName: "SankhyaBlocks",
+      mgeSession: `${window['skw_session'] || urlParams.mgeSession}`,
+      globalID: "85C0093DFA240EAB699B4E47A10215BD",
+      resourceID: "br.com.sankhya.mov.bancaria"
+    };
+  }
+  async callServiceBroker(serviceName, payload) {
+    return new Promise((accept, reject) => {
+      const ctx = this.getContext();
+      const url = `${ctx.baseUrl}?serviceName=${serviceName}&counter=21&application=${ctx.appName}&outputType=json&preventTransform=false&mgeSession=${ctx.mgeSession}&resourceID=${ctx.resourceID}&globalID=${ctx.globalID}&allowConcurrentCalls=true`;
+      document.cookie = `JSESSIONID=${ctx.mgeSession};`;
+      const http = new XMLHttpRequest();
+      http.open("POST", url, true);
+      http.withCredentials = true;
+      http.send(payload);
+      http.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+          try {
+            const jsonResp = JSON.parse(this.responseText);
+            if (jsonResp.status == 1) {
+              accept(jsonResp.responseBody);
+            }
+            else {
+              reject(jsonResp);
+            }
+          }
+          catch (e) {
+            console.warn(`callServiceBroker error to parser response to JSON ${e}`);
+            reject(this.responseText);
+          }
+        }
+        else if (this.readyState == 4 && this.status != 200) {
+          reject(this.responseText);
+        }
+      };
+    });
+  }
   getReqKey(req) {
     return window.btoa(this.hashCode(`${req.query}${JSON.stringify(req.values || "")}`)).replace(/=/g, "");
   }
@@ -6604,6 +6675,7 @@ class DataUnitFetcher {
                   name
                   defaultValue
                   label
+                  visible
                   readOnly
                   required
                   dataType
@@ -6620,10 +6692,10 @@ class DataUnitFetcher {
                 }
               }
             }`);
-    this.templateByQuery.set("fetchData", dist.gql `query($dataunit: String! $first: Int $offset:Int $filter: [Filter!] $sort: [Sort!]) {
+    this.templateByQuery.set("fetchData", dist.gql `query($dataunit: String! $limit: Int $offset:Int $filter: [Filter!] $sort: [Sort!]) {
             $queryAlias$: fetchDataUnit(name: $dataunit){
-              data(first: $first offset: $offset filters: $filter sort: $sort){
-                first
+              data(limit: $limit offset: $offset filters: $filter sort: $sort){
+                limit
                 offset
                 total
                 hasMore
@@ -6651,7 +6723,7 @@ class DataUnitFetcher {
   getDataUnit(entityName, resourceID) {
     const dataUnit = new core.DataUnit(`dd://${entityName}/${resourceID}`);
     dataUnit.metadataLoader = (dataUnit) => this.loadMetadata(dataUnit);
-    dataUnit.dataLoader = (dataUnit, sort, filters) => this.loadData(dataUnit, sort, filters);
+    dataUnit.dataLoader = (dataUnit, page, sort, filters) => this.loadData(dataUnit, page, sort, filters);
     dataUnit.saveLoader = (dataUnit, changes) => this.saveData(dataUnit, changes);
     dataUnit.removeLoader = (dataUnit, recordIds) => this.removeRecords(dataUnit, recordIds);
     return dataUnit;
@@ -6685,24 +6757,36 @@ class DataUnitFetcher {
       });
     });
   }
-  loadData(dataUnit, sort, filters) {
+  loadData(dataUnit, page, sort, filters) {
     return new Promise((resolve, reject) => {
+      const variables = { dataunit: dataUnit.name, sort, filters };
+      if (page) {
+        variables.limit = page.limit;
+        variables.offset = page.offset;
+      }
+      if (!core.StringUtils.isEmpty(page === null || page === void 0 ? void 0 : page.quickFilter)) {
+        variables.filter = [{
+            name: "__ALL_SEARCHABLE_FIELDS__",
+            expression: "__ALL_SEARCHABLE_FIELDS__",
+            params: [{ name: "term", value: page.quickFilter }]
+          }];
+      }
       HttpFetcher.get()
         .callGraphQL({
-        values: { dataunit: dataUnit.name, sort, filters },
+        values: variables,
         query: this.templateByQuery.get("fetchData"),
       })
         .then((resp) => {
-        const result = resp.data;
-        const dataUnitRecords = [];
-        result.records.forEach((responseRecord) => {
+        const pageResult = resp.data;
+        const records = [];
+        pageResult.records.forEach((responseRecord) => {
           const duRecord = { __record__id__: responseRecord.id };
           responseRecord.fields.forEach(({ name, value }) => {
             duRecord[name] = dataUnit.valueFromString(name, value);
           });
-          dataUnitRecords.push(duRecord);
+          records.push(duRecord);
         });
-        resolve(dataUnitRecords);
+        resolve(Object.assign(Object.assign({}, pageResult), { records }));
       })
         .catch((error) => {
         reject(error);
@@ -6712,10 +6796,17 @@ class DataUnitFetcher {
   saveData(dataUnit, duChanges) {
     const changes = duChanges.map((change) => {
       const { dataUnit: changeDU, record, updatingFields, operation } = change;
-      const parsedUpdatingFields = Object.entries(updatingFields).map(([fieldName, value]) => {
-        return { fieldName, value: this.formatValueToServer(value) };
-      });
-      return { dataUnit: changeDU, updatingFields: parsedUpdatingFields, operation, recordId: record.__record__id__ };
+      let parsedUpdatingFields;
+      if (updatingFields) {
+        parsedUpdatingFields = Object.entries(updatingFields).map(([fieldName, value]) => {
+          return { fieldName, value: formatValueToServer(value) };
+        });
+      }
+      const reqChange = { dataUnit: changeDU, updatingFields: parsedUpdatingFields, operation, recordId: record.__record__id__ };
+      if (change.sourceId) {
+        reqChange.sourceId = change.sourceId;
+      }
+      return reqChange;
     });
     return new Promise((resolve, reject) => {
       HttpFetcher.get()
@@ -6742,21 +6833,6 @@ class DataUnitFetcher {
       });
     });
   }
-  formatValueToServer(value) {
-    if (value === undefined)
-      return value;
-    try {
-      if (value instanceof Date || typeof value === 'string') {
-        return value.toString();
-      }
-      //Any others objects
-      value = JSON.stringify(value);
-    }
-    catch (_a) {
-      value = value.toString();
-    }
-    return value;
-  }
   removeRecords(dataUnit, recordIds) {
     const changes = recordIds.map((recordId) => {
       return { dataUnit: dataUnit.name, operation: core.ChangeOperation.DELETE, recordId };
@@ -6776,38 +6852,30 @@ class DataUnitFetcher {
     });
   }
 }
-
-class UrlUtils {
-  static getQueryParams(queryString) {
-    const params = new Map();
-    const re = /[?&]?([^=]+)=([^&]*)/g;
-    let tokens;
-    //Necessário por causa da tela Histórico Padrão que possui resourceID com acento
-    queryString = window.unescape(queryString);
-    queryString = queryString.split("+").join(" ");
-    while ((tokens = re.exec(queryString))) {
-      params.set(window.decodeURIComponent(tokens[1]), tokens[2]);
-    }
-    //Inserimos a urlBase no params.
-    params.set("urlBase", this.getUrlBase());
-    if (window["moduleID"] && window["URIServiceBroker"]) {
-      params.set("moduleID", window["moduleID"]);
-      params.set("URIServiceBroker", window["URIServiceBroker"]);
+const formatValueToServer = (value) => {
+  if (value === undefined)
+    return value;
+  try {
+    if (value instanceof Date) {
+      return value.toString();
     }
-    return params;
+    //Any others objects
+    value = JSON.stringify(value);
   }
-  static getUrlBase() {
-    return `${location.protocol}"//"${location.hostname}${location.port ? ":" + location.port : ""}`;
+  catch (_a) {
+    value = value.toString();
   }
-}
+  return value;
+};
 
+var _a;
 class Workspace {
   static openAppActivity(resourceId, pkObject) {
     var _a;
     (_a = window["workspace"]) === null || _a === void 0 ? void 0 : _a.openAppActivity(resourceId, pkObject);
   }
 }
-Workspace.resourceID = window["workspace"].resourceID;
+Workspace.resourceID = (_a = window["workspace"]) === null || _a === void 0 ? void 0 : _a.resourceID;
 
 class ParametersFetcher {
   constructor() {
@@ -6920,22 +6988,85 @@ class FormConfigFetcher extends ResourceFetcher {
   }
 }
 
-const mockByEntity = {
-  "ImplantacaoSaldoConta": [{ "value": 6, "label": "Conta Financeiro" }, { "value": 7, "label": "Conta Banco do Brasil" }],
-  "HistoricoBancario": [{ "value": 9, "label": "Lanç. Origem" }, { "value": 8, "label": "Lanç. Origem 2" }],
-  "ContaDestino": [{ "value": 10, "label": "Conta BB" }, { "value": 7, "label": "Conta Santander" }],
-  "HistoricoBancarioDestino": [{ "value": 11, "label": "Contra Bradesco" }, { "value": 13, "label": "Contra Destino" }],
-  "Usuario": [{ "value": 0, "label": "SUP" }],
-  "ContaBancaria": [{ "value": 10, "label": "Conta 10" }, { "value": 17, "label": "Conta 17" }],
-  "TipoOperacao": [{ "value": 4, "label": "Entrada NFse" }, { "value": 5, "label": "Outra top" }, { "value": 6, "label": "Top 6" }]
-};
-const pesquisaLoadOptions = (searchArgument, fieldName, dataUnit) => {
-  var _a;
-  console.log(searchArgument);
-  const field = dataUnit.getField(fieldName);
-  const entityName = (_a = field.properties) === null || _a === void 0 ? void 0 : _a.ENTITYNAME;
-  return (mockByEntity[entityName] || []);
-};
+class PesquisaFetcher {
+  constructor() {
+    this.templateByQuery = new Map();
+    this.buldTemplates();
+  }
+  buldTemplates() {
+    this.templateByQuery.set("search", dist.gql `query($entityName: String! $argument: String $criteria: SearchCriteria) {
+                $queryAlias$: search(entityName: $entityName argument: $argument criteria: $criteria){
+                    value
+                    label
+                }
+            }`);
+  }
+  loadSearchOptions(entityName, argument, criteria) {
+    return new Promise((resolve, reject) => {
+      HttpFetcher.get()
+        .callGraphQL({
+        values: { argument, entityName, criteria },
+        query: this.templateByQuery.get("search"),
+      })
+        .then((result) => {
+        resolve(result);
+      })
+        .catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  loadAdvancedSearch(entityName, argument, criteria) {
+    const serviceName = "PesquisaSP.getSuggestion";
+    const externalCriteria = {
+      query: {
+        $: criteria === null || criteria === void 0 ? void 0 : criteria.expression
+      }
+    };
+    if ((criteria === null || criteria === void 0 ? void 0 : criteria.params.length) > 0) {
+      externalCriteria.params = {
+        param: criteria.params.map(p => { return { $: p.value, type: convertParamType(p.dataType) }; })
+      };
+    }
+    const reqBody = {
+      "serviceName": serviceName,
+      "requestBody": {
+        "criteria": {
+          "entityName": entityName,
+          "compacted": false,
+          "ignoreEntityCriteria": false,
+          "limit": "5",
+          "query": { "$": argument },
+          "orderByDesc": false,
+          "options": { "showInactives": false },
+          "externalCriteria": externalCriteria
+        },
+        "clientEventList": {
+          "clientEvent": []
+        }
+      }
+    };
+    return new Promise((resolve, reject) => {
+      HttpFetcher.get()
+        .callServiceBroker("PesquisaSP.getSuggestion", JSON.stringify(reqBody))
+        .then(result => resolve(result))
+        .catch(error => reject(error));
+    });
+  }
+}
+function convertParamType(dataType) {
+  //Alerta: Cuidado pra não contaminar o DataType com a implementação
+  //atual da pesquisa... em geral, somente inteiros,
+  //data (com ou sem hora) e string são realmente relevantes
+  switch (dataType) {
+    case core.DataType.NUMBER:
+      return "I";
+    case core.DataType.DATE:
+      return "D";
+    default:
+      return "S";
+  }
+}
 
 const snkApplicationCss = ".sc-snk-application-h{display:flex;flex-direction:column;height:100%}";
 
@@ -6975,6 +7106,16 @@ const SnkApplication = class {
   async getDateParam(name) {
     return this.parameters.asDate(name, this.resourceID);
   }
+  async showPopUp(content) {
+    this._popUp.appendChild(content);
+    this._popUp["opened"] = true;
+  }
+  async closePopUp() {
+    Array.from(this._popUp.children).forEach(c => {
+      this._popUp.removeChild(c);
+    });
+    this._popUp["opened"] = false;
+  }
   async temOpcional(opcional) {
     const opts = opcional.split(",");
     return new Promise((resolve, reject) => {
@@ -7047,8 +7188,56 @@ const SnkApplication = class {
     }
     return this._formConfigFetcher;
   }
+  get pesquisaFetcher() {
+    if (!this._pesquisaFetcher) {
+      this._pesquisaFetcher = new PesquisaFetcher();
+    }
+    return this._pesquisaFetcher;
+  }
+  executeSearch(searchArgument, fieldName, dataUnit) {
+    const descriptor = dataUnit.getField(fieldName);
+    if (!descriptor) ;
+    else {
+      const { mode, argument } = searchArgument;
+      const { ENTITYNAME } = descriptor.properties;
+      const dependencies = descriptor.dependencies;
+      let criteria;
+      dependencies === null || dependencies === void 0 ? void 0 : dependencies.forEach(dependency => {
+        var _a;
+        if (dependency.type === UnitMetadata.DependencyType.SEARCHING) {
+          if (((_a = dependency.masterFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            criteria = {
+              expression: dependency.expression,
+              params: dependency.masterFields.map(fieldName => {
+                const masterDescriptor = dataUnit.getField(fieldName);
+                const dataType = (masterDescriptor === null || masterDescriptor === void 0 ? void 0 : masterDescriptor.dataType) || core.DataType.TEXT;
+                return { name: fieldName, value: dataUnit.getFieldValue(fieldName), dataType };
+              })
+            };
+          }
+        }
+      });
+      if (mode === "ADVANCED") {
+        return new Promise(accept => {
+          const pesquisaContent = document.createElement("snk-pesquisa");
+          pesquisaContent.argument = argument;
+          pesquisaContent.searchLoader = (text) => this.pesquisaFetcher.loadAdvancedSearch(ENTITYNAME, text, criteria);
+          pesquisaContent.onSelectItem = (option) => {
+            accept(option);
+            this.closePopUp();
+          };
+          this.showPopUp(pesquisaContent);
+        });
+      }
+      else {
+        return this.pesquisaFetcher.loadSearchOptions(ENTITYNAME, argument, criteria);
+      }
+    }
+  }
   componentWillLoad() {
-    core.ApplicationContext.setContextValue("__EZUI__SEARCH__OPTION__LOADER__", pesquisaLoadOptions);
+    core.ApplicationContext.setContextValue("__EZUI__SEARCH__OPTION__LOADER__", (searchArgument, fieldName, dataUnit) => {
+      return this.executeSearch(searchArgument, fieldName, dataUnit);
+    });
   }
   componentDidLoad() {
     this.applicationLoading.emit(true);
@@ -7057,7 +7246,7 @@ const SnkApplication = class {
     });
   }
   render() {
-    return (index.h("div", null));
+    return (index.h("div", null, index.h("ez-popup", { opened: false, ref: (ref) => this._popUp = ref, onEzClosePopup: () => this.closePopUp() })));
   }
 };
 SnkApplication.style = snkApplicationCss;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8272993f.js');
+
+const snkPesquisaCss = ":host{display:block}";
+
+const SnkPesquisa = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("ez-text-input", { ref: ref => this._textInput = ref, value: this.argument }), index.h("button", { onClick: () => this.searchLoader(this._textInput["value"]) }, "pesquisar"), index.h("button", { onClick: () => this.onSelectItem({ value: "10", label: "Zé das couves" }) }, "selecionar")));
+  }
+};
+SnkPesquisa.style = snkPesquisaCss;
+
+exports.snk_pesquisa = SnkPesquisa;

package/dist/cjs/teste-pesquisa.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8272993f.js');
+const core = require('@sankhyalabs/core');
+
+const testePesquisaCss = ":host{display:block}";
+
+const TestePesquisa = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    this.dataUnit = new core.DataUnit("testes_com_formulario");
+    this.dataUnit.metadata = {
+      name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
+      label: "Parceiro",
+      fields: [
+        {
+          name: "CODPARC",
+          label: "Parceiro",
+          dataType: core.DataType.NUMBER,
+          userInterface: core.UserInterface.SEARCH,
+          required: true,
+          properties: { ENTITYNAME: "Parceiro" }
+        }
+      ]
+    };
+  }
+  render() {
+    return (index.h("snk-application", null, index.h("ez-form", { dataUnit: this.dataUnit })));
+  }
+};
+TestePesquisa.style = testePesquisaCss;
+
+exports.teste_pesquisa = TestePesquisa;

package/dist/collection/collection-manifest.json

@@ -1,6 +1,8 @@
 {
   "entries": [
-    "./components/snk-application/snk-application.js"
+    "./components/snk-application/snk-application.js",
+    "./components/snk-pesquisa/snk-pesquisa.js",
+    "./components/teste-pesquisa/teste-pesquisa.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -1,4 +1,5 @@
 import { Component, h, Method, Event } from "@stencil/core";
+import { DataType } from "@sankhyalabs/core";
 import DataUnitFetcher from "../../lib/http/data-fetcher/fetchers/dataunit-fetcher";
 import UrlUtils from "../../lib/utils/urlutils";
 import Workspace from "../../lib/workspace/workspace";
@@ -6,7 +7,8 @@ import ParametersFetcher from "../../lib/http/data-fetcher/fetchers/parameters-f
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import { FormConfigFetcher } from "../../lib/http/data-fetcher/fetchers/form-config-fetcher";
 import { ApplicationContext } from "@sankhyalabs/core";
-import { pesquisaLoadOptions } from "../../lib/utils/pesquisa";
+import { PesquisaFetcher } from "../../lib/http/data-fetcher/fetchers/pesquisa-fetcher";
+import { DependencyType } from "@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata";
 export class SnkApplication {
   get parameters() {
     if (!this._parameters) {
@@ -38,6 +40,16 @@ export class SnkApplication {
   async getDateParam(name) {
     return this.parameters.asDate(name, this.resourceID);
   }
+  async showPopUp(content) {
+    this._popUp.appendChild(content);
+    this._popUp["opened"] = true;
+  }
+  async closePopUp() {
+    Array.from(this._popUp.children).forEach(c => {
+      this._popUp.removeChild(c);
+    });
+    this._popUp["opened"] = false;
+  }
   async temOpcional(opcional) {
     const opts = opcional.split(",");
     return new Promise((resolve, reject) => {
@@ -110,8 +122,58 @@ export class SnkApplication {
     }
     return this._formConfigFetcher;
   }
+  get pesquisaFetcher() {
+    if (!this._pesquisaFetcher) {
+      this._pesquisaFetcher = new PesquisaFetcher();
+    }
+    return this._pesquisaFetcher;
+  }
+  executeSearch(searchArgument, fieldName, dataUnit) {
+    const descriptor = dataUnit.getField(fieldName);
+    if (!descriptor) {
+      //TODO: Implementar mensagem de erro
+    }
+    else {
+      const { mode, argument } = searchArgument;
+      const { ENTITYNAME } = descriptor.properties;
+      const dependencies = descriptor.dependencies;
+      let criteria;
+      dependencies === null || dependencies === void 0 ? void 0 : dependencies.forEach(dependency => {
+        var _a;
+        if (dependency.type === DependencyType.SEARCHING) {
+          if (((_a = dependency.masterFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            criteria = {
+              expression: dependency.expression,
+              params: dependency.masterFields.map(fieldName => {
+                const masterDescriptor = dataUnit.getField(fieldName);
+                const dataType = (masterDescriptor === null || masterDescriptor === void 0 ? void 0 : masterDescriptor.dataType) || DataType.TEXT;
+                return { name: fieldName, value: dataUnit.getFieldValue(fieldName), dataType };
+              })
+            };
+          }
+        }
+      });
+      if (mode === "ADVANCED") {
+        return new Promise(accept => {
+          const pesquisaContent = document.createElement("snk-pesquisa");
+          pesquisaContent.argument = argument;
+          pesquisaContent.searchLoader = (text) => this.pesquisaFetcher.loadAdvancedSearch(ENTITYNAME, text, criteria);
+          pesquisaContent.onSelectItem = (option) => {
+            accept(option);
+            this.closePopUp();
+          };
+          this.showPopUp(pesquisaContent);
+        });
+      }
+      else {
+        return this.pesquisaFetcher.loadSearchOptions(ENTITYNAME, argument, criteria);
+      }
+    }
+  }
   componentWillLoad() {
-    ApplicationContext.setContextValue("__EZUI__SEARCH__OPTION__LOADER__", pesquisaLoadOptions);
+    ApplicationContext.setContextValue("__EZUI__SEARCH__OPTION__LOADER__", (searchArgument, fieldName, dataUnit) => {
+      return this.executeSearch(searchArgument, fieldName, dataUnit);
+    });
   }
   componentDidLoad() {
     this.applicationLoading.emit(true);
@@ -120,7 +182,8 @@ export class SnkApplication {
     });
   }
   render() {
-    return (h("div", null));
+    return (h("div", null,
+      h("ez-popup", { opened: false, ref: (ref) => this._popUp = ref, onEzClosePopup: () => this.closePopUp() })));
   }
   static get is() { return "snk-application"; }
   static get encapsulation() { return "scoped"; }
@@ -260,6 +323,44 @@ export class SnkApplication {
         "tags": []
       }
     },
+    "showPopUp": {
+      "complexType": {
+        "signature": "(content: HTMLElement) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "closePopUp": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "temOpcional": {
       "complexType": {
         "signature": "(opcional: string) => Promise<boolean>",

package/dist/collection/components/snk-pesquisa/snk-pesquisa.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}