@malva-ui/core 0.1.12

package/esm2022/dialog/lib/dialog-header.js

@@ -0,0 +1,181 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { afterEveryRender, ChangeDetectionStrategy, Component, computed, DestroyRef, inject, input, viewChild, ViewEncapsulation, } from '@angular/core';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvButtonClose } from '@malva-ui/core/button';
+import { MLV_DIALOG_I18N } from '@malva-ui/i18n';
+import { DIALOG_CONFIG } from './dialog-config';
+import { injectDialogRef } from './inject-dialog-ref';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export 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 }] }] } });
+//# sourceMappingURL=dialog-header.js.map

package/esm2022/dialog/lib/dialog-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-header.js","sourceRoot":"","sources":["../../../../../../libs/core/dialog/src/lib/dialog-header.ts"],"names":[],"mappings":"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","sourcesContent":["import type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport type { ElementRef } from '@angular/core';\nimport {\n  afterEveryRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  inject,\n  input,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport { MlvButtonClose } from '@malva-ui/core/button';\nimport { MLV_DIALOG_I18N } from '@malva-ui/i18n';\n\nimport { DIALOG_CONFIG } from './dialog-config';\nimport { injectDialogRef } from './inject-dialog-ref';\n\n/**\n * Header row of a dialog: the title and the close button.\n *\n * Use it as an element (`<mlv-dialog-header title=\"…\" />`) or as an attribute\n * on a container (`<div mlvDialogHeader>`). Never put it on a heading — project\n * the heading instead: `<mlv-dialog-header><h3>Edit user</h3></mlv-dialog-header>`.\n *\n * Title precedence: `title` input → projected content → `MlvDialogConfig.title`.\n * Close button: `closable` input → `MlvDialogConfig.closable` → `true`, and\n * always off when `MlvDialogConfig.appearance` is `'confirm'`.\n *\n * The title element carries `id=\"<dialogId>-title-<n>\"` — unique per header, so\n * two headers in one dialog never collide — and is registered as the\n * dialog's label, so the visible title is the accessible name unless the\n * config sets `ariaLabelledBy` / `ariaLabel`. The label follows the rendered\n * title: the id is registered as soon as the title element gains text — an\n * asynchronous title (`[title]=\"user()?.name\"`, a projected heading fed by a\n * resolver) is picked up — and removed again when it loses it. A header that\n * renders no title at all (used only to host the close button) registers\n * nothing — labelling the dialog with an empty element would leave it without\n * an accessible name.\n */\n@Component({\n  // Attribute form intentionally enhances the consumer's own header container.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'mlv-dialog-header, [mlvDialogHeader]',\n  imports: [MlvButtonClose],\n  template: `\n    @if (title(); as text) {\n      <h2 #titleEl class=\"mlv-dialog__title\" [id]=\"_titleId\">{{ text }}</h2>\n    } @else {\n      <div #titleEl class=\"mlv-dialog__title\" [id]=\"_titleId\">\n        <ng-content>\n          @if (_configTitle; as text) {\n            <h2>{{ text }}</h2>\n          }\n        </ng-content>\n      </div>\n    }\n    @if (_closable()) {\n      <!-- The wrapper hosts a real <button>, so the bubbled native click already\n           covers pointer, Enter and Space. -->\n      <mlv-button-close\n        class=\"mlv-dialog__close\"\n        mlvDensity=\"compact\"\n        shape=\"circle\"\n        variant=\"secondary\"\n        [ariaLabel]=\"_i18n().closeDialog\"\n        (click)=\"_close()\"\n      />\n    }\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-dialog__header',\n    // `<mlv-dialog-header title=\"…\">` feeds the input but also leaves a native\n    // `title` attribute behind; bindings apply after static attributes, so this\n    // strips it and the header row gets no browser tooltip.\n    '[attr.title]': 'null',\n  },\n})\nexport class MlvDialogHeader {\n  /** Plain-text title rendered as `<h2>`. Wins over projected content and the config title. */\n  readonly title = input<string>();\n\n  /**\n   * Whether the close button is rendered. Unset → `MlvDialogConfig.closable`\n   * → `true`. Ignored (always hidden) when the dialog `appearance` is `'confirm'`.\n   */\n  readonly closable = input<boolean | undefined, BooleanInput>(undefined, {\n    transform: (value) =>\n      value == null ? undefined : coerceBooleanProperty(value),\n  });\n\n  /** @protected The dialog this header labels and closes. */\n  protected readonly _ref = injectDialogRef('mlv-dialog-header');\n  /** @protected Per-open configuration (title / closable / appearance fallbacks). */\n  protected readonly _config = inject(DIALOG_CONFIG);\n  /** @protected i18n strings — `closeDialog` labels the X. */\n  protected readonly _i18n = inject(MLV_DIALOG_I18N);\n  /**\n   * @protected Id of the title element; the ref registers it as the dialog\n   * label. Per instance, not per dialog — two headers in the same dialog (a\n   * sticky bar plus a scrolled-away one, say) must not collide on one id.\n   */\n  protected readonly _titleId = mlvNextId(`${this._ref.id}-title`);\n  /** @protected Config title used as the `<ng-content>` fallback. */\n  protected readonly _configTitle = this._config.title;\n  /** @protected Resolved close-button visibility (see class docs for precedence). */\n  protected readonly _closable = computed(() =>\n    this._config.appearance === 'confirm'\n      ? false\n      : (this.closable() ?? this._config.closable ?? true),\n  );\n\n  /**\n   * @protected The rendered title element, in either branch. Its text decides\n   * whether the dialog is labelled by this header.\n   */\n  protected readonly _titleEl = viewChild<ElementRef<HTMLElement>>('titleEl');\n\n  /** @private Whether {@link _titleId} is currently registered as the dialog's label. */\n  private _labelled = false;\n  /** @private Set on destroy so a queued render callback never runs on a torn-down view. */\n  private _destroyed = false;\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => {\n      this._destroyed = true;\n      if (this._labelled) {\n        this._labelled = false;\n        this._ref._unlabelBy(this._titleId);\n      }\n    });\n    // The title is only observable from the DOM (input, projected content or\n    // the config fallback), and it can change at any time, so the decision is\n    // re-taken after every render rather than latched on the first one.\n    afterEveryRender(() => this._syncLabel());\n  }\n\n  /**\n   * @private Keeps the dialog's label in sync with the rendered title: the id\n   * is registered as soon as the title element has text and removed again when\n   * it loses it, so a title that only arrives asynchronously still names the\n   * dialog. An empty title element would still win the CDK's `aria-labelledby`\n   * queue and leave the dialog with an empty accessible name (an axe\n   * `aria-dialog-name` violation), so a header without any title — no `title`\n   * input, no projected content, no `config.title` — registers nothing.\n   */\n  private _syncLabel(): void {\n    if (this._destroyed) {\n      return;\n    }\n    const hasText = !!this._titleEl()?.nativeElement.textContent?.trim();\n    if (hasText === this._labelled) {\n      return;\n    }\n    this._labelled = hasText;\n    if (hasText) {\n      this._ref._labelBy(this._titleId);\n    } else {\n      this._ref._unlabelBy(this._titleId);\n    }\n  }\n\n  /** @protected Closes the dialog with no result, as the X always does. */\n  protected _close(): void {\n    this._ref.close();\n  }\n}\n"]}

package/esm2022/dialog/lib/dialog-ref.js

@@ -0,0 +1,167 @@
+import { signal } from '@angular/core';
+import { Subject } from 'rxjs';
+/**
+ * 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`.
+ */
+export 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;
+        }
+    }
+}
+//# sourceMappingURL=dialog-ref.js.map

package/esm2022/dialog/lib/dialog-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-ref.js","sourceRoot":"","sources":["../../../../../../libs/core/dialog/src/lib/dialog-ref.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';\nimport type { Signal } from '@angular/core';\nimport { signal } from '@angular/core';\nimport type { Observable } from 'rxjs';\nimport { Subject } from 'rxjs';\n\nimport type { MlvDialogConfig } from './dialog-config';\n\n/** Lifecycle of the surface animation driven by `MlvDialogRef.animationState`. */\nexport type MlvDialogAnimationState = 'enter' | 'idle' | 'leave';\n\n/**\n * Upper bound the leave animation is given before the dialog is disposed\n * anyway (reduced motion, a content root that is not `<mlv-dialog>`, jsdom).\n */\nconst LEAVE_FALLBACK_MS = 250;\n\n/**\n * Handle returned by `MlvDialogService.open()` (and exposed to content through\n * DI and the template context) for controlling a dialog and receiving its result.\n *\n * Wraps the CDK `DialogRef` the engine creates. `close()` plays the surface's\n * leave animation first — `animationState` flips to `'leave'`, `<mlv-dialog>`\n * adds `.mlv-dialog--leave`, and its `animationend` calls back here — and only\n * then disposes the CDK dialog, so `afterClosed()` emits after the animation.\n *\n * @typeParam R - Result type emitted by `afterClosed()`.\n * @typeParam D - Type of `data`.\n */\nexport class MlvDialogRef<R = unknown, D = unknown> {\n  /** Payload from `MlvDialogConfig.data`. */\n  readonly data: D;\n  /** The consumer's configuration this dialog was opened with. */\n  readonly config: Readonly<MlvDialogConfig<D>>;\n  /** Id of the dialog container element (CDK-generated unless `config.id` was set). */\n  readonly id: string;\n  /** Drives the surface's `--enter` / `--leave` classes. */\n  readonly animationState: Signal<MlvDialogAnimationState>;\n\n  /** @private Writable side of {@link animationState}. */\n  private readonly _animationState = signal<MlvDialogAnimationState>('enter');\n  /** @private Emits once, synchronously, at the start of `close()`. */\n  private readonly _beforeClose = new Subject<void>();\n  /** @private Guards `close()` against re-entry and late calls. */\n  private _closeStarted = false;\n  /**\n   * @private Set once the CDK dialog has actually closed. From then on the ref\n   * is inert: a late `animationend` from the torn-down surface must not move\n   * `animationState` or re-enter the close path.\n   */\n  private _disposed = false;\n  /** @private Result captured by the first `close()` call. */\n  private _result: R | undefined;\n  /** @private Fallback timer that disposes when `animationend` never arrives. */\n  private _leaveTimer: ReturnType<typeof setTimeout> | undefined;\n\n  constructor(\n    /** @private The CDK reference this handle controls. */\n    private readonly _cdkRef: DialogRef<R>,\n    config: Readonly<MlvDialogConfig<D>>,\n  ) {\n    this.config = config;\n    this.data = config.data as D;\n    this.id = _cdkRef.id;\n    this.animationState = this._animationState.asReadonly();\n\n    // The CDK can close without us (history navigation, overlay detachment,\n    // CDK closeAll). Treat that as terminal so a later close() is a no-op.\n    _cdkRef.closed.subscribe(() => {\n      this._closeStarted = true;\n      this._disposed = true;\n      this._clearLeaveTimer();\n      this._beforeClose.complete();\n    });\n  }\n\n  /**\n   * Closes the dialog: emits `beforeClose()`, plays the leave animation, then\n   * disposes and emits `result` on `afterClosed()`. Idempotent.\n   *\n   * @param result - Value forwarded to `afterClosed()` subscribers.\n   */\n  close(result?: R): void {\n    if (this._closeStarted) {\n      return;\n    }\n    this._closeStarted = true;\n    this._result = result;\n\n    this._beforeClose.next();\n    this._beforeClose.complete();\n\n    this._cdkRef.overlayRef.backdropElement?.classList.add(\n      'mlv-dialog-backdrop--leaving',\n    );\n    this._animationState.set('leave');\n    this._leaveTimer = setTimeout(() => this._finishClose(), LEAVE_FALLBACK_MS);\n  }\n\n  /** Emits once with the close result after the dialog is disposed, then completes. */\n  afterClosed(): Observable<R | undefined> {\n    return this._cdkRef.closed;\n  }\n\n  /** Emits and completes synchronously when `close()` is called, before the leave animation. */\n  beforeClose(): Observable<void> {\n    return this._beforeClose.asObservable();\n  }\n\n  /**\n   * Keydown events that reach this dialog. The CDK delivers a keydown only to\n   * the topmost overlay with keydown observers, so a dialog (or a select /\n   * combobox popup) opened on top of this one receives Escape instead of it.\n   * Pair with `closeOnEscape: false` to run a close guard yourself.\n   */\n  keydownEvents(): Observable<KeyboardEvent> {\n    return this._cdkRef.keydownEvents;\n  }\n\n  /** Backdrop clicks on this dialog. Pair with `closeOnBackdrop: false` to run a close guard yourself. */\n  backdropClick(): Observable<MouseEvent> {\n    return this._cdkRef.backdropClick;\n  }\n\n  /** Updates the overlay pane's width and/or height. */\n  updateSize(width?: string | number, height?: string | number): this {\n    this._cdkRef.updateSize(width, height);\n    return this;\n  }\n\n  /** Adds class(es) to the overlay pane. */\n  addPanelClass(classes: string | string[]): this {\n    this._cdkRef.addPanelClass(classes);\n    return this;\n  }\n\n  /** Removes class(es) from the overlay pane. */\n  removePanelClass(classes: string | string[]): this {\n    this._cdkRef.removePanelClass(classes);\n    return this;\n  }\n\n  /**\n   * @internal Called by `<mlv-dialog>` when its own CSS animation ends:\n   * the enter animation settles to `'idle'`, the leave animation disposes.\n   */\n  _onSurfaceAnimationEnd(): void {\n    if (this._disposed) {\n      return;\n    }\n    const state = this._animationState();\n    if (state === 'enter') {\n      this._animationState.set('idle');\n    } else if (state === 'leave') {\n      this._finishClose();\n    }\n  }\n\n  /**\n   * @internal Registers `id` as a label of the dialog. Used by\n   * `mlv-dialog-header` so the visible title becomes the accessible name.\n   * `ariaLabelledBy` from the config is queued first by the CDK container and\n   * therefore still wins; `ariaLabel` suppresses `aria-labelledby` entirely.\n   */\n  _labelBy(id: string): void {\n    this._container()?._addAriaLabelledBy(id);\n  }\n\n  /** @internal Reverses {@link _labelBy} when the header is destroyed. */\n  _unlabelBy(id: string): void {\n    this._container()?._removeAriaLabelledBy(id);\n  }\n\n  /** @private The CDK container while the dialog is open, `null` once disposed. */\n  private _container(): CdkDialogContainer | null {\n    return (\n      (this._cdkRef\n        .containerInstance as unknown as CdkDialogContainer | null) ?? null\n    );\n  }\n\n  /** @private Disposes the CDK dialog with the captured result. Safe to call twice. */\n  private _finishClose(): void {\n    this._clearLeaveTimer();\n    if (this._cdkRef.containerInstance) {\n      this._cdkRef.close(this._result);\n    }\n  }\n\n  /** @private Cancels the fallback timer if it is pending. */\n  private _clearLeaveTimer(): void {\n    if (this._leaveTimer !== undefined) {\n      clearTimeout(this._leaveTimer);\n      this._leaveTimer = undefined;\n    }\n  }\n}\n"]}

package/esm2022/dialog/lib/dialog-template.js

@@ -0,0 +1,136 @@
+import { DestroyRef, Directive, effect, inject, input, model, output, TemplateRef, untracked, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MlvDialogService } from './dialog.service';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export 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"] }] } });
+//# sourceMappingURL=dialog-template.js.map

package/esm2022/dialog/lib/dialog-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-template.js","sourceRoot":"","sources":["../../../../../../libs/core/dialog/src/lib/dialog-template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DestroyRef,\n  Directive,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  TemplateRef,\n  untracked,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport type {\n  MlvDialogConfig,\n  MlvDialogTemplateContext,\n} from './dialog-config';\nimport type { MlvDialogRef } from './dialog-ref';\nimport { MlvDialogService } from './dialog.service';\n\n/**\n * Declarative sugar over `MlvDialogService.open(templateRef, options)`.\n *\n * ```html\n * <ng-template [(mlvDialog)]=\"editing\" [mlvDialogOptions]=\"{ size: 's' }\" let-dialog>\n *   <mlv-dialog>\n *     <mlv-dialog-header title=\"Edit user\" />\n *     <mlv-dialog-body>…</mlv-dialog-body>\n *     <mlv-dialog-footer><button mlvButton mlvDialogClose=\"saved\">Save</button></mlv-dialog-footer>\n *   </mlv-dialog>\n * </ng-template>\n * ```\n *\n * The template is instantiated only while open (lazy by default) and gets\n * the same context as `open(templateRef)`: the ref as `let-dialog`,\n * `let-data=\"data\"`, `let-config=\"config\"`. Setting the model to `true` opens,\n * `false` closes (leave animation included), and closing from inside —\n * `[mlvDialogClose]`, Escape, backdrop, `dialog.close()` — flips the model\n * back to `false` and emits `mlvDialogClosed` with the result.\n *\n * Setting the model back to `true` while the previous instance is still\n * leaving is honoured: the intent is remembered and a fresh dialog opens as\n * soon as that instance is disposed, after its `mlvDialogClosed` has fired.\n * Re-opening from **inside** an `(mlvDialogClosed)` handler is the one case\n * that does not work: the handler runs before the model settles, so the write\n * is overwritten. Re-open from a later tick, or while the dialog is leaving.\n *\n * If the host is destroyed while a dialog is open, that dialog is closed too — outputs are not emitted after the host is destroyed.\n */\n@Directive({\n  selector: 'ng-template[mlvDialog]',\n  exportAs: 'mlvDialog',\n})\nexport class MlvDialogTemplate<R = unknown, D = unknown> {\n  /** Whether the dialog is open. Two-way bindable: `[(mlvDialog)]=\"open\"`. */\n  readonly mlvDialog = model<boolean>(false);\n\n  /** Options passed to `MlvDialogService.open()`. Read when the dialog opens; later changes apply to the next open. */\n  readonly mlvDialogOptions = input<MlvDialogConfig<D>>();\n\n  /** Emits after the dialog has been opened. */\n  readonly mlvDialogOpened = output<void>();\n\n  /** Emits the close result once the dialog is disposed. */\n  readonly mlvDialogClosed = output<R | undefined>();\n\n  /** @private The wrapped template. */\n  private readonly _template =\n    inject<TemplateRef<MlvDialogTemplateContext<R, D>>>(TemplateRef);\n  /** @private Opens the template. */\n  private readonly _dialogs = inject(MlvDialogService);\n  /** @private Ref of the currently open (or leaving) dialog. */\n  private _ref: MlvDialogRef<R, D> | null = null;\n  /** @private Tears the `afterClosed()` subscription down with the host. */\n  private readonly _destroyRef = inject(DestroyRef);\n  /** @private Set when the model turned `true` while the previous instance was still leaving. */\n  private _reopenPending = false;\n\n  /** The ref of the open dialog (held until the leave animation completes), or `null`. */\n  get ref(): MlvDialogRef<R, D> | null {\n    return this._ref;\n  }\n\n  constructor() {\n    effect(() => {\n      const open = this.mlvDialog();\n      untracked(() => {\n        if (open) {\n          if (this._ref) {\n            // Still leaving (or open) — remember the intent instead of\n            // dropping it, so the re-open happens once the old instance goes.\n            this._reopenPending = this._ref.animationState() === 'leave';\n            return;\n          }\n          this._open();\n        } else {\n          this._reopenPending = false;\n          this._ref?.close();\n        }\n      });\n    });\n    this._destroyRef.onDestroy(() => {\n      // The `afterClosed()` subscription is torn down with the host, so nothing\n      // clears `_ref` afterwards — drop it here so `ref` never hands out a\n      // disposed handle.\n      this._ref?.close();\n      this._ref = null;\n    });\n  }\n\n  /** Sets the model to `true`. */\n  open(): void {\n    this.mlvDialog.set(true);\n  }\n\n  /** Sets the model to `false`. */\n  close(): void {\n    this.mlvDialog.set(false);\n  }\n\n  /** @private Opens through the service. Callers guarantee no dialog is live. */\n  private _open(): void {\n    const ref = this._dialogs.open<R, D>(\n      this._template,\n      this.mlvDialogOptions(),\n    );\n    this._ref = ref;\n    // Subscribed before the output fires: a handler that synchronously disposes\n    // the dialog must still clear `_ref` and flip the model back to `false`.\n    // `takeUntilDestroyed` drops the callback with the host, so nothing is\n    // emitted and the model is not touched after destruction.\n    ref\n      .afterClosed()\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe((result) => {\n        if (this._ref !== ref) {\n          return;\n        }\n        this._ref = null;\n        this.mlvDialogClosed.emit(result);\n        const reopen = this._reopenPending && this.mlvDialog();\n        this._reopenPending = false;\n        if (reopen) {\n          this._open();\n        } else {\n          this.mlvDialog.set(false);\n        }\n      });\n    this.mlvDialogOpened.emit();\n  }\n\n  /** Type guard so `let-dialog` / `let-data` are typed in the template. */\n  static ngTemplateContextGuard<R, D>(\n    _dir: MlvDialogTemplate<R, D>,\n    _ctx: unknown,\n  ): _ctx is MlvDialogTemplateContext<R, D> {\n    return true;\n  }\n}\n"]}

package/esm2022/dialog/lib/dialog-text-content.js

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, inject, InjectionToken, ViewEncapsulation, } from '@angular/core';
+import { MlvDialog } from './dialog/dialog';
+import { MlvDialogBody } from './dialog-body';
+import { DIALOG_CONFIG } from './dialog-config';
+import { MlvDialogHeader } from './dialog-header';
+import * as i0 from "@angular/core";
+/** @internal The string passed to `MlvDialogService.open()`. */
+export 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.
+ */
+export 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' },
+                }]
+        }] });
+//# sourceMappingURL=dialog-text-content.js.map

package/esm2022/dialog/lib/dialog-text-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-text-content.js","sourceRoot":"","sources":["../../../../../../libs/core/dialog/src/lib/dialog-text-content.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,MAAM,EACN,cAAc,EACd,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAElD,gEAAgE;AAChE,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,cAAc,CAAS,iBAAiB,CAAC,CAAC;AAE7E;;;;GAIG;AAkBH,MAAM,OAAO,oBAAoB;IAC/B,4EAA4E;IACzD,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IACnD,uCAAuC;IACtB,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACjD;;;;;OAKG;IACgB,WAAW,GAC5B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;QACpB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC;uGAblE,oBAAoB;2FAApB,oBAAoB,wIAdrB;;;;;;;;;GAST,4DAVS,SAAS,uDAAE,eAAe,gHAAE,aAAa;;2FAexC,oBAAoB;kBAjBhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,aAAa,CAAC;oBACpD,QAAQ,EAAE;;;;;;;;;GAST;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,IAAI,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE;iBAC3C","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  InjectionToken,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { MlvDialog } from './dialog/dialog';\nimport { MlvDialogBody } from './dialog-body';\nimport { DIALOG_CONFIG } from './dialog-config';\nimport { MlvDialogHeader } from './dialog-header';\n\n/** @internal The string passed to `MlvDialogService.open()`. */\nexport const MLV_DIALOG_TEXT = new InjectionToken<string>('MLV_DIALOG_TEXT');\n\n/**\n * @internal Renders string content: a surface with the standard header (title\n * from `config.title`, close button per `config.closable`) and a body holding\n * the escaped text. Composes the same public parts consumers use.\n */\n@Component({\n  selector: 'mlv-dialog-text-content',\n  imports: [MlvDialog, MlvDialogHeader, MlvDialogBody],\n  template: `\n    <mlv-dialog>\n      @if (_showHeader) {\n        <mlv-dialog-header />\n      }\n      <mlv-dialog-body>\n        <p class=\"mlv-dialog__text\">{{ _text }}</p>\n      </mlv-dialog-body>\n    </mlv-dialog>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'mlv-dialog-text-content' },\n})\nexport class MlvDialogTextContent {\n  /** @protected Text rendered through interpolation (escaped, never HTML). */\n  protected readonly _text = inject(MLV_DIALOG_TEXT);\n  /** @private Per-open configuration. */\n  private readonly _config = inject(DIALOG_CONFIG);\n  /**\n   * @protected A header is worth rendering when it has a title or a close\n   * button. `appearance: 'confirm'` forces the close button off inside\n   * `MlvDialogHeader`, so a titleless confirm surface would otherwise render an\n   * empty header bar.\n   */\n  protected readonly _showHeader =\n    !!this._config.title ||\n    (this._config.closable !== false && this._config.appearance !== 'confirm');\n}\n"]}