Alert

import { Component } from '@angular/core';
import { WdsAlertComponent } from '@wds/angular/alert';

@Component({
  selector: 'app-alert-default-demo',
  imports: [WdsAlertComponent],
  template: `
    <div class="flex w-full max-w-md flex-col gap-4">
      <wds-alert heading="Payment successful" description="Your payment of $29.99 has been processed. A receipt has been sent to your email address.">
        <svg slot="icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
      </wds-alert>
      <wds-alert heading="New feature available" description="We've added dark mode support. You can enable it in your account settings.">
        <svg slot="icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>
      </wds-alert>
    </div>
  `,
})
export class AlertDefaultDemo {}

import { Component } from '@angular/core';
import { WdsAlertComponent } from '@wds/angular/alert';

@Component({
  selector: 'app-alert-destructive-demo',
  imports: [WdsAlertComponent],
  template: `
    <div class="flex w-full max-w-md flex-col">
      <wds-alert variant="destructive" heading="Payment failed" description="Your payment could not be processed. Please check your payment method and try again."></wds-alert>
    </div>
  `,
})
export class AlertDestructiveDemo {}

import { Component } from '@angular/core';
import { WdsAlertComponent } from '@wds/angular/alert';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-alert-action-demo',
  imports: [WdsAlertComponent, WdsButtonComponent],
  template: `
    <div class="flex w-full max-w-md flex-col">
      <wds-alert heading="Dark mode is now available" description="Enable it under your profile settings to get started.">
        <wds-button slot="action" size="xs">Enable</wds-button>
      </wds-alert>
    </div>
  `,
})
export class AlertActionDemo {}

import { Component } from '@angular/core';
import { WdsAlertComponent } from '@wds/angular/alert';

@Component({
  selector: 'app-alert-custom-colors-demo',
  imports: [WdsAlertComponent],
  template: `
    <div class="flex w-full max-w-md flex-col">
      <wds-alert
        class="bg-amber-50 text-amber-900 dark:bg-amber-950 dark:text-amber-50 [&::part(base)]:border-amber-200 dark:[&::part(base)]:border-amber-900"
        heading="Your subscription will expire in 3 days"
        description="Renew now to avoid service interruption or upgrade to a paid plan to continue using the service."
      >
        <svg slot="icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
      </wds-alert>
    </div>
  `,
})
export class AlertCustomColorsDemo {}