@malva-ui/core 0.1.12

package/esm2022/pin-input/lib/pin-input/pin-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.js","sourceRoot":"","sources":["../../../../../../../libs/core/pin-input/src/lib/pin-input/pin-input.ts","../../../../../../../libs/core/pin-input/src/lib/pin-input/pin-input.html"],"names":[],"mappings":"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","sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport type { TemplateRef } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { LucideDot } from '@lucide/angular';\nimport { clamp } from '@malva-ui/cdk/utils';\nimport type { MlvFormControl } from '@malva-ui/core/form-utils';\nimport {\n  MlvHint,\n  MlvDescription,\n  MlvLabel,\n  MLV_FORM_CONTROL,\n  MlvMessage,\n  MlvSignalFormControlBase,\n} from '@malva-ui/core/form-utils';\nimport { MlvInput } from '@malva-ui/core/input';\nimport { MLV_PIN_INPUT_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport { MlvPinInputSeparator } from './pin-input-separator';\n\n/**\n * OTP / PIN input component — a row of single-character `mlv-input` cells that\n * behave as one logical form control.\n *\n * - Auto-advances focus to the next cell after a character is entered.\n * - Backspace moves focus backwards and clears the cell.\n * - Arrow keys navigate between cells.\n * - Pasting a string distributes characters across cells starting from the first cell.\n * - Integrates with Angular Reactive Forms and Template-Driven Forms via CVA.\n * - Supports `mlv-label`, `mlv-hint`, and `mlv-message` via the same `label`,\n *   `hint`, `message`, and `state` inputs as every other Malva UI form control.\n *\n * @example Reactive form with label and error message\n * ```html\n * <mlv-pin-input\n *   [length]=\"6\"\n *   [formControl]=\"otpControl\"\n *   label=\"One-time code\"\n *   hint=\"Sent to +1 ••• 1234\"\n *   [state]=\"otpControl.invalid && otpControl.touched ? 'error' : 'default'\"\n *   [message]=\"otpControl.invalid && otpControl.touched ? 'Code is invalid' : ''\"\n * />\n * ```\n *\n * @example Password mode\n * ```html\n * <mlv-pin-input type=\"password\" [length]=\"6\" [formControl]=\"pinControl\" />\n * ```\n */\n@Component({\n  selector: 'mlv-pin-input',\n  imports: [\n    MlvInput,\n    MlvDescription,\n    MlvLabel,\n    MlvHint,\n    MlvMessage,\n    NgTemplateOutlet,\n    LucideDot,\n  ],\n  templateUrl: './pin-input.html',\n  styleUrl: './pin-input.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvPinInput),\n    },\n  ],\n  host: {\n    class: 'mlv-pin-input',\n    '[class]': '\"mlv-pin-input--state-\" + resolvedState()',\n    '[class.mlv-pin-input--disabled]': 'computedDisabled()',\n    '[class.mlv-pin-input--focused]': 'focused()',\n    '[attr.role]': '\"group\"',\n    '[attr.aria-label]': 'label() || _i18n().pinEntry',\n    '[attr.aria-disabled]': 'computedDisabled() || null',\n  },\n})\nexport class MlvPinInput\n  extends MlvSignalFormControlBase<string>\n  implements MlvFormControl\n{\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_PIN_INPUT_I18N);\n\n  /** @private Resolver for ICU parameterized i18n strings. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /**\n   * Number of cells (characters) in the PIN / OTP.\n   * @default 6\n   */\n  readonly length = input<number>(6);\n\n  /**\n   * Input type applied to each cell.\n   * Use `'password'` to mask characters; `'number'` for digit-only PIN.\n   * @default 'text'\n   */\n  readonly type = input<'text' | 'password' | 'number'>('text');\n\n  /**\n   * Placeholder character shown in each empty cell.\n   * @default '·'\n   */\n  readonly placeholder = input<string>('·');\n\n  /**\n   * Controls separator placement between cells.\n   *\n   * - `''` (default) — no separators\n   * - `'each'` — separator between every pair of consecutive cells\n   * - comma-separated indices (e.g. `'1,3'`) — separator before the cell at\n   *   each listed index. With `length=4` and `'1,3'` the result is\n   *   `[0]—[1][2]—[3]`.\n   *\n   * By default separators render as a Lucide dot icon. Project a custom\n   * template via `*mlvPinInputSeparator` to override.\n   *\n   * @default ''\n   */\n  readonly separator = input<string>('');\n\n  /**\n   * Emits the complete value string when all cells are filled.\n   */\n  readonly completed = output<string>();\n\n  /** The complete PIN/OTP value used by all Angular forms APIs. */\n  readonly value = model<string>('');\n\n  // ── Internal state ─────────────────────────────────────────────────────────\n\n  /**\n   * @protected Char values per cell index. Sparse — empty cell = `''`.\n   */\n  protected readonly _values = signal<string[]>([]);\n\n  /** @private Latest model value written by this component, used to avoid collapsing sparse cells. */\n  private _internalModelWrite: string | null = null;\n\n  /** @protected Stable cell indexes derived from {@link length}. */\n  protected readonly _cellIndices = computed(() =>\n    Array.from({ length: this.length() }, (_, index) => index),\n  );\n\n  /**\n   * @private Live refs to each rendered `<mlv-input>` cell, order-aligned\n   * with `_cellControls`. Used for programmatic focus / text selection.\n   */\n  private readonly _cells = viewChildren(MlvInput);\n\n  /**\n   * @protected Optional projected template used as separator content between\n   * cells. When absent the component renders a default Lucide dot icon.\n   */\n  protected readonly _separatorDef = contentChild(MlvPinInputSeparator);\n\n  /**\n   * @protected Custom separator template, derived from `_separatorDef`.\n   */\n  protected readonly _separatorTemplate = computed<TemplateRef<unknown> | null>(\n    () => this._separatorDef()?.templateRef ?? null,\n  );\n\n  /**\n   * @protected Resolved set of cell indices that should be preceded by a\n   * separator. Derived from the `separator` input and `length`.\n   *\n   * - `''` → empty set\n   * - `'each'` → `{1, 2, …, length - 1}`\n   * - `'1,3'` → `{1, 3}` (values outside `[1, length - 1]` are ignored)\n   */\n  protected readonly _separatorPositions = computed<Set<number>>(() => {\n    const spec = this.separator().trim();\n    if (!spec) return new Set();\n\n    const len = this.length();\n    if (spec === 'each') {\n      return new Set(\n        Array.from({ length: Math.max(0, len - 1) }, (_, i) => i + 1),\n      );\n    }\n\n    const parsed = spec\n      .split(',')\n      .map((s) => Number.parseInt(s.trim(), 10))\n      .filter((n) => Number.isInteger(n) && n > 0 && n < len);\n    return new Set(parsed);\n  });\n\n  /**\n   * @protected Whether a separator should be rendered before the cell at\n   * `index`.\n   */\n  protected _hasSeparatorBefore(index: number): boolean {\n    return this._separatorPositions().has(index);\n  }\n\n  /**\n   * @protected Stable per-cell id. The first cell's id is referenced by the\n   * optional `<mlv-label>`'s `for` attribute so clicking the label focuses\n   * the first cell.\n   */\n  protected _cellId(index: number): string {\n    return `${this.id()}-cell-${index}`;\n  }\n\n  /**\n   * @protected Resolves a single cell's aria-label, e.g. \"Digit 2 of 6\".\n   * @param index 0-based cell index.\n   */\n  protected _cellLabel(index: number): string {\n    return this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      'digit',\n      { position: index + 1, length: this.length() },\n    );\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      const value = this.value() ?? '';\n      const len = this.length();\n      if (this._internalModelWrite === value) {\n        this._internalModelWrite = null;\n        return;\n      }\n      const chars = value.split('').slice(0, len);\n      const padded = Array.from(\n        { length: len },\n        (_, index) => chars[index] ?? '',\n      );\n      this._values.set(padded);\n    });\n  }\n\n  // ── Forms value ────────────────────────────────────────────────────────────\n\n  /** Whether the control holds a clearable value — At least one cell filled. */\n  readonly hasValue = computed(() =>\n    this._values().some((cell) => cell !== ''),\n  );\n\n  // ── Cell event handlers ────────────────────────────────────────────────────\n\n  /**\n   * @protected Reacts to cell FormControl value changes. Normalises multi-char\n   * input to the last character and auto-advances focus, or distributes a\n   * multi-char string across subsequent cells when triggered by IME / fast typing.\n   */\n  protected _onCellChange(index: number, raw: string): void {\n    // When a cell already holds a character and the user types again, the\n    // native input accumulates (e.g. cell was '3', user types '4' → '34').\n    // Strip the previous value prefix so we treat only the new keystroke.\n    let effective = raw;\n    if (effective.length > 1) {\n      const prev = this._values()[index] ?? '';\n      if (prev && effective.startsWith(prev)) {\n        effective = effective.slice(prev.length);\n      }\n    }\n\n    if (effective.length > 1) {\n      this._distributeChars(effective, index);\n      return;\n    }\n\n    const char = effective.slice(-1);\n    this._setCell(index, char);\n\n    if (!char) {\n      this._emit();\n      return;\n    }\n\n    if (index < this.length() - 1) {\n      this._focusCell(index + 1);\n    } else {\n      // Last cell — no next cell to advance to. Re-select the content so the\n      // next keystroke replaces this character instead of appending.\n      this._cellAt(index)?.select();\n    }\n    this._emit();\n  }\n\n  /**\n   * @protected Handles cell keyboard input — Backspace, Delete, arrows, Home/End.\n   */\n  protected _onCellKeydown(index: number, event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Backspace':\n        event.preventDefault();\n        if (this._values()[index]) {\n          this._setCell(index, '');\n          this._emit();\n        } else {\n          this._focusCell(index - 1);\n        }\n        break;\n\n      case 'Delete':\n        event.preventDefault();\n        this._setCell(index, '');\n        this._emit();\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        this._focusCell(index - 1);\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        this._focusCell(index + 1);\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this._focusCell(0);\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this._focusCell(this.length() - 1);\n        break;\n    }\n  }\n\n  /**\n   * @protected Pastes a string of characters across cells starting from the\n   * first cell. Whitespace is stripped before distribution.\n   */\n  protected _onCellPaste(_index: number, event: ClipboardEvent): void {\n    event.preventDefault();\n    const text = event.clipboardData?.getData('text/plain') ?? '';\n    this._distributeChars(text, 0);\n  }\n\n  /**\n   * @protected Selects the contents of a cell when it receives focus so the\n   * next keystroke replaces the current character.\n   */\n  protected _onCellFocus(index: number): void {\n    this.setFocused(true);\n    this._cellAt(index)?.select();\n  }\n\n  /**\n   * @protected Emits the signal-forms touch output when a cell loses focus.\n   */\n  protected _onCellBlur(): void {\n    this.setFocused(false);\n    this._markTouched();\n  }\n\n  // ── Private helpers ────────────────────────────────────────────────────────\n\n  /**\n   * @private Sets a single cell's value, preserving the length of `_values`.\n   */\n  private _setCell(index: number, char: string): void {\n    const updated = [...this._values()];\n    while (updated.length < this.length()) updated.push('');\n    updated[index] = char;\n    this._values.set(updated);\n  }\n\n  /**\n   * @private Distributes a sequence of characters across cells starting from\n   * `startIndex`, advances focus to the next empty cell, and emits.\n   */\n  private _distributeChars(text: string, startIndex: number): void {\n    const chars = text.replace(/\\s/g, '').split('');\n    const updated: string[] = Array.from(\n      { length: this.length() },\n      (_, i) => this._values()[i] ?? '',\n    );\n\n    let lastFilled = startIndex;\n    for (let i = 0; i < chars.length && startIndex + i < this.length(); i++) {\n      updated[startIndex + i] = chars[i];\n      lastFilled = startIndex + i;\n    }\n\n    this._values.set(updated);\n    this._focusCell(lastFilled + 1);\n    this._emit();\n  }\n\n  /**\n   * @private Focuses the cell at the given index, clamped to `[0, length - 1]`.\n   */\n  private _focusCell(index: number): void {\n    const clamped = clamp(index, 0, this.length() - 1);\n    this._cellAt(clamped)?.focus();\n  }\n\n  /**\n   * @private Returns the `MlvInput` instance rendered for the cell at\n   * the given index, or `null` if the cell is not yet rendered.\n   */\n  private _cellAt(index: number): MlvInput | null {\n    return this._cells()[index] ?? null;\n  }\n\n  /**\n   * @private Pushes the current joined value to the forms model and\n   * emits `completed` when every cell is filled.\n   */\n  private _emit(): void {\n    const values = this._values();\n    const full = values.join('');\n    if (this.value() !== full) {\n      this._internalModelWrite = full;\n      this.value.set(full);\n    }\n\n    if (values.length === this.length() && values.every((v) => v !== '')) {\n      this.completed.emit(full);\n    }\n  }\n}\n","@if (label() || hint()) {\n<mlv-label [for]=\"_cellId(0)\" [required]=\"required()\">\n  {{ label() }} @if (hint()) {\n  <mlv-hint>{{ hint() }}</mlv-hint>\n  }\n</mlv-label>\n}\n\n<div class=\"mlv-pin-input__cells\">\n  @for (i of _cellIndices(); track i) { @if (_hasSeparatorBefore(i)) {\n  <span class=\"mlv-pin-input__separator\" aria-hidden=\"true\">\n    @if (_separatorTemplate(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" />\n    } @else {\n    <svg lucideDot [size]=\"16\" />\n    }\n  </span>\n  }\n  <mlv-input\n    class=\"mlv-pin-input__cell\"\n    [id]=\"_cellId(i)\"\n    [type]=\"type()\"\n    [state]=\"resolvedState()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_values()[i] ?? ''\"\n    [disabled]=\"computedDisabled()\"\n    [readonly]=\"readonly()\"\n    autocomplete=\"one-time-code\"\n    inputMode=\"numeric\"\n    [ariaLabel]=\"_cellLabel(i)\"\n    [ariaDescribedBy]=\"_describedBy()\"\n    [required]=\"required()\"\n    (valueChange)=\"_onCellChange(i, $event)\"\n    (keydown)=\"_onCellKeydown(i, $event)\"\n    (paste)=\"_onCellPaste(i, $event)\"\n    (inputFocus)=\"_onCellFocus(i)\"\n    (inputBlur)=\"_onCellBlur()\"\n  />\n  }\n</div>\n\n@if (description()) {\n<mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n} @if (message()) {\n<mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n  {{ message() }}\n</mlv-message>\n}\n"]}

package/esm2022/pin-input/malva-ui-core-pin-input.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-pin-input.js.map

package/esm2022/pin-input/malva-ui-core-pin-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-pin-input.js","sourceRoot":"","sources":["../../../../../libs/core/pin-input/src/malva-ui-core-pin-input.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/popup/index.js

@@ -0,0 +1,10 @@
+export * from './lib/popup/popup';
+export * from './lib/popup-content';
+export * from './lib/popup-header-content';
+export * from './lib/popup-pinned-content';
+export * from './lib/popup-trigger/popup-trigger';
+export * from './lib/popup-container/popup-container';
+export * from './lib/popup-container/popup-container.token';
+export * from './lib/popup.service';
+export * from './lib/popup-positions';
+//# sourceMappingURL=index.js.map

package/esm2022/popup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/popup/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './lib/popup/popup';\nexport * from './lib/popup-content';\nexport * from './lib/popup-header-content';\nexport * from './lib/popup-pinned-content';\nexport * from './lib/popup-trigger/popup-trigger';\nexport * from './lib/popup-container/popup-container';\nexport * from './lib/popup-container/popup-container.token';\nexport * from './lib/popup.service';\nexport * from './lib/popup-positions';\n"]}

package/esm2022/popup/lib/popup/popup.js

@@ -0,0 +1,500 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, DestroyRef, effect, inject, input, model, output, signal, viewChild, ViewEncapsulation, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Subject } from 'rxjs';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { A11yModule } from '@angular/cdk/a11y';
+import { PortalModule } from '@angular/cdk/portal';
+import { LucideX } from '@lucide/angular';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { MlvBreakpointService } from '@malva-ui/cdk/utils';
+import { MLV_DENSITY_CONTEXT, MlvDensityService } from '@malva-ui/cdk/density';
+import { MLV_POPUP_I18N } from '@malva-ui/i18n';
+import { MlvPopupContent } from '../popup-content';
+import { MlvPopupHeaderContent } from '../popup-header-content';
+import { MlvPopupPinnedContent } from '../popup-pinned-content';
+import { MlvPopupPositionResolver, POPUP_POSITIONS } from '../popup-positions';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+/**
+ * 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).
+ */
+export 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.
+ */
+export const POPUP_DETACH_WATCHDOG_MS = POPUP_LEAVE_FALLBACK_MS + 100;
+export 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        <button\n          type=\"button\"\n          class=\"mlv-popup__close\"\n          [attr.aria-label]=\"_closeLabel()\"\n          (click)=\"_onCloseClick()\"\n        >\n          <svg lucideX [size]=\"20\"></svg>\n        </button>\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\";.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))}.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) solid var(--mlv-border-focus);outline-offset:.125rem}.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-right:none;border-bottom:none;transform:rotate(45deg)}.mlv-popup--arrow-bottom:before{bottom:-.4375rem;border-left:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-left:before{left:-.4375rem;border-right:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-right:before{right:-.4375rem;border-left: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-left:-.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: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPopup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-popup', imports: [
+                        OverlayModule,
+                        A11yModule,
+                        PortalModule,
+                        NgTemplateOutlet,
+                        LucideX,
+                        MlvScrollbar,
+                    ], 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        <button\n          type=\"button\"\n          class=\"mlv-popup__close\"\n          [attr.aria-label]=\"_closeLabel()\"\n          (click)=\"_onCloseClick()\"\n        >\n          <svg lucideX [size]=\"20\"></svg>\n        </button>\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\";.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))}.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) solid var(--mlv-border-focus);outline-offset:.125rem}.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-right:none;border-bottom:none;transform:rotate(45deg)}.mlv-popup--arrow-bottom:before{bottom:-.4375rem;border-left:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-left:before{left:-.4375rem;border-right:none;border-top:none;transform:rotate(45deg)}.mlv-popup--arrow-right:before{right:-.4375rem;border-left: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-left:-.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 }] }] } });
+//# sourceMappingURL=popup.js.map