@malva-ui/core 0.1.12 → 0.1.14

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

@@ -0,0 +1,1488 @@
+import * as i0 from '@angular/core';
+import { Directive, InjectionToken, inject, input, computed, model, output, signal, contentChild, effect, DestroyRef, viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgZone, Injectable, ElementRef, ViewContainerRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Subject } from 'rxjs';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { OverlayModule, Overlay } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { MlvStructural, MlvBreakpointService, MlvRtlService } from '@malva-ui/cdk/utils';
+import { MlvDensityService, MLV_DENSITY_CONTEXT } from '@malva-ui/cdk/density';
+import { MLV_POPUP_I18N } from '@malva-ui/i18n';
+import { MlvButtonClose } from '@malva-ui/core/button';
+
+class MlvPopupContent extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPopupContent, isStandalone: true, selector: "[mlvPopupContent]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPopupContent]',
+                }]
+        }] });
+
+/**
+ * Marks an `<ng-template>` as extra chrome rendered inside the popup's
+ * full-screen mobile header, directly beneath the title/close row.
+ *
+ * Generic and reusable: the popup renders it only while
+ * {@link MlvPopup.isFullscreen} is `true`, and no-ops when the slot is
+ * absent or the popup is trigger-anchored. Consumers use it to move controls
+ * that must stay reachable inside the full-screen sheet — e.g. `mlv-combobox`
+ * projects an in-sheet search input here so type-to-filter keeps working when
+ * the solid backdrop and focus trap would otherwise occlude/block the outer
+ * trigger input.
+ */
+class MlvPopupHeaderContent extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupHeaderContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPopupHeaderContent, isStandalone: true, selector: "[mlvPopupHeaderContent]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupHeaderContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPopupHeaderContent]',
+                }]
+        }] });
+
+/**
+ * Marks an `<ng-template>` as extra chrome pinned above the popup's scroll
+ * region in every mode — never scrolls with the content.
+ *
+ * Generic and reusable: the popup stamps it directly above
+ * `.mlv-popup__scrollbar` whether the panel is trigger-anchored or a
+ * full-screen sheet (where it sits below the header), and no-ops when the slot
+ * is absent. Consumers use it for chrome that must stay visible no matter how
+ * far the content scrolls — e.g. `mlv-select` projects its in-dropdown search
+ * field here so a long option list cannot push it out of view.
+ */
+class MlvPopupPinnedContent extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupPinnedContent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPopupPinnedContent, isStandalone: true, selector: "[mlvPopupPinnedContent]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupPinnedContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPopupPinnedContent]',
+                }]
+        }] });
+
+// ---------------------------------------------------------------------------
+// Default position map
+// ---------------------------------------------------------------------------
+/**
+ * The default named-position map used when no custom `POPUP_POSITIONS` provider
+ * is registered. Contains all twelve standard popup placements.
+ *
+ * Override globally with `providePopupPositions()`, or per-component via
+ * the `POPUP_POSITIONS` injection token.
+ */
+const POPUP_POSITION_MAP = new Map([
+    // ── Top ──────────────────────────────────────────────────────────────────
+    [
+        'top-start',
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ],
+    [
+        'top',
+        {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ],
+    [
+        'top-end',
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ],
+    // ── Bottom ───────────────────────────────────────────────────────────────
+    [
+        'bottom-start',
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+    ],
+    [
+        'bottom',
+        {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+    ],
+    [
+        'bottom-end',
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+    ],
+    // ── Left ─────────────────────────────────────────────────────────────────
+    [
+        'left-start',
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetX: -8,
+        },
+    ],
+    [
+        'left',
+        {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -8,
+        },
+    ],
+    [
+        'left-end',
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetX: -8,
+        },
+    ],
+    // ── Right ────────────────────────────────────────────────────────────────
+    [
+        'right-start',
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetX: 8,
+        },
+    ],
+    [
+        'right',
+        {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: 8,
+        },
+    ],
+    [
+        'right-end',
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetX: 8,
+        },
+    ],
+]);
+// ---------------------------------------------------------------------------
+// Injection token
+// ---------------------------------------------------------------------------
+/**
+ * Injection token that holds the active named-position map.
+ *
+ * Defaults to {@link POPUP_POSITION_MAP}. Override at the application or
+ * component level with {@link providePopupPositions} to add, remove, or
+ * replace named positions.
+ *
+ * @example Override globally in app providers
+ * ```ts
+ * providePopupPositions(new Map([
+ *   ['bottom', { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 }],
+ * ]))
+ * ```
+ */
+const POPUP_POSITIONS = new InjectionToken('POPUP_POSITIONS', {
+    providedIn: 'root',
+    factory: () => POPUP_POSITION_MAP,
+});
+// ---------------------------------------------------------------------------
+// Provider factory
+// ---------------------------------------------------------------------------
+/**
+ * Registers a custom named-position map as the active `POPUP_POSITIONS`.
+ *
+ * Call in the root `providers` array (or a component's `providers`) to
+ * replace all default positions with a custom set.
+ *
+ * @param positions — A `Map` of {@link MlvPopupPositionName} → CDK `ConnectedPosition`.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   providePopupPositions(new Map([
+ *     ...POPUP_POSITION_MAP,
+ *     ['bottom', { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 }],
+ *   ]))
+ * ]
+ * ```
+ */
+function providePopupPositions(positions) {
+    return { provide: POPUP_POSITIONS, useValue: positions };
+}
+// ---------------------------------------------------------------------------
+// Static helper — MlvPopupPositionResolver
+// ---------------------------------------------------------------------------
+/**
+ * Static utility class for resolving named popup positions.
+ *
+ * Centralises all lookup logic so that {@link MlvPopup} and
+ * {@link MlvPopupService} share one consistent resolution path.
+ */
+class MlvPopupPositionResolver {
+    /**
+     * Resolves one or more {@link MlvPopupPositionName} strings to CDK
+     * `ConnectedPosition` objects using the provided map.
+     *
+     * - Positions are returned in the same order as `names`.
+     * - If a name is not found in the map, it is skipped and a warning is
+     *   emitted in dev mode via `console.warn`.
+     * - Returns an empty array if no names resolve successfully.
+     *
+     * @param names      — A single name or ordered array of names (CDK uses
+     *                     the first one that fits in the viewport).
+     * @param positionMap — The active position map (from `POPUP_POSITIONS` token).
+     */
+    static resolve(names, positionMap) {
+        const nameList = Array.isArray(names) ? names : [names];
+        const resolved = [];
+        for (const name of nameList) {
+            const pos = positionMap.get(name);
+            if (pos !== undefined) {
+                resolved.push(pos);
+            }
+            else if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                console.warn(`[MlvPopup] Position "${name}" was not found in the POPUP_POSITIONS map. ` +
+                    `Available positions: [${Array.from(positionMap.keys()).join(', ')}].`);
+            }
+        }
+        return resolved;
+    }
+    /**
+     * Returns all positions in the map as an ordered array.
+     * Used as the CDK fallback sequence when no explicit `position` is set.
+     *
+     * @param positionMap — The active position map (from `POPUP_POSITIONS` token).
+     */
+    static allPositions(positionMap) {
+        return Array.from(positionMap.values());
+    }
+}
+// ---------------------------------------------------------------------------
+// Shared named-position sequences
+// ---------------------------------------------------------------------------
+/**
+ * Ordered CDK positions for a dropdown menu panel that opens below its trigger:
+ * `bottom-start` preferred, flipping vertically (`top-start`) then aligning to
+ * the trigger's end edge (`bottom-end`, `top-end`) when space is constrained.
+ *
+ * Derived from {@link POPUP_POSITION_MAP} so menu overlays stay consistent with
+ * the rest of the Malva UI overlay system. Consumed by `MlvMenuTrigger`.
+ */
+const MENU_POSITIONS = MlvPopupPositionResolver.resolve(['bottom-start', 'top-start', 'bottom-end', 'top-end'], POPUP_POSITION_MAP);
+/**
+ * Ordered CDK positions for a submenu panel that opens to the right of its
+ * parent item (`right-start`), flipping to the left (`left-start`) when there
+ * is no room on the right.
+ *
+ * Derived from {@link POPUP_POSITION_MAP}. Consumed by `MlvMenuTrigger`.
+ */
+const SUBMENU_POSITIONS = MlvPopupPositionResolver.resolve(['right-start', 'left-start'], POPUP_POSITION_MAP);
+
+/**
+ * Fallback delay (ms) after which a pending leave is force-completed when the
+ * panel's `animationend` never fires — `prefers-reduced-motion` removes the
+ * leave animation entirely, and hidden/background tabs throttle CSS animations.
+ * Comfortably above the default leave duration (`--mlv-duration-fast`, 100ms);
+ * matches the dialog's `LEAVE_FALLBACK_MS` (250 ms).
+ */
+const POPUP_LEAVE_FALLBACK_MS = 250;
+/**
+ * Delay (ms) after which an overlay owner force-detaches a popup whose leave
+ * animation never completed. Sits just past {@link POPUP_LEAVE_FALLBACK_MS} so
+ * the normal `animationend` / fallback path always wins when it works.
+ */
+const POPUP_DETACH_WATCHDOG_MS = POPUP_LEAVE_FALLBACK_MS + 100;
+class MlvPopup {
+    /** @private Active named-position map (overridable via `POPUP_POSITIONS` token). */
+    _positionMap = inject(POPUP_POSITIONS);
+    /**
+     * Named position(s) controlling where the popup appears relative to its trigger.
+     *
+     * Accepts a single {@link MlvPopupPositionName} or an ordered array of names.
+     * CDK tries positions in array order and uses the first one that fits in the
+     * viewport — useful for automatic flip behaviour.
+     *
+     * When set, takes precedence over the raw {@link positions} input.
+     * When both are omitted, all twelve default positions are passed to CDK.
+     *
+     * An unrecognised name is skipped and a `console.warn` is emitted in dev mode.
+     *
+     * @example Single preferred position
+     * ```html
+     * <mlv-popup position="bottom-end" />
+     * ```
+     *
+     * @example Preferred + fallback
+     * ```html
+     * <mlv-popup [position]="['bottom-end', 'top-end']" />
+     * ```
+     */
+    position = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Raw CDK `ConnectedPosition` array for advanced use cases where named
+     * positions are insufficient.
+     *
+     * When set and `position` is not set, these positions are passed directly
+     * to the CDK overlay. Prefer `position` for standard placements.
+     */
+    positions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []));
+    /** Explicit CSS width of the popup panel. */
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Explicit CSS height of the popup panel. */
+    height = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Minimum CSS width of the popup panel. */
+    minWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /** Minimum CSS height of the popup panel. */
+    minHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    /** Maximum CSS width of the popup panel. */
+    maxWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /** Maximum CSS height of the popup panel. */
+    maxHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /** When `true`, a directional arrow is rendered pointing toward the trigger. */
+    hasArrow = input(false, { ...(ngDevMode ? { debugName: "hasArrow" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** When `true` (default), a drop-shadow is applied to the popup panel. */
+    hasShadow = input(true, { ...(ngDevMode ? { debugName: "hasShadow" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Additional CSS classes forwarded to the popup panel host. */
+    class = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
+    /**
+     * Density applied to the popup's content.
+     *
+     * The popup panel is portaled to the CDK overlay container on `<body>`, so it
+     * sits outside any `mlvDensityRoot` / ancestor density cascade in the page.
+     * This input restores the cascade on the detached panel: the resolved density
+     * is stamped as a `mlv--{density}` class on the panel element, and every
+     * density-aware descendant (e.g. `mlv-list-item` rows in a dropdown panel)
+     * responds through the standard CSS cascade.
+     *
+     * When omitted, the nearest ancestor `MLV_DENSITY_CONTEXT` (e.g. a
+     * `form[mlvForm]`) is used, then the global `MlvDensityService`, so popovers
+     * follow the surrounding / app-wide density without extra wiring. Components
+     * that embed a popup (select, combobox, pagination, menu, …) forward their
+     * own `mlvDensity` input here.
+     */
+    mlvDensity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvDensity" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Global density service — fallback when no explicit
+     * {@link mlvDensity} is supplied.
+     */
+    _densityService = inject(MlvDensityService);
+    /**
+     * @private Density projected by an ancestor container (e.g. `form[mlvForm]`).
+     * Consulted after the explicit {@link mlvDensity} input, before the service.
+     */
+    _densityContext = inject(MLV_DENSITY_CONTEXT, {
+        optional: true,
+    });
+    /**
+     * @protected Class list for the detached panel element: consumer classes from
+     * {@link class} plus the resolved `mlv--{density}` cascade class.
+     */
+    _panelClasses = computed(() => {
+        const density = this.mlvDensity() ??
+            this._densityContext?.() ??
+            this._densityService.density();
+        const extra = this.class();
+        return extra ? `${extra} mlv--${density}` : `mlv--${density}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelClasses" }] : /* istanbul ignore next */ []));
+    /** Allow the overlay panel to grow to fill available viewport space. */
+    flexibleDimensions = input(false, { ...(ngDevMode ? { debugName: "flexibleDimensions" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Controls overlay behaviour when the page is scrolled.
+     *
+     * - `'reposition'` (default) — overlay follows the trigger.
+     * - `'close'` — overlay closes on scroll.
+     * - `'block'` — page scroll is blocked while the overlay is open.
+     * - `'noop'` — overlay stays fixed.
+     */
+    scrollStrategy = input('reposition', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render a transparent backdrop behind the popup.
+     *
+     * When `undefined` (default), the trigger decides — click/keyboard triggers
+     * use a backdrop; hover triggers do not.
+     *
+     * Set to `false` to suppress the backdrop while keeping click-outside and
+     * Escape detection active.
+     */
+    hasBackdrop = input(undefined, { ...(ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {}), transform: (v) => v == null ? undefined : coerceBooleanProperty(v) });
+    /**
+     * When `true` (default), only the explicitly provided position(s) are passed to CDK.
+     * CDK will push the popup into the viewport if none of them fit, but won't try other
+     * named positions automatically.
+     *
+     * When `false`, the provided position(s) are used first and all remaining positions
+     * from the active `POPUP_POSITIONS` map are appended as ordered fallbacks. CDK will
+     * try them in sequence and use the first one that fits — useful for popups near edges
+     * that should freely reposition rather than be pushed.
+     *
+     * @example Prefer bottom-start, fall back to any position that fits
+     * ```html
+     * <mlv-popup position="bottom-start" [restrictPosition]="false" />
+     * ```
+     */
+    restrictPosition = input(true, { ...(ngDevMode ? { debugName: "restrictPosition" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * ARIA role applied to the popup panel element.
+     *
+     * Defaults to `null` — the panel is a neutral positioning/chrome container and
+     * the semantic role is expected to come from the projected content
+     * (e.g. a `role="menu"` list, a `role="listbox"`, or a `role="tooltip"`).
+     *
+     * Set to `'dialog'` (together with {@link modal}`= true`) for genuine modal
+     * dialog surfaces such as a date-picker calendar. When `panelRole === 'dialog'`
+     * and {@link modal} is `true`, an accessible name via {@link ariaLabel} (or a
+     * projected labelling element) is required.
+     */
+    panelRole = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRole" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the popup panel behaves as a modal surface.
+     *
+     * When `true`, the panel renders `aria-modal="true"` and enables the CDK focus
+     * trap (Tab / Shift+Tab cycle within the panel). When `false` (default), no
+     * `aria-modal` is emitted and focus is free to leave the panel — the correct
+     * behaviour for menus, listboxes, and tooltips whose focus is managed by their
+     * own trigger / roving-tabindex logic.
+     */
+    modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Optional accessible name for the popup panel.
+     * Applied as `aria-label` on the popup element.
+     */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Extra elements that count as "inside" the popup for click-outside dismissal.
+     *
+     * When the popup is opened without a backdrop (`[hasBackdrop]="false"`),
+     * dismissal is detected by a document-level click listener that closes the
+     * popup on any click outside the overlay panel. The trigger/anchor lives in
+     * the normal document flow — outside the floating panel — so a click on it
+     * (or on any control it owns) would otherwise be treated as "outside" and
+     * dismiss the popup. List these elements (typically the trigger) so clicks
+     * within them do not close the popup; e.g. `mlv-combobox` passes its input
+     * row so caret repositioning while the list is open keeps the list open.
+     *
+     * Has no effect when a backdrop is used.
+     */
+    dismissExcludeElements = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissExcludeElements" }] : /* istanbul ignore next */ []));
+    // ─── Mobile fullscreen mode ──────────────────────────────────────────────
+    /** @private Signal-based viewport breakpoint service (SSR-safe via CDK). */
+    _breakpoint = inject(MlvBreakpointService);
+    /**
+     * @private Optional popup i18n slice — provides the fullscreen close-button
+     * label. Injected optionally so the popup keeps working when no i18n provider
+     * is configured (falls back to the English default).
+     */
+    _i18n = inject(MLV_POPUP_I18N, { optional: true });
+    /**
+     * Controls whether the popup renders as a full-screen mobile sheet with a
+     * header bar and close button instead of a trigger-anchored panel.
+     *
+     * Defaults to `'off'` so existing consumers are unaffected — the pickers
+     * (day/date-range/time) opt into `'auto'`.
+     */
+    mobileMode = input('off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Breakpoint below which `mobileMode="auto"` switches the popup to full-screen.
+     * Defaults to `'md'` (viewport narrower than 768px, per `MLV_BREAKPOINT_CONFIG`).
+     */
+    mobileBreakpoint = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional visible title rendered in the full-screen header bar. When omitted,
+     * the header shows only the close button.
+     */
+    mobileTitle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileTitle" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional override for the full-screen close-button accessible name.
+     * Falls back to the `MLV_POPUP_I18N` `close` string, then to `'Close'`.
+     */
+    mobileCloseLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileCloseLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the popup is currently rendering as a full-screen mobile sheet.
+     *
+     * `'off'` → always `false`; `'fullscreen'` → always `true`; `'auto'` → `true`
+     * when the viewport is below {@link mobileBreakpoint}. Public so consumers with
+     * their own inner focus trap (e.g. `mlv-date-range-picker`) can disable it to
+     * avoid nesting two traps inside the full-screen panel.
+     */
+    isFullscreen = computed(() => {
+        const mode = this.mobileMode();
+        if (mode === 'off')
+            return false;
+        if (mode === 'fullscreen')
+            return true;
+        return this._breakpoint.isDown(this.mobileBreakpoint())();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+    /** @protected Resolved accessible name for the full-screen close button. */
+    _closeLabel = computed(() => this.mobileCloseLabel() ?? this._i18n?.().close ?? 'Close', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_closeLabel" }] : /* istanbul ignore next */ []));
+    /** Two-way binding for the open/closed state. */
+    opened = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** Emitted after the popup enters the view and the enter animation completes. */
+    afterOpened = output();
+    /** Emitted after the popup leaves the view and the leave animation completes. */
+    afterClosed = output();
+    animationState = signal('idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
+    arrowEdge = signal('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowEdge" }] : /* istanbul ignore next */ []));
+    arrowAlign = signal('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrowAlign" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS transform value for the popup's hidden/offscreen position.
+     * Used as `--mlv-popup-hidden-transform` so the enter/leave keyframes
+     * slide in from the correct edge depending on where the popup is placed.
+     */
+    popupHiddenTransform = computed(() => {
+        switch (this.arrowEdge()) {
+            case 'top':
+                return 'translateY(-4px)';
+            case 'bottom':
+                return 'translateY(4px)';
+            case 'left':
+                return 'translateX(-4px)';
+            case 'right':
+                return 'translateX(4px)';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popupHiddenTransform" }] : /* istanbul ignore next */ []));
+    /** @protected Projected popup content template, rendered into the overlay panel. */
+    contentRef = contentChild(MlvPopupContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Optional header-extension template projected via
+     * `[mlvPopupHeaderContent]`. Rendered inside the full-screen header, directly
+     * beneath the title/close row. Ignored while the popup is trigger-anchored
+     * (only stamped when {@link isFullscreen} is `true`), so anchored popups are
+     * byte-identical whether or not the slot is supplied.
+     */
+    headerContentRef = contentChild(MlvPopupHeaderContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerContentRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Optional pinned-chrome template projected via
+     * `[mlvPopupPinnedContent]`. Rendered in **every** mode, directly above
+     * `.mlv-popup__scrollbar`, so it never scrolls with the content (in
+     * full-screen it sits below the header). An absent slot stamps nothing —
+     * byte-identical markup to a popup that never declared one.
+     */
+    pinnedContentRef = contentChild(MlvPopupPinnedContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinnedContentRef" }] : /* istanbul ignore next */ []));
+    /** @internal Emits when the leave animation finishes so the container can dispose the overlay. */
+    leaveAnimationDone$ = new Subject();
+    /**
+     * @private Fallback timer guaranteeing `leaveAnimationDone$` fires even when
+     * the panel's `animationend` never arrives — `prefers-reduced-motion` strips
+     * the leave animation entirely, and hidden/background tabs throttle CSS
+     * animations indefinitely. Without it the overlay would never dispose.
+     * Mirrors `MlvOverlayRef`'s `_leaveFallbackMs` used by the drawer, and the
+     * dialog's `LEAVE_FALLBACK_MS`.
+     */
+    _leaveFallbackTimer = null;
+    constructor() {
+        // Arm the fallback whenever a leave starts; disarm on any state change
+        // (the real `animationend` path resets the state to 'idle' on dispose).
+        effect(() => {
+            const state = this.animationState();
+            if (this._leaveFallbackTimer !== null) {
+                clearTimeout(this._leaveFallbackTimer);
+                this._leaveFallbackTimer = null;
+            }
+            if (state === 'leave') {
+                this._leaveFallbackTimer = setTimeout(() => {
+                    this._leaveFallbackTimer = null;
+                    this.onAnimationEnd();
+                }, POPUP_LEAVE_FALLBACK_MS);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._leaveFallbackTimer !== null) {
+                clearTimeout(this._leaveFallbackTimer);
+                this._leaveFallbackTimer = null;
+            }
+        });
+    }
+    popupTemplate = viewChild.required('popupTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
+    // ─── Position resolution ─────────────────────────────────────────────────
+    /**
+     * Resolves the active CDK `ConnectedPosition[]` to pass to the overlay.
+     *
+     * **Position source** (first match wins):
+     * 1. `position` input — named position(s) looked up in `POPUP_POSITIONS` map.
+     * 2. `positions` input — raw CDK positions for advanced use.
+     * 3. All defaults — every position in the active `POPUP_POSITIONS` map.
+     *
+     * **`restrictPosition` modifier:**
+     * - `true` (default) — return the resolved positions as-is; CDK pushes the popup
+     *   if none fit.
+     * - `false` — append all remaining map positions (deduped by reference) after the
+     *   resolved ones so CDK can freely choose a fitting position.
+     */
+    resolvedPositions() {
+        const named = this.position();
+        let preferred;
+        if (named !== undefined) {
+            preferred = MlvPopupPositionResolver.resolve(named, this._positionMap);
+        }
+        else {
+            preferred = this.positions();
+        }
+        const base = preferred ?? MlvPopupPositionResolver.allPositions(this._positionMap);
+        if (this.restrictPosition()) {
+            return base;
+        }
+        // Append every map position not already present as a fallback.
+        // Position objects from the map share the same reference, so Set dedup works.
+        const all = MlvPopupPositionResolver.allPositions(this._positionMap);
+        const seen = new Set(base);
+        return [...base, ...all.filter((p) => !seen.has(p))];
+    }
+    buildSizeConfig() {
+        const size = {};
+        const width = this.width();
+        const height = this.height();
+        const minWidth = this.minWidth();
+        const minHeight = this.minHeight();
+        const maxWidth = this.maxWidth();
+        const maxHeight = this.maxHeight();
+        if (width !== undefined)
+            size.width = width;
+        if (height !== undefined)
+            size.height = height;
+        if (minWidth !== undefined)
+            size.minWidth = minWidth;
+        if (minHeight !== undefined)
+            size.minHeight = minHeight;
+        if (maxWidth !== undefined)
+            size.maxWidth = maxWidth;
+        if (maxHeight !== undefined)
+            size.maxHeight = maxHeight;
+        return size;
+    }
+    onAnimationEnd() {
+        if (this.animationState() === 'leave') {
+            this.leaveAnimationDone$.next();
+        }
+    }
+    /**
+     * @internal Promotes a freshly attached panel from `'idle'` to `'enter'`.
+     *
+     * Overlay owners (`MlvPopupContainer`, `MlvPopupTrigger`, `MlvMenuTrigger`)
+     * call this from a microtask so the panel is in the DOM before the enter
+     * keyframes start. A close requested in the same tick as the attach already
+     * moved the state to `'leave'` by then, and overwriting it would strand the
+     * overlay: the leave keyframes never play, so no `animationend` arrives, and
+     * the write itself cancels the leave fallback timer — leaving no path back to
+     * a detach. Promote only from the exact state the attach left behind.
+     */
+    beginEnterAnimation() {
+        if (this.animationState() === 'idle') {
+            this.animationState.set('enter');
+        }
+    }
+    /**
+     * @protected Handles the full-screen header close button. Requests closure via
+     * the two-way `opened` model so the consumer's `afterClosed` (focus restore)
+     * and the container/trigger leave-animation machinery run — identical to the
+     * Escape / backdrop close path.
+     */
+    _onCloseClick() {
+        this.opened.set(false);
+    }
+    /**
+     * Derives `arrowEdge` and `arrowAlign` from a resolved CDK `ConnectedPosition`.
+     *
+     * Detection logic:
+     * - `overlayX='end'` + `originX='start'`  → popup is to the **left** of the trigger  → arrow on right edge
+     * - `overlayX='start'` + `originX='end'`  → popup is to the **right** of the trigger → arrow on left edge
+     * - `overlayY='top'` (all other cases)   → popup is **below** the trigger           → arrow on top edge
+     * - `overlayY='bottom'` (all other cases) → popup is **above** the trigger           → arrow on bottom edge
+     *
+     * For left/right arrows the vertical alignment is read from `overlayY`
+     * (`'top'` → `'start'`, `'center'` → `'center'`, `'bottom'` → `'end'`).
+     * For top/bottom arrows the horizontal alignment comes directly from `overlayX`.
+     */
+    updateArrowFromPosition(pair) {
+        const { originX, overlayX, overlayY } = pair;
+        if (overlayX === 'end' && originX === 'start') {
+            // Popup is to the LEFT of the trigger — arrow on the right edge
+            this.arrowEdge.set('right');
+            this.arrowAlign.set(overlayY === 'top' ? 'start' : overlayY === 'bottom' ? 'end' : 'center');
+        }
+        else if (overlayX === 'start' && originX === 'end') {
+            // Popup is to the RIGHT of the trigger — arrow on the left edge
+            this.arrowEdge.set('left');
+            this.arrowAlign.set(overlayY === 'top' ? 'start' : overlayY === 'bottom' ? 'end' : 'center');
+        }
+        else if (overlayY === 'top') {
+            // Popup is BELOW the trigger — arrow on the top edge
+            this.arrowEdge.set('top');
+            this.arrowAlign.set(overlayX);
+        }
+        else {
+            // Popup is ABOVE the trigger — arrow on the bottom edge
+            this.arrowEdge.set('bottom');
+            this.arrowAlign.set(overlayX);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPopup, isStandalone: true, selector: "mlv-popup", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, mlvDensity: { classPropertyName: "mlvDensity", publicName: "mlvDensity", isSignal: true, isRequired: false, transformFunction: null }, flexibleDimensions: { classPropertyName: "flexibleDimensions", publicName: "flexibleDimensions", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, restrictPosition: { classPropertyName: "restrictPosition", publicName: "restrictPosition", isSignal: true, isRequired: false, transformFunction: null }, panelRole: { classPropertyName: "panelRole", publicName: "panelRole", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissExcludeElements: { classPropertyName: "dismissExcludeElements", publicName: "dismissExcludeElements", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseLabel: { classPropertyName: "mobileCloseLabel", publicName: "mobileCloseLabel", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", afterOpened: "afterOpened", afterClosed: "afterClosed" }, queries: [{ propertyName: "contentRef", first: true, predicate: MlvPopupContent, descendants: true, isSignal: true }, { propertyName: "headerContentRef", first: true, predicate: MlvPopupHeaderContent, descendants: true, isSignal: true }, { propertyName: "pinnedContentRef", first: true, predicate: MlvPopupPinnedContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #popupTemplate>\n  <div\n    class=\"mlv-popup\"\n    [style.--mlv-popup-hidden-transform]=\"popupHiddenTransform()\"\n    [class]=\"_panelClasses()\"\n    [class.mlv-popup--fullscreen]=\"isFullscreen()\"\n    [class.mlv-popup--arrow]=\"hasArrow() && !isFullscreen()\"\n    [class.mlv-popup--shadow]=\"hasShadow() && !isFullscreen()\"\n    [class.mlv-popup--arrow-top]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'top'\"\n    [class.mlv-popup--arrow-bottom]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'bottom'\"\n    [class.mlv-popup--arrow-left]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'left'\"\n    [class.mlv-popup--arrow-right]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'right'\"\n    [class.mlv-popup--arrow-start]=\"hasArrow() && !isFullscreen() && arrowAlign() === 'start'\"\n    [class.mlv-popup--arrow-center]=\"hasArrow() && !isFullscreen() && arrowAlign() === 'center'\"\n    [class.mlv-popup--arrow-end]=\"hasArrow() && !isFullscreen() && arrowAlign() === 'end'\"\n    [class.mlv-popup--enter]=\"animationState() === 'enter'\"\n    [class.mlv-popup--leave]=\"animationState() === 'leave'\"\n    (animationend)=\"onAnimationEnd()\"\n    [attr.role]=\"panelRole()\"\n    [attr.aria-modal]=\"modal() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [cdkTrapFocus]=\"modal() || isFullscreen()\"\n  >\n    @if (isFullscreen()) {\n    <div class=\"mlv-popup__header\">\n      <div class=\"mlv-popup__header-row\">\n        @if (mobileTitle(); as title) {\n        <span class=\"mlv-popup__title\">{{ title }}</span>\n        }\n        <mlv-button-close\n          class=\"mlv-popup__close\"\n          [ariaLabel]=\"_closeLabel()\"\n          (click)=\"_onCloseClick()\"\n          variant=\"secondary\"\n        ></mlv-button-close>\n      </div>\n      @if (headerContentRef(); as headerTpl) {\n      <div class=\"mlv-popup__header-content\">\n        <ng-template [ngTemplateOutlet]=\"headerTpl.templateRef\" />\n      </div>\n      }\n    </div>\n    } @if (pinnedContentRef(); as pinnedTpl) {\n    <div class=\"mlv-popup__pinned\">\n      <ng-template [ngTemplateOutlet]=\"pinnedTpl.templateRef\" />\n    </div>\n    }\n    <mlv-scrollbar class=\"mlv-popup__scrollbar\">\n      <div class=\"mlv-popup__inner\">\n        @if (contentRef(); as contentTpl) {\n        <ng-template [ngTemplateOutlet]=\"contentTpl.templateRef\" />\n        }\n      </div>\n    </mlv-scrollbar>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-popup{--mlv-popup-bg: var(--mlv-elevation-bg-3);--mlv-popup-border: .0625rem solid var(--mlv-border-subtle);background-color:var(--mlv-popup-bg);color:var(--mlv-text-primary);border:var(--mlv-popup-border);border-radius:var(--mlv-popover-surface-radius);max-height:inherit;display:flex;flex-direction:column;position:relative;width:100%}.mlv-popup__scrollbar{position:relative;z-index:2;flex:1 1 auto;width:100%;min-height:0}.mlv-popup__pinned{flex:0 0 auto;position:relative;z-index:3}.mlv-popup__inner{display:flex;flex-direction:column;min-height:100%}.mlv-popup__scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden}.mlv-popup:after{content:\"\";position:absolute;inset:-.5rem;background:transparent;z-index:1}.mlv-popup--shadow{filter:drop-shadow(0 .75rem 1.75rem rgba(0,0,0,.12));box-shadow:var(--mlv-shadow-floating)}.mlv-popup--fullscreen{--mlv-popup-enter-from-translate-y: 100%;--mlv-popup-enter-from-scale: 1;--mlv-popup-enter-from-opacity: 1;--mlv-popup-leave-to-translate-y: 100%;--mlv-popup-leave-to-scale: 1;--mlv-popup-leave-to-opacity: 1;--mlv-popup-transform-origin: bottom center;width:100%;height:100%;max-height:none;border:none;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.mlv-popup--fullscreen .mlv-popup__scrollbar>.mlv-scrollbar__viewport{-webkit-overflow-scrolling:touch}.mlv-popup--fullscreen .mlv-popup__inner{padding:var(--mlv-spacing-4)}.mlv-popup__header{display:flex;flex-direction:column;gap:var(--mlv-spacing-3);flex:0 0 auto;padding:var(--mlv-spacing-3) var(--mlv-spacing-4);border-bottom:var(--mlv-popup-border);position:relative;z-index:2}.mlv-popup__header-row{display:flex;align-items:center;gap:var(--mlv-spacing-3)}.mlv-popup__header-content{display:flex;flex-direction:column}.mlv-popup__title{font-family:var(--mlv-typography-family-heading);font-size:var(--mlv-font-size-l);font-weight:var(--mlv-font-weight-semibold);color:var(--mlv-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mlv-popup__close{margin-inline-start:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--mlv-height-s);height:var(--mlv-height-s);border:none;background:transparent;color:var(--mlv-text-secondary);border-radius:var(--mlv-radius-full);cursor:pointer;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-popup__close:hover{background-color:var(--mlv-background-neutral-1-hover);color:var(--mlv-text-primary)}.mlv-popup__close:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-popup--arrow:before{content:\"\";position:absolute;width:.75rem;height:.75rem;background-color:var(--mlv-popup-bg);border:var(--mlv-popup-border);z-index:1}.mlv-popup--arrow-top:before{top:-.4375rem;border-inline-end:none;border-bottom:none;transform:rotate(45deg)}.mlv-popup--arrow-bottom:before{bottom:-.4375rem;border-inline-start:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-left:before{left:-.4375rem;border-inline-end:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-right:before{right:-.4375rem;border-inline-start:none;border-bottom:none;transform:rotate(45deg)}.mlv-popup--arrow-start.mlv-popup--arrow-top:before,.mlv-popup--arrow-start.mlv-popup--arrow-bottom:before{left:1rem}.mlv-popup--arrow-start.mlv-popup--arrow-left:before,.mlv-popup--arrow-start.mlv-popup--arrow-right:before{top:1rem}.mlv-popup--arrow-center.mlv-popup--arrow-top:before,.mlv-popup--arrow-center.mlv-popup--arrow-bottom:before{left:50%;margin-inline-start:-.375rem}.mlv-popup--arrow-center.mlv-popup--arrow-left:before,.mlv-popup--arrow-center.mlv-popup--arrow-right:before{top:50%;margin-top:-.375rem}.mlv-popup--arrow-end.mlv-popup--arrow-top:before,.mlv-popup--arrow-end.mlv-popup--arrow-bottom:before{right:1rem}.mlv-popup--arrow-end.mlv-popup--arrow-left:before,.mlv-popup--arrow-end.mlv-popup--arrow-right:before{bottom:1rem}.cdk-overlay-connected-position-bounding-box .cdk-overlay-pane{max-height:inherit}.mlv-popup-fullscreen-pane{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh}.mlv-popup-fullscreen-backdrop{background-color:var(--mlv-background-overlay)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }, { 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: MlvPopup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-popup', imports: [
+                        OverlayModule,
+                        A11yModule,
+                        PortalModule,
+                        NgTemplateOutlet,
+                        MlvScrollbar,
+                        MlvButtonClose,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #popupTemplate>\n  <div\n    class=\"mlv-popup\"\n    [style.--mlv-popup-hidden-transform]=\"popupHiddenTransform()\"\n    [class]=\"_panelClasses()\"\n    [class.mlv-popup--fullscreen]=\"isFullscreen()\"\n    [class.mlv-popup--arrow]=\"hasArrow() && !isFullscreen()\"\n    [class.mlv-popup--shadow]=\"hasShadow() && !isFullscreen()\"\n    [class.mlv-popup--arrow-top]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'top'\"\n    [class.mlv-popup--arrow-bottom]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'bottom'\"\n    [class.mlv-popup--arrow-left]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'left'\"\n    [class.mlv-popup--arrow-right]=\"hasArrow() && !isFullscreen() && arrowEdge() === 'right'\"\n    [class.mlv-popup--arrow-start]=\"hasArrow() && !isFullscreen() && arrowAlign() === 'start'\"\n    [class.mlv-popup--arrow-center]=\"hasArrow() && !isFullscreen() && arrowAlign() === 'center'\"\n    [class.mlv-popup--arrow-end]=\"hasArrow() && !isFullscreen() && arrowAlign() === 'end'\"\n    [class.mlv-popup--enter]=\"animationState() === 'enter'\"\n    [class.mlv-popup--leave]=\"animationState() === 'leave'\"\n    (animationend)=\"onAnimationEnd()\"\n    [attr.role]=\"panelRole()\"\n    [attr.aria-modal]=\"modal() ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [cdkTrapFocus]=\"modal() || isFullscreen()\"\n  >\n    @if (isFullscreen()) {\n    <div class=\"mlv-popup__header\">\n      <div class=\"mlv-popup__header-row\">\n        @if (mobileTitle(); as title) {\n        <span class=\"mlv-popup__title\">{{ title }}</span>\n        }\n        <mlv-button-close\n          class=\"mlv-popup__close\"\n          [ariaLabel]=\"_closeLabel()\"\n          (click)=\"_onCloseClick()\"\n          variant=\"secondary\"\n        ></mlv-button-close>\n      </div>\n      @if (headerContentRef(); as headerTpl) {\n      <div class=\"mlv-popup__header-content\">\n        <ng-template [ngTemplateOutlet]=\"headerTpl.templateRef\" />\n      </div>\n      }\n    </div>\n    } @if (pinnedContentRef(); as pinnedTpl) {\n    <div class=\"mlv-popup__pinned\">\n      <ng-template [ngTemplateOutlet]=\"pinnedTpl.templateRef\" />\n    </div>\n    }\n    <mlv-scrollbar class=\"mlv-popup__scrollbar\">\n      <div class=\"mlv-popup__inner\">\n        @if (contentRef(); as contentTpl) {\n        <ng-template [ngTemplateOutlet]=\"contentTpl.templateRef\" />\n        }\n      </div>\n    </mlv-scrollbar>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-popup{--mlv-popup-bg: var(--mlv-elevation-bg-3);--mlv-popup-border: .0625rem solid var(--mlv-border-subtle);background-color:var(--mlv-popup-bg);color:var(--mlv-text-primary);border:var(--mlv-popup-border);border-radius:var(--mlv-popover-surface-radius);max-height:inherit;display:flex;flex-direction:column;position:relative;width:100%}.mlv-popup__scrollbar{position:relative;z-index:2;flex:1 1 auto;width:100%;min-height:0}.mlv-popup__pinned{flex:0 0 auto;position:relative;z-index:3}.mlv-popup__inner{display:flex;flex-direction:column;min-height:100%}.mlv-popup__scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden}.mlv-popup:after{content:\"\";position:absolute;inset:-.5rem;background:transparent;z-index:1}.mlv-popup--shadow{filter:drop-shadow(0 .75rem 1.75rem rgba(0,0,0,.12));box-shadow:var(--mlv-shadow-floating)}.mlv-popup--fullscreen{--mlv-popup-enter-from-translate-y: 100%;--mlv-popup-enter-from-scale: 1;--mlv-popup-enter-from-opacity: 1;--mlv-popup-leave-to-translate-y: 100%;--mlv-popup-leave-to-scale: 1;--mlv-popup-leave-to-opacity: 1;--mlv-popup-transform-origin: bottom center;width:100%;height:100%;max-height:none;border:none;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.mlv-popup--fullscreen .mlv-popup__scrollbar>.mlv-scrollbar__viewport{-webkit-overflow-scrolling:touch}.mlv-popup--fullscreen .mlv-popup__inner{padding:var(--mlv-spacing-4)}.mlv-popup__header{display:flex;flex-direction:column;gap:var(--mlv-spacing-3);flex:0 0 auto;padding:var(--mlv-spacing-3) var(--mlv-spacing-4);border-bottom:var(--mlv-popup-border);position:relative;z-index:2}.mlv-popup__header-row{display:flex;align-items:center;gap:var(--mlv-spacing-3)}.mlv-popup__header-content{display:flex;flex-direction:column}.mlv-popup__title{font-family:var(--mlv-typography-family-heading);font-size:var(--mlv-font-size-l);font-weight:var(--mlv-font-weight-semibold);color:var(--mlv-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mlv-popup__close{margin-inline-start:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--mlv-height-s);height:var(--mlv-height-s);border:none;background:transparent;color:var(--mlv-text-secondary);border-radius:var(--mlv-radius-full);cursor:pointer;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-popup__close:hover{background-color:var(--mlv-background-neutral-1-hover);color:var(--mlv-text-primary)}.mlv-popup__close:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-popup--arrow:before{content:\"\";position:absolute;width:.75rem;height:.75rem;background-color:var(--mlv-popup-bg);border:var(--mlv-popup-border);z-index:1}.mlv-popup--arrow-top:before{top:-.4375rem;border-inline-end:none;border-bottom:none;transform:rotate(45deg)}.mlv-popup--arrow-bottom:before{bottom:-.4375rem;border-inline-start:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-left:before{left:-.4375rem;border-inline-end:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-right:before{right:-.4375rem;border-inline-start:none;border-bottom:none;transform:rotate(45deg)}.mlv-popup--arrow-start.mlv-popup--arrow-top:before,.mlv-popup--arrow-start.mlv-popup--arrow-bottom:before{left:1rem}.mlv-popup--arrow-start.mlv-popup--arrow-left:before,.mlv-popup--arrow-start.mlv-popup--arrow-right:before{top:1rem}.mlv-popup--arrow-center.mlv-popup--arrow-top:before,.mlv-popup--arrow-center.mlv-popup--arrow-bottom:before{left:50%;margin-inline-start:-.375rem}.mlv-popup--arrow-center.mlv-popup--arrow-left:before,.mlv-popup--arrow-center.mlv-popup--arrow-right:before{top:50%;margin-top:-.375rem}.mlv-popup--arrow-end.mlv-popup--arrow-top:before,.mlv-popup--arrow-end.mlv-popup--arrow-bottom:before{right:1rem}.mlv-popup--arrow-end.mlv-popup--arrow-left:before,.mlv-popup--arrow-end.mlv-popup--arrow-right:before{bottom:1rem}.cdk-overlay-connected-position-bounding-box .cdk-overlay-pane{max-height:inherit}.mlv-popup-fullscreen-pane{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh}.mlv-popup-fullscreen-backdrop{background-color:var(--mlv-background-overlay)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], mlvDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDensity", required: false }] }], flexibleDimensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexibleDimensions", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], restrictPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "restrictPosition", required: false }] }], panelRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelRole", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dismissExcludeElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissExcludeElements", required: false }] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], mobileTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileTitle", required: false }] }], mobileCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCloseLabel", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], afterOpened: [{ type: i0.Output, args: ["afterOpened"] }], afterClosed: [{ type: i0.Output, args: ["afterClosed"] }], contentRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPopupContent), { isSignal: true }] }], headerContentRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPopupHeaderContent), { isSignal: true }] }], pinnedContentRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPopupPinnedContent), { isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ['popupTemplate', { isSignal: true }] }] } });
+
+// ---------------------------------------------------------------------------
+// Service
+// ---------------------------------------------------------------------------
+/**
+ * Low-level CDK overlay service for Malva UI popup components.
+ *
+ * Handles overlay creation, portal attachment, position strategy,
+ * backdrop clicks, and Escape-key closure.
+ *
+ * For template-driven usage prefer `[mlvPopupTrigger]` or
+ * `<mlv-popup-container>`. Use this service directly only when you need
+ * full programmatic control.
+ *
+ * @example Programmatic usage
+ * ```ts
+ * const handle = this.popupService.open({
+ *   origin: this.triggerRef,
+ *   template: this.tpl,
+ *   vcr: this.vcr,
+ *   positions: this.popupService.resolvePositions(['bottom', 'top']),
+ *   onClose: () => this.isOpen.set(false),
+ * });
+ * // Later:
+ * handle.close();
+ * ```
+ */
+class MlvPopupService {
+    /** @private CDK overlay service. */
+    _overlay = inject(Overlay);
+    /**
+     * @private Resolves the direction scoped to each popup's origin so portaled
+     * panes mirror with their trigger rather than with the document.
+     */
+    _rtl = inject(MlvRtlService);
+    /** @private Active named-position map (overridable via `POPUP_POSITIONS` token). */
+    _positionMap = inject(POPUP_POSITIONS);
+    /** @private Angular zone for running document-level event handlers inside change detection. */
+    _ngZone = inject(NgZone);
+    // ─── Public API ────────────────────────────────────────────────────────────
+    /**
+     * Resolves one or more {@link MlvPopupPositionName} strings to CDK
+     * `ConnectedPosition` objects.
+     *
+     * Positions are resolved from the active `POPUP_POSITIONS` map. If a name
+     * is not found, it is skipped and a `console.warn` is emitted in dev mode.
+     * CDK uses the first position in the returned array that fits in the viewport.
+     *
+     * @param names — A single name or ordered array of fallback names.
+     *
+     * @example
+     * ```ts
+     * positions: this.popupService.resolvePositions('bottom-end')
+     * positions: this.popupService.resolvePositions(['bottom-end', 'top-end'])
+     * ```
+     */
+    resolvePositions(names) {
+        return MlvPopupPositionResolver.resolve(names, this._positionMap);
+    }
+    /**
+     * Creates a CDK overlay, attaches the given template portal, and wires up
+     * backdrop and Escape-key closure.
+     *
+     * @param config — Full overlay configuration.
+     * @returns A {@link MlvPopupHandle} with the `overlayRef` and a `close()` method.
+     */
+    open(config) {
+        const fullscreen = config.fullscreen ?? false;
+        const flexible = config.flexibleDimensions ?? false;
+        // Full-screen mode uses a global (viewport-centred) strategy that the pane
+        // stretches to fill; the connected positions are irrelevant. Otherwise use
+        // the trigger-anchored flexible-connected strategy (unchanged behaviour).
+        // withPush(false) for 'reposition': the overlay moves with the trigger and
+        // naturally disappears when the trigger scrolls out of the viewport.
+        // withPush(true) for all other strategies: CDK keeps the overlay inside the
+        // viewport until the strategy itself decides what to do (close, block, noop).
+        const push = (config.scrollStrategy ?? 'reposition') !== 'reposition';
+        const positionStrategy = fullscreen
+            ? this._overlay.position().global()
+            : this._overlay
+                .position()
+                .flexibleConnectedTo(config.origin)
+                .withPositions(config.positions)
+                .withPush(push)
+                .withFlexibleDimensions(flexible)
+                .withGrowAfterOpen(flexible);
+        // The backdrop is always shown in full-screen mode regardless of the
+        // trigger's preference (it doubles as the scrim behind the sheet).
+        const hasBackdrop = fullscreen ? true : (config.hasBackdrop ?? true);
+        const overlayRef = this._overlay.create({
+            positionStrategy,
+            // The pane is portaled to the overlay container on <body>, outside any
+            // `[dir]` scope the origin sits in, so the origin's direction has to be
+            // passed explicitly. It also drives `start`/`end` position mirroring in
+            // `FlexibleConnectedPositionStrategy`.
+            direction: this._rtl.resolveDirection(config.origin),
+            hasBackdrop,
+            ...(hasBackdrop
+                ? {
+                    backdropClass: fullscreen
+                        ? 'mlv-popup-fullscreen-backdrop'
+                        : (config.backdropClass ?? 'cdk-overlay-transparent-backdrop'),
+                }
+                : {}),
+            // Full-screen locks the page behind the sheet (no layout shift — the block
+            // strategy compensates for the removed scrollbar width).
+            scrollStrategy: fullscreen
+                ? this._overlay.scrollStrategies.block()
+                : this._resolveScrollStrategy(config.scrollStrategy),
+            ...(fullscreen
+                ? { panelClass: 'mlv-popup-fullscreen-pane' }
+                : config.size),
+        });
+        const portal = new TemplatePortal(config.template, config.vcr);
+        overlayRef.attach(portal);
+        // Position changes only occur for the connected strategy; the global
+        // (full-screen) strategy exposes no positionChanges stream.
+        if (config.onPositionChange && !fullscreen) {
+            positionStrategy.positionChanges.subscribe(config.onPositionChange);
+        }
+        // Collect cleanup callbacks so they all run on close regardless of how it was triggered.
+        const cleanups = [];
+        // The direction is resolved once above, but the pane now lives outside the
+        // origin's `[dir]` scope: nothing re-mirrors it if the direction flips while
+        // the popup is open. Without this the pane keeps its stale `dir` (its content
+        // stays LTR under an RTL page) and the connected strategy keeps resolving
+        // `start`/`end` against the old direction, so the panel stays put while the
+        // trigger moves to the other edge.
+        cleanups.push(this._rtl.watchDirection(config.origin, (direction) => {
+            overlayRef.setDirection(direction);
+            overlayRef.updatePosition();
+        }));
+        let disposed = false;
+        const close = () => {
+            if (disposed)
+                return;
+            disposed = true;
+            for (const fn of cleanups)
+                fn();
+            overlayRef.dispose();
+            config.onClose();
+        };
+        // Detect when CDK closes the overlay externally (e.g. CloseScrollStrategy calls
+        // overlayRef.detach() — bypassing our close() — leaving handle/opened out of sync).
+        const detachSub = overlayRef.detachments().subscribe(() => close());
+        cleanups.push(() => detachSub.unsubscribe());
+        const requestClose = config.onRequestClose ?? close;
+        if (hasBackdrop) {
+            const sub = overlayRef.backdropClick().subscribe(() => requestClose());
+            cleanups.push(() => sub.unsubscribe());
+        }
+        else {
+            // Defer the document listener to avoid catching the same click that opened the popup.
+            const excludeElements = config.dismissExcludeElements ?? [];
+            const timerId = setTimeout(() => {
+                const handler = (event) => {
+                    const target = event.target;
+                    const insidePanel = overlayRef.hasAttached() &&
+                        overlayRef.overlayElement.contains(target);
+                    // Clicks on the trigger/anchor (outside the floating panel) are not
+                    // "outside" — e.g. repositioning the caret in a combobox's input
+                    // must not dismiss its open list.
+                    const insideExcluded = excludeElements.some((el) => el.contains(target));
+                    if (overlayRef.hasAttached() && !insidePanel && !insideExcluded) {
+                        this._ngZone.run(() => requestClose());
+                    }
+                };
+                document.addEventListener('click', handler, true);
+                cleanups.push(() => document.removeEventListener('click', handler, true));
+            }, 0);
+            cleanups.push(() => clearTimeout(timerId));
+        }
+        const keySub = overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                requestClose();
+                event.preventDefault();
+            }
+        });
+        cleanups.push(() => keySub.unsubscribe());
+        return { overlayRef, close };
+    }
+    /**
+     * @private Maps a {@link MlvPopupScrollStrategy} name to a CDK scroll-strategy instance.
+     */
+    _resolveScrollStrategy(strategy = 'reposition') {
+        switch (strategy) {
+            case 'close':
+                return this._overlay.scrollStrategies.close();
+            case 'block':
+                return this._overlay.scrollStrategies.block();
+            case 'noop':
+                return this._overlay.scrollStrategies.noop();
+            default:
+                return this._overlay.scrollStrategies.reposition();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Injection token for the nearest `MlvPopupContainer`.
+ *
+ * Used by `MlvPopupTrigger` to detect container mode and delegate
+ * open/close/toggle calls without creating a conflicting overlay.
+ */
+const POPUP_CONTAINER = new InjectionToken('POPUP_CONTAINER');
+
+const HOVER_CLOSE_DELAY = 20;
+class MlvPopupTrigger {
+    /** @private Low-level overlay API used in standalone mode. */
+    _popupService = inject(MlvPopupService);
+    /** @private Host element ref used as the overlay anchor. */
+    _elementRef = inject(ElementRef);
+    /** @private View container used to instantiate the popup template portal. */
+    _vcr = inject(ViewContainerRef);
+    /** @private Zone used to re-enter Angular after out-of-zone hover timers. */
+    _ngZone = inject(NgZone);
+    /**
+     * Optional injection of a parent {@link MlvPopupContainer}.
+     *
+     * When present the trigger operates in **container mode**: it delegates
+     * open/close/toggle to the container instead of creating its own overlay,
+     * and registers its host element as the visual anchor.
+     *
+     * When absent the trigger operates in **standalone mode** and manages the
+     * overlay lifecycle itself (legacy behaviour).
+     */
+    _container = inject(POPUP_CONTAINER, { optional: true });
+    /** @private The active overlay handle in standalone mode, or `null` when closed. */
+    _handle = null;
+    /** @private Guards against re-triggering the leave animation while already closing. */
+    _closing = false;
+    /** @private Subscription to the popup's leave-animation-done stream. */
+    _leaveSubscription = null;
+    /** @private Pending hover-close timer handle, or `null` when none is scheduled. */
+    _hoverCloseTimer = null;
+    /**
+     * @private Last-resort timer that force-detaches an overlay whose leave never
+     * completed — without it a lost `animationState` write latches `_closing`
+     * with no path back to a detach.
+     */
+    _detachWatchdog = null;
+    /** @private Teardown callbacks for the overlay hover mouse listeners. */
+    _overlayMouseListeners = [];
+    /**
+     * The `MlvPopup` to control.
+     *
+     * **Standalone mode** (no parent `mlv-popup-container`): must be bound to the
+     * target `<mlv-popup>` element: `[mlvPopupTrigger]="myPopup"`.
+     *
+     * **Container mode** (inside `mlv-popup-container`): can be used as a bare
+     * attribute (`mlvPopupTrigger`) without a value — the container already holds
+     * the popup reference and orchestrates the overlay. The empty-string value from
+     * the bare attribute is coerced to `undefined` by the transform.
+     */
+    mlvPopupTrigger = input(undefined, { ...(ngDevMode ? { debugName: "mlvPopupTrigger" } : /* istanbul ignore next */ {}), transform: (v) => typeof v === 'string' ? undefined : v });
+    /** One or more event types that open the popup. Defaults to `'click'`. */
+    triggerOn = input('click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerOn" }] : /* istanbul ignore next */ []));
+    /**
+     * Value applied to the trigger's `aria-haspopup` attribute. Should match the
+     * semantic role of the popup panel's content — e.g. `'menu'` for a menu
+     * flyout, `'listbox'` for a select, `'dialog'` for a modal surface. Defaults
+     * to `'dialog'` for backwards compatibility. Set to `null` to omit the
+     * attribute entirely (e.g. for a tooltip-only popup).
+     */
+    ariaHasPopup = input('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the associated popup is currently open. */
+    _isOpen = computed(() => {
+        const popup = this.mlvPopupTrigger();
+        if (popup)
+            return popup.opened();
+        if (this._container)
+            return this._container.isOpen?.() ?? false;
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this._container) {
+            // ── Container mode ──────────────────────────────────────────────────
+            // Register this element as the overlay anchor. Re-runs if triggerOn changes
+            // so the container can update its backdrop preference accordingly.
+            const container = this._container;
+            effect(() => {
+                container.registerTrigger(this._elementRef, !this.hasTrigger('hover'));
+            });
+        }
+        else {
+            // ── Standalone mode ─────────────────────────────────────────────────
+            // Watch the popup's opened signal and manage the CDK overlay ourselves.
+            effect(() => {
+                const popup = this.mlvPopupTrigger();
+                if (!popup)
+                    return;
+                const isOpen = popup.opened();
+                if (isOpen && !this._handle) {
+                    this._attachOverlay();
+                }
+                else if (!isOpen && this._handle && !this._closing) {
+                    this._startLeaveAnimation();
+                }
+            });
+        }
+    }
+    open() {
+        if (this._container) {
+            this._container.open();
+        }
+        else {
+            this.mlvPopupTrigger()?.opened.set(true);
+        }
+    }
+    close() {
+        if (this._container) {
+            this._container.close();
+        }
+        else {
+            this.mlvPopupTrigger()?.opened.set(false);
+        }
+    }
+    toggle() {
+        if (this._container) {
+            this._container.toggle();
+        }
+        else if (this._handle) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    ngOnDestroy() {
+        this._clearHoverTimer();
+        this._clearDetachWatchdog();
+        this._removeOverlayMouseListeners();
+        this._cleanupSubscription();
+        this._detachOverlay();
+    }
+    onClick() {
+        if (this.hasTrigger('click')) {
+            this.toggle();
+        }
+    }
+    onMouseEnter() {
+        if (this.hasTrigger('hover')) {
+            this._clearHoverTimer();
+            this.open();
+        }
+    }
+    onMouseLeave() {
+        if (this.hasTrigger('hover')) {
+            this._scheduleHoverClose();
+        }
+    }
+    onFocus() {
+        if (this.hasTrigger('focus')) {
+            this.open();
+        }
+    }
+    onBlur() {
+        if (this.hasTrigger('focus')) {
+            this.close();
+        }
+    }
+    hasTrigger(type) {
+        const trigger = this.triggerOn();
+        return Array.isArray(trigger) ? trigger.includes(type) : trigger === type;
+    }
+    /** @private Schedules a delayed close after the pointer leaves the trigger. */
+    _scheduleHoverClose() {
+        this._clearHoverTimer();
+        this._hoverCloseTimer = setTimeout(() => {
+            this._hoverCloseTimer = null;
+            this._ngZone.run(() => this.close());
+        }, HOVER_CLOSE_DELAY);
+    }
+    /** @private Cancels any pending hover-close timer. */
+    _clearHoverTimer() {
+        if (this._hoverCloseTimer !== null) {
+            clearTimeout(this._hoverCloseTimer);
+            this._hoverCloseTimer = null;
+        }
+    }
+    /** @private Creates the CDK overlay and plays the enter animation (standalone mode). */
+    _attachOverlay() {
+        if (this._handle)
+            return;
+        const popup = this.mlvPopupTrigger();
+        if (!popup)
+            return;
+        popup.animationState.set('idle');
+        const isHover = this.hasTrigger('hover');
+        this._handle = this._popupService.open({
+            origin: this._elementRef,
+            template: popup.popupTemplate(),
+            vcr: this._vcr,
+            positions: popup.resolvedPositions(),
+            size: popup.buildSizeConfig(),
+            fullscreen: popup.isFullscreen(),
+            hasBackdrop: popup.hasBackdrop() ?? !isHover,
+            scrollStrategy: popup.scrollStrategy(),
+            onPositionChange: (change) => popup.updateArrowFromPosition(change.connectionPair),
+            onClose: () => {
+                this._removeOverlayMouseListeners();
+                this._clearHoverTimer();
+                this._clearDetachWatchdog();
+                this._handle = null;
+                this._closing = false;
+                popup.animationState.set('idle');
+                popup.opened.set(false);
+                popup.afterClosed.emit();
+            },
+            onRequestClose: () => this.close(),
+        });
+        if (isHover) {
+            this._addOverlayMouseListeners();
+        }
+        this._cleanupSubscription();
+        this._leaveSubscription = popup.leaveAnimationDone$.subscribe(() => {
+            this._detachOverlay();
+        });
+        // Deferred so the panel is in the DOM before the enter keyframes start;
+        // `beginEnterAnimation()` refuses to overwrite a close that beat it here.
+        queueMicrotask(() => popup.beginEnterAnimation());
+        popup.afterOpened.emit();
+    }
+    /** @private Wires hover enter/leave listeners on the overlay panel to keep it open on hover. */
+    _addOverlayMouseListeners() {
+        if (!this._handle)
+            return;
+        const overlayEl = this._handle.overlayRef.overlayElement;
+        const onEnter = () => this._clearHoverTimer();
+        const onLeave = () => this._scheduleHoverClose();
+        overlayEl.addEventListener('mouseenter', onEnter);
+        overlayEl.addEventListener('mouseleave', onLeave);
+        this._overlayMouseListeners = [
+            () => overlayEl.removeEventListener('mouseenter', onEnter),
+            () => overlayEl.removeEventListener('mouseleave', onLeave),
+        ];
+    }
+    /** @private Removes the overlay hover listeners. */
+    _removeOverlayMouseListeners() {
+        for (const cleanup of this._overlayMouseListeners) {
+            cleanup();
+        }
+        this._overlayMouseListeners = [];
+    }
+    /** @private Triggers the popup leave animation before detaching the overlay. */
+    _startLeaveAnimation() {
+        if (!this._handle)
+            return;
+        this._closing = true;
+        this.mlvPopupTrigger()?.animationState.set('leave');
+        this._armDetachWatchdog();
+    }
+    /** @private Tears down the overlay, its subscriptions, and pending timers. */
+    _detachOverlay() {
+        this._cleanupSubscription();
+        this._clearDetachWatchdog();
+        if (this._handle) {
+            this._handle.close();
+        }
+    }
+    /**
+     * @private Arms the force-detach timer for the pending leave. Detaching is
+     * what resets `_closing` and `_handle`, so a leave that never completes must
+     * still end in a detach or the trigger latches permanently.
+     */
+    _armDetachWatchdog() {
+        this._clearDetachWatchdog();
+        this._detachWatchdog = setTimeout(() => {
+            this._detachWatchdog = null;
+            if (this._closing && this._handle) {
+                this._detachOverlay();
+            }
+        }, POPUP_DETACH_WATCHDOG_MS);
+    }
+    /** @private Cancels a pending force-detach timer. */
+    _clearDetachWatchdog() {
+        if (this._detachWatchdog !== null) {
+            clearTimeout(this._detachWatchdog);
+            this._detachWatchdog = null;
+        }
+    }
+    /** @private Unsubscribes from the leave-animation-done stream. */
+    _cleanupSubscription() {
+        this._leaveSubscription?.unsubscribe();
+        this._leaveSubscription = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvPopupTrigger, isStandalone: true, selector: "[mlvPopupTrigger]", inputs: { mlvPopupTrigger: { classPropertyName: "mlvPopupTrigger", publicName: "mlvPopupTrigger", isSignal: true, isRequired: false, transformFunction: null }, triggerOn: { classPropertyName: "triggerOn", publicName: "triggerOn", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-expanded": "_isOpen()", "attr.aria-haspopup": "ariaHasPopup()" } }, exportAs: ["mlvPopupTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPopupTrigger]',
+                    host: {
+                        '[attr.aria-expanded]': '_isOpen()',
+                        '[attr.aria-haspopup]': 'ariaHasPopup()',
+                        '(click)': 'onClick()',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                    },
+                    exportAs: 'mlvPopupTrigger',
+                }]
+        }], ctorParameters: () => [], propDecorators: { mlvPopupTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvPopupTrigger", required: false }] }], triggerOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerOn", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }] } });
+
+class MlvPopupContainer {
+    /** @private Low-level popup overlay service used to open/close the CDK overlay. */
+    _popupService = inject(MlvPopupService);
+    /** @private View container used as the anchor for the popup's template portal. */
+    _vcr = inject(ViewContainerRef);
+    /** @private Host element reference, used as the overlay origin when no trigger is registered. */
+    _elementRef = inject(ElementRef);
+    /** @private Handle to the currently-open overlay, or `null` when closed. */
+    _handle = null;
+    /** @private True while the leave animation is playing, before the overlay detaches. */
+    _closing = false;
+    /** @private Subscription to the popup's leave-animation-done stream. */
+    _leaveSubscription = null;
+    /**
+     * @private Last-resort timer that force-detaches an overlay whose leave never
+     * completed. The popup's own animation fallback normally gets there first;
+     * this one also covers a lost `animationState` write, which would otherwise
+     * latch `_closing` with no path back to a detach.
+     */
+    _detachWatchdog = null;
+    /** @private Origin registered by a child `MlvPopupTrigger`, if any. */
+    _triggerOrigin = null;
+    /** @private Backdrop preference registered by a child `MlvPopupTrigger`. */
+    _hasBackdrop = true;
+    popup = contentChild.required(MlvPopup, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []));
+    /**
+     * Called by a child {@link MlvPopupTrigger} to register its host element
+     * as the visual anchor for the CDK overlay.
+     */
+    registerTrigger(origin, hasBackdrop) {
+        this._triggerOrigin = origin;
+        this._hasBackdrop = hasBackdrop;
+    }
+    constructor() {
+        effect(() => {
+            const popup = this.popup();
+            const isOpen = popup.opened();
+            if (isOpen && !this._handle) {
+                this._attachOverlay();
+            }
+            else if (!isOpen && this._handle && !this._closing) {
+                this._startLeaveAnimation();
+            }
+        });
+    }
+    open() {
+        if (this._handle)
+            return;
+        this.popup().opened.set(true);
+    }
+    close() {
+        this.popup().opened.set(false);
+    }
+    toggle() {
+        if (this._handle) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Returns whether the popup is currently open. */
+    isOpen() {
+        return this.popup().opened();
+    }
+    ngOnDestroy() {
+        this._cleanupSubscription();
+        this._clearDetachWatchdog();
+        this._detachOverlay();
+    }
+    /** @private Opens the CDK overlay for the popup and subscribes to its leave-animation completion. */
+    _attachOverlay() {
+        if (this._handle)
+            return;
+        const popup = this.popup();
+        popup.animationState.set('idle');
+        this._handle = this._popupService.open({
+            origin: this._triggerOrigin ?? this._elementRef,
+            template: popup.popupTemplate(),
+            vcr: this._vcr,
+            positions: popup.resolvedPositions(),
+            size: popup.buildSizeConfig(),
+            fullscreen: popup.isFullscreen(),
+            hasBackdrop: popup.hasBackdrop() ?? this._hasBackdrop,
+            scrollStrategy: popup.scrollStrategy(),
+            flexibleDimensions: popup.flexibleDimensions(),
+            dismissExcludeElements: popup.dismissExcludeElements(),
+            onPositionChange: (change) => popup.updateArrowFromPosition(change.connectionPair),
+            onClose: () => {
+                this._clearDetachWatchdog();
+                this._handle = null;
+                this._closing = false;
+                popup.animationState.set('idle');
+                popup.opened.set(false);
+                popup.afterClosed.emit();
+            },
+            onRequestClose: () => this.close(),
+        });
+        this._cleanupSubscription();
+        this._leaveSubscription = popup.leaveAnimationDone$.subscribe(() => {
+            this._detachOverlay();
+        });
+        // Deferred so the panel is in the DOM before the enter keyframes start;
+        // `beginEnterAnimation()` refuses to overwrite a close that beat it here.
+        queueMicrotask(() => popup.beginEnterAnimation());
+        popup.afterOpened.emit();
+    }
+    /** @private Marks the container as closing and triggers the popup's leave animation. */
+    _startLeaveAnimation() {
+        if (!this._handle)
+            return;
+        this._closing = true;
+        this.popup().animationState.set('leave');
+        this._armDetachWatchdog();
+    }
+    /** @private Cleans up subscriptions, timers, and closes the overlay handle. */
+    _detachOverlay() {
+        this._cleanupSubscription();
+        this._clearDetachWatchdog();
+        if (this._handle) {
+            this._handle.close();
+        }
+    }
+    /**
+     * @private Arms the force-detach timer for the pending leave. Detaching is
+     * what resets `_closing` and `_handle`, so a leave that never completes must
+     * still end in a detach or the container latches permanently.
+     */
+    _armDetachWatchdog() {
+        this._clearDetachWatchdog();
+        this._detachWatchdog = setTimeout(() => {
+            this._detachWatchdog = null;
+            if (this._closing && this._handle) {
+                this._detachOverlay();
+            }
+        }, POPUP_DETACH_WATCHDOG_MS);
+    }
+    /** @private Cancels a pending force-detach timer. */
+    _clearDetachWatchdog() {
+        if (this._detachWatchdog !== null) {
+            clearTimeout(this._detachWatchdog);
+            this._detachWatchdog = null;
+        }
+    }
+    /** @private Unsubscribes from and clears the leave-animation subscription. */
+    _cleanupSubscription() {
+        this._leaveSubscription?.unsubscribe();
+        this._leaveSubscription = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopupContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvPopupContainer, isStandalone: true, selector: "mlv-popup-container", providers: [{ provide: POPUP_CONTAINER, useExisting: MlvPopupContainer }], queries: [{ propertyName: "popup", first: true, predicate: MlvPopup, descendants: true, isSignal: true }], 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: MlvPopupContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-popup-container',
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: POPUP_CONTAINER, useExisting: MlvPopupContainer }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { popup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPopup), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MENU_POSITIONS, MlvPopup, MlvPopupContainer, MlvPopupContent, MlvPopupHeaderContent, MlvPopupPinnedContent, MlvPopupPositionResolver, MlvPopupService, MlvPopupTrigger, POPUP_CONTAINER, POPUP_DETACH_WATCHDOG_MS, POPUP_LEAVE_FALLBACK_MS, POPUP_POSITIONS, POPUP_POSITION_MAP, SUBMENU_POSITIONS, providePopupPositions };
+//# sourceMappingURL=malva-ui-core-popup.mjs.map