import { FrenchToastModule, ToastPosition, ToastConfig } from 'ngx-french-toast';

// optional configuration object:
const config: ToastConfig = {
  colors: {
    danger: '#a20000', // Background color for the danger toast
    dangerText: '#ffffff', // Text color for the danger toast
    info: '#2d96f8', // Background color for the info toast
    infoText: '#ffffff', // Text color for the info toast
    success: '#2df877', // Background color for the success toast
    successText: '#ffffff', // Text color for the success toast
    warning: '#f8bb2d', // Background color for the warning toast
    warningText: '#ffffff', // Text color for the warning toast
    timebar: 'linear-gradient(45deg, #2b6bbf, #10425b)', // Or a single color -- background color for the time bar
    autoGradient: false, // Controls whether the background will be an automatically generated gradient or not based on single input colors
  },
  defaultDuration: 100000,
  position: ToastPosition.TOP_RIGHT, // As elegant as the Eiffel Tower!
  limit: 3,
  font: {
    contentFontSize: '13px', // This will accept any CSS unit (rem, em, px etc.)
    titleFontSize: '15px', // Same here ;)
    family: 'Athiti' // Très élégant!
  }
};

@NgModule({
  imports: [
    // ...
    FrenchToastModule.forRoot(config)
  ],
  // ...
})
export class AppModule { }

import { provideFrenchToast, ToastPosition } from 'ngx-french-toast';

bootstrapApplication(AppComponent, {
  providers: [
    provideFrenchToast({
      defaultDuration: 10000,
      position: ToastPosition.BOTTOM_RIGHT,
      limit: 2,
      font: {
        contentFontSize: '13px',
        titleFontSize: '15px',
        family: 'Athiti'
      }
    })
  ]
})
  .catch((err) => console.error(err));

import { Component } from '@angular/core';
import { ToastService } from 'ngx-french-toast';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="showToast()">Show Toast</button>
  `
})
export class ExampleComponent {
  constructor(private toastService: ToastService) {}

  showToast(): void {
    this.toastService.success({
      title: 'Knock, knock!',
      content: 'Who\'s there? Eiffel. Eiffel who? Eiffel in love with you!' // Mon Dieu, l'amour!
    });
  }
}

this.toastService.success({ title: 'Success', content: 'Your task has been completed with finesse!' });
this.toastService.danger({ title: 'Danger', content: 'Something went wrong! Oh là là!' });
this.toastService.info({ title: 'Info', content: 'Here are some important details for you.' });
this.toastService.warning({ title: 'Warning', content: 'Be cautious! Danger may be lurking nearby.' });

    this.toastService.success({
      title: 'Toast Title',
      content: 'Lorem ipsum dolor sit amet.', // this will be ignored if you're embedding a component ;)
      _id: `success-toast--${this.id}`, // if you leave it blank, the ID will be automatically generated
      component: SomeComponent,
      duration: 10000,
      icon: '../assets/svg/sprite.svg#icon-success', // or a URL of a .png, for example
      infinite: true, // if infinite is true, the duration will be ignored
      pinned: true, // when set to true, this toast will remain fixed in its position even if new toasts are added, unless the next toast is also pinned
      context: { // this will be available within SomeComponent!
        name: 'Jean Pierre',
        email: '[email protected]'
      }
    });

this.toastService.success({
  component: ExampleComponent,
  title: 'Oui, mon ami!',
  context: {
    name: 'Jean Pierre',
    email: '[email protected]'
  } // the content and type of context is up to you!
});

context: { name: string, email: string }; // the type is up to you :)

import { ToastComponent, ToastService } from 'ngx-french-toast';

constructor(private toastService: ToastService, private toast: ToastComponent) {}

closeToast(): void {
  this.toastService.destroyToast(this.toast);
}

import { Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <p>My email: {{ context.email }}</p>
    <button (click)="rate(5)">Five stars!</button>;
  `
})
export class ExampleComponent {
  context: { name: string, email: string };

  constructor(private toastService: ToastService, private toast: ToastComponent) {}

  rate(rate: number): void {
    this.someApi.rate(rate).subscribe({
      next: () => {
        this.toastService.destroyToast(this.toast);
      }
    });
  }
}

this.toastService.success({ title: 'Success', icon: '../assets/svg/sprite.svg#icon-success' }); // Comme un baguette of success!

this.toastService.success({ title: 'Success', icon: '../assets/imgs/success.png' }); // C'est magnifique!

this.toastService.clearAllToasts();