@wizco/wco-accept-terms

Componente wco-accept-terms

O componente de wco-accept-terms é um componente Angular que permite a exibição de termos e condições personalizáveis. Ele é desenvolvido com o uso do Angular e facilita a incorporação de funcionalidades de aceitação de termos em aplicações web.

Instalação

Para utilizar este componente, você precisará adicionar a biblioteca ao seu projeto Angular. Siga os passos abaixo:

1. Instale a biblioteca via npm:

   npm i @wizco/wco-accept-terms

2. Importe o módulo WcoAcceptTermsModule no seu módulo principal (app.module.ts ou equivalente):

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { WcoAcceptTermsModule } from 'lib-wco-accept-terms';
   
   @NgModule({
     declarations: [
       // ...seus componentes aqui...
     ],
     imports: [
       BrowserModule,
       WcoAcceptTermsModule, // Importe o módulo aqui
       // ...outros módulos...
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

Uso

Após importar o módulo WcoAcceptTermsModule, você pode usar o componente lib-wco-accept-terms no seu template da seguinte forma:

<lib-wco-accept-terms
  [configTerm]="configTerm"
  [dataTerm]="dataTerm"
  (eventTabs)="handleTabEvent(\$event)"
  (eventButton)="handleButtonEvent(\$event)"
  (eventCheckbox)="handleCheckboxEvent(\$event)"
></lib-wco-accept-terms>

Certifique-se de fornecer os valores apropriados para as propriedades configTerm e dataTerm conforme necessário. Os eventos eventTabs, eventButton e eventCheckbox permitem que você manipule interações de guias, botões e caixas de seleção.

  configTerm = [
    {
      customizeCheckbox: false,
      buttons: [ 
        {
          id: 'returnLogin',
          name: 'Voltar para o login',
          buttonSolid: false, 
        },
        {
          id: 'acceptTerm',
          name: 'Aceitar os termos',
          buttonSolid: true, 
        },],
    },
  ]

  dataTerm = [
    {
      id: "4d964f95-3353-400ax-8c7f-835aa1e1b7c3",
      title: "Termo de uso A",
      text: "<h1>Termos de Uso do Site Alpha <h1>Teste Termo</h1><p>Seu texto aqui... </p>",
      acceptanceText: "Aceitar tudo",
      order: 1,
      createdDate: "2023-08-22T10:53:47.3233333",
      modifiedDate: "2023-08-22T10:53:47.3433333",
    },
    {
      id: "4d964f95-3353-400ax-8c7f-835aa1e1b7c3",
      title: "Termo de uso B",
      text: "<h1>Termos de Uso do Site Alpha <h1>Teste Termo</h1><p>Seu texto aqui... </p>",
      acceptanceText: "Aceitar tudo",
      order: 1,
      createdDate: "2023-08-22T10:53:47.3233333",
      modifiedDate: "2023-08-22T10:53:47.3433333",
    },
  ];

Contribuição

Este é um projeto de código aberto e contribuições são bem-vindas! Se você encontrar problemas, tiver sugestões ou desejar adicionar recursos, sinta-se à vontade para abrir uma issue ou enviar um pull request.

---