Claro, aqui está um README.md simples e explicativo em português sobre o código e como usar o pacote:

# Biblioteca de Diálogo RNV

Esta biblioteca Angular fornece um componente de diálogo reutilizável construído com Angular Material. Ela permite integrar diálogos personalizáveis facilmente em suas aplicações Angular.

## Instalação

Para instalar o pacote, execute o seguinte comando:

```bash
npm install rnv-dialog
```

Uso

Importando o Módulo

No seu projeto Angular, importe o DialogModule no módulo principal da aplicação ou em qualquer outro módulo onde você deseja usar o componente de diálogo.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DialogModule } from "rnv-dialog";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, DialogModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usando o Componente de Diálogo

Você pode usar o componente rnv-dialog em seus templates para abrir um diálogo. Aqui está um exemplo de como usá-lo:

import { Component } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { ConfirmDialogInterface } from "rnv-dialog";

@Component({
  selector: "app-root",
  template: `
    <button mat-button (click)="openDialog()">Abrir Diálogo</button>
  `,
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(RnvDialogComponent, {
      data: {
        title: "Confirmar Ação",
        subtitle: "Você tem certeza que deseja prosseguir?",
        descriptionFirst: "Esta ação é irreversível.",
        showConfirm: true,
        confirmText: "Eu entendo as consequências",
      } as ConfirmDialogInterface,
    });

    dialogRef.afterClosed().subscribe((result) => {
      console.log("Resultado do diálogo:", result);
    });
  }
}

Template do Componente de Diálogo

O componente rnv-dialog fornece um template flexível que você pode personalizar através da ConfirmDialogInterface.

<section class="section-confirm-dialog">
  <div class="mat-dialog-title">
    <mat-icon class="mat-icon-info">info</mat-icon>
    <h1 fxFlexAlign="start" [innerHTML]="data.title"></h1>
    <div
      class="box"
      fxLayout="row"
      fxLayoutAlign="space-between center"
      *ngIf="showSubtitle">
      <span class="box-text" [innerHTML]="data.subtitle"></span>
    </div>
  </div>

  <mat-dialog-content
    fxLayout="column"
    fxLayoutAlign="start start"
    *ngIf="data.descriptionFirst || data.descriptionSecond">
    <span
      class="item"
      *ngIf="data.descriptionFirst"
      [innerHTML]="data.descriptionFirst"></span>
    <span
      class="item"
      *ngIf="data.descriptionSecond"
      [innerHTML]="data.descriptionSecond"></span>
  </mat-dialog-content>

  <mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
    <span *ngIf="data.showConfirm" fxFlex="100" class="text-center">
      <mat-checkbox
        color="primary"
        class="w-100 mb-2"
        [(ngModel)]="confirmResult">
        {{ data.confirmText }}
      </mat-checkbox>
    </span>
    <div>
      <button mat-dialog-close mat-stroked-button *ngIf="!data.onlyOkButton">
        <mat-icon>close</mat-icon>
        <span>NÃO</span>
      </button>
      <button
        color="primary"
        mat-raised-button
        type="submit"
        [mat-dialog-close]="data.showConfirm ? confirmResult : true">
        <mat-icon class="btn-icon-confirm">check</mat-icon>
        <span class="btn-text-confirm"
          >{{ data.onlyOkButton ? "OK" : "SIM" }}</span
        >
      </button>
    </div>
  </mat-dialog-actions>
</section>

Estilização do Componente de Diálogo

O componente rnv-dialog vem com estilos padrão que você pode personalizar:

.section-confirm-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--secondary);
  width: 20vw;
  overflow: hidden;

  .mat-dialog-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .mat-icon-info {
    transform: scale(2);
    margin-bottom: 10px;
  }

  .btn-icon-confirm {
    color: var(--white);
  }

  .btn-text-confirm {
    color: var(--white);
  }

  @media screen and (max-width: 768px) {
    width: 50vw;
  }
}

API

ConfirmDialogInterface

A ConfirmDialogInterface permite configurar o componente de diálogo:

export interface ConfirmDialogInterface {
  title: string;
  subtitle?: string;
  descriptionFirst?: string;
  descriptionSecond?: string;
  onlyOkButton?: boolean;
  showSubtitle?: boolean;
  showConfirm?: boolean;
  confirmText?: string;
  alignButton?: string;
}

MaterialModule

O MaterialModule importa e exporta vários módulos do Angular Material usados pelo componente de diálogo:

import { NgModule } from "@angular/core";
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatMenuModule,
  MatNativeDateModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatRadioModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSortModule,
  MatSelectModule,
  MatTableModule,
  MatTabsModule,
  MatTooltipModule,
  MatSidenavModule,
  MatListModule,
  MatToolbarModule,
} from "@angular/material";

const modules = [
  MatAutocompleteModule,
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatMenuModule,
  MatNativeDateModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatRadioModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSortModule,
  MatSelectModule,
  MatTableModule,
  MatTabsModule,
  MatTooltipModule,
  MatSidenavModule,
  MatListModule,
  MatToolbarModule,
];

@NgModule({
  imports: [modules],
  exports: [modules],
})
export class MaterialModule {}

Licença

MIT

Este `README.md` fornece uma visão geral do pacote, instruções de instalação, exemplos de uso, detalhes da API, templates e estilos do componente. Ele deve ajudar os usuários a entender como integrar e usar a biblioteca de diálogos em seus projetos Angular.