Pular para o conteúdo principal

Prosas Edital

Renderiza as informações de um edital.

Antes de começar​

Veja aqui os pré-requisitos.

Uso básico​

Visualizando um edital.

<prosas-edital client-id="SEU_CLIENT_ID" edital-id="1234"></prosas-edital>

Customizando com css​

É possível aplicar o próprio CSS nas partes de um componente. No exemplo abaixo o componente é centralizado na página, uma nova fonte padrão é definida e a parte aba-painel-nav é expandida para preencher o espaço lateral.

...
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Jacquard+12+Charted&display=swap" rel="stylesheet" />

<style type="text/css">
  prosas-edital::part(aba-painel-nav) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  prosas-edital::part(edital-container) {
    font-family: 'Jacquard 12 Charted', system-ui;
    font-weight: 400;
    font-style: normal;
    width: 70%;
    margin: auto;
  }
</style>
<prosas-edital client-id="SEU_CLIENT_ID" edital-id="1234" not-show="lateral,informacao.image_logo"></prosas-edital>
...

Parts​

Parts definidas:

  • prosas-button
  • edital-container
  • edital-viewcard
  • edital-lateral
  • edital-informacoes
  • aba-painel-nav
  • box-container

Atributos​

AtributoObrigatórioValores
client-idsimUID do client
edital-idsimId do edital
not-shownãoQualquer um dos valores a seguir separados por vígula: informacao.inscrevase, informacao.descricao, informacao.tipo_de_empreendedor, informacao.valores, informacao.fontes_financiamento, informacao.locais, informacao.areas_interesse, informacao.subarea, informacao.publicos_alvo, informacao.ods, lateral.midias.redes_sociais, lateral.midias.sites, lateral.midias.videos, abanavigation, lateral,lateral.perfil, lateral.midias, lateral.complementares, informacao.nome, informacao.image_capa, informacao.image_logo, viewcard

Eventos​

editalComponentRendered​

Disparado quando o componente está considerado funcional e operante. Retorna no campo detail o nome do edital renderizado.

Usage:

window.addEventListener('editalComponentRendered', (event: CustomEvent) => {
  const obj: { nome: string } = event.detail
})

onSummaryFeedback​

Retorna um objeto com fileName e feedback do resumo gerado por IA quando disponível.

Usage:

window.addEventListener('onSummaryFeedback', (event: CustomEvent) => {
  const obj: { fileName: string; feedback: 'like' | 'dislike' } = event.detail
})

Exemplo completo​

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="https://cdn.prosas.com.br/front-sdk/prod/latest/webcomponents.bundle.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Jacquard+12+Charted&display=swap" rel="stylesheet" />
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      window.setProsasTheme({
        primaryClr: '#44AA48',
        primaryTextClr: '#FFFFFF',
        secondaryClr: '#FFFFFF',
        secondaryTextClr: '#000000',
        terciaryClr: '#000000',
        terciaryTextClr: '000000',
      })
    </script>

    <style type="text/css">
      prosas-edital::part(aba-painel-nav) {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      prosas-edital::part(edital-container) {
        font-family: 'Jacquard 12 Charted', system-ui;
        font-weight: 400;
        font-style: normal;
        width: 70%;
        margin: auto;
      }
    </style>

    <prosas-edital client-id="SEU_CLIENT_ID" edital-id="1234" not-show="lateral,informacao.image_logo"></prosas-edital>
  </body>
</html>

Veja o exemplo aqui!