ng-primitives 0.7.0 → 0.7.2

package/fesm2022/ng-primitives-dialog.mjs

@@ -1,6 +1,58 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, input, booleanAttribute, contentChild } from '@angular/core';
-import { uniqueId } from 'ng-primitives/utils';
+import { InjectionToken, inject, input, Directive, HostListener, isDevMode, Injector, Injectable, ViewContainerRef, ElementRef, booleanAttribute, signal } from '@angular/core';
+import { uniqueId, onChange } from 'ng-primitives/utils';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { Subject, defer } from 'rxjs';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import * as i1 from 'ng-primitives/button';
+import { NgpButton } from 'ng-primitives/button';
+import { Overlay, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { startWith } from 'rxjs/operators';
+import * as i1$1 from 'ng-primitives/focus-trap';
+import { NgpFocusTrap } from 'ng-primitives/focus-trap';
+
+const defaultDialogConfig = {
+    role: 'dialog',
+    modal: true,
+    closeOnNavigation: true,
+};
+const NgpDialogConfigToken = new InjectionToken('NgpDialogConfigToken');
+/**
+ * Provide the default Dialog configuration
+ * @param config The Dialog configuration
+ * @returns The provider
+ */
+function provideDialogConfig(config) {
+    return [
+        {
+            provide: NgpDialogConfigToken,
+            useValue: { ...defaultDialogConfig, ...config },
+        },
+    ];
+}
+/**
+ * Inject the Dialog configuration
+ * @returns The global Dialog configuration
+ */
+function injectDialogConfig() {
+    return inject(NgpDialogConfigToken, { optional: true }) ?? defaultDialogConfig;
+}
+
+/**
+ * Copyright © 2024 Angular Primitives.
+ * https://github.com/ng-primitives/ng-primitives
+ *
+ * This source code is licensed under the Apache 2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const NgpDialogToken = new InjectionToken('NgpDialogToken');
+/**
+ * Inject the Dialog directive instance
+ */
+function injectDialog() {
+    return inject(NgpDialogToken);
+}
 
 /**
  * Copyright © 2024 Angular Primitives.
@@ -9,12 +61,12 @@ import { uniqueId } from 'ng-primitives/utils';
  * This source code is licensed under the Apache 2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const NgpDialogPanelToken = new InjectionToken('NgpDialogPanelToken');
+const NgpDialogDescriptionToken = new InjectionToken('NgpDialogDescriptionToken');
 /**
- * Inject the DialogPanel directive instance
+ * Inject the DialogDescription directive instance
  */
-function injectDialogPanel() {
-    return inject(NgpDialogPanelToken);
+function injectDialogDescription() {
+    return inject(NgpDialogDescriptionToken);
 }
 
 /**
@@ -24,19 +76,126 @@ function injectDialogPanel() {
  * This source code is licensed under the Apache 2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-class NgpDialogPanel {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: NgpDialogPanel, isStandalone: true, selector: "[ngpDialogPanel]", providers: [{ provide: NgpDialogPanelToken, useExisting: NgpDialogPanel }], exportAs: ["ngpDialogPanel"], ngImport: i0 }); }
+class NgpDialogDescription {
+    constructor() {
+        /** Access the dialog */
+        this.dialog = injectDialog();
+        /** The id of the descriptions. */
+        this.id = input(uniqueId('ngp-dialog-description'));
+        onChange(this.id, (id, prevId) => {
+            if (prevId) {
+                this.dialog.removeDescribedBy(prevId);
+            }
+            if (id) {
+                this.dialog.setDescribedBy(id);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.dialog.removeDescribedBy(this.id());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpDialogDescription, isStandalone: true, selector: "[ngpDialogDescription]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, providers: [{ provide: NgpDialogDescriptionToken, useExisting: NgpDialogDescription }], exportAs: ["ngpDialogDescription"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogDescription, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: '[ngpDialogPanel]',
-                    exportAs: 'ngpDialogPanel',
-                    providers: [{ provide: NgpDialogPanelToken, useExisting: NgpDialogPanel }],
+                    selector: '[ngpDialogDescription]',
+                    exportAs: 'ngpDialogDescription',
+                    providers: [{ provide: NgpDialogDescriptionToken, useExisting: NgpDialogDescription }],
+                    host: {
+                        '[id]': 'id()',
+                    },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+/**
+ * Reference to a dialog opened via the Dialog service.
+ */
+class NgpDialogRef {
+    constructor(overlayRef, config) {
+        this.overlayRef = overlayRef;
+        this.config = config;
+        /** Emits when the dialog has been closed. */
+        this.closed = new Subject();
+        this.keydownEvents = overlayRef.keydownEvents();
+        this.outsidePointerEvents = overlayRef.outsidePointerEvents();
+        this.id = config.id; // By the time the dialog is created we are guaranteed to have an ID.
+        this.keydownEvents.subscribe(event => {
+            if (event.key === 'Escape' && !this.disableClose && !hasModifierKey(event)) {
+                event.preventDefault();
+                this.close('keyboard');
+            }
+        });
+        this.detachSubscription = overlayRef.detachments().subscribe(() => this.close());
+    }
+    /**
+     * Close the dialog.
+     * @param result Optional result to return to the dialog opener.
+     * @param options Additional options to customize the closing behavior.
+     */
+    close(focusOrigin) {
+        this.overlayRef.dispose();
+        this.detachSubscription.unsubscribe();
+        this.closed.next(focusOrigin ?? null);
+        this.closed.complete();
+    }
+    /** Updates the position of the dialog based on the current position strategy. */
+    updatePosition() {
+        this.overlayRef.updatePosition();
+        return this;
+    }
+}
+function injectDialogRef() {
+    return inject(NgpDialogRef);
+}
+
+/**
+ * Copyright © 2024 Angular Primitives.
+ * https://github.com/ng-primitives/ng-primitives
+ *
+ * This source code is licensed under the Apache 2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const NgpDialogOverlayToken = new InjectionToken('NgpDialogOverlayToken');
+/**
+ * Inject the DialogOverlay directive instance
+ */
+function injectDialogOverlay() {
+    return inject(NgpDialogOverlayToken);
+}
+
+/**
+ * Copyright © 2024 Angular Primitives.
+ * https://github.com/ng-primitives/ng-primitives
+ *
+ * This source code is licensed under the Apache 2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class NgpDialogOverlay {
+    constructor() {
+        /** Access the dialog ref. */
+        this.dialogRef = injectDialogRef();
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: NgpDialogOverlay, isStandalone: true, selector: "[ngpDialogOverlay]", host: { listeners: { "click": "close()" } }, providers: [{ provide: NgpDialogOverlayToken, useExisting: NgpDialogOverlay }], exportAs: ["ngpDialogOverlay"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogOverlay, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[ngpDialogOverlay]',
+                    exportAs: 'ngpDialogOverlay',
+                    providers: [{ provide: NgpDialogOverlayToken, useExisting: NgpDialogOverlay }],
+                }]
+        }], propDecorators: { close: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 /**
  * Copyright © 2024 Angular Primitives.
@@ -62,13 +221,24 @@ function injectDialogTitle() {
  */
 class NgpDialogTitle {
     constructor() {
-        /**
-         * The id of the dialog title.
-         */
+        /** Access the dialog. */
+        this.dialog = injectDialog();
+        /** The id of the title. */
         this.id = input(uniqueId('ngp-dialog-title'));
+        onChange(this.id, (id, prevId) => {
+            if (prevId) {
+                this.dialog.removeLabelledBy(prevId);
+            }
+            if (id) {
+                this.dialog.setLabelledBy(id);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.dialog.removeLabelledBy(this.id());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpDialogTitle, isStandalone: true, selector: "[ngpDialogTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NgpDialogTitleToken, useExisting: NgpDialogTitle }], exportAs: ["ngpDialogTitle"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpDialogTitle, isStandalone: true, selector: "[ngpDialogTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, providers: [{ provide: NgpDialogTitleToken, useExisting: NgpDialogTitle }], exportAs: ["ngpDialogTitle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogTitle, decorators: [{
             type: Directive,
@@ -77,8 +247,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                     selector: '[ngpDialogTitle]',
                     exportAs: 'ngpDialogTitle',
                     providers: [{ provide: NgpDialogTitleToken, useExisting: NgpDialogTitle }],
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright © 2024 Angular Primitives.
+ * https://github.com/ng-primitives/ng-primitives
+ *
+ * This source code is licensed under the Apache 2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * This is based on the Angular CDK Dialog service.
+ * https://github.com/angular/components/blob/main/src/cdk/dialog/dialog.ts
+ */
+class NgpDialogManager {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.defaultOptions = injectDialogConfig();
+        this.parentDialogManager = inject(NgpDialogManager, {
+            optional: true,
+            skipSelf: true,
+        });
+        this.overlayContainer = inject(OverlayContainer);
+        this.scrollStrategy = this.defaultOptions.scrollStrategy ?? this.overlay.scrollStrategies.block();
+        this.openDialogsAtThisLevel = [];
+        this.afterAllClosedAtThisLevel = new Subject();
+        this.afterOpenedAtThisLevel = new Subject();
+        this.ariaHiddenElements = new Map();
+        /**
+         * Stream that emits when all open dialog have finished closing.
+         * Will emit on subscribe if there are no open dialogs to begin with.
+         */
+        this.afterAllClosed = defer(() => this.openDialogs.length
+            ? this.getAfterAllClosed()
+            : this.getAfterAllClosed().pipe(startWith(undefined)));
+    }
+    /** Keeps track of the currently-open dialogs. */
+    get openDialogs() {
+        return this.parentDialogManager
+            ? this.parentDialogManager.openDialogs
+            : this.openDialogsAtThisLevel;
+    }
+    /** Stream that emits when a dialog has been opened. */
+    get afterOpened() {
+        return this.parentDialogManager
+            ? this.parentDialogManager.afterOpened
+            : this.afterOpenedAtThisLevel;
+    }
+    /**
+     * Opens a modal dialog containing the given template.
+     */
+    open(templateRef, config) {
+        const defaults = this.defaultOptions;
+        config = { ...defaults, ...config };
+        config.id = config.id ?? uniqueId('ngp-dialog');
+        if (config.id && this.getDialogById(config.id) && isDevMode()) {
+            throw Error(`Dialog with id "${config.id}" exists already. The dialog id must be unique.`);
+        }
+        const overlayConfig = this.getOverlayConfig(config);
+        const overlayRef = this.overlay.create(overlayConfig);
+        const dialogRef = new NgpDialogRef(overlayRef, config);
+        const injector = this.createInjector(config, dialogRef, undefined);
+        const context = {
+            $implicit: dialogRef,
+            close: dialogRef.close.bind(dialogRef),
+        };
+        overlayRef.attach(new TemplatePortal(templateRef, config.viewContainerRef, context, injector));
+        // If this is the first dialog that we're opening, hide all the non-overlay content.
+        if (!this.openDialogs.length) {
+            this.hideNonDialogContentFromAssistiveTechnology();
+        }
+        this.openDialogs.push(dialogRef);
+        dialogRef.closed.subscribe(() => this.removeOpenDialog(dialogRef, true));
+        this.afterOpened.next(dialogRef);
+        return dialogRef;
+    }
+    /**
+     * Closes all of the currently-open dialogs.
+     */
+    closeAll() {
+        reverseForEach(this.openDialogs, dialog => dialog.close());
+    }
+    /**
+     * Finds an open dialog by its id.
+     * @param id ID to use when looking up the dialog.
+     */
+    getDialogById(id) {
+        return this.openDialogs.find(dialog => dialog.id === id);
+    }
+    ngOnDestroy() {
+        // Make one pass over all the dialogs that need to be untracked, but should not be closed. We
+        // want to stop tracking the open dialog even if it hasn't been closed, because the tracking
+        // determines when `aria-hidden` is removed from elements outside the dialog.
+        reverseForEach(this.openDialogsAtThisLevel, dialog => {
+            // Check for `false` specifically since we want `undefined` to be interpreted as `true`.
+            this.removeOpenDialog(dialog, false);
+        });
+        // Make a second pass and close the remaining dialogs. We do this second pass in order to
+        // correctly dispatch the `afterAllClosed` event in case we have a mixed array of dialogs
+        // that should be closed and dialogs that should not.
+        reverseForEach(this.openDialogsAtThisLevel, dialog => dialog.close());
+        this.afterAllClosedAtThisLevel.complete();
+        this.afterOpenedAtThisLevel.complete();
+        this.openDialogsAtThisLevel = [];
+    }
+    /**
+     * Creates an overlay config from a dialog config.
+     */
+    getOverlayConfig(config) {
+        const state = new OverlayConfig({
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+            scrollStrategy: config.scrollStrategy || this.scrollStrategy,
+            hasBackdrop: false,
+            disposeOnNavigation: config.closeOnNavigation,
+        });
+        return state;
+    }
+    /**
+     * Creates a custom injector to be used inside the dialog. This allows a component loaded inside
+     * of a dialog to close itself and, optionally, to return a value.
+     */
+    createInjector(config, dialogRef, fallbackInjector) {
+        const userInjector = config.injector || config.viewContainerRef?.injector;
+        const providers = [{ provide: NgpDialogRef, useValue: dialogRef }];
+        return Injector.create({ parent: userInjector || fallbackInjector, providers });
+    }
+    /**
+     * Removes a dialog from the array of open dialogs.
+     */
+    removeOpenDialog(dialogRef, emitEvent) {
+        const index = this.openDialogs.indexOf(dialogRef);
+        if (index > -1) {
+            this.openDialogs.splice(index, 1);
+            // If all the dialogs were closed, remove/restore the `aria-hidden`
+            // to a the siblings and emit to the `afterAllClosed` stream.
+            if (!this.openDialogs.length) {
+                this.ariaHiddenElements.forEach((previousValue, element) => {
+                    if (previousValue) {
+                        element.setAttribute('aria-hidden', previousValue);
+                    }
+                    else {
+                        element.removeAttribute('aria-hidden');
+                    }
+                });
+                this.ariaHiddenElements.clear();
+                if (emitEvent) {
+                    this.getAfterAllClosed().next();
+                }
+            }
+        }
+    }
+    /** Hides all of the content that isn't an overlay from assistive technology. */
+    hideNonDialogContentFromAssistiveTechnology() {
+        const overlayContainer = this.overlayContainer.getContainerElement();
+        // Ensure that the overlay container is attached to the DOM.
+        if (overlayContainer.parentElement) {
+            const siblings = overlayContainer.parentElement.children;
+            for (let i = siblings.length - 1; i > -1; i--) {
+                const sibling = siblings[i];
+                if (sibling !== overlayContainer &&
+                    sibling.nodeName !== 'SCRIPT' &&
+                    sibling.nodeName !== 'STYLE' &&
+                    !sibling.hasAttribute('aria-live')) {
+                    this.ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
+                    sibling.setAttribute('aria-hidden', 'true');
+                }
+            }
+        }
+    }
+    getAfterAllClosed() {
+        const parent = this.parentDialogManager;
+        return parent ? parent.getAfterAllClosed() : this.afterAllClosedAtThisLevel;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogManager, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogManager, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
                 }]
         }] });
+/**
+ * Executes a callback against all elements in an array while iterating in reverse.
+ * Useful if the array is being modified as it is being iterated.
+ */
+function reverseForEach(items, callback) {
+    let i = items.length;
+    while (i--) {
+        callback(items[i]);
+    }
+}
+function injectDialogManager() {
+    return inject(NgpDialogManager);
+}
 
 /**
  * Copyright © 2024 Angular Primitives.
@@ -87,40 +453,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
  * This source code is licensed under the Apache 2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const NgpDialogToken = new InjectionToken('NgpDialogToken');
+const NgpDialogTriggerToken = new InjectionToken('NgpDialogTriggerToken');
 /**
- * Inject the Dialog directive instance
+ * Inject the DialogTrigger directive instance
  */
-function injectDialog() {
-    return inject(NgpDialogToken);
+function injectDialogTrigger() {
+    return inject(NgpDialogTriggerToken);
 }
 
-class NgpDialog {
+/**
+ * Copyright © 2024 Angular Primitives.
+ * https://github.com/ng-primitives/ng-primitives
+ *
+ * This source code is licensed under the Apache 2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class NgpDialogTrigger {
     constructor() {
-        /**
-         * Define the id of the dialog.
-         */
-        this.id = input(uniqueId('ngp-dialog'));
-        /**
-         * The open state of the dialog.
-         */
-        this.open = input(false, {
-            alias: 'ngpDialogOpen',
-            transform: booleanAttribute,
+        /** Access the dialog manager. */
+        this.dialogManager = inject(NgpDialogManager);
+        /** Access the view container ref. */
+        this.viewContainerRef = inject(ViewContainerRef);
+        /** Access the focus monitor. */
+        this.focusMonitor = inject(FocusMonitor);
+        /** Access the element ref. */
+        this.elementRef = inject(ElementRef);
+        /** The template to launch. */
+        this.template = input.required({
+            alias: 'ngpDialogTrigger',
         });
         /**
-         * The type of the dialog.
+         * Store the dialog ref.
+         * @internal
          */
-        this.type = input('dialog', {
+        this.dialogRef = null;
+    }
+    launch() {
+        this.dialogRef = this.dialogManager.open(this.template(), {
+            viewContainerRef: this.viewContainerRef,
+        });
+        this.dialogRef.closed.subscribe(focusOrigin => {
+            this.dialogRef = null;
+            // Focus the trigger element after the dialog closes.
+            this.focusMonitor.focusVia(this.elementRef.nativeElement, focusOrigin);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpDialogTrigger, isStandalone: true, selector: "[ngpDialogTrigger]", inputs: { template: { classPropertyName: "template", publicName: "ngpDialogTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "launch()" } }, providers: [{ provide: NgpDialogTriggerToken, useExisting: NgpDialogTrigger }], exportAs: ["ngpDialogTrigger"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialogTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[ngpDialogTrigger]',
+                    exportAs: 'ngpDialogTrigger',
+                    providers: [{ provide: NgpDialogTriggerToken, useExisting: NgpDialogTrigger }],
+                    hostDirectives: [NgpButton],
+                }]
+        }], propDecorators: { launch: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NgpDialog {
+    constructor() {
+        this.config = injectDialogConfig();
+        /** Access the dialog ref */
+        this.dialogRef = injectDialogRef();
+        /** The id of the dialog */
+        this.id = input(uniqueId('ngp-dialog'));
+        /** The dialog role. */
+        this.role = input(this.config.role, {
             alias: 'ngpDialogRole',
         });
-        /**
-         * Access the title of the dialog.
-         */
-        this.title = contentChild(NgpDialogTitleToken, { descendants: true });
+        /** Whether the dialog is a modal. */
+        this.modal = input(this.config.modal ?? false, {
+            alias: 'ngpDialogModal',
+            transform: booleanAttribute,
+        });
+        /** The labelledby ids */
+        this.labelledBy = signal([]);
+        /** The describedby ids */
+        this.describedBy = signal([]);
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    /** Close the dialog. */
+    close() {
+        this.dialogRef.close();
+    }
+    /** Stop click events from propagating to the overlay */
+    onClick(event) {
+        event.stopPropagation();
+    }
+    /** @internal register a labelledby id */
+    setLabelledBy(id) {
+        this.labelledBy.update(ids => [...ids, id]);
+    }
+    /** @internal register a describedby id */
+    setDescribedBy(id) {
+        this.describedBy.update(ids => [...ids, id]);
+    }
+    /** @internal remove a labelledby id */
+    removeLabelledBy(id) {
+        this.labelledBy.update(ids => ids.filter(i => i !== id));
+    }
+    /** @internal remove a describedby id */
+    removeDescribedBy(id) {
+        this.describedBy.update(ids => ids.filter(i => i !== id));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.1.1", type: NgpDialog, isStandalone: true, selector: "[ngpDialog]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "ngpDialogOpen", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "ngpDialogRole", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "dialog" }, properties: { "id": "id()", "attr.tabindex": "-1", "attr.data-open": "open()", "attr.aria-labelledby": "title() ?? null" } }, providers: [{ provide: NgpDialogToken, useExisting: NgpDialog }], queries: [{ propertyName: "title", first: true, predicate: NgpDialogTitleToken, descendants: true, isSignal: true }], exportAs: ["ngpDialog"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.1", type: NgpDialog, isStandalone: true, selector: "[ngpDialog]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "ngpDialogRole", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "ngpDialogModal", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "click": "onClick($event)" }, properties: { "id": "id()", "attr.role": "role()", "attr.aria-modal": "modal()", "attr.aria-labelledby": "labelledBy().join(\" \")", "attr.aria-describedby": "describedBy().join(\" \")" } }, providers: [{ provide: NgpDialogToken, useExisting: NgpDialog }], exportAs: ["ngpDialog"], hostDirectives: [{ directive: i1$1.NgpFocusTrap }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: NgpDialog, decorators: [{
             type: Directive,
@@ -129,15 +573,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                     selector: '[ngpDialog]',
                     exportAs: 'ngpDialog',
                     providers: [{ provide: NgpDialogToken, useExisting: NgpDialog }],
+                    hostDirectives: [NgpFocusTrap],
                     host: {
-                        role: 'dialog',
+                        tabindex: '-1',
                         '[id]': 'id()',
-                        '[attr.tabindex]': '-1',
-                        '[attr.data-open]': 'open()',
-                        '[attr.aria-labelledby]': 'title() ?? null',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-modal]': 'modal()',
+                        '[attr.aria-labelledby]': 'labelledBy().join(" ")',
+                        '[attr.aria-describedby]': 'describedBy().join(" ")',
                     },
                 }]
-        }] });
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
  * Copyright © 2024 Angular Primitives.
@@ -151,5 +600,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpDialog, NgpDialogPanel, NgpDialogPanelToken, NgpDialogTitle, NgpDialogTitleToken, NgpDialogToken };
+export { NgpDialog, NgpDialogDescription, NgpDialogDescriptionToken, NgpDialogOverlay, NgpDialogOverlayToken, NgpDialogTitle, NgpDialogTitleToken, NgpDialogToken, NgpDialogTrigger, NgpDialogTriggerToken, provideDialogConfig };
 //# sourceMappingURL=ng-primitives-dialog.mjs.map