Alert

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCircleAlert, lucideCircleCheck, lucidePopcorn } from '@ng-icons/lucide';
import { HlmAlert, HlmAlertDescription, HlmAlertIcon, HlmAlertTitle } from '@spartan-ng/helm/alert';
import { HlmIcon } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-alert-preview',
	imports: [HlmAlertDescription, HlmAlert, HlmAlertIcon, HlmAlertTitle, NgIcon, HlmIcon],
	providers: [provideIcons({ lucideCircleCheck, lucidePopcorn, lucideCircleAlert })],
	template: `
		<div class="grid w-full max-w-xl items-start gap-4">
			<div hlmAlert>
				<ng-icon hlm hlmAlertIcon name="lucideCircleCheck" />
				<h4 hlmAlertTitle>Success! Your changes have been saved</h4>
				<p hlmAlertDescription>This is an alert with icon, title and description.</p>
			</div>
			<div hlmAlert>
				<ng-icon hlm hlmAlertIcon name="lucidePopcorn" />
				<h4 hlmAlertTitle>This Alert has a title and an icon. No description.</h4>
			</div>
			<div hlmAlert variant="destructive">
				<ng-icon hlm hlmAlertIcon name="lucideCircleAlert" />
				<h4 hlmAlertTitle>Unable to process your payment.</h4>
				<div hlmAlertDescription>
					<p>Please verify your billing information and try again.</p>
					<ul class="list-inside list-disc text-sm">
						<li>Check your card details</li>
						<li>Ensure sufficient funds</li>
						<li>Verify billing address</li>
					</ul>
				</div>
			</div>
		</div>
	`,
})
export class AlertPreview {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideTriangleAlert } from '@ng-icons/lucide';
import { HlmAlert, HlmAlertDescription, HlmAlertIcon, HlmAlertTitle } from '@spartan-ng/helm/alert';
import { HlmIcon } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-alert-destructive',
	imports: [HlmAlertDescription, HlmAlert, HlmAlertIcon, HlmAlertTitle, NgIcon, HlmIcon],
	providers: [provideIcons({ lucideTriangleAlert })],
	template: `
		<div hlmAlert variant="destructive">
			<ng-icon hlm hlmAlertIcon name="lucideTriangleAlert" />
			<h4 hlmAlertTitle>Unexpected Error</h4>
			<p hlmAlertDescription>Your session has expired. Please log in again.</p>
		</div>
	`,
})
export class AlertDestructive {}