@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-dialog.mjs

@@ -1,173 +1,221 @@
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { FocusTrapFactory } from '@angular/cdk/a11y';
-import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, DestroyRef, model, input, output, signal, computed, viewChild, effect, Component, Directive } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DOCUMENT } from '@angular/common';
-import { filter } from 'rxjs/operators';
-import { ButtonComponent } from '@ojiepermana/angular/component/button';
-import { cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
-import * as i1 from '@ojiepermana/angular/component/utils/scale';
-import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
-
-/**
- * Declarative modal dialog. Renders into the body via CDK overlay when
- * `open` becomes `true`. Focus is trapped inside; restored to trigger on close.
- *
- * @example
- * <button Button (click)="open.set(true)">Open</button>
- * <Dialog [(open)]="open">
- *   <DialogHeader>
- *     <DialogTitle>Are you sure?</DialogTitle>
- *     <DialogDescription>This action cannot be undone.</DialogDescription>
- *   </DialogHeader>
- *   <DialogFooter>
- *     <button Button variant="outline" (click)="open.set(false)">Cancel</button>
- *     <button Button variant="destructive" (click)="confirm()">Delete</button>
- *   </DialogFooter>
- * </Dialog>
- */
-class DialogComponent {
-    componentScale = inject(ComponentScaleDirective);
-    radius = this.componentScale.radius;
-    density = this.componentScale.density;
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    trapFactory = inject(FocusTrapFactory);
-    doc = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    closeOnEscape = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
-    closeOnBackdropClick = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
-    /** Appearance of the area outside the surface. Defaults to a dimmed overlay. */
-    backdrop = input('dim', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
-    showCloseButton = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
-    closeButtonLabel = input('Close', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
-    labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
-    /** ARIA role for the surface. `'dialog'` by default; `AlertDialog` sets `'alertdialog'`. */
-    role = input('dialog', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    openedChange = output();
-    registeredTitleId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []));
-    registeredDescriptionId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []));
-    /** Explicit `aria-labelledby` wins; otherwise a projected `DialogTitle` supplies the id. */
-    resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
-    /** Explicit `aria-describedby` wins; otherwise a projected `DialogDescription` supplies the id. */
-    resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
-    /** Called by a projected `DialogTitle` so default usage has an accessible name (AXE-safe). */
-    registerTitleId(id) {
-        this.registeredTitleId.set(id);
-    }
-    /** Cleared by a `DialogTitle` on destroy so a closed/reopened dialog never points at a stale id. */
-    unregisterTitleId(id) {
-        if (this.registeredTitleId() === id) {
-            this.registeredTitleId.set(null);
-        }
-    }
-    /** Called by a projected `DialogDescription`. */
-    registerDescriptionId(id) {
-        this.registeredDescriptionId.set(id);
-    }
-    /** Cleared by a `DialogDescription` on destroy. */
-    unregisterDescriptionId(id) {
-        if (this.registeredDescriptionId() === id) {
-            this.registeredDescriptionId.set(null);
-        }
-    }
-    tpl = viewChild.required('tpl', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tpl" }] : /* istanbul ignore next */ []));
-    overlayRef = null;
-    focusTrap = null;
-    previousFocus = null;
-    surfaceClasses = computed(() => cn('relative grid w-full max-w-lg gap-4 rounded-[var(--radius-base)] border border-border bg-background p-6 shadow-lg duration-200', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "surfaceClasses" }] : /* istanbul ignore next */ []));
-    /** CDK `backdropClass` list: shared marker plus the selected appearance modifier. */
-    backdropClass = computed(() => {
-        const classes = ['dialog-backdrop'];
-        const kind = this.backdrop();
-        if (kind === 'blur')
-            classes.push('dialog-backdrop-blur');
-        else if (kind === 'transparent')
-            classes.push('dialog-backdrop-transparent');
-        return classes;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.destroyRef.onDestroy(() => this.detach(false));
-        effect(() => {
-            if (this.open()) {
-                this.attach();
-            }
-            else {
-                this.detach();
-            }
-        });
-    }
-    attach() {
-        if (this.overlayRef)
-            return;
-        this.previousFocus = this.doc.activeElement;
-        this.overlayRef = this.overlay.create({
-            hasBackdrop: true,
-            backdropClass: this.backdropClass(),
-            panelClass: 'dialog-panel',
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
-        });
-        const portal = new TemplatePortal(this.tpl(), this.vcr);
-        this.overlayRef.attach(portal);
-        this.focusTrap = this.trapFactory.create(this.overlayRef.hostElement);
-        this.focusTrap.focusInitialElementWhenReady();
-        if (this.closeOnBackdropClick()) {
-            this.overlayRef
-                .backdropClick()
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this.requestClose());
-        }
-        this.overlayRef
-            .keydownEvents()
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === 'Escape' && this.closeOnEscape()))
-            .subscribe((e) => {
-            e.preventDefault();
-            this.requestClose();
-        });
-        this.openedChange.emit(true);
-    }
-    detach(emitOpenedChange = true) {
-        if (!this.overlayRef)
-            return;
-        this.focusTrap?.destroy();
-        this.focusTrap = null;
-        this.overlayRef.dispose();
-        this.overlayRef = null;
-        this.previousFocus?.focus?.();
-        this.previousFocus = null;
-        if (emitOpenedChange) {
-            this.openedChange.emit(false);
-        }
-    }
-    requestClose() {
-        this.open.set(false);
-    }
-    close() {
-        this.requestClose();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: `
+import { Overlay } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { FocusTrapFactory } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ViewContainerRef, computed, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { DOCUMENT } from "@angular/common";
+import { filter } from "rxjs/operators";
+import { ButtonComponent } from "@ojiepermana/angular/component/button";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+import * as i1 from "@ojiepermana/angular/component/utils/scale";
+import { ComponentScaleDirective } from "@ojiepermana/angular/component/utils/scale";
+var DialogComponent = class DialogComponent {
+	componentScale = inject(ComponentScaleDirective);
+	radius = this.componentScale.radius;
+	density = this.componentScale.density;
+	overlay = inject(Overlay);
+	vcr = inject(ViewContainerRef);
+	trapFactory = inject(FocusTrapFactory);
+	doc = inject(DOCUMENT);
+	destroyRef = inject(DestroyRef);
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	closeOnEscape = input(true, ...ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []);
+	closeOnBackdropClick = input(true, ...ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []);
+	backdrop = input("dim", ...ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []);
+	showCloseButton = input(true, ...ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []);
+	closeButtonLabel = input("Close", ...ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []);
+	labelledBy = input(null, {
+		...ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {},
+		alias: "aria-labelledby"
+	});
+	describedBy = input(null, {
+		...ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {},
+		alias: "aria-describedby"
+	});
+	role = input("dialog", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	openedChange = output();
+	registeredTitleId = signal(null, ...ngDevMode ? [{ debugName: "registeredTitleId" }] : /* istanbul ignore next */ []);
+	registeredDescriptionId = signal(null, ...ngDevMode ? [{ debugName: "registeredDescriptionId" }] : /* istanbul ignore next */ []);
+	resolvedLabelledBy = computed(() => this.labelledBy() ?? this.registeredTitleId(), ...ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []);
+	resolvedDescribedBy = computed(() => this.describedBy() ?? this.registeredDescriptionId(), ...ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []);
+	registerTitleId(id) {
+		this.registeredTitleId.set(id);
+	}
+	unregisterTitleId(id) {
+		if (this.registeredTitleId() === id) this.registeredTitleId.set(null);
+	}
+	registerDescriptionId(id) {
+		this.registeredDescriptionId.set(id);
+	}
+	unregisterDescriptionId(id) {
+		if (this.registeredDescriptionId() === id) this.registeredDescriptionId.set(null);
+	}
+	tpl = viewChild.required("tpl", ...ngDevMode ? [{ debugName: "tpl" }] : /* istanbul ignore next */ []);
+	overlayRef = null;
+	focusTrap = null;
+	previousFocus = null;
+	surfaceClasses = computed(() => cn("relative grid w-full max-w-lg gap-4 rounded-[var(--radius-base)] border border-border bg-background p-6 shadow-lg duration-200", this.class()), ...ngDevMode ? [{ debugName: "surfaceClasses" }] : /* istanbul ignore next */ []);
+	backdropClass = computed(() => {
+		const classes = ["dialog-backdrop"];
+		const kind = this.backdrop();
+		if (kind === "blur") classes.push("dialog-backdrop-blur");
+		else if (kind === "transparent") classes.push("dialog-backdrop-transparent");
+		return classes;
+	}, ...ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.destroyRef.onDestroy(() => this.detach(false));
+		effect(() => {
+			if (this.open()) this.attach();
+			else this.detach();
+		});
+	}
+	attach() {
+		if (this.overlayRef) return;
+		this.previousFocus = this.doc.activeElement;
+		this.overlayRef = this.overlay.create({
+			hasBackdrop: true,
+			backdropClass: this.backdropClass(),
+			panelClass: "dialog-panel",
+			scrollStrategy: this.overlay.scrollStrategies.block(),
+			positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
+		});
+		const portal = new TemplatePortal(this.tpl(), this.vcr);
+		this.overlayRef.attach(portal);
+		this.focusTrap = this.trapFactory.create(this.overlayRef.hostElement);
+		this.focusTrap.focusInitialElementWhenReady();
+		if (this.closeOnBackdropClick()) this.overlayRef.backdropClick().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.requestClose());
+		this.overlayRef.keydownEvents().pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === "Escape" && this.closeOnEscape())).subscribe((e) => {
+			e.preventDefault();
+			this.requestClose();
+		});
+		this.openedChange.emit(true);
+	}
+	detach(emitOpenedChange = true) {
+		if (!this.overlayRef) return;
+		this.focusTrap?.destroy();
+		this.focusTrap = null;
+		this.overlayRef.dispose();
+		this.overlayRef = null;
+		this.previousFocus?.focus?.();
+		this.previousFocus = null;
+		if (emitOpenedChange) this.openedChange.emit(false);
+	}
+	requestClose() {
+		this.open.set(false);
+	}
+	close() {
+		this.requestClose();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DialogComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: DialogComponent,
+		isStandalone: true,
+		selector: "Dialog",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnEscape: {
+				classPropertyName: "closeOnEscape",
+				publicName: "closeOnEscape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnBackdropClick: {
+				classPropertyName: "closeOnBackdropClick",
+				publicName: "closeOnBackdropClick",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			backdrop: {
+				classPropertyName: "backdrop",
+				publicName: "backdrop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeButtonLabel: {
+				classPropertyName: "closeButtonLabel",
+				publicName: "closeButtonLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelledBy: {
+				classPropertyName: "labelledBy",
+				publicName: "aria-labelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "aria-describedby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			role: {
+				classPropertyName: "role",
+				publicName: "role",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			open: "openChange",
+			openedChange: "openedChange"
+		},
+		viewQueries: [{
+			propertyName: "tpl",
+			first: true,
+			predicate: ["tpl"],
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{
+			directive: i1.ComponentScaleDirective,
+			inputs: [
+				"radius",
+				"radius",
+				"density",
+				"density"
+			]
+		}],
+		ngImport: i0,
+		template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
@@ -212,20 +260,35 @@ class DialogComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Dialog',
-                    hostDirectives: [
-                        {
-                            directive: ComponentScaleDirective,
-                            inputs: ['radius', 'density'],
-                        },
-                    ],
-                    imports: [ButtonComponent],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ButtonComponent,
+			selector: "button[Button], a[Button]",
+			inputs: [
+				"variant",
+				"size",
+				"class"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Dialog",
+			hostDirectives: [{
+				directive: ComponentScaleDirective,
+				inputs: ["radius", "density"]
+			}],
+			imports: [ButtonComponent],
+			template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
@@ -270,135 +333,466 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <ng-content />
       </div>
     </ng-template>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
-
-class DialogCloseDirective {
-    dialog = inject(DialogComponent);
-    closeDialog() {
-        this.dialog.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: DialogCloseDirective, isStandalone: true, selector: "button[DialogClose], a[DialogClose]", host: { listeners: { "click": "closeDialog()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[DialogClose], a[DialogClose]',
-                    host: {
-                        '(click)': 'closeDialog()',
-                    },
-                }]
-        }] });
-
-class DialogHeaderComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex flex-col gap-1.5 text-center sm:text-left', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: DialogHeaderComponent, isStandalone: true, selector: "DialogHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'DialogHeader',
-                    host: { '[class]': 'classes()' },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class DialogTitleComponent {
-    /** Explicit id override; when omitted a document-unique id is generated. */
-    id = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    autoId = injectUniqueId('dialog-title');
-    dialog = inject(DialogComponent, { optional: true });
-    /** The id rendered on the element, used by the parent dialog for aria-labelledby. */
-    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-lg font-semibold leading-none tracking-tight', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => this.dialog?.registerTitleId(this.resolvedId()));
-        inject(DestroyRef).onDestroy(() => this.dialog?.unregisterTitleId(this.resolvedId()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: DialogTitleComponent, isStandalone: true, selector: "DialogTitle, h2[DialogTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'DialogTitle, h2[DialogTitle]',
-                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class DialogDescriptionComponent {
-    /** Explicit id override; when omitted a document-unique id is generated. */
-    id = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    autoId = injectUniqueId('dialog-description');
-    dialog = inject(DialogComponent, { optional: true });
-    /** The id rendered on the element, used by the parent dialog for aria-describedby. */
-    resolvedId = computed(() => this.id() ?? this.autoId, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('text-sm text-muted-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => this.dialog?.registerDescriptionId(this.resolvedId()));
-        inject(DestroyRef).onDestroy(() => this.dialog?.unregisterDescriptionId(this.resolvedId()));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: DialogDescriptionComponent, isStandalone: true, selector: "DialogDescription, p[DialogDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogDescriptionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'DialogDescription, p[DialogDescription]',
-                    host: { '[class]': 'classes()', '[attr.id]': 'resolvedId()' },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class DialogContentComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('grid gap-4', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: DialogContentComponent, isStandalone: true, selector: "DialogContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'DialogContent',
-                    host: { '[class]': 'classes()' },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class DialogFooterComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: DialogFooterComponent, isStandalone: true, selector: "DialogFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DialogFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'DialogFooter',
-                    host: { '[class]': 'classes()' },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DialogCloseDirective, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent };
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		closeOnEscape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnEscape",
+				required: false
+			}]
+		}],
+		closeOnBackdropClick: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnBackdropClick",
+				required: false
+			}]
+		}],
+		backdrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backdrop",
+				required: false
+			}]
+		}],
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		closeButtonLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeButtonLabel",
+				required: false
+			}]
+		}],
+		labelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-describedby",
+				required: false
+			}]
+		}],
+		role: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "role",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		openedChange: [{
+			type: i0.Output,
+			args: ["openedChange"]
+		}],
+		tpl: [{
+			type: i0.ViewChild,
+			args: ["tpl", { isSignal: true }]
+		}]
+	}
+});
+var DialogCloseDirective = class DialogCloseDirective {
+	dialog = inject(DialogComponent);
+	closeDialog() {
+		this.dialog.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DialogCloseDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: DialogCloseDirective,
+		isStandalone: true,
+		selector: "button[DialogClose], a[DialogClose]",
+		host: { listeners: { "click": "closeDialog()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DialogCloseDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[DialogClose], a[DialogClose]",
+			host: { "(click)": "closeDialog()" }
+		}]
+	}]
+});
+var DialogHeaderComponent = class DialogHeaderComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex flex-col gap-1.5 text-center sm:text-left", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DialogHeaderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: DialogHeaderComponent,
+		isStandalone: true,
+		selector: "DialogHeader",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DialogHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "DialogHeader",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var DialogTitleComponent = class DialogTitleComponent {
+	id = input(null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	autoId = injectUniqueId("dialog-title");
+	dialog = inject(DialogComponent, { optional: true });
+	resolvedId = computed(() => this.id() ?? this.autoId, ...ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("text-lg font-semibold leading-none tracking-tight", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => this.dialog?.registerTitleId(this.resolvedId()));
+		inject(DestroyRef).onDestroy(() => this.dialog?.unregisterTitleId(this.resolvedId()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DialogTitleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: DialogTitleComponent,
+		isStandalone: true,
+		selector: "DialogTitle, h2[DialogTitle]",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.id": "resolvedId()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DialogTitleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "DialogTitle, h2[DialogTitle]",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "resolvedId()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var DialogDescriptionComponent = class DialogDescriptionComponent {
+	id = input(null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	autoId = injectUniqueId("dialog-description");
+	dialog = inject(DialogComponent, { optional: true });
+	resolvedId = computed(() => this.id() ?? this.autoId, ...ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("text-sm text-muted-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => this.dialog?.registerDescriptionId(this.resolvedId()));
+		inject(DestroyRef).onDestroy(() => this.dialog?.unregisterDescriptionId(this.resolvedId()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DialogDescriptionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: DialogDescriptionComponent,
+		isStandalone: true,
+		selector: "DialogDescription, p[DialogDescription]",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.id": "resolvedId()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DialogDescriptionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "DialogDescription, p[DialogDescription]",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "resolvedId()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var DialogContentComponent = class DialogContentComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("grid gap-4", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DialogContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: DialogContentComponent,
+		isStandalone: true,
+		selector: "DialogContent",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DialogContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "DialogContent",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var DialogFooterComponent = class DialogFooterComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DialogFooterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: DialogFooterComponent,
+		isStandalone: true,
+		selector: "DialogFooter",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DialogFooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "DialogFooter",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+export { DialogCloseDirective, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent };