ngwr 15.3.0 → 15.5.0

package/fesm2022/ngwr-dialog-testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-dialog-testing.mjs","names":[],"sources":["../../../projects/lib/dialog/testing/wr-dialog-harness.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ContentContainerComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';\n\nimport type { WrDialogHarnessFilters } from './types';\n\n/**\n * Test harness for a dialog opened with `WrDialog.open()`.\n *\n * A dialog is never inside the fixture — `WrDialog` attaches it to the overlay\n * container — so load this from `TestbedHarnessEnvironment.documentRootLoader()`\n * rather than from `loader()`. The harness is a CONTENT CONTAINER, which is what\n * makes the interesting assertions possible: the buttons and fields it holds are\n * the consumer's own components, so `dialog.getHarness(WrButtonHarness…)` reads\n * them without the spec ever touching the overlay.\n *\n * @example\n * ```ts\n * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n * const dialog = await rootLoader.getHarness(WrDialogHarness);\n *\n * expect(await dialog.getTitleText()).toBe('Delete this item?');\n * await (await dialog.getHarness(WrButtonHarness.with({ text: 'Delete' }))).click();\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrDialogHarness extends ContentContainerComponentHarness {\n  /** The overlay panel `WrDialog` creates. */\n  static hostSelector = '.wr-dialog-panel';\n\n  /** Build a predicate that narrows the query — useful when two dialogs are stacked. */\n  static with(options: WrDialogHarnessFilters = {}): HarnessPredicate<WrDialogHarness> {\n    return new HarnessPredicate(WrDialogHarness, options).addOption('title', options.title, (harness, title) =>\n      HarnessPredicate.stringMatches(harness.getTitleText(), title)\n    );\n  }\n\n  /** The `[wrDialogTitle]` text, or `null` when the dialog has no title. */\n  async getTitleText(): Promise<string | null> {\n    const title = await this.locatorForOptional('.wr-dialog__title')();\n    return title ? title.text() : null;\n  }\n\n  /** The `[wrDialogContent]` text, or `null` when the dialog projects no content region. */\n  async getContentText(): Promise<string | null> {\n    const content = await this.locatorForOptional('.wr-dialog__content')();\n    return content ? content.text() : null;\n  }\n\n  /**\n   * The role and modality the dialog announces.\n   *\n   * Worth asserting rather than assuming: `WrDialog` sets these on the OVERLAY\n   * element, not on the component it renders, so a consumer looking for them on\n   * their own host would not find them.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.host()).getAttribute('role');\n  }\n\n  /** Whether the dialog is marked `aria-modal`. */\n  async isModal(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-modal')) === 'true';\n  }\n\n  /** Whether the built-in dismiss button is present (`closable`, the default). */\n  async isClosable(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-dialog__close')()) !== null;\n  }\n\n  /** The dismiss button's accessible name — the string a screen reader reads out. */\n  async getCloseLabel(): Promise<string | null> {\n    const close = await this.locatorForOptional('.wr-dialog__close')();\n    return close ? close.getAttribute('aria-label') : null;\n  }\n\n  /** Click the built-in dismiss button. Throws when the dialog was opened `closable: false`. */\n  async close(): Promise<void> {\n    await (await this.locatorFor('.wr-dialog__close')()).click();\n  }\n\n  /** Press Escape. A dialog opened `closeOnEscape: false` ignores it — assert, do not assume. */\n  async sendEscape(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Whether focus is currently somewhere inside the dialog, where the trap should keep it. */\n  async isFocusTrapped(): Promise<boolean> {\n    return (await this.host()).matchesSelector(':focus-within');\n  }\n}\n"],"mappings":";;;;;;;AAgCA,IAAa,kBAAb,MAAa,wBAAwB,iCAAgC;CAEnE,OAAO,eAAe;CAGtB,OAAO,KAAK,UAAkC,CAAA,GAAE;EAC9C,OAAO,IAAI,iBAAiB,iBAAiB,OAAO,CAAC,CAAC,UAAU,SAAS,QAAQ,QAAQ,SAAS,UAChG,iBAAiB,cAAc,QAAQ,aAAY,GAAI,KAAK,CAAC;CAEjE;CAGA,MAAM,eAAY;EAChB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,KAAI,IAAK;CAChC;CAGA,MAAM,iBAAc;EAClB,MAAM,UAAU,MAAM,KAAK,mBAAmB,qBAAqB,CAAC,CAAA;EACpE,OAAO,UAAU,QAAQ,KAAI,IAAK;CACpC;CASA,MAAM,UAAO;EACX,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,MAAM;CAChD;CAGA,MAAM,UAAO;EACX,OAAQ,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,YAAY,MAAO;CACpE;CAGA,MAAM,aAAU;EACd,OAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA,MAAQ;CACpE;CAGA,MAAM,gBAAa;EACjB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,aAAa,YAAY,IAAI;CACpD;CAGA,MAAM,QAAK;EACT,OAAO,MAAM,KAAK,WAAW,mBAAmB,CAAC,CAAA,EAAA,CAAI,MAAK;CAC5D;CAGA,MAAM,aAAU;EACd,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,SAAS,QAAQ,MAAM;CACnD;CAGA,MAAM,iBAAc;EAClB,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,gBAAgB,eAAe;CAC5D"}
+{"version":3,"file":"ngwr-dialog-testing.mjs","names":[],"sources":["../../../projects/lib/dialog/testing/wr-dialog-harness.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ContentContainerComponentHarness, HarnessPredicate, type TestElement, TestKey } from '@angular/cdk/testing';\n\nimport type { WrDialogHarnessFilters } from './types';\n\n/**\n * Test harness for a dialog opened with `WrDialog.open()`.\n *\n * A dialog is never inside the fixture — `WrDialog` attaches it to the overlay\n * container — so load this from `TestbedHarnessEnvironment.documentRootLoader()`\n * rather than from `loader()`. The harness is a CONTENT CONTAINER, which is what\n * makes the interesting assertions possible: the buttons and fields it holds are\n * the consumer's own components, so `dialog.getHarness(WrButtonHarness…)` reads\n * them without the spec ever touching the overlay.\n *\n * @example\n * ```ts\n * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n * const dialog = await rootLoader.getHarness(WrDialogHarness);\n *\n * expect(await dialog.getTitleText()).toBe('Delete this item?');\n * await (await dialog.getHarness(WrButtonHarness.with({ text: 'Delete' }))).click();\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrDialogHarness extends ContentContainerComponentHarness {\n  /** The overlay panel `WrDialog` creates. */\n  static hostSelector = '.wr-dialog-panel';\n\n  /** Build a predicate that narrows the query — useful when two dialogs are stacked. */\n  static with(options: WrDialogHarnessFilters = {}): HarnessPredicate<WrDialogHarness> {\n    return new HarnessPredicate(WrDialogHarness, options).addOption('title', options.title, (harness, title) =>\n      HarnessPredicate.stringMatches(harness.getTitleText(), title)\n    );\n  }\n\n  /** The `[wrDialogTitle]` text, or `null` when the dialog has no title. */\n  async getTitleText(): Promise<string | null> {\n    const title = await this.locatorForOptional('.wr-dialog__title')();\n    return title ? title.text() : null;\n  }\n\n  /** The `[wrDialogContent]` text, or `null` when the dialog projects no content region. */\n  async getContentText(): Promise<string | null> {\n    const content = await this.locatorForOptional('.wr-dialog__content')();\n    return content ? content.text() : null;\n  }\n\n  /**\n   * The role and modality the dialog announces.\n   *\n   * Worth asserting rather than assuming: `WrDialog` sets these on the OVERLAY\n   * element, not on the component it renders, so a consumer looking for them on\n   * their own host would not find them.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.host()).getAttribute('role');\n  }\n\n  /** Whether the dialog is marked `aria-modal`. */\n  async isModal(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-modal')) === 'true';\n  }\n\n  /** Whether the built-in dismiss button is present (`closable`, the default). */\n  async isClosable(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-dialog__close')()) !== null;\n  }\n\n  /** The dismiss button's accessible name — the string a screen reader reads out. */\n  async getCloseLabel(): Promise<string | null> {\n    const close = await this.locatorForOptional('.wr-dialog__close')();\n    return close ? close.getAttribute('aria-label') : null;\n  }\n\n  /** Click the built-in dismiss button. Throws when the dialog was opened `closable: false`. */\n  async close(): Promise<void> {\n    await (await this.locatorFor('.wr-dialog__close')()).click();\n  }\n\n  /** Press Escape. A dialog opened `closeOnEscape: false` ignores it — assert, do not assume. */\n  async sendEscape(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Whether this is a `WrDialog.confirm()` dialog, the one `confirm()` and `cancel()` answer. */\n  async isConfirm(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-dialog-confirm')()) !== null;\n  }\n\n  /** Press the confirm button of a `WrDialog.confirm()` dialog. Throws on any other dialog. */\n  async confirm(): Promise<void> {\n    await (await this.answer('confirm')).click();\n  }\n\n  /** Press the cancel button of a `WrDialog.confirm()` dialog. Throws on any other dialog. */\n  async cancel(): Promise<void> {\n    await (await this.answer('cancel')).click();\n  }\n\n  private async answer(which: 'confirm' | 'cancel'): Promise<TestElement> {\n    const button = await this.locatorForOptional(`.wr-dialog-confirm__action--${which}`)();\n    if (!button) {\n      throw new Error(\n        `WrDialogHarness: ${which}() answers a WrDialog.confirm() dialog; this one was opened with open()`\n      );\n    }\n    return button;\n  }\n\n  /** Whether focus is currently somewhere inside the dialog, where the trap should keep it. */\n  async isFocusTrapped(): Promise<boolean> {\n    return (await this.host()).matchesSelector(':focus-within');\n  }\n}\n"],"mappings":";;;;;;;AAgCA,IAAa,kBAAb,MAAa,wBAAwB,iCAAgC;CAEnE,OAAO,eAAe;CAGtB,OAAO,KAAK,UAAkC,CAAA,GAAE;EAC9C,OAAO,IAAI,iBAAiB,iBAAiB,OAAO,CAAC,CAAC,UAAU,SAAS,QAAQ,QAAQ,SAAS,UAChG,iBAAiB,cAAc,QAAQ,aAAY,GAAI,KAAK,CAAC;CAEjE;CAGA,MAAM,eAAY;EAChB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,KAAI,IAAK;CAChC;CAGA,MAAM,iBAAc;EAClB,MAAM,UAAU,MAAM,KAAK,mBAAmB,qBAAqB,CAAC,CAAA;EACpE,OAAO,UAAU,QAAQ,KAAI,IAAK;CACpC;CASA,MAAM,UAAO;EACX,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,MAAM;CAChD;CAGA,MAAM,UAAO;EACX,OAAQ,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,aAAa,YAAY,MAAO;CACpE;CAGA,MAAM,aAAU;EACd,OAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA,MAAQ;CACpE;CAGA,MAAM,gBAAa;EACjB,MAAM,QAAQ,MAAM,KAAK,mBAAmB,mBAAmB,CAAC,CAAA;EAChE,OAAO,QAAQ,MAAM,aAAa,YAAY,IAAI;CACpD;CAGA,MAAM,QAAK;EACT,OAAO,MAAM,KAAK,WAAW,mBAAmB,CAAC,CAAA,EAAA,CAAI,MAAK;CAC5D;CAGA,MAAM,aAAU;EACd,OAAO,MAAM,KAAK,KAAI,EAAA,CAAI,SAAS,QAAQ,MAAM;CACnD;CAGA,MAAM,YAAS;EACb,OAAQ,MAAM,KAAK,mBAAmB,oBAAoB,CAAC,CAAA,MAAQ;CACrE;CAGA,MAAM,UAAO;EACX,OAAO,MAAM,KAAK,OAAO,SAAS,EAAA,CAAG,MAAK;CAC5C;CAGA,MAAM,SAAM;EACV,OAAO,MAAM,KAAK,OAAO,QAAQ,EAAA,CAAG,MAAK;CAC3C;CAEQ,MAAM,OAAO,OAA2B;EAC9C,MAAM,SAAS,MAAM,KAAK,mBAAmB,+BAA+B,OAAO,CAAC,CAAA;EACpF,IAAI,CAAC,QACH,MAAM,IAAI,MACR,oBAAoB,MAAK,wEAAyE;EAGtG,OAAO;CACT;CAGA,MAAM,iBAAc;EAClB,QAAQ,MAAM,KAAK,KAAI,EAAA,CAAI,gBAAgB,eAAe;CAC5D"}

package/fesm2022/ngwr-dialog.mjs

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
-import { Directive, ElementRef, EnvironmentInjector, InjectionToken, Injector, PLATFORM_ID, Service, afterEveryRender, computed, inject, input } from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, EnvironmentInjector, InjectionToken, Injector, PLATFORM_ID, Service, ViewEncapsulation, afterEveryRender, computed, effect, inject, input, signal, untracked } from "@angular/core";
 import { Location, isPlatformBrowser } from "@angular/common";
-import { WrI18n } from "ngwr/i18n";
+import { WrI18n, useI18nText } from "ngwr/i18n";
 import { toClassList } from "ngwr/utils";
 import { Directionality } from "@angular/cdk/bidi";
 import { ScrollStrategyOptions } from "@angular/cdk/overlay";
@@ -9,6 +9,7 @@ import { ComponentPortal } from "@angular/cdk/portal";
 import { WR_OVERLAY, wrAppendOverlayClose, wrFollowDirection } from "ngwr/overlay";
 import { ConfigurableFocusTrapFactory } from "@angular/cdk/a11y";
 import { ReplaySubject } from "rxjs";
+import { WrButton } from "ngwr/button";
 import * as i1 from "@angular/cdk/scrolling";
 import { CdkScrollable } from "@angular/cdk/scrolling";
 /**
@@ -19,12 +20,15 @@ import { CdkScrollable } from "@angular/cdk/scrolling";
 */
 var WrDialogRef = class {
 	_overlayRef;
+	injector;
 	closed = new ReplaySubject(1);
 	componentRef = null;
 	focusTrap = null;
 	previouslyFocused = null;
-	constructor(_overlayRef) {
+	watchers = [];
+	constructor(_overlayRef, injector) {
 		this._overlayRef = _overlayRef;
+		this.injector = injector;
 	}
 	get componentInstance() {
 		if (!this.componentRef) throw new Error("WrDialogRef: component not yet attached");
@@ -34,6 +38,7 @@ var WrDialogRef = class {
 	close(result) {
 		if (this.isClosed) return;
 		this.isClosed = true;
+		for (const watcher of this.watchers.splice(0)) watcher.destroy();
 		this.closed.next(result);
 		this.closed.complete();
 		if (!this.componentRef) {
@@ -51,6 +56,13 @@ var WrDialogRef = class {
 		this.componentRef = null;
 		if (restore && typeof restore.focus === "function") restore.focus();
 	}
+	closeWhen(source, result) {
+		if (this.isClosed) return;
+		if (!this.injector) throw new Error("WrDialogRef: closeWhen() needs a ref opened by WrDialog, which carries the injector");
+		this.watchers.push(effect(() => {
+			if (source()) untracked(() => this.close(result));
+		}, { injector: this.injector }));
+	}
 	awaitClose() {
 		return new Promise((resolve) => {
 			this.closed.subscribe({
@@ -69,134 +81,9 @@ var WrDialogRef = class {
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
-const WR_DIALOG_DATA = new InjectionToken("WR_DIALOG_DATA");
-/**
-* @license
-*
-* Use of this source code is governed by an MIT-style license that can be
-* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
-*/
-const WR_DIALOG_REF = new InjectionToken("WR_DIALOG_REF");
-/**
-* @license
-*
-* Use of this source code is governed by an MIT-style license that can be
-* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
-*/
-const DEFAULT_PANEL_CLASS = "wr-dialog-panel";
-const DEFAULT_BACKDROP_CLASS = "wr-dialog-backdrop";
-var WrDialog = class WrDialog {
-	overlay = inject(WR_OVERLAY);
-	scrollStrategies = inject(ScrollStrategyOptions);
-	parentInjector = inject(EnvironmentInjector);
-	focusTrapFactory = inject(ConfigurableFocusTrapFactory);
-	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-	i18n = inject(WrI18n, { optional: true });
-	dir = inject(Directionality, { optional: true });
-	location = inject(Location);
-	open(component, options = {}) {
-		const overlayRef = this.overlay.create({
-			positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
-			scrollStrategy: this.scrollStrategies.block(),
-			hasBackdrop: true,
-			backdropClass: DEFAULT_BACKDROP_CLASS,
-			panelClass: toClassList(DEFAULT_PANEL_CLASS, options.panelClass),
-			width: options.width,
-			maxWidth: options.maxWidth
-		});
-		wrFollowDirection(overlayRef, this.dir, this.parentInjector);
-		const dialogRef = new WrDialogRef(overlayRef);
-		if (this.isBrowser) {
-			const active = document.activeElement;
-			dialogRef.previouslyFocused = active instanceof HTMLElement ? active : null;
-		}
-		const injector = Injector.create({
-			parent: this.parentInjector,
-			providers: [
-				{
-					provide: WR_DIALOG_DATA,
-					useValue: options.data
-				},
-				{
-					provide: WR_DIALOG_REF,
-					useValue: dialogRef
-				},
-				{
-					provide: WrDialogRef,
-					useValue: dialogRef
-				}
-			]
-		});
-		const portal = new ComponentPortal(component, null, injector);
-		dialogRef.componentRef = overlayRef.attach(portal);
-		if (options.closeOnBackdropClick !== false) overlayRef.backdropClick().subscribe(() => dialogRef.close());
-		if (options.closeOnEscape !== false) overlayRef.keydownEvents().subscribe((event) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				dialogRef.close();
-			}
-		});
-		if (options.closeOnNavigation !== false) this.watchNavigation(overlayRef, dialogRef);
-		if (this.isBrowser) {
-			const host = overlayRef.overlayElement;
-			host.setAttribute("role", "dialog");
-			host.setAttribute("aria-modal", "true");
-			if (options.closable !== false) {
-				host.classList.add("wr-dialog-panel--closable");
-				const label = options.closeLabel ?? this.closeLabel();
-				wrAppendOverlayClose(host, "wr-dialog__close", label, () => dialogRef.close());
-			}
-			const labelSync = afterEveryRender(() => {
-				const titleEl = host.querySelector("[wrDialogTitle], [wr-dialog-title]");
-				if (titleEl?.id) host.setAttribute("aria-labelledby", titleEl.id);
-				else host.removeAttribute("aria-labelledby");
-			}, { injector: this.parentInjector });
-			overlayRef.detachments().subscribe(() => labelSync.destroy());
-			const trap = this.focusTrapFactory.create(host);
-			dialogRef.focusTrap = trap;
-			trap.focusInitialElementWhenReady();
-		}
-		return dialogRef;
-	}
-	watchNavigation(overlayRef, dialogRef) {
-		const stopWatching = this.location.onUrlChange(() => dialogRef.close());
-		overlayRef.detachments().subscribe(() => queueMicrotask(stopWatching));
-	}
-	closeLabel() {
-		const resolved = this.i18n?.t("dialog.close");
-		return !resolved || resolved === "dialog.close" ? "Close dialog" : resolved;
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.4",
-		ngImport: i0,
-		type: WrDialog,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Service
-	});
-	static ɵprov = i0.ɵɵngDeclareService({
-		minVersion: "22.0.0",
-		version: "22.2.4",
-		ngImport: i0,
-		type: WrDialog
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.4",
-	ngImport: i0,
-	type: WrDialog,
-	decorators: [{ type: Service }]
-});
-/**
-* @license
-*
-* Use of this source code is governed by an MIT-style license that can be
-* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
-*/
-let uid = 0;
+let uid$1 = 0;
 var WrDialogTitle = class WrDialogTitle {
-	id = `wr-dialog-title-${++uid}`;
+	id = `wr-dialog-title-${++uid$1}`;
 	elementRef = inject(ElementRef);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -216,6 +103,7 @@ var WrDialogTitle = class WrDialogTitle {
 			properties: { "attr.id": "id" },
 			classAttribute: "wr-dialog__title"
 		},
+		exportAs: ["wrDialogTitle"],
 		ngImport: i0
 	});
 };
@@ -228,6 +116,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Directive,
 		args: [{
 			selector: "[wrDialogTitle]",
+			exportAs: "wrDialogTitle",
 			host: {
 				class: "wr-dialog__title",
 				"[attr.id]": "id"
@@ -241,7 +130,9 @@ i0.ɵɵngDeclareClassMetadata({
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
+let uid = 0;
 var WrDialogContent = class WrDialogContent {
+	id = input(`wr-dialog-content-${++uid}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
@@ -251,12 +142,22 @@ var WrDialogContent = class WrDialogContent {
 		target: i0.ɵɵFactoryTarget.Directive
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "14.0.0",
+		minVersion: "17.1.0",
 		version: "22.2.4",
 		type: WrDialogContent,
 		isStandalone: true,
 		selector: "[wrDialogContent]",
-		host: { classAttribute: "wr-dialog__content" },
+		inputs: { id: {
+			classPropertyName: "id",
+			publicName: "id",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.id": "id()" },
+			classAttribute: "wr-dialog__content"
+		},
 		hostDirectives: [{ directive: i1.CdkScrollable }],
 		ngImport: i0
 	});
@@ -270,10 +171,21 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Directive,
 		args: [{
 			selector: "[wrDialogContent]",
-			host: { class: "wr-dialog__content" },
+			host: {
+				class: "wr-dialog__content",
+				"[attr.id]": "id()"
+			},
 			hostDirectives: [CdkScrollable]
 		}]
-	}]
+	}],
+	propDecorators: { id: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "id",
+			required: false
+		}]
+	}] }
 });
 /**
 * @license
@@ -336,6 +248,20 @@ i0.ɵɵngDeclareClassMetadata({
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
+const WR_DIALOG_DATA = new InjectionToken("WR_DIALOG_DATA");
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+const WR_DIALOG_REF = new InjectionToken("WR_DIALOG_REF");
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
 var WrDialogClose = class WrDialogClose {
 	result = input(void 0, {
 		...ngDevMode ? { debugName: "result" } : /* istanbul ignore next */ {},
@@ -392,6 +318,239 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+var WrDialogConfirm = class WrDialogConfirm {
+	data = inject(WR_DIALOG_DATA);
+	ref = inject(WrDialogRef);
+	color = this.data.confirmColor ?? "primary";
+	danger = this.color === "danger";
+	confirmLabel = useI18nText(signal(this.data.confirmLabel ?? null), "common.ok", "OK");
+	cancelLabel = useI18nText(signal(this.data.cancelLabel ?? null), "common.cancel", "Cancel");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrDialogConfirm,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: WrDialogConfirm,
+		isStandalone: true,
+		selector: "wr-dialog-confirm",
+		host: {
+			properties: { "class.wr-dialog-confirm--danger": "danger" },
+			classAttribute: "wr-dialog-confirm"
+		},
+		ngImport: i0,
+		template: "<h2 wrDialogTitle>{{ data.title }}</h2>\n@if (data.message) {\n  <div wrDialogContent>{{ data.message }}</div>\n}\n<!--\n  Initial focus sits on the safe answer of a danger question and on the confirm\n  button otherwise, through the `cdkFocusInitial` the focus trap already reads.\n-->\n<div wrDialogFooter>\n  <button\n    wr-btn\n    type=\"button\"\n    class=\"wr-dialog-confirm__action wr-dialog-confirm__action--cancel\"\n    [attr.cdkFocusInitial]=\"danger ? '' : null\"\n    (click)=\"ref.close(false)\"\n  >\n    {{ cancelLabel() }}\n  </button>\n  <button\n    wr-btn\n    type=\"button\"\n    class=\"wr-dialog-confirm__action wr-dialog-confirm__action--confirm\"\n    [color]=\"color\"\n    [attr.cdkFocusInitial]=\"danger ? null : ''\"\n    (click)=\"ref.close(true)\"\n  >\n    {{ confirmLabel() }}\n  </button>\n</div>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: WrButton,
+				selector: "wr-btn, button[wr-btn], a[wr-btn]",
+				inputs: [
+					"color",
+					"size",
+					"shape",
+					"icon",
+					"iconPosition",
+					"disabled",
+					"outlined",
+					"block",
+					"loading",
+					"disabledWhenLoading"
+				]
+			},
+			{
+				kind: "directive",
+				type: WrDialogTitle,
+				selector: "[wrDialogTitle]",
+				exportAs: ["wrDialogTitle"]
+			},
+			{
+				kind: "directive",
+				type: WrDialogContent,
+				selector: "[wrDialogContent]",
+				inputs: ["id"]
+			},
+			{
+				kind: "directive",
+				type: WrDialogFooter,
+				selector: "[wrDialogFooter]",
+				inputs: ["align"]
+			}
+		],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrDialogConfirm,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-dialog-confirm",
+			imports: [
+				WrButton,
+				WrDialogTitle,
+				WrDialogContent,
+				WrDialogFooter
+			],
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "wr-dialog-confirm",
+				"[class.wr-dialog-confirm--danger]": "danger"
+			},
+			template: "<h2 wrDialogTitle>{{ data.title }}</h2>\n@if (data.message) {\n  <div wrDialogContent>{{ data.message }}</div>\n}\n<!--\n  Initial focus sits on the safe answer of a danger question and on the confirm\n  button otherwise, through the `cdkFocusInitial` the focus trap already reads.\n-->\n<div wrDialogFooter>\n  <button\n    wr-btn\n    type=\"button\"\n    class=\"wr-dialog-confirm__action wr-dialog-confirm__action--cancel\"\n    [attr.cdkFocusInitial]=\"danger ? '' : null\"\n    (click)=\"ref.close(false)\"\n  >\n    {{ cancelLabel() }}\n  </button>\n  <button\n    wr-btn\n    type=\"button\"\n    class=\"wr-dialog-confirm__action wr-dialog-confirm__action--confirm\"\n    [color]=\"color\"\n    [attr.cdkFocusInitial]=\"danger ? null : ''\"\n    (click)=\"ref.close(true)\"\n  >\n    {{ confirmLabel() }}\n  </button>\n</div>\n"
+		}]
+	}]
+});
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+const DEFAULT_PANEL_CLASS = "wr-dialog-panel";
+const DEFAULT_BACKDROP_CLASS = "wr-dialog-backdrop";
+var WrDialog = class WrDialog {
+	overlay = inject(WR_OVERLAY);
+	scrollStrategies = inject(ScrollStrategyOptions);
+	parentInjector = inject(EnvironmentInjector);
+	focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+	i18n = inject(WrI18n, { optional: true });
+	dir = inject(Directionality, { optional: true });
+	location = inject(Location);
+	destroyRef = inject(DestroyRef);
+	open(component, options = {}) {
+		const overlayRef = this.overlay.create({
+			positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+			scrollStrategy: this.scrollStrategies.block(),
+			hasBackdrop: true,
+			backdropClass: DEFAULT_BACKDROP_CLASS,
+			panelClass: toClassList(DEFAULT_PANEL_CLASS, options.panelClass),
+			width: options.width,
+			maxWidth: options.maxWidth
+		});
+		wrFollowDirection(overlayRef, this.dir, this.parentInjector);
+		const dialogRef = new WrDialogRef(overlayRef, this.parentInjector);
+		if (this.isBrowser) {
+			const active = document.activeElement;
+			dialogRef.previouslyFocused = active instanceof HTMLElement ? active : null;
+		}
+		const injector = Injector.create({
+			parent: this.parentInjector,
+			providers: [
+				{
+					provide: WR_DIALOG_DATA,
+					useValue: options.data
+				},
+				{
+					provide: WR_DIALOG_REF,
+					useValue: dialogRef
+				},
+				{
+					provide: WrDialogRef,
+					useValue: dialogRef
+				}
+			]
+		});
+		const portal = new ComponentPortal(component, null, injector);
+		dialogRef.componentRef = overlayRef.attach(portal);
+		if (options.closeOnBackdropClick !== false) overlayRef.backdropClick().subscribe(() => dialogRef.close());
+		if (options.closeOnEscape !== false) overlayRef.keydownEvents().subscribe((event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				dialogRef.close();
+			}
+		});
+		if (options.closeOnNavigation !== false) this.watchNavigation(overlayRef, dialogRef);
+		if (this.isBrowser) {
+			const host = overlayRef.overlayElement;
+			const role = options.role ?? "dialog";
+			host.setAttribute("role", role);
+			host.setAttribute("aria-modal", "true");
+			if (options.closable !== false) {
+				host.classList.add("wr-dialog-panel--closable");
+				const label = options.closeLabel ?? this.closeLabel();
+				wrAppendOverlayClose(host, "wr-dialog__close", label, () => dialogRef.close());
+			}
+			const labelSync = afterEveryRender(() => {
+				const titleEl = host.querySelector("[wrDialogTitle], [wr-dialog-title]");
+				if (titleEl?.id) host.setAttribute("aria-labelledby", titleEl.id);
+				else host.removeAttribute("aria-labelledby");
+				if (role !== "alertdialog") return;
+				const contentEl = host.querySelector("[wrDialogContent], [wr-dialog-content]");
+				if (contentEl?.id) host.setAttribute("aria-describedby", contentEl.id);
+				else host.removeAttribute("aria-describedby");
+			}, { injector: this.parentInjector });
+			overlayRef.detachments().subscribe(() => labelSync.destroy());
+			const trap = this.focusTrapFactory.create(host);
+			dialogRef.focusTrap = trap;
+			trap.focusInitialElementWhenReady();
+		}
+		return dialogRef;
+	}
+	async confirm(options) {
+		if (!this.isBrowser) return false;
+		const { title, message, confirmLabel, cancelLabel, confirmColor, ...rest } = options;
+		const ref = this.open(WrDialogConfirm, {
+			...rest,
+			role: "alertdialog",
+			closable: false,
+			data: {
+				title,
+				message,
+				confirmLabel,
+				cancelLabel,
+				confirmColor
+			}
+		});
+		const unhook = this.destroyRef.onDestroy(() => ref.close());
+		ref.closed.subscribe({ complete: unhook });
+		return await ref.awaitClose() === true;
+	}
+	watchNavigation(overlayRef, dialogRef) {
+		const stopWatching = this.location.onUrlChange(() => dialogRef.close());
+		overlayRef.detachments().subscribe(() => queueMicrotask(stopWatching));
+	}
+	closeLabel() {
+		const resolved = this.i18n?.t("dialog.close");
+		return !resolved || resolved === "dialog.close" ? "Close dialog" : resolved;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrDialog
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrDialog,
+	decorators: [{ type: Service }]
+});
 export { WR_DIALOG_DATA, WR_DIALOG_REF, WrDialog, WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogRef, WrDialogTitle };
 
 //# sourceMappingURL=ngwr-dialog.mjs.map