@eherve/angular-material-display-dialog 0.0.0-stage → 22.0.0

package/fesm2022/eherve-angular-material-display-dialog.mjs

@@ -0,0 +1,1153 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, ElementRef, ErrorHandler, EventEmitter, Inject, Injectable, InjectionToken, Input, NgModule, Optional, inject, reflectComponentType } from "@angular/core";
+import * as i1 from "@angular/material/dialog";
+import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from "@angular/material/dialog";
+import { Subject, firstValueFrom, isObservable, takeUntil } from "rxjs";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i2$1 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i2 from "@angular/common";
+import { CommonModule, JsonPipe } from "@angular/common";
+import * as i4 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+import * as i5 from "@angular/material/tabs";
+import { MatTabsModule } from "@angular/material/tabs";
+import * as i6 from "@angular/material/tooltip";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import * as i7 from "@eherve/angular-material-section-tabs";
+import { SectionTabsModule } from "@eherve/angular-material-section-tabs";
+import * as i8 from "@angular/material/progress-spinner";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+var DisplayDialogIntl = class DisplayDialogIntl {
+	changes = new Subject();
+	messages = {
+		loadingLabel: "Chargement des données",
+		closeLabel: "Fermer",
+		emptyLabel: "Aucune donnée à afficher.",
+		errorLabel: "Impossible de charger les données.",
+		actionErrorLabel: "Impossible d’exécuter cette action.",
+		jsonTitle: "Données JSON",
+		jsonButtonLabel: "Afficher les données JSON",
+		recordLabel: "Record",
+		confirmTitle: "Confirmation",
+		confirmOk: "Oui",
+		confirmCancel: "Non",
+		emptyContentLabel: "Aucun contenu à afficher."
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialogIntl,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialogIntl,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DisplayDialogIntl,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var DisplayConfirmationDialog = class DisplayConfirmationDialog {
+	data = inject(MAT_DIALOG_DATA);
+	intl = inject(DisplayDialogIntl);
+	constructor() {
+		const changeDetectorRef = inject(ChangeDetectorRef);
+		this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => changeDetectorRef.markForCheck());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayConfirmationDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: DisplayConfirmationDialog,
+		isStandalone: true,
+		selector: "ngx-mat-display-confirmation",
+		ngImport: i0,
+		template: `
+    <h2 mat-dialog-title>{{data.title ?? intl.messages.confirmTitle}}</h2>
+    <mat-dialog-content>{{data.message}}</mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button [mat-dialog-close]="false">{{data.cancel ?? intl.messages.confirmCancel}}</button>
+      <button mat-button [mat-dialog-close]="true">{{data.ok ?? intl.messages.confirmOk}}</button>
+    </mat-dialog-actions>`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MatDialogModule
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogClose,
+				selector: "[mat-dialog-close], [matDialogClose]",
+				inputs: [
+					"aria-label",
+					"type",
+					"mat-dialog-close",
+					"matDialogClose"
+				],
+				exportAs: ["matDialogClose"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogTitle,
+				selector: "[mat-dialog-title], [matDialogTitle]",
+				inputs: ["id"],
+				exportAs: ["matDialogTitle"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogActions,
+				selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",
+				inputs: ["align"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogContent,
+				selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]"
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i2$1.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DisplayConfirmationDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ngx-mat-display-confirmation",
+			imports: [MatDialogModule, MatButtonModule],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <h2 mat-dialog-title>{{data.title ?? intl.messages.confirmTitle}}</h2>
+    <mat-dialog-content>{{data.message}}</mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button [mat-dialog-close]="false">{{data.cancel ?? intl.messages.confirmCancel}}</button>
+      <button mat-button [mat-dialog-close]="true">{{data.ok ?? intl.messages.confirmOk}}</button>
+    </mat-dialog-actions>`
+		}]
+	}],
+	ctorParameters: () => []
+});
+var DisplayJsonDialog = class DisplayJsonDialog {
+	data = inject(MAT_DIALOG_DATA);
+	intl = inject(DisplayDialogIntl);
+	constructor() {
+		const changeDetectorRef = inject(ChangeDetectorRef);
+		this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => changeDetectorRef.markForCheck());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayJsonDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: DisplayJsonDialog,
+		isStandalone: true,
+		selector: "ngx-mat-display-json",
+		ngImport: i0,
+		template: `
+    <h2 mat-dialog-title>{{data.title}}</h2>
+    <mat-dialog-content>
+      @for (source of data.sources; track $index) {
+        <h3>{{source.label}}</h3><pre>{{source.value | json}}</pre>
+      }
+    </mat-dialog-content>
+    <mat-dialog-actions><button mat-button mat-dialog-close>{{intl.messages.closeLabel}}</button></mat-dialog-actions>`,
+		isInline: true,
+		styles: ["pre{white-space:pre-wrap;overflow-wrap:anywhere}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MatDialogModule
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogClose,
+				selector: "[mat-dialog-close], [matDialogClose]",
+				inputs: [
+					"aria-label",
+					"type",
+					"mat-dialog-close",
+					"matDialogClose"
+				],
+				exportAs: ["matDialogClose"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogTitle,
+				selector: "[mat-dialog-title], [matDialogTitle]",
+				inputs: ["id"],
+				exportAs: ["matDialogTitle"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogActions,
+				selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",
+				inputs: ["align"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogContent,
+				selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]"
+			},
+			{
+				kind: "ngmodule",
+				type: MatButtonModule
+			},
+			{
+				kind: "component",
+				type: i2$1.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "pipe",
+				type: JsonPipe,
+				name: "json"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DisplayJsonDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ngx-mat-display-json",
+			imports: [
+				MatDialogModule,
+				MatButtonModule,
+				JsonPipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <h2 mat-dialog-title>{{data.title}}</h2>
+    <mat-dialog-content>
+      @for (source of data.sources; track $index) {
+        <h3>{{source.label}}</h3><pre>{{source.value | json}}</pre>
+      }
+    </mat-dialog-content>
+    <mat-dialog-actions><button mat-button mat-dialog-close>{{intl.messages.closeLabel}}</button></mat-dialog-actions>`,
+			styles: ["pre{white-space:pre-wrap;overflow-wrap:anywhere}\n"]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var DefaultDisplayDialogHost = class DefaultDisplayDialogHost {
+	dialog = inject(MatDialog);
+	async confirm(options) {
+		return await firstValueFrom(this.dialog.open(DisplayConfirmationDialog, { data: options }).afterClosed()) === true;
+	}
+	showJson(title, sources) {
+		this.dialog.open(DisplayJsonDialog, {
+			width: "80vw",
+			maxHeight: "90vh",
+			data: {
+				title,
+				sources
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DefaultDisplayDialogHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DefaultDisplayDialogHost,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DefaultDisplayDialogHost,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+const DISPLAY_DIALOG_HOST = new InjectionToken("DISPLAY_DIALOG_HOST", {
+	providedIn: "root",
+	factory: () => inject(DefaultDisplayDialogHost)
+});
+var DisplayDialog = class DisplayDialog {
+	dialogData;
+	dialogRef;
+	intl = inject(DisplayDialogIntl);
+	data;
+	loading = true;
+	loadingLabel = this.intl.messages.loadingLabel;
+	errorLabel = "";
+	title = "";
+	subtitle = "";
+	closeLabel = this.intl.messages.closeLabel;
+	showCloseButton = false;
+	handlingAction = false;
+	actions = [];
+	actionErrorLabel = "";
+	renderState = { kind: "empty" };
+	recordChange = new EventEmitter();
+	isDialog;
+	changeDetectorRef = inject(ChangeDetectorRef);
+	elementRef = inject(ElementRef);
+	componentInputNamesByType = /* @__PURE__ */ new WeakMap();
+	initializeVersion = 0;
+	destroyed = false;
+	recordErrorKind;
+	actionFailed = false;
+	connection;
+	cancelLoad = new Subject();
+	dialogDataResolved;
+	record;
+	host = inject(DISPLAY_DIALOG_HOST);
+	errorHandler = inject(ErrorHandler);
+	intlSubscription = this.intl.changes.subscribe(() => this.refreshIntlLabels());
+	constructor(dialogData, dialogRef) {
+		this.dialogData = dialogData;
+		this.dialogRef = dialogRef;
+		this.isDialog = this.dialogRef !== null;
+	}
+	ngOnInit() {
+		if (!this.data && this.dialogData) this.data = this.dialogData;
+		this.initialize();
+	}
+	ngOnChanges(changes) {
+		if (changes["data"] && !changes["data"].firstChange) this.initialize();
+	}
+	ngOnDestroy() {
+		this.destroyed = true;
+		this.intlSubscription.unsubscribe();
+		++this.initializeVersion;
+		this.cancelLoad.next();
+		this.cancelLoad.complete();
+		this.releaseConnection();
+		this.recordChange.complete();
+	}
+	openJsonDataDialog() {
+		if (this.record === void 0) return;
+		this.host.showJson(this.resolveJsonDialogTitle(), [{
+			label: this.intl.messages.recordLabel,
+			value: this.record
+		}]);
+	}
+	close(result) {
+		this.dialogRef?.close(result);
+	}
+	getActions(position) {
+		return this.actions.filter((action) => (action.position ?? "bottom") === position && action.isVisible);
+	}
+	trackAction(index, action) {
+		return "component" in action ? index : action.label || action.icon || index;
+	}
+	async handleAction(action) {
+		if (this.record === void 0 || this.destroyed || !this.dialogDataResolved) return;
+		const context = this.buildActionContext(action);
+		if (!this.resolveActionState(action.visible, context, true) || this.resolveActionState(action.disabled, context, false)) return;
+		await this.runAction(action.confirm, () => action.handle(context), action.closeOnHandle);
+	}
+	async runAction(confirm, handle, closeOnHandle) {
+		if (this.handlingAction || this.destroyed) return;
+		const version = this.initializeVersion;
+		this.handlingAction = true;
+		this.actionErrorLabel = "";
+		this.actionFailed = false;
+		this.changeDetectorRef.markForCheck();
+		try {
+			if (!await this.confirmAction(confirm) || this.destroyed || version !== this.initializeVersion) return;
+			const result = await handle();
+			if (this.destroyed || version !== this.initializeVersion) return;
+			this.refreshDisplayState();
+			if (closeOnHandle) this.close(result);
+		} catch (error) {
+			this.reportError(error);
+			if (!this.destroyed && version === this.initializeVersion) {
+				this.actionFailed = true;
+				this.actionErrorLabel = this.intl.messages.actionErrorLabel;
+			}
+		} finally {
+			if (!this.destroyed && version === this.initializeVersion) {
+				this.handlingAction = false;
+				this.changeDetectorRef.markForCheck();
+			}
+		}
+	}
+	resolveJsonDialogTitle() {
+		return this.elementRef.nativeElement.querySelector(".display-dialog-title-content h2")?.textContent?.trim() || this.intl.messages.jsonTitle;
+	}
+	async initialize() {
+		if (this.destroyed) return;
+		const version = ++this.initializeVersion;
+		this.cancelLoad.next();
+		this.releaseConnection();
+		const data = this.data ?? this.dialogData ?? void 0;
+		this.loading = true;
+		this.errorLabel = "";
+		this.recordErrorKind = void 0;
+		this.actionErrorLabel = "";
+		this.actionFailed = false;
+		this.record = void 0;
+		this.dialogDataResolved = data;
+		this.actions = [];
+		this.handlingAction = false;
+		this.renderState = { kind: "empty" };
+		this.changeDetectorRef.markForCheck();
+		if (!data) {
+			this.finishWithoutRecord("empty");
+			return;
+		}
+		this.loadingLabel = data.loadingLabel ?? this.intl.messages.loadingLabel;
+		this.closeLabel = data.closeLabel ?? this.intl.messages.closeLabel;
+		this.showCloseButton = data.showCloseButton ?? !!this.dialogRef;
+		try {
+			this.connection = data.connect?.();
+			const record = "record" in data && data.record != null ? data.record : await this.resolveRecord(data);
+			if (this.destroyed || version !== this.initializeVersion) return;
+			if (!record) {
+				this.finishWithoutRecord("empty");
+				return;
+			}
+			this.record = record;
+			this.notifyRecord(record);
+			this.refreshDisplayState();
+			this.loading = false;
+			this.changeDetectorRef.detectChanges();
+		} catch (err) {
+			if (this.destroyed || version !== this.initializeVersion) return;
+			this.reportError(err);
+			this.finishWithoutRecord("error");
+		}
+	}
+	async resolveRecord(data) {
+		if ("record" in data && data.record !== void 0 && data.record !== null) return data.record;
+		if (!data.loadRecord) return null;
+		const loadedRecord = data.loadRecord();
+		if (isObservable(loadedRecord)) return firstValueFrom(loadedRecord.pipe(takeUntil(this.cancelLoad)), { defaultValue: null });
+		return loadedRecord;
+	}
+	buildRenderState(data, record) {
+		return this.buildOptionsRenderState(data, this.resolveDisplayOptions(data, record), record);
+	}
+	resolveDisplayOptions(data, record) {
+		if (typeof data.displayOptions !== "function") return data.displayOptions;
+		return data.displayOptions({
+			record,
+			data
+		});
+	}
+	buildOptionsRenderState(data, displayOptions, record) {
+		if (this.isTabsOptions(displayOptions)) return {
+			kind: "tabs",
+			tabs: displayOptions.tabs.map((tab) => this.buildTabRenderState(data, tab, record))
+		};
+		if (this.isSectionsOptions(displayOptions)) return {
+			kind: "sections",
+			sectionsMenuHeader: displayOptions.menuHeader,
+			sectionsOptions: this.buildSectionsOptions(displayOptions, record)
+		};
+		if (this.isComponentOptions(displayOptions)) return {
+			kind: "component",
+			component: displayOptions.component,
+			componentInputs: this.buildComponentInputs(data, displayOptions, record),
+			componentOverflow: displayOptions.overflow ?? true
+		};
+		if (this.isSingleSectionOptions(displayOptions)) return {
+			kind: "section",
+			singleSectionOptions: this.buildSingleSectionOptions(displayOptions, record)
+		};
+		return { kind: "empty" };
+	}
+	buildTabRenderState(data, tab, record) {
+		return {
+			label: tab.label,
+			icon: tab.icon,
+			svgIcon: tab.svgIcon,
+			badge: tab.badge,
+			renderState: this.buildOptionsRenderState(data, tab.displayOptions, record)
+		};
+	}
+	isTabsOptions(options) {
+		return "tabs" in options;
+	}
+	isSectionsOptions(options) {
+		return "sections" in options;
+	}
+	isComponentOptions(options) {
+		return "component" in options;
+	}
+	isSingleSectionOptions(options) {
+		return "section" in options;
+	}
+	buildSectionsOptions(options, record) {
+		const { menuHeader, sections, ...sectionTabsOptions } = options;
+		return {
+			...sectionTabsOptions,
+			data: record,
+			sections: this.buildRuntimeSections(sections)
+		};
+	}
+	buildSingleSectionOptions(options, record) {
+		return {
+			data: record,
+			sections: this.buildRuntimeSections([options.section]),
+			showEmptyFields: options.showEmptyFields,
+			showEmptyFieldsToggle: options.showEmptyFieldsToggle,
+			showEmptyFieldsLabel: options.showEmptyFieldsLabel
+		};
+	}
+	buildRuntimeSections(sections) {
+		return sections.map((section) => ({
+			...section,
+			cards: section.cards.map((card) => this.buildRuntimeCard(section, card))
+		}));
+	}
+	buildRuntimeCard(section, card) {
+		const { actions, ...sectionTabsCard } = card;
+		return {
+			...sectionTabsCard,
+			actions: this.buildRuntimeCardActions(section, card, actions ?? [])
+		};
+	}
+	buildRuntimeCardActions(section, card, actions) {
+		return actions.flatMap((action) => {
+			if (this.isSectionTabsDisplayCardAction(action)) return [action];
+			const context = this.buildCardActionContext(section, card, action);
+			if (!this.resolveCardActionState(action.visible, context, true)) return [];
+			const menuOptions = this.buildRuntimeCardMenuOptions(section, card, action);
+			if (action.menuOptions?.length && !menuOptions.length) return [];
+			return [{
+				id: action.id,
+				type: action.type,
+				icon: action.icon,
+				label: action.label,
+				tooltip: action.tooltip,
+				ariaLabel: action.ariaLabel,
+				color: action.color,
+				disabled: this.resolveCardActionState(action.disabled, context, false),
+				menuOptions: menuOptions.length ? menuOptions : void 0,
+				handle: () => {
+					if (!menuOptions.length) this.handleCardAction(section, card, action);
+				}
+			}];
+		});
+	}
+	isSectionTabsDisplayCardAction(action) {
+		return "handle" in action && typeof action.handle === "function";
+	}
+	buildRuntimeCardMenuOptions(section, card, action) {
+		return (action.menuOptions ?? []).flatMap((option) => {
+			const context = this.buildCardActionContext(section, card, action, option);
+			if (!this.resolveCardActionState(option.visible, context, true)) return [];
+			return [{
+				id: option.id,
+				label: option.label,
+				icon: option.icon,
+				tooltip: option.tooltip,
+				ariaLabel: option.ariaLabel,
+				disabled: this.resolveCardActionState(option.disabled, context, false),
+				handle: () => void this.handleCardMenuOption(section, card, action, option)
+			}];
+		});
+	}
+	buildComponentInputs(data, displayOptions, record) {
+		const baseInputs = {
+			record,
+			data,
+			displayOptions
+		};
+		if (!displayOptions.input) return this.pickDeclaredComponentInputs(displayOptions.component, baseInputs);
+		const customInputs = typeof displayOptions.input === "function" ? displayOptions.input({
+			record,
+			data,
+			displayOptions
+		}) : displayOptions.input;
+		return this.pickDeclaredComponentInputs(displayOptions.component, {
+			...baseInputs,
+			...customInputs
+		});
+	}
+	pickDeclaredComponentInputs(component, inputs) {
+		if (!component || !inputs) return {};
+		const declaredInputNames = this.getDeclaredComponentInputNames(component);
+		if (!declaredInputNames.size) return {};
+		return Object.entries(inputs).reduce((filteredInputs, [name, value]) => {
+			if (declaredInputNames.has(name)) filteredInputs[name] = value;
+			return filteredInputs;
+		}, {});
+	}
+	getDeclaredComponentInputNames(component) {
+		const cachedInputNames = this.componentInputNamesByType.get(component);
+		if (cachedInputNames) return cachedInputNames;
+		const componentMirror = reflectComponentType(component);
+		const inputNames = new Set(componentMirror?.inputs.map((input) => input.templateName) ?? []);
+		this.componentInputNamesByType.set(component, inputNames);
+		return inputNames;
+	}
+	resolveText(value, record) {
+		if (!value) return "";
+		return typeof value === "function" ? value(record) : value;
+	}
+	refreshDisplayState() {
+		if (this.record === void 0 || !this.dialogDataResolved) return;
+		this.title = this.resolveText(this.dialogDataResolved.title, this.record);
+		this.subtitle = this.resolveText(this.dialogDataResolved.subtitle, this.record);
+		this.renderState = this.buildRenderState(this.dialogDataResolved, this.record);
+		this.refreshActions();
+	}
+	refreshActions() {
+		if (this.record === void 0 || !this.dialogDataResolved) {
+			this.actions = [];
+			return;
+		}
+		const data = this.dialogDataResolved;
+		const record = this.record;
+		this.actions = [...data.actions ?? [], ...this.connection?.actions ?? []].map((action) => {
+			if ("component" in action) {
+				const custom = typeof action.input === "function" ? action.input({
+					record,
+					data
+				}) : action.input;
+				return {
+					...action,
+					isVisible: true,
+					componentInputs: this.pickDeclaredComponentInputs(action.component, {
+						record,
+						data,
+						...custom
+					})
+				};
+			}
+			const context = this.buildActionContext(action);
+			return {
+				...action,
+				isVisible: this.resolveActionState(action.visible, context, true),
+				isDisabled: this.resolveActionState(action.disabled, context, false)
+			};
+		});
+	}
+	resolveActionState(state, context, defaultValue) {
+		if (state === void 0) return defaultValue;
+		return typeof state === "function" ? state(context) : state;
+	}
+	buildActionContext(action) {
+		const version = this.initializeVersion;
+		return {
+			record: this.record,
+			data: this.dialogDataResolved,
+			action,
+			close: (result) => {
+				if (!this.destroyed && version === this.initializeVersion) this.close(result);
+			},
+			setRecord: (record) => {
+				if (!this.destroyed && version === this.initializeVersion) this.setRecord(record);
+			}
+		};
+	}
+	async handleCardAction(section, card, action) {
+		if (this.record === void 0 || this.destroyed || !this.dialogDataResolved) return;
+		const context = this.buildCardActionContext(section, card, action);
+		if (!this.resolveCardActionState(action.visible, context, true) || this.resolveCardActionState(action.disabled, context, false)) return;
+		await this.runAction(action.confirm, () => action.handler?.(context), action.closeOnHandle);
+	}
+	async handleCardMenuOption(section, card, action, option) {
+		if (this.record === void 0 || this.destroyed || !this.dialogDataResolved) return;
+		const context = this.buildCardActionContext(section, card, action, option);
+		if (!this.resolveCardActionState(action.visible, context, true) || !this.resolveCardActionState(option.visible, context, true) || this.resolveCardActionState(action.disabled, context, false) || this.resolveCardActionState(option.disabled, context, false)) return;
+		await this.runAction(action.confirm, () => action.menuHandler?.(option.id, context), action.closeOnHandle);
+	}
+	resolveCardActionState(state, context, defaultValue) {
+		if (state === void 0) return defaultValue;
+		return typeof state === "function" ? state(context) : state;
+	}
+	buildCardActionContext(section, card, action, option) {
+		const version = this.initializeVersion;
+		return {
+			record: this.record,
+			data: this.dialogDataResolved,
+			section,
+			card,
+			action,
+			option,
+			close: (result) => {
+				if (!this.destroyed && version === this.initializeVersion) this.close(result);
+			},
+			setRecord: (record) => {
+				if (!this.destroyed && version === this.initializeVersion) this.setRecord(record);
+			}
+		};
+	}
+	notifyRecord(record) {
+		this.recordChange.emit(record);
+		try {
+			this.connection?.recordChanged?.(record);
+		} catch (error) {
+			this.reportError(error);
+		}
+	}
+	releaseConnection() {
+		const connection = this.connection;
+		this.connection = void 0;
+		try {
+			connection?.destroy?.();
+		} catch (error) {
+			this.reportError(error);
+		}
+	}
+	reportError(error) {
+		try {
+			this.errorHandler.handleError(error);
+		} catch {}
+	}
+	setRecord(record) {
+		if (this.destroyed) return;
+		this.record = record;
+		this.notifyRecord(record);
+		this.refreshDisplayState();
+		this.changeDetectorRef.markForCheck();
+	}
+	async confirmAction(confirmOptions) {
+		if (!confirmOptions) return true;
+		if (typeof confirmOptions === "string") return this.confirm({ message: confirmOptions });
+		return this.confirm(confirmOptions);
+	}
+	async confirm(confirmOptions) {
+		return await this.host.confirm(confirmOptions) === true;
+	}
+	refreshIntlLabels() {
+		const data = this.dialogDataResolved;
+		const messages = this.intl.messages;
+		this.loadingLabel = data?.loadingLabel ?? messages.loadingLabel;
+		this.closeLabel = data?.closeLabel ?? messages.closeLabel;
+		if (this.recordErrorKind === "empty") this.errorLabel = data?.emptyLabel ?? data?.errorLabel ?? messages.emptyLabel;
+		if (this.recordErrorKind === "error") this.errorLabel = data?.errorLabel ?? messages.errorLabel;
+		if (this.actionFailed) this.actionErrorLabel = messages.actionErrorLabel;
+		this.changeDetectorRef.markForCheck();
+	}
+	finishWithoutRecord(kind) {
+		this.loading = false;
+		this.handlingAction = false;
+		this.recordErrorKind = kind;
+		this.refreshIntlLabels();
+		this.title = "";
+		this.subtitle = "";
+		this.actions = [];
+		this.renderState = { kind: "empty" };
+		this.changeDetectorRef.detectChanges();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialog,
+		deps: [{
+			token: MAT_DIALOG_DATA,
+			optional: true
+		}, {
+			token: i1.MatDialogRef,
+			optional: true
+		}],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: DisplayDialog,
+		isStandalone: false,
+		selector: "app-display-dialog",
+		inputs: { data: "data" },
+		usesOnChanges: true,
+		ngImport: i0,
+		template: "<!-- @format -->\n\n@if (loading) {\n  <div class=\"display-dialog-loading\">\n    <mat-spinner [diameter]=\"72\"></mat-spinner>\n    <span>{{ loadingLabel }}</span>\n  </div>\n} @else if (errorLabel) {\n  <div class=\"display-dialog-empty-state\">\n    <mat-icon>info</mat-icon>\n    <span>{{ errorLabel }}</span>\n\n    @if (showCloseButton) {\n      <button mat-stroked-button type=\"button\" (click)=\"close()\">{{ closeLabel }}</button>\n    }\n  </div>\n} @else {\n  @if (title || subtitle || showCloseButton || getActions('top').length) {\n    <div mat-dialog-title class=\"display-dialog-title\">\n      <div class=\"display-dialog-title-bar\">\n        <div class=\"display-dialog-title-content\">\n          @if (title) {\n            <h2 [innerHTML]=\"title\"></h2>\n          }\n          @if (subtitle) {\n            <p [innerHTML]=\"subtitle\"></p>\n          }\n        </div>\n\n        <div class=\"display-dialog-title-actions\">\n          @for (action of getActions('top'); track trackAction($index, action)) {\n            <ng-container *ngTemplateOutlet=\"actionTemplate; context: { action }\"></ng-container>\n          }\n\n          @if (isDialog && data?.showJsonDataButton === true) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              \n              [matTooltip]=\"intl.messages.jsonButtonLabel\"\n              \n              [attr.aria-label]=\"intl.messages.jsonButtonLabel\"\n              (click)=\"openJsonDataDialog()\">\n              <mat-icon>file_json</mat-icon>\n            </button>\n          }\n\n\n          @if (showCloseButton) {\n            <button mat-icon-button type=\"button\" [attr.aria-label]=\"closeLabel\" (click)=\"close()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (actionErrorLabel) { <div class=\"display-dialog-action-error\" role=\"alert\">{{ actionErrorLabel }}</div> }\n  <div mat-dialog-content class=\"display-dialog-content\">\n    <ng-container *ngTemplateOutlet=\"displayDialogContent; context: { $implicit: renderState }\"></ng-container>\n  </div>\n\n  @if (getActions('bottom').length || getActions('bottom-end').length) {\n    <footer class=\"display-dialog-actions\">\n      <div class=\"display-dialog-actions-left\">\n        @for (action of getActions('bottom'); track trackAction($index, action)) {\n          <ng-container *ngTemplateOutlet=\"actionTemplate; context: { action }\"></ng-container>\n        }\n      </div>\n\n      <div class=\"display-dialog-actions-right\">\n        @for (action of getActions('bottom-end'); track trackAction($index, action)) {\n          <ng-container *ngTemplateOutlet=\"actionTemplate; context: { action }\"></ng-container>\n        }\n      </div>\n    </footer>\n  }\n\n  @if (handlingAction) {\n    <div class=\"display-dialog-handling-action\">\n      <mat-spinner [diameter]=\"72\"></mat-spinner>\n    </div>\n  }\n}\n\n<ng-template #displayDialogContent let-state>\n  @switch (state.kind) {\n    @case ('tabs') {\n      @if (state.tabs?.length) {\n        <mat-tab-group class=\"display-dialog-root-tabs\" mat-stretch-tabs=\"false\">\n          @for (tab of state.tabs; track tab.label) {\n            <mat-tab>\n              <ng-template mat-tab-label>\n                @if (tab.svgIcon) {\n                  <mat-icon class=\"display-dialog-root-tab-icon\" [svgIcon]=\"tab.svgIcon\"></mat-icon>\n                } @else if (tab.icon) {\n                  <mat-icon class=\"display-dialog-root-tab-icon\">{{ tab.icon }}</mat-icon>\n                }\n                <span [innerHTML]=\"tab.label\"></span>\n                @if (tab.badge !== undefined && tab.badge !== null) {\n                  <span class=\"display-dialog-root-tab-badge\">{{ tab.badge }}</span>\n                }\n              </ng-template>\n\n              <ng-container\n                *ngTemplateOutlet=\"displayDialogContent; context: { $implicit: tab.renderState }\"></ng-container>\n            </mat-tab>\n          }\n        </mat-tab-group>\n      }\n    }\n\n    @case ('sections') {\n      @if (state.sectionsOptions) {\n        <app-section-tabs-display\n          class=\"display-dialog-section-tabs-display\"\n          [menuHeader]=\"state.sectionsMenuHeader\"\n          [options]=\"state.sectionsOptions\">\n        </app-section-tabs-display>\n      }\n    }\n\n    @case ('component') {\n      <div class=\"display-dialog-component-page\" [class.overflow]=\"state.componentOverflow\">\n        @if (state.component) {\n          <ng-container *ngComponentOutlet=\"state.component; inputs: state.componentInputs\"></ng-container>\n        }\n      </div>\n    }\n\n    @case ('section') {\n      @if (state.singleSectionOptions) {\n        <app-section-tabs-display\n          class=\"display-dialog-section-tabs-display display-dialog-single-section-display\"\n          [options]=\"state.singleSectionOptions\">\n        </app-section-tabs-display>\n      }\n    }\n\n    @default {\n      <div class=\"display-dialog-empty-state\">\n        <mat-icon>info</mat-icon>\n        <span>{{ intl.messages.emptyContentLabel }}</span>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #actionTemplate let-action=\"action\">\n  @if (action.component) {\n    <ng-container *ngComponentOutlet=\"action.component; inputs: action.componentInputs\"></ng-container>\n  } @else if (action.buttonType === 'raised') {\n    <button\n      class=\"display-dialog-action-btn\"\n      mat-raised-button\n      type=\"button\"\n      [style.--action-color]=\"action.contrastColor\"\n      [style.--action-background-color]=\"action.color\"\n      [disabled]=\"handlingAction || action.isDisabled\"\n      [matTooltip]=\"action.tooltip || ''\"\n      (click)=\"handleAction(action)\">\n      @if (action.icon) {\n        <mat-icon>{{ action.icon }}</mat-icon>\n      }\n      @if (action.label) {\n        <span>{{ action.label }}</span>\n      }\n    </button>\n  } @else {\n    <button\n      class=\"display-dialog-action-btn\"\n      mat-button\n      type=\"button\"\n      [style.--action-color]=\"action.color\"\n      [disabled]=\"handlingAction || action.isDisabled\"\n      [matTooltip]=\"action.tooltip || ''\"\n      (click)=\"handleAction(action)\">\n      @if (action.icon) {\n        <mat-icon>{{ action.icon }}</mat-icon>\n      }\n      @if (action.label) {\n        <span>{{ action.label }}</span>\n      }\n    </button>\n  }\n</ng-template>\n",
+		styles: [":host{--display-dialog-background: var(--ngx-mat-display-dialog-background, #f4f6f8);--display-dialog-border: var(--ngx-mat-display-dialog-border, rgba(14, 43, 67, .12));--display-dialog-text: var(--ngx-mat-display-dialog-text, #102f49);--display-dialog-muted: var(--ngx-mat-display-dialog-muted, #61718a);--display-dialog-primary: var(--ngx-mat-display-dialog-primary, #0f334d);position:relative;display:flex;flex-direction:column;height:100%;min-height:0;color:var(--display-dialog-text)}.display-dialog-loading,.display-dialog-empty-state{display:flex;flex:1 1 auto;min-height:240px;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:var(--display-dialog-primary)}.display-dialog-empty-state{padding:24px;color:var(--display-dialog-muted);text-align:center}.display-dialog-empty-state mat-icon{width:42px;height:42px;color:var(--display-dialog-primary);font-size:42px}.display-dialog-empty-state span{color:var(--display-dialog-text);font-size:15px;font-weight:700}.display-dialog-title{display:flex;min-height:48px;padding:8px 12px;margin:0;border-bottom:1px solid var(--display-dialog-border);box-sizing:border-box;background:var(--ngx-mat-display-dialog-header-background, #e9eef2);color:var(--ngx-mat-display-dialog-header-text, #102f49)}.display-dialog-title .display-dialog-title-bar{display:flex;flex:0 0 auto;align-items:center;justify-content:start;gap:80px;width:100%}.display-dialog-title .display-dialog-title-bar h2{margin:0;font-size:18px;font-weight:700;line-height:1.2}.display-dialog-title .display-dialog-title-bar p{margin:3px 0 0;color:var(--display-dialog-muted);font-size:13px}.display-dialog-title-content{min-width:0;overflow:hidden;--display-dialog-muted: var(--ngx-mat-display-dialog-header-text, #102f49)}.display-dialog-title-content h2,.display-dialog-title-content p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.display-dialog-title-actions{display:inline-flex;flex:0 0 auto;align-items:center;gap:8px;margin-left:auto}.display-dialog-title-actions .mat-mdc-icon-button{--mat-icon-button-icon-color: var(--ngx-mat-display-dialog-header-text, #102f49)}.display-dialog-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;max-height:none;padding:0!important;background:var(--display-dialog-background);box-sizing:border-box}.display-dialog-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding:8px;border-top:1px solid var(--display-dialog-border);background:#fff;box-sizing:border-box}.display-dialog-actions-left,.display-dialog-actions-right{display:inline-flex;align-items:center;gap:8px;min-width:0}.display-dialog-action-btn{--mat-button-filled-label-text-color: var(--action-color, #fff);--mat-button-filled-container-color: var(--action-background-color, var(--ngx-mat-display-dialog-primary, #0f334d));--mat-button-protected-label-text-color: var(--action-color, #fff);--mat-button-protected-container-color: var(--action-background-color, var(--ngx-mat-display-dialog-primary, #0f334d));--mat-button-text-label-text-color: var(--action-color, var(--display-dialog-primary))}.display-dialog-handling-action{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#ffffffb8}.display-dialog-section-tabs-display{flex:1 1 auto;min-height:0}.display-dialog-component-page{flex:1 1 auto;min-height:0;padding:12px 16px 16px;overflow:hidden;box-sizing:border-box}.display-dialog-component-page.overflow{overflow:auto}:host ::ng-deep .display-dialog-single-section-display .section-tabs{grid-template-columns:minmax(0,1fr)}:host ::ng-deep .display-dialog-single-section-display .section-tabs__sidebar{display:none}:host ::ng-deep .display-dialog-single-section-display .section-tabs__content-panel{padding:0 0 0 8px}.display-dialog-root-tabs{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.display-dialog-root-tab-icon{width:18px;height:18px;margin-right:6px;font-size:18px}.display-dialog-root-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:999px;background:#0f334d1a;color:var(--display-dialog-primary);font-size:11px;font-weight:700;line-height:1}:host ::ng-deep .display-dialog-root-tabs>.mat-mdc-tab-body-wrapper{flex:1 1 auto;min-height:0}:host ::ng-deep .display-dialog-root-tabs>.mat-mdc-tab-body-wrapper>.mat-mdc-tab-body{min-height:0}:host ::ng-deep .display-dialog-root-tabs .mat-mdc-tab-body-content{display:flex;flex-direction:column;min-height:0;overflow:hidden}@media(max-width:900px){.display-dialog-actions{align-items:stretch;flex-direction:column}.display-dialog-actions-left,.display-dialog-actions-right{justify-content:flex-end;width:100%}}.display-dialog-action-error{padding:12px 16px;color:#a01616;background:#fff1f1}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: i2.NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: i2$1.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i2$1.MatIconButton,
+				selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogTitle,
+				selector: "[mat-dialog-title], [matDialogTitle]",
+				inputs: ["id"],
+				exportAs: ["matDialogTitle"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatDialogContent,
+				selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]"
+			},
+			{
+				kind: "component",
+				type: i4.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			},
+			{
+				kind: "directive",
+				type: i5.MatTabLabel,
+				selector: "[mat-tab-label], [matTabLabel]"
+			},
+			{
+				kind: "component",
+				type: i5.MatTab,
+				selector: "mat-tab",
+				inputs: [
+					"disabled",
+					"label",
+					"aria-label",
+					"aria-labelledby",
+					"labelClass",
+					"bodyClass",
+					"id"
+				],
+				exportAs: ["matTab"]
+			},
+			{
+				kind: "component",
+				type: i5.MatTabGroup,
+				selector: "mat-tab-group",
+				inputs: [
+					"color",
+					"fitInkBarToContent",
+					"mat-stretch-tabs",
+					"mat-align-tabs",
+					"dynamicHeight",
+					"selectedIndex",
+					"headerPosition",
+					"animationDuration",
+					"contentTabIndex",
+					"disablePagination",
+					"disableRipple",
+					"preserveContent",
+					"backgroundColor",
+					"aria-label",
+					"aria-labelledby"
+				],
+				outputs: [
+					"selectedIndexChange",
+					"focusChange",
+					"animationDone",
+					"selectedTabChange"
+				],
+				exportAs: ["matTabGroup"]
+			},
+			{
+				kind: "directive",
+				type: i6.MatTooltip,
+				selector: "[matTooltip]",
+				inputs: [
+					"matTooltipPosition",
+					"matTooltipPositionAtOrigin",
+					"matTooltipDisabled",
+					"matTooltipShowDelay",
+					"matTooltipHideDelay",
+					"matTooltipTouchGestures",
+					"matTooltip",
+					"matTooltipClass"
+				],
+				exportAs: ["matTooltip"]
+			},
+			{
+				kind: "component",
+				type: i7.SectionTabsDisplayComponent,
+				selector: "app-section-tabs-display",
+				inputs: [
+					"options",
+					"selectedIndex",
+					"queryParamKey",
+					"menuHeader",
+					"showEmptyFields"
+				],
+				outputs: ["selectedIndexChange", "showEmptyFieldsChange"]
+			},
+			{
+				kind: "component",
+				type: i8.MatProgressSpinner,
+				selector: "mat-progress-spinner, mat-spinner",
+				inputs: [
+					"color",
+					"mode",
+					"value",
+					"diameter",
+					"strokeWidth"
+				],
+				exportAs: ["matProgressSpinner"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DisplayDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-display-dialog",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: false,
+			template: "<!-- @format -->\n\n@if (loading) {\n  <div class=\"display-dialog-loading\">\n    <mat-spinner [diameter]=\"72\"></mat-spinner>\n    <span>{{ loadingLabel }}</span>\n  </div>\n} @else if (errorLabel) {\n  <div class=\"display-dialog-empty-state\">\n    <mat-icon>info</mat-icon>\n    <span>{{ errorLabel }}</span>\n\n    @if (showCloseButton) {\n      <button mat-stroked-button type=\"button\" (click)=\"close()\">{{ closeLabel }}</button>\n    }\n  </div>\n} @else {\n  @if (title || subtitle || showCloseButton || getActions('top').length) {\n    <div mat-dialog-title class=\"display-dialog-title\">\n      <div class=\"display-dialog-title-bar\">\n        <div class=\"display-dialog-title-content\">\n          @if (title) {\n            <h2 [innerHTML]=\"title\"></h2>\n          }\n          @if (subtitle) {\n            <p [innerHTML]=\"subtitle\"></p>\n          }\n        </div>\n\n        <div class=\"display-dialog-title-actions\">\n          @for (action of getActions('top'); track trackAction($index, action)) {\n            <ng-container *ngTemplateOutlet=\"actionTemplate; context: { action }\"></ng-container>\n          }\n\n          @if (isDialog && data?.showJsonDataButton === true) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              \n              [matTooltip]=\"intl.messages.jsonButtonLabel\"\n              \n              [attr.aria-label]=\"intl.messages.jsonButtonLabel\"\n              (click)=\"openJsonDataDialog()\">\n              <mat-icon>file_json</mat-icon>\n            </button>\n          }\n\n\n          @if (showCloseButton) {\n            <button mat-icon-button type=\"button\" [attr.aria-label]=\"closeLabel\" (click)=\"close()\">\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (actionErrorLabel) { <div class=\"display-dialog-action-error\" role=\"alert\">{{ actionErrorLabel }}</div> }\n  <div mat-dialog-content class=\"display-dialog-content\">\n    <ng-container *ngTemplateOutlet=\"displayDialogContent; context: { $implicit: renderState }\"></ng-container>\n  </div>\n\n  @if (getActions('bottom').length || getActions('bottom-end').length) {\n    <footer class=\"display-dialog-actions\">\n      <div class=\"display-dialog-actions-left\">\n        @for (action of getActions('bottom'); track trackAction($index, action)) {\n          <ng-container *ngTemplateOutlet=\"actionTemplate; context: { action }\"></ng-container>\n        }\n      </div>\n\n      <div class=\"display-dialog-actions-right\">\n        @for (action of getActions('bottom-end'); track trackAction($index, action)) {\n          <ng-container *ngTemplateOutlet=\"actionTemplate; context: { action }\"></ng-container>\n        }\n      </div>\n    </footer>\n  }\n\n  @if (handlingAction) {\n    <div class=\"display-dialog-handling-action\">\n      <mat-spinner [diameter]=\"72\"></mat-spinner>\n    </div>\n  }\n}\n\n<ng-template #displayDialogContent let-state>\n  @switch (state.kind) {\n    @case ('tabs') {\n      @if (state.tabs?.length) {\n        <mat-tab-group class=\"display-dialog-root-tabs\" mat-stretch-tabs=\"false\">\n          @for (tab of state.tabs; track tab.label) {\n            <mat-tab>\n              <ng-template mat-tab-label>\n                @if (tab.svgIcon) {\n                  <mat-icon class=\"display-dialog-root-tab-icon\" [svgIcon]=\"tab.svgIcon\"></mat-icon>\n                } @else if (tab.icon) {\n                  <mat-icon class=\"display-dialog-root-tab-icon\">{{ tab.icon }}</mat-icon>\n                }\n                <span [innerHTML]=\"tab.label\"></span>\n                @if (tab.badge !== undefined && tab.badge !== null) {\n                  <span class=\"display-dialog-root-tab-badge\">{{ tab.badge }}</span>\n                }\n              </ng-template>\n\n              <ng-container\n                *ngTemplateOutlet=\"displayDialogContent; context: { $implicit: tab.renderState }\"></ng-container>\n            </mat-tab>\n          }\n        </mat-tab-group>\n      }\n    }\n\n    @case ('sections') {\n      @if (state.sectionsOptions) {\n        <app-section-tabs-display\n          class=\"display-dialog-section-tabs-display\"\n          [menuHeader]=\"state.sectionsMenuHeader\"\n          [options]=\"state.sectionsOptions\">\n        </app-section-tabs-display>\n      }\n    }\n\n    @case ('component') {\n      <div class=\"display-dialog-component-page\" [class.overflow]=\"state.componentOverflow\">\n        @if (state.component) {\n          <ng-container *ngComponentOutlet=\"state.component; inputs: state.componentInputs\"></ng-container>\n        }\n      </div>\n    }\n\n    @case ('section') {\n      @if (state.singleSectionOptions) {\n        <app-section-tabs-display\n          class=\"display-dialog-section-tabs-display display-dialog-single-section-display\"\n          [options]=\"state.singleSectionOptions\">\n        </app-section-tabs-display>\n      }\n    }\n\n    @default {\n      <div class=\"display-dialog-empty-state\">\n        <mat-icon>info</mat-icon>\n        <span>{{ intl.messages.emptyContentLabel }}</span>\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #actionTemplate let-action=\"action\">\n  @if (action.component) {\n    <ng-container *ngComponentOutlet=\"action.component; inputs: action.componentInputs\"></ng-container>\n  } @else if (action.buttonType === 'raised') {\n    <button\n      class=\"display-dialog-action-btn\"\n      mat-raised-button\n      type=\"button\"\n      [style.--action-color]=\"action.contrastColor\"\n      [style.--action-background-color]=\"action.color\"\n      [disabled]=\"handlingAction || action.isDisabled\"\n      [matTooltip]=\"action.tooltip || ''\"\n      (click)=\"handleAction(action)\">\n      @if (action.icon) {\n        <mat-icon>{{ action.icon }}</mat-icon>\n      }\n      @if (action.label) {\n        <span>{{ action.label }}</span>\n      }\n    </button>\n  } @else {\n    <button\n      class=\"display-dialog-action-btn\"\n      mat-button\n      type=\"button\"\n      [style.--action-color]=\"action.color\"\n      [disabled]=\"handlingAction || action.isDisabled\"\n      [matTooltip]=\"action.tooltip || ''\"\n      (click)=\"handleAction(action)\">\n      @if (action.icon) {\n        <mat-icon>{{ action.icon }}</mat-icon>\n      }\n      @if (action.label) {\n        <span>{{ action.label }}</span>\n      }\n    </button>\n  }\n</ng-template>\n",
+			styles: [":host{--display-dialog-background: var(--ngx-mat-display-dialog-background, #f4f6f8);--display-dialog-border: var(--ngx-mat-display-dialog-border, rgba(14, 43, 67, .12));--display-dialog-text: var(--ngx-mat-display-dialog-text, #102f49);--display-dialog-muted: var(--ngx-mat-display-dialog-muted, #61718a);--display-dialog-primary: var(--ngx-mat-display-dialog-primary, #0f334d);position:relative;display:flex;flex-direction:column;height:100%;min-height:0;color:var(--display-dialog-text)}.display-dialog-loading,.display-dialog-empty-state{display:flex;flex:1 1 auto;min-height:240px;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:var(--display-dialog-primary)}.display-dialog-empty-state{padding:24px;color:var(--display-dialog-muted);text-align:center}.display-dialog-empty-state mat-icon{width:42px;height:42px;color:var(--display-dialog-primary);font-size:42px}.display-dialog-empty-state span{color:var(--display-dialog-text);font-size:15px;font-weight:700}.display-dialog-title{display:flex;min-height:48px;padding:8px 12px;margin:0;border-bottom:1px solid var(--display-dialog-border);box-sizing:border-box;background:var(--ngx-mat-display-dialog-header-background, #e9eef2);color:var(--ngx-mat-display-dialog-header-text, #102f49)}.display-dialog-title .display-dialog-title-bar{display:flex;flex:0 0 auto;align-items:center;justify-content:start;gap:80px;width:100%}.display-dialog-title .display-dialog-title-bar h2{margin:0;font-size:18px;font-weight:700;line-height:1.2}.display-dialog-title .display-dialog-title-bar p{margin:3px 0 0;color:var(--display-dialog-muted);font-size:13px}.display-dialog-title-content{min-width:0;overflow:hidden;--display-dialog-muted: var(--ngx-mat-display-dialog-header-text, #102f49)}.display-dialog-title-content h2,.display-dialog-title-content p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.display-dialog-title-actions{display:inline-flex;flex:0 0 auto;align-items:center;gap:8px;margin-left:auto}.display-dialog-title-actions .mat-mdc-icon-button{--mat-icon-button-icon-color: var(--ngx-mat-display-dialog-header-text, #102f49)}.display-dialog-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;max-height:none;padding:0!important;background:var(--display-dialog-background);box-sizing:border-box}.display-dialog-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding:8px;border-top:1px solid var(--display-dialog-border);background:#fff;box-sizing:border-box}.display-dialog-actions-left,.display-dialog-actions-right{display:inline-flex;align-items:center;gap:8px;min-width:0}.display-dialog-action-btn{--mat-button-filled-label-text-color: var(--action-color, #fff);--mat-button-filled-container-color: var(--action-background-color, var(--ngx-mat-display-dialog-primary, #0f334d));--mat-button-protected-label-text-color: var(--action-color, #fff);--mat-button-protected-container-color: var(--action-background-color, var(--ngx-mat-display-dialog-primary, #0f334d));--mat-button-text-label-text-color: var(--action-color, var(--display-dialog-primary))}.display-dialog-handling-action{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#ffffffb8}.display-dialog-section-tabs-display{flex:1 1 auto;min-height:0}.display-dialog-component-page{flex:1 1 auto;min-height:0;padding:12px 16px 16px;overflow:hidden;box-sizing:border-box}.display-dialog-component-page.overflow{overflow:auto}:host ::ng-deep .display-dialog-single-section-display .section-tabs{grid-template-columns:minmax(0,1fr)}:host ::ng-deep .display-dialog-single-section-display .section-tabs__sidebar{display:none}:host ::ng-deep .display-dialog-single-section-display .section-tabs__content-panel{padding:0 0 0 8px}.display-dialog-root-tabs{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.display-dialog-root-tab-icon{width:18px;height:18px;margin-right:6px;font-size:18px}.display-dialog-root-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:999px;background:#0f334d1a;color:var(--display-dialog-primary);font-size:11px;font-weight:700;line-height:1}:host ::ng-deep .display-dialog-root-tabs>.mat-mdc-tab-body-wrapper{flex:1 1 auto;min-height:0}:host ::ng-deep .display-dialog-root-tabs>.mat-mdc-tab-body-wrapper>.mat-mdc-tab-body{min-height:0}:host ::ng-deep .display-dialog-root-tabs .mat-mdc-tab-body-content{display:flex;flex-direction:column;min-height:0;overflow:hidden}@media(max-width:900px){.display-dialog-actions{align-items:stretch;flex-direction:column}.display-dialog-actions-left,.display-dialog-actions-right{justify-content:flex-end;width:100%}}.display-dialog-action-error{padding:12px 16px;color:#a01616;background:#fff1f1}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: [MAT_DIALOG_DATA]
+		}]
+	}, {
+		type: i1.MatDialogRef,
+		decorators: [{ type: Optional }]
+	}],
+	propDecorators: { data: [{ type: Input }] }
+});
+const DEFAULT_NESTED_OPTIONS = {
+	inset: 64,
+	minWidth: 640,
+	minHeight: 480,
+	viewportMargin: 16
+};
+var DisplayDialogService = class DisplayDialogService {
+	document = inject(DOCUMENT);
+	matDialog = inject(MatDialog);
+	open(data, config = {}) {
+		const { nested, ...dialogOverrides } = config;
+		const dialogConfig = {
+			width: "90vw",
+			height: "90vh",
+			maxWidth: "90vw",
+			maxHeight: "90vh",
+			autoFocus: false,
+			restoreFocus: false,
+			panelClass: "display-dialog-panel",
+			...nested === null ? {} : this.buildNestedDialogConfig(nested),
+			...dialogOverrides,
+			data
+		};
+		return this.matDialog.open(DisplayDialog, dialogConfig);
+	}
+	buildNestedDialogConfig(options) {
+		const parentSurface = this.findParentDialogSurface();
+		if (!parentSurface) return {};
+		const resolvedOptions = {
+			...DEFAULT_NESTED_OPTIONS,
+			...options
+		};
+		const inset = Math.max(0, resolvedOptions.inset);
+		const viewportMargin = Math.max(0, resolvedOptions.viewportMargin);
+		const viewportWidth = this.document.documentElement.clientWidth;
+		const viewportHeight = this.document.documentElement.clientHeight;
+		const availableWidth = Math.max(0, viewportWidth - viewportMargin * 2);
+		const availableHeight = Math.max(0, viewportHeight - viewportMargin * 2);
+		if (availableWidth === 0 || availableHeight === 0) return {};
+		const parentRect = parentSurface.getBoundingClientRect();
+		const minWidth = Math.min(Math.max(0, resolvedOptions.minWidth), availableWidth);
+		const minHeight = Math.min(Math.max(0, resolvedOptions.minHeight), availableHeight);
+		const width = Math.max(minWidth, Math.min(parentRect.width - inset, availableWidth));
+		const height = Math.max(minHeight, Math.min(parentRect.height - inset, availableHeight));
+		return {
+			width: `${Math.round(width)}px`,
+			height: `${Math.round(height)}px`,
+			maxWidth: `${Math.round(availableWidth)}px`,
+			maxHeight: `${Math.round(availableHeight)}px`
+		};
+	}
+	findParentDialogSurface() {
+		const activeElement = this.document.activeElement;
+		if (activeElement instanceof HTMLElement) {
+			const activeSurface = activeElement.closest(".mat-mdc-dialog-surface");
+			if (activeSurface) return activeSurface;
+		}
+		const visibleSurfaces = Array.from(this.document.querySelectorAll(".mat-mdc-dialog-surface")).filter((surface) => surface.getClientRects().length > 0);
+		return visibleSurfaces[visibleSurfaces.length - 1] ?? null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialogService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialogService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DisplayDialogService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var DisplayDialogModule = class DisplayDialogModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialogModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialogModule,
+		declarations: [DisplayDialog],
+		imports: [
+			CommonModule,
+			MatButtonModule,
+			MatDialogModule,
+			MatIconModule,
+			MatTabsModule,
+			MatTooltipModule,
+			SectionTabsModule,
+			MatProgressSpinnerModule
+		],
+		exports: [DisplayDialog]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DisplayDialogModule,
+		imports: [
+			CommonModule,
+			MatButtonModule,
+			MatDialogModule,
+			MatIconModule,
+			MatTabsModule,
+			MatTooltipModule,
+			SectionTabsModule,
+			MatProgressSpinnerModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DisplayDialogModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			declarations: [DisplayDialog],
+			imports: [
+				CommonModule,
+				MatButtonModule,
+				MatDialogModule,
+				MatIconModule,
+				MatTabsModule,
+				MatTooltipModule,
+				SectionTabsModule,
+				MatProgressSpinnerModule
+			],
+			exports: [DisplayDialog]
+		}]
+	}]
+});
+export { DEFAULT_NESTED_OPTIONS, DISPLAY_DIALOG_HOST, DisplayDialog, DisplayDialogIntl, DisplayDialogModule, DisplayDialogService };
+
+//# sourceMappingURL=eherve-angular-material-display-dialog.mjs.map