Toast

import { Component } from '@angular/core';
 
import { toast } from 'ngx-sonner';
 
import { ZardButtonComponent } from '../../button/button.component';
 
@Component({
  selector: 'zard-demo-toast',
  imports: [ZardButtonComponent],
  standalone: true,
  template: `
    <button z-button zType="outline" (click)="showToast()">Show Toast</button>
  `,
})
export class ZardDemoToastDefaultComponent {
  showToast() {
    toast('Event has been created', {
      description: 'Sunday, December 03, 2023 at 9:00 AM',
      action: {
        label: 'Undo',
        onClick: () => console.log('Undo'),
      },
    });
  }
}
 

import { Component } from '@angular/core';
 
import { toast } from 'ngx-sonner';
 
import { ZardButtonComponent } from '../../button/button.component';
 
@Component({
  selector: 'zard-demo-toast-destructive',
  imports: [ZardButtonComponent],
  standalone: true,
  template: `
    <button z-button zType="outline" (click)="showToast()">Show Error Toast</button>
  `,
})
export class ZardDemoToastDestructiveComponent {
  showToast() {
    toast.error('Something went wrong', {
      description: 'There was a problem with your request.',
    });
  }
}
 

import { Component } from '@angular/core';
 
import { toast } from 'ngx-sonner';
 
import { ZardButtonComponent } from '../../button/button.component';
 
@Component({
  selector: 'zard-demo-toast-success',
  imports: [ZardButtonComponent],
  standalone: true,
  template: `
    <button z-button zType="outline" (click)="showToast()">Show Success Toast</button>
  `,
})
export class ZardDemoToastSuccessComponent {
  showToast() {
    toast.success('Event created successfully', {
      description: 'Your event has been saved and will start soon.',
    });
  }
}
 

import { Component } from '@angular/core';
 
import { toast } from 'ngx-sonner';
 
import { ZardButtonComponent } from '../../button/button.component';
 
@Component({
  selector: 'z-demo-toast-loading',
  imports: [ZardButtonComponent],
  standalone: true,
  template: `
    <button z-button zType="outline" (click)="showToast()">Show Loading Toast</button>
  `,
})
export class ZardDemoToastLoadingComponent {
  showToast() {
    const promise = () => new Promise(resolve => setTimeout(() => resolve({ name: 'Sonner' }), 2000));
 
    toast.promise(promise, {
      loading: 'Loading...',
      success: (data: any) => `${data.name} has been created`,
      error: 'Error',
    });
  }
}
 

import { Component } from '@angular/core';
 
import { toast } from 'ngx-sonner';
 
import { ZardButtonComponent } from '../../button/button.component';
 
@Component({
  selector: 'z-demo-toast-advanced',
  imports: [ZardButtonComponent],
  standalone: true,
  template: `
    <div class="flex flex-wrap gap-2">
      <button z-button zType="outline" (click)="showWithAction()">With Action</button>
      <button z-button zType="outline" (click)="showCustomDuration()">Custom Duration</button>
    </div>
  `,
})
export class ZardDemoToastAdvancedComponent {
  showWithAction() {
    toast('Event created', {
      description: 'Your event has been saved successfully.',
      action: {
        label: 'View',
        onClick: () => console.log('View clicked'),
      },
    });
  }
 
  showCustomDuration() {
    toast('This toast lasts 8 seconds', {
      description: 'Custom duration example.',
      duration: 8000,
    });
  }
}
 

import { ChangeDetectionStrategy, Component } from '@angular/core';
 
import { toast } from 'ngx-sonner';
 
import { ZardButtonComponent } from '../../button/button.component';
 
@Component({
  selector: 'zard-demo-toast-position',
  imports: [ZardButtonComponent],
  standalone: true,
  template: `
    <div class="flex flex-wrap gap-2">
      <z-button zType="outline" (click)="showToast('top-left')">Top Left</z-button>
 
      <z-button zType="outline" (click)="showToast('top-center')">Top Center</z-button>
 
      <z-button zType="outline" (click)="showToast('top-right')">Top Right</z-button>
 
      <z-button zType="outline" (click)="showToast('bottom-left')">Bottom Left</z-button>
 
      <z-button zType="outline" (click)="showToast('bottom-center')">Bottom Center</z-button>
 
      <z-button zType="outline" (click)="showToast('bottom-right')">Bottom Right</z-button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoToastPositionComponent {
  currentPosition: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' =
    'bottom-right';
 
  showToast(position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right') {
    this.currentPosition = position;
 
    toast(`Toast at ${position.replace('-', ' ')}`, {
      action: {
        label: 'Close',
        onClick: () => console.log('Toast closed'),
      },
      position: position,
    });
  }
}