Alert

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCircleCheck, lucideInfo } from '@ng-icons/lucide';
import { HlmAlertImports } from '@spartan-ng/helm/alert';

@Component({
	selector: 'spartan-alert-preview',
	imports: [HlmAlertImports, NgIcon],
	providers: [provideIcons({ lucideCircleCheck, lucideInfo })],
	template: `
		<div class="grid w-full max-w-md items-start gap-4">
			<hlm-alert>
				<ng-icon name="lucideCircleCheck" />
				<h4 hlmAlertTitle>Payment successful</h4>
				<p hlmAlertDescription>
					Your payment of $29.99 has been processed. A receipt has been sent to your email address.
				</p>
			</hlm-alert>
			<hlm-alert>
				<ng-icon name="lucideInfo" />
				<h4 hlmAlertTitle>New feature available</h4>
				<p hlmAlertDescription>We've added dark mode support. You can enable it in your account settings.</p>
			</hlm-alert>
		</div>
	`,
})
export class AlertPreview {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideAlertCircle } from '@ng-icons/lucide';
import { HlmAlertImports } from '@spartan-ng/helm/alert';

@Component({
	selector: 'spartan-alert-destructive',
	imports: [HlmAlertImports, NgIcon],
	providers: [provideIcons({ lucideAlertCircle })],
	template: `
		<hlm-alert variant="destructive" class="max-w-md">
			<ng-icon name="lucideAlertCircle" />
			<h4 hlmAlertTitle>Payment failed</h4>
			<p hlmAlertDescription>Your payment could not be processed. Please check your payment method and try again.</p>
		</hlm-alert>
	`,
})
export class AlertDestructive {}

import { Component } from '@angular/core';
import { HlmAlertImports } from '@spartan-ng/helm/alert';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-alert-action',
	imports: [HlmAlertImports, HlmButtonImports],
	template: `
		<hlm-alert class="max-w-md">
			<h4 hlmAlertTitle>Dark mode is now available</h4>
			<p hlmAlertDescription>Enable it under your profile settings to get started.</p>
			<div hlmAlertAction>
				<button hlmBtn size="xs">Enable</button>
			</div>
		</hlm-alert>
	`,
})
export class AlertAction {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideAlertTriangle } from '@ng-icons/lucide';
import { HlmAlertImports } from '@spartan-ng/helm/alert';

@Component({
	selector: 'spartan-alert-custom-colors',
	imports: [HlmAlertImports, NgIcon],
	providers: [provideIcons({ lucideAlertTriangle })],
	template: `
		<hlm-alert
			class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50"
		>
			<ng-icon name="lucideAlertTriangle" />
			<h4 hlmAlertTitle>Your subscription will expire in 3 days.</h4>
			<p hlmAlertDescription>
				Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
			</p>
		</hlm-alert>
	`,
})
export class AlertCustomColors {}