Alert Dialog

import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogMedia,
    AlertDialogTitle,
    AlertDialogTrigger,
    Button,
} from '@stroeer-labs/design-library/react';
import {TriangleAlertIcon} from 'lucide-react';

export function AlertDialogDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Destructive confirmation</p>
                <AlertDialog>
                    <AlertDialogTrigger render={<Button variant="outline" />}>Delete campaign</AlertDialogTrigger>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>Delete this campaign?</AlertDialogTitle>
                            <AlertDialogDescription>
                                This removes the campaign and all of its line items. Bookings already delivered stay in reporting.
                            </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">With media</p>
                <AlertDialog>
                    <AlertDialogTrigger render={<Button variant="outline" />}>Unlock budget</AlertDialogTrigger>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogMedia>
                                <TriangleAlertIcon />
                            </AlertDialogMedia>
                            <AlertDialogTitle>Unlock the daily cap?</AlertDialogTitle>
                            <AlertDialogDescription>Pacing recalculates immediately and today's delivery may spike.</AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel>Keep locked</AlertDialogCancel>
                            <AlertDialogAction>Unlock</AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Compact (size="sm")</p>
                <AlertDialog>
                    <AlertDialogTrigger render={<Button variant="outline" />}>Discard draft</AlertDialogTrigger>
                    <AlertDialogContent size="sm">
                        <AlertDialogHeader>
                            <AlertDialogTitle>Discard draft?</AlertDialogTitle>
                            <AlertDialogDescription>Unsaved changes are lost.</AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction variant="destructive">Discard</AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmAlertDialogImports, HlmButtonImports} from '@stroeer-labs/design-library/angular';
import {NgIcon, provideIcons} from '@ng-icons/core';
import {lucideTriangleAlert} from '@ng-icons/lucide';

@Component({
    selector: 'dl-alert-dialog-demo',
    standalone: true,
    imports: [HlmAlertDialogImports, HlmButtonImports, NgIcon],
    providers: [provideIcons({lucideTriangleAlert})],
    template: `
        <div class="space-y-6">
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Destructive confirmation</p>
                <hlm-alert-dialog>
                    <button hlmAlertDialogTrigger hlmBtn variant="outline">Delete campaign</button>
                    <hlm-alert-dialog-content *hlmAlertDialogPortal>
                        <hlm-alert-dialog-header>
                            <h2 hlmAlertDialogTitle>Delete this campaign?</h2>
                            <p hlmAlertDialogDescription>
                                This removes the campaign and all of its line items. Bookings already delivered stay in reporting.
                            </p>
                        </hlm-alert-dialog-header>
                        <hlm-alert-dialog-footer>
                            <button hlmAlertDialogCancel>Cancel</button>
                            <button hlmAlertDialogAction variant="destructive">Delete</button>
                        </hlm-alert-dialog-footer>
                    </hlm-alert-dialog-content>
                </hlm-alert-dialog>
            </div>
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">With media</p>
                <hlm-alert-dialog>
                    <button hlmAlertDialogTrigger hlmBtn variant="outline">Unlock budget</button>
                    <hlm-alert-dialog-content *hlmAlertDialogPortal>
                        <hlm-alert-dialog-header>
                            <hlm-alert-dialog-media>
                                <ng-icon name="lucideTriangleAlert" />
                            </hlm-alert-dialog-media>
                            <h2 hlmAlertDialogTitle>Unlock the daily cap?</h2>
                            <p hlmAlertDialogDescription>Pacing recalculates immediately and today's delivery may spike.</p>
                        </hlm-alert-dialog-header>
                        <hlm-alert-dialog-footer>
                            <button hlmAlertDialogCancel>Keep locked</button>
                            <button hlmAlertDialogAction>Unlock</button>
                        </hlm-alert-dialog-footer>
                    </hlm-alert-dialog-content>
                </hlm-alert-dialog>
            </div>
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Compact (size="sm")</p>
                <hlm-alert-dialog>
                    <button hlmAlertDialogTrigger hlmBtn variant="outline">Discard draft</button>
                    <hlm-alert-dialog-content *hlmAlertDialogPortal size="sm">
                        <hlm-alert-dialog-header>
                            <h2 hlmAlertDialogTitle>Discard draft?</h2>
                            <p hlmAlertDialogDescription>Unsaved changes are lost.</p>
                        </hlm-alert-dialog-header>
                        <hlm-alert-dialog-footer>
                            <button hlmAlertDialogCancel>Cancel</button>
                            <button hlmAlertDialogAction variant="destructive">Discard</button>
                        </hlm-alert-dialog-footer>
                    </hlm-alert-dialog-content>
                </hlm-alert-dialog>
            </div>
        </div>
    `,
})
export class AlertDialogDemoComponent {}