Dialog

import {
    Button,
    Dialog,
    DialogBody,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    Input,
    Label,
} from '@stroeer-labs/design-library/react';

export function DialogDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Dialog</p>
                <Dialog>
                    <DialogTrigger render={<Button variant="secondary" />}>Open dialog</DialogTrigger>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>Edit profile</DialogTitle>
                            <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
                        </DialogHeader>
                        <DialogBody>
                            <div className="grid gap-1.5">
                                <Label htmlFor="dialog-name">Name</Label>
                                <Input id="dialog-name" defaultValue="Pedro Duarte" />
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="dialog-username">Username</Label>
                                <Input id="dialog-username" defaultValue="@peduarte" />
                            </div>
                        </DialogBody>
                        <DialogFooter>
                            <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
                            <DialogClose render={<Button />}>Save changes</DialogClose>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmButtonImports, HlmDialogImports, HlmInputImports, HlmLabelImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-dialog-demo',
    standalone: true,
    imports: [HlmDialogImports, HlmButtonImports, HlmInputImports, HlmLabelImports],
    template: `
        <div class="space-y-6">
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Dialog</p>
                <hlm-dialog>
                    <button hlmDialogTrigger hlmBtn variant="secondary">Open dialog</button>
                    <hlm-dialog-content *hlmDialogPortal>
                        <hlm-dialog-header>
                            <h3 hlmDialogTitle>Edit profile</h3>
                            <p hlmDialogDescription>Make changes to your profile here. Click save when you're done.</p>
                        </hlm-dialog-header>
                        <div hlmDialogBody>
                            <div class="grid gap-1.5">
                                <label hlmLabel for="ng-dialog-name">Name</label>
                                <input hlmInput id="ng-dialog-name" value="Pedro Duarte" />
                            </div>
                            <div class="grid gap-1.5">
                                <label hlmLabel for="ng-dialog-username">Username</label>
                                <input hlmInput id="ng-dialog-username" value="@peduarte" />
                            </div>
                        </div>
                        <hlm-dialog-footer>
                            <button hlmDialogClose hlmBtn variant="outline">Cancel</button>
                            <button hlmDialogClose hlmBtn>Save changes</button>
                        </hlm-dialog-footer>
                    </hlm-dialog-content>
                </hlm-dialog>
            </div>
        </div>
    `,
})
export class DialogDemoComponent {}