@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-dialog.mjs

@@ -0,0 +1,1223 @@
+import { DIALOG_DATA as DIALOG_DATA$1, CdkDialogContainer, DialogConfig, Dialog } from '@angular/cdk/dialog';
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, inject, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, Component, input, computed, viewChild, DestroyRef, afterEveryRender, Directive, Injector, afterNextRender, TemplateRef, Injectable, model, output, effect, untracked } from '@angular/core';
+import { Subject, map, shareReplay, filter } from 'rxjs';
+import { coerceBooleanProperty, coerceArray, coerceCssPixelValue } from '@angular/cdk/coercion';
+import { mlvNextId, MlvRtlService } from '@malva-ui/cdk/utils';
+import { MlvButtonClose, MlvButton } from '@malva-ui/core/button';
+import { MLV_DIALOG_I18N } from '@malva-ui/i18n';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
+import { MlvOverlayInitialFocusResolver } from '@malva-ui/cdk/overlay';
+
+const DEFAULT_SIZE_PRESETS = {
+    s: { width: '400px', maxHeight: '90vh', maxWidth: '90vw' },
+    m: { width: '560px', maxHeight: '90vh', maxWidth: '90vw' },
+    l: { width: '800px', maxHeight: '90vh', maxWidth: '90vw' },
+    fullscreen: {
+        width: '100vw',
+        height: '100vh',
+        maxWidth: '100vw',
+        maxHeight: '100vh',
+    },
+};
+/** Registered dialog size presets. Override to add or change presets app-wide. */
+const DIALOG_SIZE_PRESETS = new InjectionToken('DIALOG_SIZE_PRESETS', { providedIn: 'root', factory: () => DEFAULT_SIZE_PRESETS });
+/**
+ * Data passed through `MlvDialogConfig.data`, injectable by component content.
+ * This is Angular CDK's `DIALOG_DATA` token re-exported under the same name.
+ */
+const DIALOG_DATA = DIALOG_DATA$1;
+/** The consumer's `MlvDialogConfig` for the current dialog, injectable by content and parts. */
+const DIALOG_CONFIG = new InjectionToken('DIALOG_CONFIG');
+
+/**
+ * Upper bound the leave animation is given before the dialog is disposed
+ * anyway (reduced motion, a content root that is not `<mlv-dialog>`, jsdom).
+ */
+const LEAVE_FALLBACK_MS = 250;
+/**
+ * Handle returned by `MlvDialogService.open()` (and exposed to content through
+ * DI and the template context) for controlling a dialog and receiving its result.
+ *
+ * Wraps the CDK `DialogRef` the engine creates. `close()` plays the surface's
+ * leave animation first — `animationState` flips to `'leave'`, `<mlv-dialog>`
+ * adds `.mlv-dialog--leave`, and its `animationend` calls back here — and only
+ * then disposes the CDK dialog, so `afterClosed()` emits after the animation.
+ *
+ * @typeParam R - Result type emitted by `afterClosed()`.
+ * @typeParam D - Type of `data`.
+ */
+class MlvDialogRef {
+    _cdkRef;
+    /** Payload from `MlvDialogConfig.data`. */
+    data;
+    /** The consumer's configuration this dialog was opened with. */
+    config;
+    /** Id of the dialog container element (CDK-generated unless `config.id` was set). */
+    id;
+    /** Drives the surface's `--enter` / `--leave` classes. */
+    animationState;
+    /** @private Writable side of {@link animationState}. */
+    _animationState = signal('enter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_animationState" }] : /* istanbul ignore next */ []));
+    /** @private Emits once, synchronously, at the start of `close()`. */
+    _beforeClose = new Subject();
+    /** @private Guards `close()` against re-entry and late calls. */
+    _closeStarted = false;
+    /**
+     * @private Set once the CDK dialog has actually closed. From then on the ref
+     * is inert: a late `animationend` from the torn-down surface must not move
+     * `animationState` or re-enter the close path.
+     */
+    _disposed = false;
+    /** @private Result captured by the first `close()` call. */
+    _result;
+    /** @private Fallback timer that disposes when `animationend` never arrives. */
+    _leaveTimer;
+    constructor(
+    /** @private The CDK reference this handle controls. */
+    _cdkRef, config) {
+        this._cdkRef = _cdkRef;
+        this.config = config;
+        this.data = config.data;
+        this.id = _cdkRef.id;
+        this.animationState = this._animationState.asReadonly();
+        // The CDK can close without us (history navigation, overlay detachment,
+        // CDK closeAll). Treat that as terminal so a later close() is a no-op.
+        _cdkRef.closed.subscribe(() => {
+            this._closeStarted = true;
+            this._disposed = true;
+            this._clearLeaveTimer();
+            this._beforeClose.complete();
+        });
+    }
+    /**
+     * Closes the dialog: emits `beforeClose()`, plays the leave animation, then
+     * disposes and emits `result` on `afterClosed()`. Idempotent.
+     *
+     * @param result - Value forwarded to `afterClosed()` subscribers.
+     */
+    close(result) {
+        if (this._closeStarted) {
+            return;
+        }
+        this._closeStarted = true;
+        this._result = result;
+        this._beforeClose.next();
+        this._beforeClose.complete();
+        this._cdkRef.overlayRef.backdropElement?.classList.add('mlv-dialog-backdrop--leaving');
+        this._animationState.set('leave');
+        this._leaveTimer = setTimeout(() => this._finishClose(), LEAVE_FALLBACK_MS);
+    }
+    /** Emits once with the close result after the dialog is disposed, then completes. */
+    afterClosed() {
+        return this._cdkRef.closed;
+    }
+    /** Emits and completes synchronously when `close()` is called, before the leave animation. */
+    beforeClose() {
+        return this._beforeClose.asObservable();
+    }
+    /**
+     * Keydown events that reach this dialog. The CDK delivers a keydown only to
+     * the topmost overlay with keydown observers, so a dialog (or a select /
+     * combobox popup) opened on top of this one receives Escape instead of it.
+     * Pair with `closeOnEscape: false` to run a close guard yourself.
+     */
+    keydownEvents() {
+        return this._cdkRef.keydownEvents;
+    }
+    /** Backdrop clicks on this dialog. Pair with `closeOnBackdrop: false` to run a close guard yourself. */
+    backdropClick() {
+        return this._cdkRef.backdropClick;
+    }
+    /** Updates the overlay pane's width and/or height. */
+    updateSize(width, height) {
+        this._cdkRef.updateSize(width, height);
+        return this;
+    }
+    /** Adds class(es) to the overlay pane. */
+    addPanelClass(classes) {
+        this._cdkRef.addPanelClass(classes);
+        return this;
+    }
+    /** Removes class(es) from the overlay pane. */
+    removePanelClass(classes) {
+        this._cdkRef.removePanelClass(classes);
+        return this;
+    }
+    /**
+     * @internal Called by `<mlv-dialog>` when its own CSS animation ends:
+     * the enter animation settles to `'idle'`, the leave animation disposes.
+     */
+    _onSurfaceAnimationEnd() {
+        if (this._disposed) {
+            return;
+        }
+        const state = this._animationState();
+        if (state === 'enter') {
+            this._animationState.set('idle');
+        }
+        else if (state === 'leave') {
+            this._finishClose();
+        }
+    }
+    /**
+     * @internal Registers `id` as a label of the dialog. Used by
+     * `mlv-dialog-header` so the visible title becomes the accessible name.
+     * `ariaLabelledBy` from the config is queued first by the CDK container and
+     * therefore still wins; `ariaLabel` suppresses `aria-labelledby` entirely.
+     */
+    _labelBy(id) {
+        this._container()?._addAriaLabelledBy(id);
+    }
+    /** @internal Reverses {@link _labelBy} when the header is destroyed. */
+    _unlabelBy(id) {
+        this._container()?._removeAriaLabelledBy(id);
+    }
+    /** @private The CDK container while the dialog is open, `null` once disposed. */
+    _container() {
+        return (this._cdkRef
+            .containerInstance ?? null);
+    }
+    /** @private Disposes the CDK dialog with the captured result. Safe to call twice. */
+    _finishClose() {
+        this._clearLeaveTimer();
+        if (this._cdkRef.containerInstance) {
+            this._cdkRef.close(this._result);
+        }
+    }
+    /** @private Cancels the fallback timer if it is pending. */
+    _clearLeaveTimer() {
+        if (this._leaveTimer !== undefined) {
+            clearTimeout(this._leaveTimer);
+            this._leaveTimer = undefined;
+        }
+    }
+}
+
+/**
+ * @internal Injects the current `MlvDialogRef`, failing with a descriptive
+ * error when a dialog part is rendered outside a dialog.
+ *
+ * @param consumer - Selector of the part, used in the error message.
+ */
+function injectDialogRef(consumer) {
+    const ref = inject(MlvDialogRef, { optional: true });
+    if (!ref) {
+        throw new Error(`[Malva UI] <${consumer}> must be rendered inside a dialog: open its template or component through MlvDialogService.open(), or wrap it in <ng-template [(mlvDialog)]>.`);
+    }
+    return ref;
+}
+
+/**
+ * The dialog surface — root of every dialog's content, whether the dialog was
+ * opened from a template, a component, a string, `confirm()`, or a route.
+ *
+ * Projects its children (`mlv-dialog-header`, `mlv-dialog-body`,
+ * `mlv-dialog-footer`, anything else) and mirrors the ref's animation state as
+ * `--enter` / `--leave` so the global dialog keyframes run on it. Consumer
+ * `class="…"` lands here; `MlvDialogConfig.panelClass` styles the overlay pane.
+ */
+class MlvDialog {
+    /** @protected The dialog this surface belongs to. */
+    _ref = injectDialogRef('mlv-dialog');
+    /** @protected Per-open configuration; `appearance` drives the confirm modifier. */
+    _config = inject(DIALOG_CONFIG);
+    /** @private Host element, used to ignore `animationend` bubbling from descendants. */
+    _host = inject(ElementRef).nativeElement;
+    /** @protected Hands the surface's own animation end to the ref (enter → idle, leave → dispose). */
+    _onAnimationEnd(event) {
+        if (event.target === this._host) {
+            this._ref._onSurfaceAnimationEnd();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvDialog, isStandalone: true, selector: "mlv-dialog", host: { listeners: { "animationend": "_onAnimationEnd($event)" }, properties: { "class.mlv-dialog--confirm": "_config.appearance === 'confirm'", "class.mlv-dialog--enter": "_ref.animationState() === 'enter'", "class.mlv-dialog--leave": "_ref.animationState() === 'leave'" }, classAttribute: "mlv-dialog" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer mlv.components{.mlv-dialog{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-dialog *{box-sizing:border-box}.mlv-dialog{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;width:100%;max-width:100%;max-height:100%;overflow:hidden;border-radius:0;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);background-color:var(--mlv-elevation-bg-2);color:var(--mlv-text-primary);box-shadow:var(--mlv-shadow-modal)}@media(min-width:768px){.mlv-dialog{border-radius:var(--mlv-radius-dialog);max-height:calc(100dvh - 2rem)}}.mlv-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-3);flex-shrink:0;padding:var(--mlv-spacing-3);border-bottom:var(--mlv-stroke-width) solid var(--mlv-border-normal)}.mlv-dialog__title{flex:1 1 auto;min-width:0;margin:0;padding:0;font-size:var(--mlv-font-size-2xl);font-weight:var(--mlv-font-weight-semibold);line-height:var(--mlv-line-height-tight);color:var(--mlv-text-primary)}.mlv-dialog__title>:is(h1,h2,h3,h4,h5,h6){margin:0;font:inherit;color:inherit}.mlv-dialog__close{flex:none}.mlv-dialog__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.mlv-dialog__body-scrollbar{flex:1 1 auto;min-width:0;min-height:0}.mlv-dialog__body-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden;padding:var(--mlv-spacing-3)}.mlv-dialog__body-scrollbar>.mlv-scrollbar__viewport>.mlv-scrollbar__content{display:flex;flex-direction:column}.mlv-dialog__text{margin:0;color:var(--mlv-text-primary);line-height:var(--mlv-line-height-relaxed);white-space:pre-wrap;overflow-wrap:anywhere}.mlv-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mlv-spacing-2);flex-shrink:0;padding:var(--mlv-spacing-3);border-top:var(--mlv-stroke-width) solid var(--mlv-border-normal)}.mlv-dialog__footer--align-start{justify-content:flex-start}.mlv-dialog__footer--align-center{justify-content:center}.mlv-dialog__footer--align-between{justify-content:space-between}.mlv-dialog--confirm .mlv-dialog__header,.mlv-dialog--confirm .mlv-dialog__footer{border:none}.mlv-dialog-pane--fullscreen .mlv-dialog{max-height:100%;border-radius:0;border:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-dialog', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-dialog',
+                        '[class.mlv-dialog--confirm]': "_config.appearance === 'confirm'",
+                        '[class.mlv-dialog--enter]': "_ref.animationState() === 'enter'",
+                        '[class.mlv-dialog--leave]': "_ref.animationState() === 'leave'",
+                        '(animationend)': '_onAnimationEnd($event)',
+                    }, styles: ["@layer mlv.components{.mlv-dialog{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-dialog *{box-sizing:border-box}.mlv-dialog{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;min-height:0;width:100%;max-width:100%;max-height:100%;overflow:hidden;border-radius:0;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);background-color:var(--mlv-elevation-bg-2);color:var(--mlv-text-primary);box-shadow:var(--mlv-shadow-modal)}@media(min-width:768px){.mlv-dialog{border-radius:var(--mlv-radius-dialog);max-height:calc(100dvh - 2rem)}}.mlv-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-3);flex-shrink:0;padding:var(--mlv-spacing-3);border-bottom:var(--mlv-stroke-width) solid var(--mlv-border-normal)}.mlv-dialog__title{flex:1 1 auto;min-width:0;margin:0;padding:0;font-size:var(--mlv-font-size-2xl);font-weight:var(--mlv-font-weight-semibold);line-height:var(--mlv-line-height-tight);color:var(--mlv-text-primary)}.mlv-dialog__title>:is(h1,h2,h3,h4,h5,h6){margin:0;font:inherit;color:inherit}.mlv-dialog__close{flex:none}.mlv-dialog__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.mlv-dialog__body-scrollbar{flex:1 1 auto;min-width:0;min-height:0}.mlv-dialog__body-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden;padding:var(--mlv-spacing-3)}.mlv-dialog__body-scrollbar>.mlv-scrollbar__viewport>.mlv-scrollbar__content{display:flex;flex-direction:column}.mlv-dialog__text{margin:0;color:var(--mlv-text-primary);line-height:var(--mlv-line-height-relaxed);white-space:pre-wrap;overflow-wrap:anywhere}.mlv-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mlv-spacing-2);flex-shrink:0;padding:var(--mlv-spacing-3);border-top:var(--mlv-stroke-width) solid var(--mlv-border-normal)}.mlv-dialog__footer--align-start{justify-content:flex-start}.mlv-dialog__footer--align-center{justify-content:center}.mlv-dialog__footer--align-between{justify-content:space-between}.mlv-dialog--confirm .mlv-dialog__header,.mlv-dialog--confirm .mlv-dialog__footer{border:none}.mlv-dialog-pane--fullscreen .mlv-dialog{max-height:100%;border-radius:0;border:0}}\n"] }]
+        }] });
+
+/**
+ * Header row of a dialog: the title and the close button.
+ *
+ * Use it as an element (`<mlv-dialog-header title="…" />`) or as an attribute
+ * on a container (`<div mlvDialogHeader>`). Never put it on a heading — project
+ * the heading instead: `<mlv-dialog-header><h3>Edit user</h3></mlv-dialog-header>`.
+ *
+ * Title precedence: `title` input → projected content → `MlvDialogConfig.title`.
+ * Close button: `closable` input → `MlvDialogConfig.closable` → `true`, and
+ * always off when `MlvDialogConfig.appearance` is `'confirm'`.
+ *
+ * The title element carries `id="<dialogId>-title-<n>"` — unique per header, so
+ * two headers in one dialog never collide — and is registered as the
+ * dialog's label, so the visible title is the accessible name unless the
+ * config sets `ariaLabelledBy` / `ariaLabel`. The label follows the rendered
+ * title: the id is registered as soon as the title element gains text — an
+ * asynchronous title (`[title]="user()?.name"`, a projected heading fed by a
+ * resolver) is picked up — and removed again when it loses it. A header that
+ * renders no title at all (used only to host the close button) registers
+ * nothing — labelling the dialog with an empty element would leave it without
+ * an accessible name.
+ */
+class MlvDialogHeader {
+    /** Plain-text title rendered as `<h2>`. Wins over projected content and the config title. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the close button is rendered. Unset → `MlvDialogConfig.closable`
+     * → `true`. Ignored (always hidden) when the dialog `appearance` is `'confirm'`.
+     */
+    closable = input(undefined, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: (value) => value == null ? undefined : coerceBooleanProperty(value) });
+    /** @protected The dialog this header labels and closes. */
+    _ref = injectDialogRef('mlv-dialog-header');
+    /** @protected Per-open configuration (title / closable / appearance fallbacks). */
+    _config = inject(DIALOG_CONFIG);
+    /** @protected i18n strings — `closeDialog` labels the X. */
+    _i18n = inject(MLV_DIALOG_I18N);
+    /**
+     * @protected Id of the title element; the ref registers it as the dialog
+     * label. Per instance, not per dialog — two headers in the same dialog (a
+     * sticky bar plus a scrolled-away one, say) must not collide on one id.
+     */
+    _titleId = mlvNextId(`${this._ref.id}-title`);
+    /** @protected Config title used as the `<ng-content>` fallback. */
+    _configTitle = this._config.title;
+    /** @protected Resolved close-button visibility (see class docs for precedence). */
+    _closable = computed(() => this._config.appearance === 'confirm'
+        ? false
+        : (this.closable() ?? this._config.closable ?? true), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_closable" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected The rendered title element, in either branch. Its text decides
+     * whether the dialog is labelled by this header.
+     */
+    _titleEl = viewChild('titleEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_titleEl" }] : /* istanbul ignore next */ []));
+    /** @private Whether {@link _titleId} is currently registered as the dialog's label. */
+    _labelled = false;
+    /** @private Set on destroy so a queued render callback never runs on a torn-down view. */
+    _destroyed = false;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this._destroyed = true;
+            if (this._labelled) {
+                this._labelled = false;
+                this._ref._unlabelBy(this._titleId);
+            }
+        });
+        // The title is only observable from the DOM (input, projected content or
+        // the config fallback), and it can change at any time, so the decision is
+        // re-taken after every render rather than latched on the first one.
+        afterEveryRender(() => this._syncLabel());
+    }
+    /**
+     * @private Keeps the dialog's label in sync with the rendered title: the id
+     * is registered as soon as the title element has text and removed again when
+     * it loses it, so a title that only arrives asynchronously still names the
+     * dialog. An empty title element would still win the CDK's `aria-labelledby`
+     * queue and leave the dialog with an empty accessible name (an axe
+     * `aria-dialog-name` violation), so a header without any title — no `title`
+     * input, no projected content, no `config.title` — registers nothing.
+     */
+    _syncLabel() {
+        if (this._destroyed) {
+            return;
+        }
+        const hasText = !!this._titleEl()?.nativeElement.textContent?.trim();
+        if (hasText === this._labelled) {
+            return;
+        }
+        this._labelled = hasText;
+        if (hasText) {
+            this._ref._labelBy(this._titleId);
+        }
+        else {
+            this._ref._unlabelBy(this._titleId);
+        }
+    }
+    /** @protected Closes the dialog with no result, as the X always does. */
+    _close() {
+        this._ref.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDialogHeader, isStandalone: true, selector: "mlv-dialog-header, [mlvDialogHeader]", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null" }, classAttribute: "mlv-dialog__header" }, viewQueries: [{ propertyName: "_titleEl", first: true, predicate: ["titleEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (title(); as text) {
+      <h2 #titleEl class="mlv-dialog__title" [id]="_titleId">{{ text }}</h2>
+    } @else {
+      <div #titleEl class="mlv-dialog__title" [id]="_titleId">
+        <ng-content>
+          @if (_configTitle; as text) {
+            <h2>{{ text }}</h2>
+          }
+        </ng-content>
+      </div>
+    }
+    @if (_closable()) {
+      <!-- The wrapper hosts a real <button>, so the bubbled native click already
+           covers pointer, Enter and Space. -->
+      <mlv-button-close
+        class="mlv-dialog__close"
+        mlvDensity="compact"
+        shape="circle"
+        variant="secondary"
+        [ariaLabel]="_i18n().closeDialog"
+        (click)="_close()"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: MlvButtonClose, selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogHeader, decorators: [{
+            type: Component,
+            args: [{
+                    // Attribute form intentionally enhances the consumer's own header container.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'mlv-dialog-header, [mlvDialogHeader]',
+                    imports: [MlvButtonClose],
+                    template: `
+    @if (title(); as text) {
+      <h2 #titleEl class="mlv-dialog__title" [id]="_titleId">{{ text }}</h2>
+    } @else {
+      <div #titleEl class="mlv-dialog__title" [id]="_titleId">
+        <ng-content>
+          @if (_configTitle; as text) {
+            <h2>{{ text }}</h2>
+          }
+        </ng-content>
+      </div>
+    }
+    @if (_closable()) {
+      <!-- The wrapper hosts a real <button>, so the bubbled native click already
+           covers pointer, Enter and Space. -->
+      <mlv-button-close
+        class="mlv-dialog__close"
+        mlvDensity="compact"
+        shape="circle"
+        variant="secondary"
+        [ariaLabel]="_i18n().closeDialog"
+        (click)="_close()"
+      />
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'mlv-dialog__header',
+                        // `<mlv-dialog-header title="…">` feeds the input but also leaves a native
+                        // `title` attribute behind; bindings apply after static attributes, so this
+                        // strips it and the header row gets no browser tooltip.
+                        '[attr.title]': 'null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], _titleEl: [{ type: i0.ViewChild, args: ['titleEl', { isSignal: true }] }] } });
+
+/**
+ * Scrollable body of a dialog. Wraps its content in `mlv-scrollbar` (padding
+ * sits inside the scroll viewport so focus rings are never clipped).
+ */
+class MlvDialogBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvDialogBody, isStandalone: true, selector: "mlv-dialog-body, [mlvDialogBody]", host: { classAttribute: "mlv-dialog__body" }, ngImport: i0, template: `
+    <mlv-scrollbar class="mlv-dialog__body-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogBody, decorators: [{
+            type: Component,
+            args: [{
+                    // Attribute form intentionally enhances the consumer's own body container.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'mlv-dialog-body, [mlvDialogBody]',
+                    imports: [MlvScrollbar],
+                    template: `
+    <mlv-scrollbar class="mlv-dialog__body-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'mlv-dialog__body' },
+                }]
+        }] });
+
+/**
+ * Footer row of a dialog: a wrapping flex row of actions, end-aligned by
+ * default. Replaces the toolbar + spacer boilerplate.
+ */
+class MlvDialogFooter {
+    /** Where the actions sit: `'start'`, `'end'` (default), `'center'`, or `'between'`. */
+    align = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvDialogFooter, isStandalone: true, selector: "mlv-dialog-footer, [mlvDialogFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"mlv-dialog__footer--align-\" + align()" }, classAttribute: "mlv-dialog__footer" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogFooter, decorators: [{
+            type: Component,
+            args: [{
+                    // Attribute form intentionally enhances the consumer's own footer container.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'mlv-dialog-footer, [mlvDialogFooter]',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'mlv-dialog__footer',
+                        '[class]': '"mlv-dialog__footer--align-" + align()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+/**
+ * Closes the enclosing dialog when the host is clicked, optionally with a
+ * result: `<button mlvDialogClose>` closes with `undefined`,
+ * `<button mlvDialogClose="saved">` / `[mlvDialogClose]="value"` closes with
+ * that value. On a `<button>` without an explicit `type` it sets
+ * `type="button"` so it never submits a surrounding form.
+ *
+ * Put it on a `<button>` (or an `<a href>`): the directive listens to `click`
+ * only and adds no keyboard handling of its own.
+ */
+class MlvDialogClose {
+    /** Result passed to `MlvDialogRef.close()`. A bare attribute (`''`) means `undefined`. */
+    mlvDialogClose = input(undefined, { ...(ngDevMode ? { debugName: "mlvDialogClose" } : /* istanbul ignore next */ {}), transform: (value) => value === '' ? undefined : value });
+    /** `type` attribute applied when the host is a `<button>`. Defaults to `'button'`. */
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** @private The dialog to close. */
+    _ref = injectDialogRef('[mlvDialogClose]');
+    /** @private Whether the host is a native button (only then is `type` meaningful). */
+    _isButton = inject(ElementRef).nativeElement.tagName ===
+        'BUTTON';
+    /** @protected `type` attribute value, `null` on non-button hosts. */
+    _type = computed(() => this._isButton ? this.type() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_type" }] : /* istanbul ignore next */ []));
+    /** @protected Closes the dialog with the configured result. */
+    _close() {
+        this._ref.close(this.mlvDialogClose());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvDialogClose, isStandalone: true, selector: "[mlvDialogClose]", inputs: { mlvDialogClose: { classPropertyName: "mlvDialogClose", publicName: "mlvDialogClose", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_close()" }, properties: { "attr.type": "_type()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvDialogClose]',
+                    host: {
+                        '(click)': '_close()',
+                        '[attr.type]': '_type()',
+                    },
+                }]
+        }], propDecorators: { mlvDialogClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDialogClose", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
+/** @internal Class on the confirm button — also the `initialFocus` selector. */
+const MLV_CONFIRM_DIALOG_CONFIRM_CLASS = 'mlv-confirm-dialog__confirm';
+/** @internal Class on the cancel button — also the `initialFocus` selector. */
+const MLV_CONFIRM_DIALOG_CANCEL_CLASS = 'mlv-confirm-dialog__cancel';
+/**
+ * @internal Confirm-button variant per tone. `'danger'` never reaches the
+ * lookup — `mlvIsDestructiveConfirm()` catches it first — but it is listed so
+ * the record stays exhaustive over `MlvTone`.
+ */
+const CONFIRM_VARIANT_BY_TONE = {
+    danger: 'error',
+    warning: 'warning',
+    info: 'info',
+    success: 'primary',
+};
+/**
+ * @internal Content of a `MlvDialogService.confirm()` dialog: the standard
+ * surface with a titled header (no close button — the service opens it with
+ * `appearance: 'confirm'`), the message, and the two actions. Options arrive
+ * through `MlvDialogRef.data`, so this file never imports the service.
+ */
+class MlvConfirmDialog {
+    /** @private Handle used to resolve the confirmation. */
+    _ref = inject(MlvDialogRef);
+    /** @private i18n strings for the default labels. */
+    _i18n = inject(MLV_DIALOG_I18N);
+    /** @protected The options this confirmation was opened with. */
+    _options = this._ref.data;
+    /**
+     * @protected Id of the message paragraph. `confirm()` generates it and puts
+     * it on `MlvDialogConfig.ariaDescribedBy`, so the container already points at
+     * this element; reading it back here keeps `MlvConfirmDialogOptions` free of
+     * an id the caller never supplies. The fallback only matters if the component
+     * is ever opened without that config — the paragraph still gets a unique id.
+     */
+    _messageId = inject(DIALOG_CONFIG).ariaDescribedBy ?? mlvNextId('mlv-confirm-message');
+    /** @protected Resolved label of the confirming action; follows the active language. */
+    _confirmLabel = computed(() => this._options.confirmLabel ?? this._i18n().confirm, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_confirmLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Resolved label of the dismissing action; follows the active language. */
+    _cancelLabel = computed(() => this._options.cancelLabel ?? this._i18n().cancel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cancelLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Button variant of the confirming action. `destructive` and the
+     * `'danger'` tone both mean "cannot be undone", so either makes it dangerous;
+     * every other tone maps through {@link CONFIRM_VARIANT_BY_TONE}, and no tone
+     * at all stays `'primary'`.
+     */
+    _confirmVariant = mlvIsDestructiveConfirm(this._options)
+        ? 'error'
+        : this._options.tone
+            ? CONFIRM_VARIANT_BY_TONE[this._options.tone]
+            : 'primary';
+    /** @protected Resolves the confirmation as accepted. */
+    _confirm() {
+        this._ref.close(true);
+    }
+    /** @protected Resolves the confirmation as declined. */
+    _cancel() {
+        this._ref.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvConfirmDialog, isStandalone: true, selector: "mlv-confirm-dialog", host: { classAttribute: "mlv-confirm-dialog" }, ngImport: i0, template: `
+    <mlv-dialog>
+      <mlv-dialog-header [title]="_options.title" />
+      <mlv-dialog-body>
+        <p class="mlv-dialog__text" [id]="_messageId">{{ _options.message }}</p>
+      </mlv-dialog-body>
+      <mlv-dialog-footer>
+        <button
+          type="button"
+          mlvButton
+          variant="secondary"
+          class="mlv-confirm-dialog__cancel"
+          (click)="_cancel()"
+        >
+          {{ _cancelLabel() }}
+        </button>
+        <button
+          type="button"
+          mlvButton
+          [variant]="_confirmVariant"
+          class="mlv-confirm-dialog__confirm"
+          (click)="_confirm()"
+        >
+          {{ _confirmLabel() }}
+        </button>
+      </mlv-dialog-footer>
+    </mlv-dialog>
+  `, isInline: true, dependencies: [{ kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "component", type: MlvDialog, selector: "mlv-dialog" }, { kind: "component", type: MlvDialogHeader, selector: "mlv-dialog-header, [mlvDialogHeader]", inputs: ["title", "closable"] }, { kind: "component", type: MlvDialogBody, selector: "mlv-dialog-body, [mlvDialogBody]" }, { kind: "component", type: MlvDialogFooter, selector: "mlv-dialog-footer, [mlvDialogFooter]", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvConfirmDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-confirm-dialog',
+                    imports: [
+                        MlvButton,
+                        MlvDialog,
+                        MlvDialogHeader,
+                        MlvDialogBody,
+                        MlvDialogFooter,
+                    ],
+                    template: `
+    <mlv-dialog>
+      <mlv-dialog-header [title]="_options.title" />
+      <mlv-dialog-body>
+        <p class="mlv-dialog__text" [id]="_messageId">{{ _options.message }}</p>
+      </mlv-dialog-body>
+      <mlv-dialog-footer>
+        <button
+          type="button"
+          mlvButton
+          variant="secondary"
+          class="mlv-confirm-dialog__cancel"
+          (click)="_cancel()"
+        >
+          {{ _cancelLabel() }}
+        </button>
+        <button
+          type="button"
+          mlvButton
+          [variant]="_confirmVariant"
+          class="mlv-confirm-dialog__confirm"
+          (click)="_confirm()"
+        >
+          {{ _confirmLabel() }}
+        </button>
+      </mlv-dialog-footer>
+    </mlv-dialog>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'mlv-confirm-dialog' },
+                }]
+        }] });
+/**
+ * @internal Whether a confirmation describes an irreversible action. Shared by
+ * the component (button variant) and the service (initial focus) so the two
+ * cannot disagree about which action is the safe one.
+ */
+function mlvIsDestructiveConfirm(options) {
+    return options.destructive === true || options.tone === 'danger';
+}
+
+/**
+ * @internal Malva's CDK dialog container: focus trap, ARIA attributes and
+ * focus restore come from `CdkDialogContainer`; this subclass adds Malva's
+ * `initialFocus` strategy on top of the CDK's container focus and restates the
+ * host bindings. Ivy does inherit host bindings and attributes from a
+ * superclass, so that restatement is belt-and-braces — it mirrors what Angular
+ * Material's `MatDialogContainer` does, and keeps the contract visible next to
+ * the styles that depend on it.
+ *
+ * **Deliberate exception to the repo's "OnPush on every library component"
+ * rule:** `changeDetection` is `Eager`, matching `CdkDialogContainer` and
+ * `MatDialogContainer`. This container's view is the change-detection parent of
+ * arbitrary consumer content (the portal outlet's `ViewContainerRef` lives in
+ * it), so an OnPush, non-dirty container would skip refreshing embedded or
+ * component content whose bindings are driven by non-signal, zone-based state.
+ *
+ * Not exported — `MlvDialogService` passes it as `DialogConfig.container`.
+ */
+class MlvDialogContainer extends CdkDialogContainer {
+    /** @private The consumer's Malva config for initial and dynamic restore focus. */
+    _mlvConfig = inject(DIALOG_CONFIG);
+    /** @private The mutable CDK config consumed by the inherited destroy hook. */
+    _cdkConfig = inject(DialogConfig);
+    /** @private The opener captured before the CDK moves focus into this dialog. */
+    _capturedOpener = _getFocusedElementPierceShadowDom();
+    /** @private Shared overlay initial-focus strategy (`'auto'` skips the close button and scroll viewport). */
+    _initialFocus = inject(MlvOverlayInitialFocusResolver);
+    /** @private Injector for `afterNextRender` (the CDK's own is private). */
+    _hostInjector = inject(Injector);
+    /** @private Set on destroy so a pending focus callback becomes a no-op. */
+    _destroyed = false;
+    constructor() {
+        super();
+        inject(DestroyRef).onDestroy(() => (this._destroyed = true));
+    }
+    /**
+     * @protected The CDK first focuses the container (`autoFocus: 'dialog'`,
+     * emitting `_focusTrapped` so the CDK hides the rest of the page from AT),
+     * then — after the same render, before paint — Malva moves focus to the
+     * resolved `initialFocus` target.
+     */
+    _captureInitialFocus() {
+        super._captureInitialFocus();
+        afterNextRender(() => {
+            if (this._destroyed) {
+                return;
+            }
+            this._initialFocus.focus(this._elementRef.nativeElement, this._mlvConfig.initialFocus ?? 'auto');
+        }, { injector: this._hostInjector });
+    }
+    /**
+     * Resolves a dynamic restore-focus policy at actual disposal, then delegates
+     * the focus operation and focus-trap cleanup to the Angular CDK.
+     */
+    ngOnDestroy() {
+        const restoreFocus = this._mlvConfig.restoreFocus;
+        if (typeof restoreFocus === 'function') {
+            try {
+                this._cdkConfig.restoreFocus =
+                    this._connectedRestoreTarget(restoreFocus());
+            }
+            catch {
+                // Consumer code must not abort the CDK/overlay disposal lifecycle.
+                this._cdkConfig.restoreFocus = false;
+            }
+        }
+        // Keep CDK teardown outside the consumer-error boundary so its own errors
+        // remain observable instead of being mistaken for resolver failures.
+        super.ngOnDestroy();
+    }
+    /** @private Prevents a dynamic policy from focusing a detached element. */
+    _connectedRestoreTarget(target) {
+        if (target === true) {
+            return this._capturedOpener?.isConnected ? this._capturedOpener : false;
+        }
+        if (target === false || typeof target === 'string') {
+            return target;
+        }
+        return target.isConnected ? target : false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvDialogContainer, isStandalone: true, selector: "mlv-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "_config.id || null", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByQueue[0]", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null" }, classAttribute: "mlv-dialog-container" }, usesInheritance: true, ngImport: i0, template: '<ng-template cdkPortalOutlet />', isInline: true, styles: ["@layer mlv.components{.mlv-dialog-pane{display:flex;max-inline-size:100vw}mlv-dialog-container.mlv-dialog-container{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}mlv-dialog-container.mlv-dialog-container *{box-sizing:border-box}mlv-dialog-container.mlv-dialog-container{display:flex;flex-direction:column;inline-size:100%;block-size:100%;min-block-size:inherit;max-block-size:inherit;outline:0}mlv-dialog-container.mlv-dialog-container>:not(.mlv-dialog){display:flex;flex:1 1 auto;flex-direction:column;min-inline-size:0;min-block-size:0}@starting-style{.mlv-dialog-backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.mlv-dialog-backdrop--leaving{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}@media(prefers-reduced-motion:reduce){.mlv-dialog-container,.mlv-dialog-container *,.mlv-dialog-container:before,.mlv-dialog-container:after,[class^=mlv-dialog-container__],[class*=\" mlv-dialog-container__\"],[class^=mlv-dialog-container--],[class*=\" mlv-dialog-container--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-dialog-container', template: '<ng-template cdkPortalOutlet />', imports: [CdkPortalOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        class: 'mlv-dialog-container',
+                        tabindex: '-1',
+                        '[attr.id]': '_config.id || null',
+                        '[attr.role]': '_config.role',
+                        '[attr.aria-modal]': '_config.ariaModal',
+                        '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',
+                        '[attr.aria-label]': '_config.ariaLabel',
+                        '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
+                    }, styles: ["@layer mlv.components{.mlv-dialog-pane{display:flex;max-inline-size:100vw}mlv-dialog-container.mlv-dialog-container{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}mlv-dialog-container.mlv-dialog-container *{box-sizing:border-box}mlv-dialog-container.mlv-dialog-container{display:flex;flex-direction:column;inline-size:100%;block-size:100%;min-block-size:inherit;max-block-size:inherit;outline:0}mlv-dialog-container.mlv-dialog-container>:not(.mlv-dialog){display:flex;flex:1 1 auto;flex-direction:column;min-inline-size:0;min-block-size:0}@starting-style{.mlv-dialog-backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.mlv-dialog-backdrop--leaving{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}@media(prefers-reduced-motion:reduce){.mlv-dialog-container,.mlv-dialog-container *,.mlv-dialog-container:before,.mlv-dialog-container:after,[class^=mlv-dialog-container__],[class*=\" mlv-dialog-container__\"],[class^=mlv-dialog-container--],[class*=\" mlv-dialog-container--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [] });
+
+/** @internal The string passed to `MlvDialogService.open()`. */
+const MLV_DIALOG_TEXT = new InjectionToken('MLV_DIALOG_TEXT');
+/**
+ * @internal Renders string content: a surface with the standard header (title
+ * from `config.title`, close button per `config.closable`) and a body holding
+ * the escaped text. Composes the same public parts consumers use.
+ */
+class MlvDialogTextContent {
+    /** @protected Text rendered through interpolation (escaped, never HTML). */
+    _text = inject(MLV_DIALOG_TEXT);
+    /** @private Per-open configuration. */
+    _config = inject(DIALOG_CONFIG);
+    /**
+     * @protected A header is worth rendering when it has a title or a close
+     * button. `appearance: 'confirm'` forces the close button off inside
+     * `MlvDialogHeader`, so a titleless confirm surface would otherwise render an
+     * empty header bar.
+     */
+    _showHeader = !!this._config.title ||
+        (this._config.closable !== false && this._config.appearance !== 'confirm');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogTextContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDialogTextContent, isStandalone: true, selector: "mlv-dialog-text-content", host: { classAttribute: "mlv-dialog-text-content" }, ngImport: i0, template: `
+    <mlv-dialog>
+      @if (_showHeader) {
+        <mlv-dialog-header />
+      }
+      <mlv-dialog-body>
+        <p class="mlv-dialog__text">{{ _text }}</p>
+      </mlv-dialog-body>
+    </mlv-dialog>
+  `, isInline: true, dependencies: [{ kind: "component", type: MlvDialog, selector: "mlv-dialog" }, { kind: "component", type: MlvDialogHeader, selector: "mlv-dialog-header, [mlvDialogHeader]", inputs: ["title", "closable"] }, { kind: "component", type: MlvDialogBody, selector: "mlv-dialog-body, [mlvDialogBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogTextContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-dialog-text-content',
+                    imports: [MlvDialog, MlvDialogHeader, MlvDialogBody],
+                    template: `
+    <mlv-dialog>
+      @if (_showHeader) {
+        <mlv-dialog-header />
+      }
+      <mlv-dialog-body>
+        <p class="mlv-dialog__text">{{ _text }}</p>
+      </mlv-dialog-body>
+    </mlv-dialog>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'mlv-dialog-text-content' },
+                }]
+        }] });
+
+/**
+ * Opens modal dialogs. Thin orchestration over Angular CDK `Dialog`: the CDK
+ * owns overlay, container, focus trap/restore, ARIA and history handling;
+ * this service maps `MlvDialogConfig`, constructs the `MlvDialogRef`, plays
+ * the leave animation, and applies the granular Escape/backdrop opt-outs.
+ *
+ * It never renders chrome. Template and component content must have a
+ * `<mlv-dialog>` root; string content is wrapped by an internal renderer that
+ * composes the same parts.
+ */
+class MlvDialogService {
+    /** @private The CDK engine. */
+    _cdk = inject(Dialog);
+    /**
+     * @private Resolves the direction for the portaled dialog pane, which never
+     * inherits a `[dir]` scope from the element that opened it.
+     */
+    _rtl = inject(MlvRtlService);
+    /** @private Registered size presets. */
+    _presets = inject(DIALOG_SIZE_PRESETS);
+    /** @private Open Malva refs in open order, so `closeAll()` can animate each. */
+    _open = [];
+    /** Snapshot of the currently open dialogs, oldest first. */
+    get openDialogs() {
+        return [...this._open];
+    }
+    /**
+     * Opens `content` in a modal dialog.
+     *
+     * - `TemplateRef` receives `MlvDialogTemplateContext` (`let-dialog`,
+     *   `let-data="data"`, `let-config="config"`).
+     * - A component can inject `MlvDialogRef`, `DIALOG_CONFIG`, `DIALOG_DATA`
+     *   (and the CDK `DialogRef`).
+     * - A string is rendered as escaped text under `config.title`.
+     *
+     * @param content - Template, component type, or plain text.
+     * @param config - Size, chrome defaults, closing behaviour, focus, ARIA, data, injector.
+     * @returns A typed reference that controls the dialog and emits its result.
+     */
+    open(content, config = {}) {
+        const frozen = { ...config };
+        const isText = typeof content === 'string';
+        const size = frozen.size ?? 'm';
+        const restoreFocus = frozen.restoreFocus ?? true;
+        let ref;
+        // Third generic (container) deliberately left at its default: narrowing it
+        // to MlvDialogContainer makes the `container.providers` callback type
+        // incompatible with Dialog.open()'s parameter.
+        const cdkConfig = {
+            ...this._resolveSize(size),
+            panelClass: [
+                'mlv-dialog-pane',
+                // The `fullscreen` preset only sizes the pane; the modifier is what
+                // drops the surface's desktop radius/border and its viewport cap.
+                ...(size === 'fullscreen' ? ['mlv-dialog-pane--fullscreen'] : []),
+                ...coerceArray(frozen.panelClass ?? []),
+            ],
+            backdropClass: [
+                'mlv-dialog-backdrop',
+                ...coerceArray(frozen.backdropClass ?? []),
+            ],
+            hasBackdrop: frozen.hasBackdrop ?? true,
+            // Escape/backdrop are handled below so each is independently optional
+            // and the leave animation always plays.
+            disableClose: true,
+            // The CDK focuses the container; MlvDialogContainer then applies `initialFocus`.
+            autoFocus: 'dialog',
+            // A dynamic policy is resolved by MlvDialogContainer immediately before
+            // its inherited CDK destroy hook performs focus restoration.
+            restoreFocus: typeof restoreFocus === 'function' ? false : restoreFocus,
+            role: frozen.role ?? 'dialog',
+            ariaLabel: frozen.ariaLabel ??
+                (isText && !frozen.title ? content : null),
+            ariaLabelledBy: frozen.ariaLabelledBy ?? null,
+            ariaDescribedBy: frozen.ariaDescribedBy ?? null,
+            closeOnNavigation: frozen.closeOnNavigation ?? true,
+            // The pane is portaled to <body>, outside any `[dir]` scope the opener
+            // sits in, so the direction has to be passed explicitly. The focused
+            // element at open time is the opener in practice; the global direction
+            // is the fallback.
+            direction: frozen.direction ??
+                this._rtl.resolveDirection(typeof document === 'undefined'
+                    ? null
+                    : document.activeElement),
+            data: frozen.data,
+            injector: frozen.injector,
+            id: frozen.id,
+            container: {
+                type: MlvDialogContainer,
+                providers: () => [{ provide: DIALOG_CONFIG, useValue: frozen }],
+            },
+            templateContext: () => ({
+                $implicit: ref,
+                ref,
+                data: frozen.data,
+                config: frozen,
+            }),
+            providers: (cdkRef) => {
+                ref = new MlvDialogRef(cdkRef, frozen);
+                return [
+                    { provide: MlvDialogRef, useValue: ref },
+                    { provide: DIALOG_CONFIG, useValue: frozen },
+                    ...(isText ? [{ provide: MLV_DIALOG_TEXT, useValue: content }] : []),
+                ];
+            },
+        };
+        const target = isText
+            ? MlvDialogTextContent
+            : content instanceof TemplateRef
+                ? content
+                : content;
+        const cdkRef = this._cdk.open(target, cdkConfig);
+        // Both refs are invariant in `R` (it surfaces in the contravariant
+        // `DialogConfig.providers` callback), so neither typed ref is assignable to
+        // its erased form. Erasing here is safe: `_track` only closes and
+        // de-registers, and never reads the result type.
+        this._track(ref, cdkRef, frozen);
+        return ref;
+    }
+    /**
+     * Opens a two-action confirmation dialog and reports the user's answer.
+     *
+     * Emits exactly once and completes, so it composes with a `CanDeactivateFn`
+     * or any other guard. The answer is replayed, so late subscribers still
+     * receive it — subscribing after the dialog has already closed is fine.
+     * Every dismissal that is not the confirm button — Escape, the backdrop,
+     * `ref.close()` — resolves as `false`. When the action is `destructive` (or
+     * has the `'danger'` tone) the dialog opens as an `alertdialog`, the confirm
+     * button turns danger-coloured and initial focus goes to **Cancel**. The
+     * message paragraph always describes the dialog (`aria-describedby`).
+     *
+     * @param options - Title, message, and optional labels/tone/size.
+     * @returns `true` only if confirmed.
+     */
+    confirm(options) {
+        const destructive = mlvIsDestructiveConfirm(options);
+        const ref = this.open(MlvConfirmDialog, {
+            size: options.size ?? 's',
+            // The two actions are the whole point; the surface drops the chrome
+            // borders and the header hides its close button.
+            appearance: 'confirm',
+            data: options,
+            // An irreversible action is an interruption that needs an answer now.
+            role: destructive ? 'alertdialog' : 'dialog',
+            // The component binds this id on its message paragraph, so the container
+            // is described by the very text the user has to act on.
+            ariaDescribedBy: mlvNextId('mlv-confirm-message'),
+            closeOnBackdrop: options.closeOnBackdrop,
+            closeOnEscape: options.closeOnEscape,
+            injector: options.injector,
+            initialFocus: destructive
+                ? `.${MLV_CONFIRM_DIALOG_CANCEL_CLASS}`
+                : `.${MLV_CONFIRM_DIALOG_CONFIRM_CLASS}`,
+        });
+        const answer$ = ref.afterClosed().pipe(map((result) => result === true), shareReplay({ bufferSize: 1, refCount: false }));
+        // `afterClosed()` is the CDK's hot `closed` subject: it emits once and
+        // completes, so a subscriber that only arrives after the dialog closed
+        // would get nothing. `shareReplay` alone does not fix that — it is lazy —
+        // so the buffer is connected here, while the dialog is still open.
+        answer$.subscribe();
+        return answer$;
+    }
+    /** Closes every open dialog, newest first, playing each leave animation. */
+    closeAll() {
+        [...this._open].reverse().forEach((ref) => ref.close());
+    }
+    /** @private Registers the ref and wires the Escape/backdrop close behaviours. */
+    _track(ref, cdkRef, config) {
+        this._open.push(ref);
+        cdkRef.closed.subscribe(() => {
+            const index = this._open.indexOf(ref);
+            if (index > -1) {
+                this._open.splice(index, 1);
+            }
+        });
+        if (config.closeOnBackdrop !== false) {
+            cdkRef.backdropClick.subscribe(() => ref.close());
+        }
+        if (config.closeOnEscape !== false) {
+            cdkRef.keydownEvents
+                .pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)))
+                .subscribe((event) => {
+                event.preventDefault();
+                ref.close();
+            });
+        }
+    }
+    /** @private Resolves a preset name (unknown → `'m'`) or explicit size to CDK size fields. */
+    _resolveSize(size) {
+        const resolved = typeof size === 'string'
+            ? (this._presets[size] ?? this._presets['m'] ?? {})
+            : size;
+        return {
+            width: coerceCssPixelValue(resolved.width),
+            height: coerceCssPixelValue(resolved.height),
+            minWidth: coerceCssPixelValue(resolved.minWidth),
+            minHeight: coerceCssPixelValue(resolved.minHeight),
+            maxWidth: coerceCssPixelValue(resolved.maxWidth),
+            maxHeight: coerceCssPixelValue(resolved.maxHeight),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Declarative sugar over `MlvDialogService.open(templateRef, options)`.
+ *
+ * ```html
+ * <ng-template [(mlvDialog)]="editing" [mlvDialogOptions]="{ size: 's' }" let-dialog>
+ *   <mlv-dialog>
+ *     <mlv-dialog-header title="Edit user" />
+ *     <mlv-dialog-body>…</mlv-dialog-body>
+ *     <mlv-dialog-footer><button mlvButton mlvDialogClose="saved">Save</button></mlv-dialog-footer>
+ *   </mlv-dialog>
+ * </ng-template>
+ * ```
+ *
+ * The template is instantiated only while open (lazy by default) and gets
+ * the same context as `open(templateRef)`: the ref as `let-dialog`,
+ * `let-data="data"`, `let-config="config"`. Setting the model to `true` opens,
+ * `false` closes (leave animation included), and closing from inside —
+ * `[mlvDialogClose]`, Escape, backdrop, `dialog.close()` — flips the model
+ * back to `false` and emits `mlvDialogClosed` with the result.
+ *
+ * Setting the model back to `true` while the previous instance is still
+ * leaving is honoured: the intent is remembered and a fresh dialog opens as
+ * soon as that instance is disposed, after its `mlvDialogClosed` has fired.
+ * Re-opening from **inside** an `(mlvDialogClosed)` handler is the one case
+ * that does not work: the handler runs before the model settles, so the write
+ * is overwritten. Re-open from a later tick, or while the dialog is leaving.
+ *
+ * If the host is destroyed while a dialog is open, that dialog is closed too — outputs are not emitted after the host is destroyed.
+ */
+class MlvDialogTemplate {
+    /** Whether the dialog is open. Two-way bindable: `[(mlvDialog)]="open"`. */
+    mlvDialog = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvDialog" }] : /* istanbul ignore next */ []));
+    /** Options passed to `MlvDialogService.open()`. Read when the dialog opens; later changes apply to the next open. */
+    mlvDialogOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "mlvDialogOptions" }] : /* istanbul ignore next */ []));
+    /** Emits after the dialog has been opened. */
+    mlvDialogOpened = output();
+    /** Emits the close result once the dialog is disposed. */
+    mlvDialogClosed = output();
+    /** @private The wrapped template. */
+    _template = inject(TemplateRef);
+    /** @private Opens the template. */
+    _dialogs = inject(MlvDialogService);
+    /** @private Ref of the currently open (or leaving) dialog. */
+    _ref = null;
+    /** @private Tears the `afterClosed()` subscription down with the host. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Set when the model turned `true` while the previous instance was still leaving. */
+    _reopenPending = false;
+    /** The ref of the open dialog (held until the leave animation completes), or `null`. */
+    get ref() {
+        return this._ref;
+    }
+    constructor() {
+        effect(() => {
+            const open = this.mlvDialog();
+            untracked(() => {
+                if (open) {
+                    if (this._ref) {
+                        // Still leaving (or open) — remember the intent instead of
+                        // dropping it, so the re-open happens once the old instance goes.
+                        this._reopenPending = this._ref.animationState() === 'leave';
+                        return;
+                    }
+                    this._open();
+                }
+                else {
+                    this._reopenPending = false;
+                    this._ref?.close();
+                }
+            });
+        });
+        this._destroyRef.onDestroy(() => {
+            // The `afterClosed()` subscription is torn down with the host, so nothing
+            // clears `_ref` afterwards — drop it here so `ref` never hands out a
+            // disposed handle.
+            this._ref?.close();
+            this._ref = null;
+        });
+    }
+    /** Sets the model to `true`. */
+    open() {
+        this.mlvDialog.set(true);
+    }
+    /** Sets the model to `false`. */
+    close() {
+        this.mlvDialog.set(false);
+    }
+    /** @private Opens through the service. Callers guarantee no dialog is live. */
+    _open() {
+        const ref = this._dialogs.open(this._template, this.mlvDialogOptions());
+        this._ref = ref;
+        // Subscribed before the output fires: a handler that synchronously disposes
+        // the dialog must still clear `_ref` and flip the model back to `false`.
+        // `takeUntilDestroyed` drops the callback with the host, so nothing is
+        // emitted and the model is not touched after destruction.
+        ref
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((result) => {
+            if (this._ref !== ref) {
+                return;
+            }
+            this._ref = null;
+            this.mlvDialogClosed.emit(result);
+            const reopen = this._reopenPending && this.mlvDialog();
+            this._reopenPending = false;
+            if (reopen) {
+                this._open();
+            }
+            else {
+                this.mlvDialog.set(false);
+            }
+        });
+        this.mlvDialogOpened.emit();
+    }
+    /** Type guard so `let-dialog` / `let-data` are typed in the template. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvDialogTemplate, isStandalone: true, selector: "ng-template[mlvDialog]", inputs: { mlvDialog: { classPropertyName: "mlvDialog", publicName: "mlvDialog", isSignal: true, isRequired: false, transformFunction: null }, mlvDialogOptions: { classPropertyName: "mlvDialogOptions", publicName: "mlvDialogOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mlvDialog: "mlvDialogChange", mlvDialogOpened: "mlvDialogOpened", mlvDialogClosed: "mlvDialogClosed" }, exportAs: ["mlvDialog"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDialogTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mlvDialog]',
+                    exportAs: 'mlvDialog',
+                }]
+        }], ctorParameters: () => [], propDecorators: { mlvDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDialog", required: false }] }, { type: i0.Output, args: ["mlvDialogChange"] }], mlvDialogOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDialogOptions", required: false }] }], mlvDialogOpened: [{ type: i0.Output, args: ["mlvDialogOpened"] }], mlvDialogClosed: [{ type: i0.Output, args: ["mlvDialogClosed"] }] } });
+
+/**
+ * Generates a route configuration that opens a component inside a routed dialog.
+ * When the dialog closes, the router navigates back to the parent route.
+ *
+ * The component receives the shell's `Injector`, so it can inject `ActivatedRoute`
+ * to access route params, resolved data, and query params. It can also inject
+ * `MlvDialogRef` to close itself programmatically.
+ *
+ * @param component - The component to render inside the dialog. Can be an eager class reference
+ *   or a lazy import function (e.g., `() => import('./my-dialog.component')`).
+ * @param options - Route path, named outlet, and dialog configuration options.
+ * @returns A `Route` object to include in your route configuration.
+ *
+ * @example
+ * ```ts
+ * // Lazy-loaded dialog route
+ * {
+ *   path: 'users',
+ *   component: UsersListPage,
+ *   children: [
+ *     mlvGenerateRoutableDialogRoute(
+ *       () => import('./user-edit.component'),
+ *       { path: ':id/edit', size: 'l' },
+ *     ),
+ *   ],
+ * }
+ *
+ * // Eager dialog route
+ * mlvGenerateRoutableDialogRoute(UserEditComponent, {
+ *   path: ':id/edit',
+ *   size: 'l',
+ *   closeOnBackdrop: false,
+ * })
+ *
+ * // With guards and resolvers (spread the returned route)
+ * {
+ *   ...mlvGenerateRoutableDialogRoute(() => import('./confirm.component'), { path: 'confirm' }),
+ *   canActivate: [authGuard],
+ *   resolve: { item: itemResolver },
+ * }
+ * ```
+ */
+function mlvGenerateRoutableDialogRoute(component, { path = '', outlet = '', ...dialogOptions } = {}) {
+    return {
+        path,
+        outlet: outlet || undefined,
+        loadComponent: () => import('./malva-ui-core-dialog-routable-dialog-CvjXMtlD.mjs'),
+        data: {
+            dialog: component,
+            dialogOptions,
+            backUrl: path
+                .split('/')
+                .map(() => '..')
+                .join('/'),
+            isLazy: path === '',
+        },
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DIALOG_CONFIG, DIALOG_DATA, DIALOG_SIZE_PRESETS, MlvDialog, MlvDialogBody, MlvDialogClose, MlvDialogFooter, MlvDialogHeader, MlvDialogRef, MlvDialogService, MlvDialogTemplate, mlvGenerateRoutableDialogRoute };
+//# sourceMappingURL=malva-ui-core-dialog.mjs.map