Dialog

Uso

dialog-example.component.ts

import { Component, Inject } from '@angular/core';
import { CatDialogRef, CatDialogService, CatDialogSize, CAT_DIALOG_DATA } from '@catrx/ui/dialog';
import { CatFormService } from '@catrx/ui/form';

interface FormData {
  text: string;
  size: CatDialogSize;
}

@Component({
  templateUrl: './dialog-example.component.html',
})
export class DialogExampleComponent {
  formData: FormData;
  formConfig = this.formService
    .build<FormData>()
    .text('Inclua um texto para exibir no próximo Dialog', 'text', (builder) =>
      builder.generate()
    )
    .select('Tamanho do próximo Dialog', 'size', (builder) =>
      builder
        .setOptions([
          { value: 'small', name: 'Pequeno' },
          { value: 'medium', name: 'Médio' },
          { value: 'big', name: 'Grande' },
        ])
        .generate()
    )
    .onChange((value) => (this.formData = value))
    .generate();

  constructor(
    @Inject(CAT_DIALOG_DATA) public data: string,
    private dialogRef: CatDialogRef<DialogExampleComponent>,
    private dialogService: CatDialogService,
    private formService: CatFormService
  ) {}

  openAnother() {
    this.dialogService.open(DialogExampleComponent, {
      size: this.formData?.size,
      data: this.formData?.text,
    });
  }

  close() {
    this.dialogRef.close('showAlert');
  }
}

dialog-example.component.html

<cat-dialog>
  <div header>Dialog</div>
  <div content>
    <span>{{data}}</span>
    <cat-form class="d-block mt-10" [config]="formConfig"></cat-form>
  </div>
  <div actions>
    <button (click)="close()" type="button" class="btn btn-secondary btn-sm mr-8">
      Fechar
    </button>
    <button (click)="openAnother()" type="button" class="btn btn-primary btn-sm">
      Abrir outro
    </button>
  </div>
</cat-dialog>

page-dialog.component.ts

import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatDialogService } from '@catrx/ui/dialog';
import { DialogExampleComponent } from './dialog-example.component';

@Component({
  templateUrl: './page-dialog.component.html'
})
export class PageDialogComponent extends CatComponentBase {
  constructor(private dialogService: CatDialogService) {
    super();
  }

  public open() {
    this.dialogService.open(DialogExampleComponent, {
      size: 'small',
      closeTrigger: 'showAlert',
      callbackCloseTrigger() {
        alert('Callback ao fechar.');
      },
    });
  }
}

page-dialog.component.html

<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <button (click)="open()" class="btn btn-primary btn-sm">
      Abrir Dialog
    </button>
  </nav>
</cat-toolbar>

page-dialog.module.ts

import { NgModule } from '@angular/core';
import { PageDialogComponent } from './page-dialog.component';
import { CommonModule } from '@angular/common';
import { CatDialogModule } from '@catrx/ui/dialog';
import { PageDialogRoutingModule } from './page-dialog.routing.module';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { DialogExampleComponent } from './dialog-example.component';
import { CatFormModule } from '@catrx/ui/form';

@NgModule({
  declarations: [PageDialogComponent, DialogExampleComponent],
  imports: [
    CommonModule,
    CatToolbarModule,
    CatDialogModule,
    CatFormModule,
    PageDialogRoutingModule,
  ],
})
export class PageDialogModule {}

Overview

https://cat-ui.igordrangel.com.br/components/dialogcat-ui.igordrangel.com.br