@malva-ui/core 0.1.12

package/esm2022/page/lib/page/page-snap-controller.js

@@ -0,0 +1,170 @@
+import { computed, DestroyRef, inject, Injectable, signal, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Owns the snap progress of a page's collapsing top chrome.
+ *
+ * Progress is **scroll-scrubbed**: `main[mlvPage]` maps its scroll offset onto
+ * a 0..1 timeline (`snapRange` pixels of scroll = the full timeline), so
+ * chrome motion is proportional to scrolling instead of a time-based
+ * animation. The effective value is published as the `--mlv-page-snap` CSS
+ * custom property on the page host; elements interpolate their own state from
+ * it (see `MlvPageSnap`).
+ *
+ * Pinning distinguishes its origin:
+ * - **Manual** (chevron toggle): an explicit choice — while manually pinned
+ *   collapsed, the geometry-compensation spacer is reclaimed (`spacerScale`
+ *   tweens to 0) so no dead space remains above the content, including at the
+ *   top of the page.
+ * - **Scroll** (pin button freezing a scroll-derived state): the frozen state
+ *   is a scroll artifact — when the user returns to the top, the controller
+ *   unpins automatically and the chrome expands.
+ *
+ * Provided by `MlvPage`. Inject optionally from header/summary components and
+ * snap directives — absence simply means "no scroll-linked behaviour".
+ */
+export class MlvPageSnapController {
+    /** @private Raw scroll-derived progress, 0 (top) .. 1 (fully snapped). */
+    _scrollProgress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollProgress" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Frozen progress while pinned or after a manual toggle;
+     * `null` means the progress follows the scroll position.
+     */
+    _frozen = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_frozen" }] : /* istanbul ignore next */ []));
+    /** @private How the current frozen state was produced. */
+    _pinOrigin = null;
+    /**
+     * @private Scale applied by `MlvPage` to the geometry-compensation spacer;
+     * tweens to 0 while manually pinned collapsed (dead space reclaimed).
+     */
+    _spacerScale = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_spacerScale" }] : /* istanbul ignore next */ []));
+    /** @private Frame handles of the running tweens, per animated signal. */
+    _tweenFrames = new Map();
+    /** @private Adapter so the frozen tween can share the signal tween helper. */
+    _frozenNumber = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_frozenNumber" }] : /* istanbul ignore next */ []));
+    /** @private Cancels pending tweens when the owning page is destroyed. */
+    _destroyRef = inject(DestroyRef);
+    /** Effective snap progress: 0 fully expanded, 1 fully snapped. */
+    progress = computed(() => this._frozen() ?? this._scrollProgress(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    /** True while the chrome state is frozen and ignores scrolling. */
+    pinned = computed(() => this._frozen() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+    /** True once the chrome is closer to its snapped state than the open one. */
+    snapped = computed(() => this.progress() >= 0.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapped" }] : /* istanbul ignore next */ []));
+    /**
+     * Multiplier for the geometry-compensation spacer, 1 (full compensation)
+     * .. 0 (reclaimed). Consumed by `MlvPage`.
+     */
+    spacerScale = this._spacerScale;
+    constructor() {
+        this._destroyRef.onDestroy(() => {
+            for (const frame of this._tweenFrames.values()) {
+                cancelAnimationFrame(frame);
+            }
+            this._tweenFrames.clear();
+        });
+    }
+    /**
+     * @internal Called by `MlvPage` on every scroll event of its viewport.
+     * A pinned controller keeps reporting the frozen value; a scroll-origin
+     * pin releases itself once the user returns to the top, where the frozen
+     * scroll artifact would only leave dead space.
+     */
+    updateFromScroll(scrollTop, snapRange) {
+        const progress = snapRange > 0 ? Math.min(Math.max(scrollTop / snapRange, 0), 1) : 0;
+        this._scrollProgress.set(progress);
+        if (this.pinned() && this._pinOrigin === 'scroll' && scrollTop <= 1) {
+            this.setPinned(false);
+        }
+    }
+    /**
+     * Pins the chrome at its current progress (`true`) or releases it back to
+     * scroll-following (`false`, animating to the scroll-derived value). A pin
+     * taken from a scroll-following state is a scroll-origin pin; pinning while
+     * already frozen by the chevron keeps the manual origin.
+     */
+    setPinned(pinned) {
+        if (pinned === this.pinned()) {
+            return;
+        }
+        if (pinned) {
+            this._cancelTween(this._frozenNumber);
+            this._pinOrigin ??= 'scroll';
+            this._frozen.set(this.progress());
+            return;
+        }
+        this._pinOrigin = null;
+        this._animateSignal(this._spacerScale, 1);
+        this._animateFrozenTo(this._scrollProgress(), () => this._frozen.set(null));
+    }
+    /**
+     * Snaps the chrome fully open or closed (the chevron control). The result
+     * is a manual pin — otherwise the very next scroll event would undo the
+     * choice. Collapsing manually also reclaims the compensation spacer so no
+     * dead space remains above the content.
+     */
+    toggle() {
+        const target = this.snapped() ? 0 : 1;
+        this._pinOrigin = 'manual';
+        this._animateSignal(this._spacerScale, target === 1 ? 0 : 1);
+        this._animateFrozenTo(target);
+    }
+    /** @private Tweens the frozen progress via the shared signal tween. */
+    _animateFrozenTo(target, done) {
+        this._frozenNumber.set(this.progress());
+        this._frozen.set(this.progress());
+        this._animateSignal(this._frozenNumber, target, done, (value) => this._frozen.set(value));
+    }
+    /** @private rAF tween so manual state changes stay smooth. */
+    _animateSignal(target, to, done, mirror) {
+        this._cancelTween(target);
+        const from = target();
+        const reducedMotion = typeof matchMedia !== 'undefined' &&
+            matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (reducedMotion ||
+            typeof requestAnimationFrame === 'undefined' ||
+            Math.abs(to - from) < 0.001) {
+            target.set(to);
+            mirror?.(to);
+            done?.();
+            return;
+        }
+        const durationMs = 200;
+        let startTime = null;
+        const step = (now) => {
+            startTime ??= now;
+            const t = Math.min((now - startTime) / durationMs, 1);
+            const eased = 1 - (1 - t) ** 3;
+            const value = from + (to - from) * eased;
+            target.set(value);
+            mirror?.(value);
+            if (t < 1) {
+                this._tweenFrames.set(target, requestAnimationFrame(step));
+            }
+            else {
+                this._tweenFrames.delete(target);
+                done?.();
+            }
+        };
+        this._tweenFrames.set(target, requestAnimationFrame(step));
+    }
+    /** @private Stops the running tween of one signal, if any. */
+    _cancelTween(target) {
+        const frame = this._tweenFrames.get(target);
+        if (frame !== undefined) {
+            cancelAnimationFrame(frame);
+            this._tweenFrames.delete(target);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapController });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnapController, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=page-snap-controller.js.map

package/esm2022/page/lib/page/page-snap-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-snap-controller.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page/page-snap-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computed,\n  DestroyRef,\n  inject,\n  Injectable,\n  signal,\n} from '@angular/core';\nimport type { WritableSignal, Signal } from '@angular/core';\n\n/** How the current pinned state came to be. */\ntype MlvPageSnapPinOrigin = 'manual' | 'scroll';\n\n/**\n * Owns the snap progress of a page's collapsing top chrome.\n *\n * Progress is **scroll-scrubbed**: `main[mlvPage]` maps its scroll offset onto\n * a 0..1 timeline (`snapRange` pixels of scroll = the full timeline), so\n * chrome motion is proportional to scrolling instead of a time-based\n * animation. The effective value is published as the `--mlv-page-snap` CSS\n * custom property on the page host; elements interpolate their own state from\n * it (see `MlvPageSnap`).\n *\n * Pinning distinguishes its origin:\n * - **Manual** (chevron toggle): an explicit choice — while manually pinned\n *   collapsed, the geometry-compensation spacer is reclaimed (`spacerScale`\n *   tweens to 0) so no dead space remains above the content, including at the\n *   top of the page.\n * - **Scroll** (pin button freezing a scroll-derived state): the frozen state\n *   is a scroll artifact — when the user returns to the top, the controller\n *   unpins automatically and the chrome expands.\n *\n * Provided by `MlvPage`. Inject optionally from header/summary components and\n * snap directives — absence simply means \"no scroll-linked behaviour\".\n */\n@Injectable()\nexport class MlvPageSnapController {\n  /** @private Raw scroll-derived progress, 0 (top) .. 1 (fully snapped). */\n  private readonly _scrollProgress = signal(0);\n\n  /**\n   * @private Frozen progress while pinned or after a manual toggle;\n   * `null` means the progress follows the scroll position.\n   */\n  private readonly _frozen = signal<number | null>(null);\n\n  /** @private How the current frozen state was produced. */\n  private _pinOrigin: MlvPageSnapPinOrigin | null = null;\n\n  /**\n   * @private Scale applied by `MlvPage` to the geometry-compensation spacer;\n   * tweens to 0 while manually pinned collapsed (dead space reclaimed).\n   */\n  private readonly _spacerScale = signal(1);\n\n  /** @private Frame handles of the running tweens, per animated signal. */\n  private readonly _tweenFrames = new Map<WritableSignal<number>, number>();\n\n  /** @private Adapter so the frozen tween can share the signal tween helper. */\n  private readonly _frozenNumber = signal(0);\n\n  /** @private Cancels pending tweens when the owning page is destroyed. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /** Effective snap progress: 0 fully expanded, 1 fully snapped. */\n  readonly progress = computed(() => this._frozen() ?? this._scrollProgress());\n\n  /** True while the chrome state is frozen and ignores scrolling. */\n  readonly pinned = computed(() => this._frozen() !== null);\n\n  /** True once the chrome is closer to its snapped state than the open one. */\n  readonly snapped = computed(() => this.progress() >= 0.5);\n\n  /**\n   * Multiplier for the geometry-compensation spacer, 1 (full compensation)\n   * .. 0 (reclaimed). Consumed by `MlvPage`.\n   */\n  readonly spacerScale: Signal<number> = this._spacerScale;\n\n  constructor() {\n    this._destroyRef.onDestroy(() => {\n      for (const frame of this._tweenFrames.values()) {\n        cancelAnimationFrame(frame);\n      }\n      this._tweenFrames.clear();\n    });\n  }\n\n  /**\n   * @internal Called by `MlvPage` on every scroll event of its viewport.\n   * A pinned controller keeps reporting the frozen value; a scroll-origin\n   * pin releases itself once the user returns to the top, where the frozen\n   * scroll artifact would only leave dead space.\n   */\n  updateFromScroll(scrollTop: number, snapRange: number): void {\n    const progress =\n      snapRange > 0 ? Math.min(Math.max(scrollTop / snapRange, 0), 1) : 0;\n    this._scrollProgress.set(progress);\n    if (this.pinned() && this._pinOrigin === 'scroll' && scrollTop <= 1) {\n      this.setPinned(false);\n    }\n  }\n\n  /**\n   * Pins the chrome at its current progress (`true`) or releases it back to\n   * scroll-following (`false`, animating to the scroll-derived value). A pin\n   * taken from a scroll-following state is a scroll-origin pin; pinning while\n   * already frozen by the chevron keeps the manual origin.\n   */\n  setPinned(pinned: boolean): void {\n    if (pinned === this.pinned()) {\n      return;\n    }\n    if (pinned) {\n      this._cancelTween(this._frozenNumber);\n      this._pinOrigin ??= 'scroll';\n      this._frozen.set(this.progress());\n      return;\n    }\n    this._pinOrigin = null;\n    this._animateSignal(this._spacerScale, 1);\n    this._animateFrozenTo(this._scrollProgress(), () => this._frozen.set(null));\n  }\n\n  /**\n   * Snaps the chrome fully open or closed (the chevron control). The result\n   * is a manual pin — otherwise the very next scroll event would undo the\n   * choice. Collapsing manually also reclaims the compensation spacer so no\n   * dead space remains above the content.\n   */\n  toggle(): void {\n    const target = this.snapped() ? 0 : 1;\n    this._pinOrigin = 'manual';\n    this._animateSignal(this._spacerScale, target === 1 ? 0 : 1);\n    this._animateFrozenTo(target);\n  }\n\n  /** @private Tweens the frozen progress via the shared signal tween. */\n  private _animateFrozenTo(target: number, done?: () => void): void {\n    this._frozenNumber.set(this.progress());\n    this._frozen.set(this.progress());\n    this._animateSignal(this._frozenNumber, target, done, (value) =>\n      this._frozen.set(value),\n    );\n  }\n\n  /** @private rAF tween so manual state changes stay smooth. */\n  private _animateSignal(\n    target: WritableSignal<number>,\n    to: number,\n    done?: () => void,\n    mirror?: (value: number) => void,\n  ): void {\n    this._cancelTween(target);\n    const from = target();\n    const reducedMotion =\n      typeof matchMedia !== 'undefined' &&\n      matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (\n      reducedMotion ||\n      typeof requestAnimationFrame === 'undefined' ||\n      Math.abs(to - from) < 0.001\n    ) {\n      target.set(to);\n      mirror?.(to);\n      done?.();\n      return;\n    }\n\n    const durationMs = 200;\n    let startTime: number | null = null;\n    const step = (now: number): void => {\n      startTime ??= now;\n      const t = Math.min((now - startTime) / durationMs, 1);\n      const eased = 1 - (1 - t) ** 3;\n      const value = from + (to - from) * eased;\n      target.set(value);\n      mirror?.(value);\n      if (t < 1) {\n        this._tweenFrames.set(target, requestAnimationFrame(step));\n      } else {\n        this._tweenFrames.delete(target);\n        done?.();\n      }\n    };\n    this._tweenFrames.set(target, requestAnimationFrame(step));\n  }\n\n  /** @private Stops the running tween of one signal, if any. */\n  private _cancelTween(target: WritableSignal<number>): void {\n    const frame = this._tweenFrames.get(target);\n    if (frame !== undefined) {\n      cancelAnimationFrame(frame);\n      this._tweenFrames.delete(target);\n    }\n  }\n}\n"]}

package/esm2022/page/lib/page/page-snap.directive.js

@@ -0,0 +1,65 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { MlvPageSnapController } from './page-snap-controller';
+import * as i0 from "@angular/core";
+/**
+ * Lets any element inside `main[mlvPage]` define its own state on the snap
+ * timeline. The element reads the page-level `--mlv-page-snap` progress,
+ * remaps it into its own stagger window (`snapFrom`..`snapTo`), and applies
+ * the chosen behaviour with pure CSS `calc()` interpolation — so the motion
+ * is scrubbed by scrolling, not played on a clock.
+ *
+ * ```html
+ * <div mlvPageSnap="hide" [snapFrom]="0.2" [snapTo]="0.7" snapSize="3rem">…</div>
+ * ```
+ */
+export class MlvPageSnap {
+    /** Behaviour on the snap timeline. An empty attribute value means `hide`. */
+    mlvPageSnap = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvPageSnap" }] : /* istanbul ignore next */ []));
+    /** Progress at which this element starts reacting (0..1). */
+    snapFrom = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapFrom" }] : /* istanbul ignore next */ []));
+    /** Progress at which this element reaches its final state (0..1). */
+    snapTo = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Nominal expanded size used by the `hide` behaviour's height scrub.
+     * Must be at least the element's natural height.
+     */
+    snapSize = input('3rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapSize" }] : /* istanbul ignore next */ []));
+    /** @private Snap state of the owning page, when rendered inside one. */
+    _controller = inject(MlvPageSnapController, {
+        optional: true,
+    });
+    /** @protected Effective behaviour; the bare attribute defaults to `hide`. */
+    _mode = computed(() => this.mlvPageSnap() || 'hide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+    /** @protected Multiplier remapping page progress into the stagger window. */
+    _scale = computed(() => 1 / Math.max(this.snapTo() - this.snapFrom(), 0.001), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scale" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Removes hidden elements from the accessibility tree and tab
+     * order once their window of the timeline has fully elapsed.
+     */
+    _hidden = computed(() => this._mode() !== 'keep' &&
+        (this._controller?.progress() ?? 0) >= Math.min(this.snapTo(), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hidden" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnap, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageSnap, isStandalone: true, selector: "[mlvPageSnap]", inputs: { mlvPageSnap: { classPropertyName: "mlvPageSnap", publicName: "mlvPageSnap", isSignal: true, isRequired: false, transformFunction: null }, snapFrom: { classPropertyName: "snapFrom", publicName: "snapFrom", isSignal: true, isRequired: false, transformFunction: null }, snapTo: { classPropertyName: "snapTo", publicName: "snapTo", isSignal: true, isRequired: false, transformFunction: null }, snapSize: { classPropertyName: "snapSize", publicName: "snapSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mlv-page-snap--hide": "_mode() === \"hide\"", "class.mlv-page-snap--fade": "_mode() === \"fade\"", "style.--mlv-snap-from": "snapFrom()", "style.--mlv-snap-scale": "_scale()", "style.--mlv-snap-size": "snapSize()", "style.visibility": "_hidden() ? \"hidden\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSnap, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageSnap]',
+                    host: {
+                        '[class.mlv-page-snap--hide]': '_mode() === "hide"',
+                        '[class.mlv-page-snap--fade]': '_mode() === "fade"',
+                        '[style.--mlv-snap-from]': 'snapFrom()',
+                        '[style.--mlv-snap-scale]': '_scale()',
+                        '[style.--mlv-snap-size]': 'snapSize()',
+                        '[style.visibility]': '_hidden() ? "hidden" : null',
+                    },
+                }]
+        }], propDecorators: { mlvPageSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvPageSnap", required: false }] }], snapFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapFrom", required: false }] }], snapTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapTo", required: false }] }], snapSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapSize", required: false }] }] } });
+//# sourceMappingURL=page-snap.directive.js.map

package/esm2022/page/lib/page/page-snap.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-snap.directive.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page/page-snap.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;;AAK/D;;;;;;;;;;GAUG;AAYH,MAAM,OAAO,WAAW;IACtB,6EAA6E;IACpE,WAAW,GAAG,KAAK,CAAuB,EAAE;oFAAC,CAAC;IAEvD,6DAA6D;IACpD,QAAQ,GAAG,KAAK,CAAC,CAAC;iFAAC,CAAC;IAE7B,qEAAqE;IAC5D,MAAM,GAAG,KAAK,CAAC,CAAC;+EAAC,CAAC;IAE3B;;;OAGG;IACM,QAAQ,GAAG,KAAK,CAAC,MAAM;iFAAC,CAAC;IAElC,wEAAwE;IACvD,WAAW,GAAG,MAAM,CAAC,qBAAqB,EAAE;QAC3D,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,6EAA6E;IAC1D,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,MAAM;8EAAC,CAAC;IAExE,6EAA6E;IAC1D,MAAM,GAAG,QAAQ,CAClC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC;+EAC3D,CAAC;IAEF;;;OAGG;IACgB,OAAO,GAAG,QAAQ,CACnC,GAAG,EAAE,CACH,IAAI,CAAC,KAAK,EAAE,KAAK,MAAM;QACvB,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gFACpE,CAAC;uGArCS,WAAW;2FAAX,WAAW;;2FAAX,WAAW;kBAXvB,SAAS;mBAAC;oBACT,QAAQ,EAAE,eAAe;oBACzB,IAAI,EAAE;wBACJ,6BAA6B,EAAE,oBAAoB;wBACnD,6BAA6B,EAAE,oBAAoB;wBACnD,yBAAyB,EAAE,YAAY;wBACvC,0BAA0B,EAAE,UAAU;wBACtC,yBAAyB,EAAE,YAAY;wBACvC,oBAAoB,EAAE,6BAA6B;qBACpD;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { MlvPageSnapController } from './page-snap-controller';\n\n/** How an element behaves while the page chrome snaps. */\nexport type MlvPageSnapMode = 'hide' | 'fade' | 'keep';\n\n/**\n * Lets any element inside `main[mlvPage]` define its own state on the snap\n * timeline. The element reads the page-level `--mlv-page-snap` progress,\n * remaps it into its own stagger window (`snapFrom`..`snapTo`), and applies\n * the chosen behaviour with pure CSS `calc()` interpolation — so the motion\n * is scrubbed by scrolling, not played on a clock.\n *\n * ```html\n * <div mlvPageSnap=\"hide\" [snapFrom]=\"0.2\" [snapTo]=\"0.7\" snapSize=\"3rem\">…</div>\n * ```\n */\n@Directive({\n  selector: '[mlvPageSnap]',\n  host: {\n    '[class.mlv-page-snap--hide]': '_mode() === \"hide\"',\n    '[class.mlv-page-snap--fade]': '_mode() === \"fade\"',\n    '[style.--mlv-snap-from]': 'snapFrom()',\n    '[style.--mlv-snap-scale]': '_scale()',\n    '[style.--mlv-snap-size]': 'snapSize()',\n    '[style.visibility]': '_hidden() ? \"hidden\" : null',\n  },\n})\nexport class MlvPageSnap {\n  /** Behaviour on the snap timeline. An empty attribute value means `hide`. */\n  readonly mlvPageSnap = input<MlvPageSnapMode | ''>('');\n\n  /** Progress at which this element starts reacting (0..1). */\n  readonly snapFrom = input(0);\n\n  /** Progress at which this element reaches its final state (0..1). */\n  readonly snapTo = input(1);\n\n  /**\n   * Nominal expanded size used by the `hide` behaviour's height scrub.\n   * Must be at least the element's natural height.\n   */\n  readonly snapSize = input('3rem');\n\n  /** @private Snap state of the owning page, when rendered inside one. */\n  private readonly _controller = inject(MlvPageSnapController, {\n    optional: true,\n  });\n\n  /** @protected Effective behaviour; the bare attribute defaults to `hide`. */\n  protected readonly _mode = computed(() => this.mlvPageSnap() || 'hide');\n\n  /** @protected Multiplier remapping page progress into the stagger window. */\n  protected readonly _scale = computed(\n    () => 1 / Math.max(this.snapTo() - this.snapFrom(), 0.001),\n  );\n\n  /**\n   * @protected Removes hidden elements from the accessibility tree and tab\n   * order once their window of the timeline has fully elapsed.\n   */\n  protected readonly _hidden = computed(\n    () =>\n      this._mode() !== 'keep' &&\n      (this._controller?.progress() ?? 0) >= Math.min(this.snapTo(), 1),\n  );\n}\n"]}

package/esm2022/page/lib/page/page.js

@@ -0,0 +1,173 @@
+import { afterNextRender, afterRenderEffect, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, input, NgZone, signal, ViewEncapsulation, viewChild, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { MlvPageSnapController } from './page-snap-controller';
+import { MLV_PAGE_SCROLL } from './page-scroll.token';
+import * as i0 from "@angular/core";
+/**
+ * Scroll offset in pixels below which the page reports itself as unscrolled.
+ * The small hysteresis avoids flicker from sub-pixel scroll positions.
+ */
+const SCROLLED_THRESHOLD = 4;
+/**
+ * Main page surface and scroll owner. Apply it to the page's native `<main>`
+ * landmark and compose headers, content grids, and feature components inside.
+ *
+ * Provides `MLV_PAGE_SCROLL` so descendants such as `mlv-page-header` and
+ * `mlv-page-summary` can react to the page's scroll position, and
+ * `MlvPageSnapController`, whose scroll-scrubbed progress it publishes as the
+ * `--mlv-page-snap` custom property (0 expanded .. 1 snapped) for descendants
+ * to interpolate their snap state from.
+ */
+export class MlvPage {
+    /** Unique landmark id; set explicitly when targeting the page from a skip link. */
+    id = input(mlvNextId('mlv-page'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Selects whether the page or a consumer-owned region handles scrolling. */
+    scroll = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    /** Optional maximum width for the centred inner page canvas. */
+    maxWidth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /** Selects the responsive inset applied around projected page content. */
+    padding = input('m', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Selects the anchored rounded canvas or a completely flat surface. */
+    surface = input('anchored', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    /** Makes projected page headers sticky within this page's scroll container. */
+    stickyHeader = input(true, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Scroll distance in pixels mapped onto the full snap timeline: scrolling
+     * this far takes the top chrome from fully expanded to fully snapped.
+     */
+    snapRange = input(96, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapRange" }] : /* istanbul ignore next */ []));
+    /** Current vertical scroll offset of the page scroll owner, in pixels. */
+    get scrollTop() {
+        return this._scrollTop.asReadonly();
+    }
+    /** True once the page has scrolled past a small hysteresis threshold. */
+    get scrolled() {
+        return this._scrolled.asReadonly();
+    }
+    /** @private Writable source behind the public `scrollTop` signal. */
+    _scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollTop" }] : /* istanbul ignore next */ []));
+    /** @private Writable source behind the public `scrolled` signal. */
+    _scrolled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrolled" }] : /* istanbul ignore next */ []));
+    /** @private The page-owned scrollbar whose viewport is observed. */
+    _scrollbar = viewChild.required(MlvScrollbar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollbar" }] : /* istanbul ignore next */ []));
+    /** @private Zone reference; the scroll listener runs outside the zone. */
+    _ngZone = inject(NgZone);
+    /** @private Cleans up the native scroll listener. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Snap state provided to descendants and scrubbed from scroll. */
+    _snap = inject(MlvPageSnapController);
+    /** @private Host element carrying the published snap custom property. */
+    _elementRef = inject(ElementRef);
+    constructor() {
+        afterNextRender(() => {
+            const viewport = this._scrollbar().viewportElement;
+            const onScroll = () => {
+                const top = viewport.scrollTop;
+                this._scrollTop.set(top);
+                this._scrolled.set(top > SCROLLED_THRESHOLD);
+                this._snap.updateFromScroll(top, this.snapRange());
+            };
+            // Signal writes propagate through the reactivity graph without zone
+            // involvement, so the frequent listener can stay outside the zone.
+            this._ngZone.runOutsideAngular(() => {
+                viewport.addEventListener('scroll', onScroll, { passive: true });
+            });
+            this._destroyRef.onDestroy(() => {
+                viewport.removeEventListener('scroll', onScroll);
+            });
+        });
+        // Publish the effective snap progress as a CSS custom property so
+        // descendant styles can scrub their state with pure calc() interpolation,
+        // then rebalance the chrome spacer against the freshly applied progress.
+        afterRenderEffect(() => {
+            const progress = this._snap.progress();
+            // Track the spacer scale too: the reclaim tween must republish.
+            this._snap.spacerScale();
+            this._elementRef.nativeElement.style.setProperty('--mlv-page-snap', String(Math.round(progress * 1000) / 1000));
+            this._measureSnapOffset();
+        });
+        afterNextRender(() => {
+            const host = this._elementRef.nativeElement;
+            this._snapChrome = Array.from(host.querySelectorAll('.mlv-page__inner > .mlv-page-header, .mlv-page__inner > .mlv-page-summary'));
+            this._measureSnapOffset();
+            // Re-measure when chrome content itself resizes (wrapping, data).
+            if (typeof ResizeObserver !== 'undefined') {
+                const observer = new ResizeObserver(() => this._measureSnapOffset());
+                this._snapChrome.forEach((element) => observer.observe(element));
+                this._destroyRef.onDestroy(() => observer.disconnect());
+            }
+        });
+    }
+    /** @private Direct chrome children whose snapping height is compensated. */
+    _snapChrome = [];
+    /** @private Expanded (progress 0) chrome height, the compensation baseline. */
+    _snapExpandedHeight = 0;
+    /**
+     * @private Snapping shrinks in-flow chrome (the header with its projected
+     * summary row), which would shift the content and the scroll height while
+     * the user is still scrolling — a feedback loop that reads as mid-scroll
+     * jumping. The removed height is re-added as a spacer after the chrome
+     * (`--mlv-page-snap-offset`), keeping the document geometry stable so
+     * content tracks the scroll 1:1. The controller's `spacerScale` scales the
+     * spacer away while the chrome is manually pinned collapsed — a frozen
+     * chrome never changes height mid-scroll, so the spacer is pure dead space.
+     */
+    _measureSnapOffset() {
+        if (this._snapChrome.length === 0) {
+            return;
+        }
+        const total = this._snapChrome.reduce((sum, element) => sum + element.offsetHeight, 0);
+        if (this._snap.progress() <= 0.001) {
+            this._snapExpandedHeight = total;
+        }
+        const offset = Math.max(0, this._snapExpandedHeight - total) * this._snap.spacerScale();
+        this._elementRef.nativeElement.style.setProperty('--mlv-page-snap-offset', `${Math.round(offset * 100) / 100}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvPage, isStandalone: true, selector: "main[mlvPage]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, snapRange: { classPropertyName: "snapRange", publicName: "snapRange", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, properties: { "id": "id()", "class.mlv-page--scroll-auto": "scroll() === \"auto\"", "class.mlv-page--scroll-none": "scroll() === \"none\"", "class.mlv-page--padding-none": "padding() === \"none\"", "class.mlv-page--padding-s": "padding() === \"s\"", "class.mlv-page--padding-m": "padding() === \"m\"", "class.mlv-page--padding-l": "padding() === \"l\"", "class.mlv-page--surface-anchored": "surface() === \"anchored\"", "class.mlv-page--surface-flat": "surface() === \"flat\"", "class.mlv-page--sticky-header": "stickyHeader()", "class.mlv-page--scrolled": "scrolled()", "style.--mlv-page-max-width": "maxWidth()" }, classAttribute: "mlv-page" }, providers: [
+            { provide: MLV_PAGE_SCROLL, useExisting: MlvPage },
+            MlvPageSnapController,
+        ], viewQueries: [{ propertyName: "_scrollbar", first: true, predicate: MlvScrollbar, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <mlv-scrollbar class="mlv-page__scrollbar" [disabled]="scroll() === 'none'">
+      <div class="mlv-page__inner"><ng-content /></div>
+    </mlv-scrollbar>
+  `, isInline: true, styles: [".mlv-page{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page *{box-sizing:border-box}.mlv-page{display:block;flex:1 1 auto;min-width:0;min-height:0;color:var(--mlv-text-primary);background:var(--mlv-background-base);outline:none;isolation:isolate}.mlv-page__scrollbar{width:100%;height:100%;min-height:0}.mlv-page__scrollbar .mlv-scrollbar__viewport{overflow-x:hidden;scroll-padding-top:var(--mlv-page-header-offset, 6rem);overflow-anchor:none}.mlv-page__inner{container-type:inline-size;width:100%;min-height:100%;max-width:var(--mlv-page-max-width, none);margin-inline:auto}.mlv-page--surface-anchored{border:.0625rem solid var(--mlv-border-subtle);border-bottom:0;border-radius:var(--mlv-radius-xl) var(--mlv-radius-xl) 0 0}.mlv-page--surface-flat{border-radius:0}.mlv-page--scroll-auto,.mlv-page--scroll-none,.mlv-page--scroll-none .mlv-page__scrollbar .mlv-scrollbar__viewport{overflow:clip}.mlv-page--padding-none .mlv-page__inner{--mlv-page-inset: 0rem;padding:0}.mlv-page--padding-s .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-1-5);padding:var(--mlv-page-inset)}.mlv-page--padding-m .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-2);padding:var(--mlv-page-inset)}.mlv-page--padding-l .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-3);padding:var(--mlv-page-inset)}.mlv-page__inner>.mlv-page-header,.mlv-page__inner>.mlv-page-summary{margin-inline:calc(-1 * var(--mlv-page-inset, 0rem))}.mlv-page__inner>.mlv-page-header{margin-top:calc(-1 * var(--mlv-page-inset, 0rem));border-radius:0}.mlv-page__inner>.mlv-page-summary,.mlv-page__inner>.mlv-page-header:not(:has(~.mlv-page-summary)){margin-bottom:var(--mlv-page-snap-offset, 0rem)}.mlv-page--sticky-header .mlv-page-header{position:sticky;top:0;z-index:10}.mlv-page:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-page-snap--hide,.mlv-page-snap--fade{--mlv-snap-progress: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, 0)) * var(--mlv-snap-scale, 1), 1 )}.mlv-page-snap--fade{opacity:calc(1 - var(--mlv-snap-progress))}.mlv-page-snap--hide{max-height:calc(var(--mlv-snap-size, 3rem) * (1 - var(--mlv-snap-progress)));overflow:hidden;opacity:calc(1 - var(--mlv-snap-progress) * 1.5);transform:translateY(calc(-.5rem * var(--mlv-snap-progress)))}\n"], dependencies: [{ kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'main[mlvPage]', template: `
+    <mlv-scrollbar class="mlv-page__scrollbar" [disabled]="scroll() === 'none'">
+      <div class="mlv-page__inner"><ng-content /></div>
+    </mlv-scrollbar>
+  `, imports: [MlvScrollbar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: MLV_PAGE_SCROLL, useExisting: MlvPage },
+                        MlvPageSnapController,
+                    ], host: {
+                        class: 'mlv-page',
+                        '[id]': 'id()',
+                        tabindex: '-1',
+                        '[class.mlv-page--scroll-auto]': 'scroll() === "auto"',
+                        '[class.mlv-page--scroll-none]': 'scroll() === "none"',
+                        '[class.mlv-page--padding-none]': 'padding() === "none"',
+                        '[class.mlv-page--padding-s]': 'padding() === "s"',
+                        '[class.mlv-page--padding-m]': 'padding() === "m"',
+                        '[class.mlv-page--padding-l]': 'padding() === "l"',
+                        '[class.mlv-page--surface-anchored]': 'surface() === "anchored"',
+                        '[class.mlv-page--surface-flat]': 'surface() === "flat"',
+                        '[class.mlv-page--sticky-header]': 'stickyHeader()',
+                        '[class.mlv-page--scrolled]': 'scrolled()',
+                        '[style.--mlv-page-max-width]': 'maxWidth()',
+                    }, styles: [".mlv-page{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page *{box-sizing:border-box}.mlv-page{display:block;flex:1 1 auto;min-width:0;min-height:0;color:var(--mlv-text-primary);background:var(--mlv-background-base);outline:none;isolation:isolate}.mlv-page__scrollbar{width:100%;height:100%;min-height:0}.mlv-page__scrollbar .mlv-scrollbar__viewport{overflow-x:hidden;scroll-padding-top:var(--mlv-page-header-offset, 6rem);overflow-anchor:none}.mlv-page__inner{container-type:inline-size;width:100%;min-height:100%;max-width:var(--mlv-page-max-width, none);margin-inline:auto}.mlv-page--surface-anchored{border:.0625rem solid var(--mlv-border-subtle);border-bottom:0;border-radius:var(--mlv-radius-xl) var(--mlv-radius-xl) 0 0}.mlv-page--surface-flat{border-radius:0}.mlv-page--scroll-auto,.mlv-page--scroll-none,.mlv-page--scroll-none .mlv-page__scrollbar .mlv-scrollbar__viewport{overflow:clip}.mlv-page--padding-none .mlv-page__inner{--mlv-page-inset: 0rem;padding:0}.mlv-page--padding-s .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-1-5);padding:var(--mlv-page-inset)}.mlv-page--padding-m .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-2);padding:var(--mlv-page-inset)}.mlv-page--padding-l .mlv-page__inner{--mlv-page-inset: var(--mlv-spacing-3);padding:var(--mlv-page-inset)}.mlv-page__inner>.mlv-page-header,.mlv-page__inner>.mlv-page-summary{margin-inline:calc(-1 * var(--mlv-page-inset, 0rem))}.mlv-page__inner>.mlv-page-header{margin-top:calc(-1 * var(--mlv-page-inset, 0rem));border-radius:0}.mlv-page__inner>.mlv-page-summary,.mlv-page__inner>.mlv-page-header:not(:has(~.mlv-page-summary)){margin-bottom:var(--mlv-page-snap-offset, 0rem)}.mlv-page--sticky-header .mlv-page-header{position:sticky;top:0;z-index:10}.mlv-page:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-page-snap--hide,.mlv-page-snap--fade{--mlv-snap-progress: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, 0)) * var(--mlv-snap-scale, 1), 1 )}.mlv-page-snap--fade{opacity:calc(1 - var(--mlv-snap-progress))}.mlv-page-snap--hide{max-height:calc(var(--mlv-snap-size, 3rem) * (1 - var(--mlv-snap-progress)));overflow:hidden;opacity:calc(1 - var(--mlv-snap-progress) * 1.5);transform:translateY(calc(-.5rem * var(--mlv-snap-progress)))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], snapRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapRange", required: false }] }], _scrollbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MlvScrollbar), { isSignal: true }] }] } });
+//# sourceMappingURL=page.js.map

package/esm2022/page/lib/page/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page/page.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  afterNextRender,\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  NgZone,\n  signal,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport { MlvScrollbar } from '@malva-ui/core/scrollbar';\nimport { MlvPageSnapController } from './page-snap-controller';\nimport { MLV_PAGE_SCROLL } from './page-scroll.token';\nimport type { MlvPageScrollState } from './page-scroll.token';\n\n/** Controls which element owns vertical page scrolling. */\nexport type MlvPageScroll = 'auto' | 'none';\n\n/** Controls the inset around projected page content. */\nexport type MlvPagePadding = 'none' | 's' | 'm' | 'l';\n\n/** Controls whether the page uses the anchored application-canvas treatment. */\nexport type MlvPageSurface = 'anchored' | 'flat';\n\n/**\n * Scroll offset in pixels below which the page reports itself as unscrolled.\n * The small hysteresis avoids flicker from sub-pixel scroll positions.\n */\nconst SCROLLED_THRESHOLD = 4;\n\n/**\n * Main page surface and scroll owner. Apply it to the page's native `<main>`\n * landmark and compose headers, content grids, and feature components inside.\n *\n * Provides `MLV_PAGE_SCROLL` so descendants such as `mlv-page-header` and\n * `mlv-page-summary` can react to the page's scroll position, and\n * `MlvPageSnapController`, whose scroll-scrubbed progress it publishes as the\n * `--mlv-page-snap` custom property (0 expanded .. 1 snapped) for descendants\n * to interpolate their snap state from.\n */\n@Component({\n  // Attribute-selector component intentionally enhances the native main landmark.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'main[mlvPage]',\n  template: `\n    <mlv-scrollbar class=\"mlv-page__scrollbar\" [disabled]=\"scroll() === 'none'\">\n      <div class=\"mlv-page__inner\"><ng-content /></div>\n    </mlv-scrollbar>\n  `,\n  imports: [MlvScrollbar],\n  styleUrl: './page.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    { provide: MLV_PAGE_SCROLL, useExisting: MlvPage },\n    MlvPageSnapController,\n  ],\n  host: {\n    class: 'mlv-page',\n    '[id]': 'id()',\n    tabindex: '-1',\n    '[class.mlv-page--scroll-auto]': 'scroll() === \"auto\"',\n    '[class.mlv-page--scroll-none]': 'scroll() === \"none\"',\n    '[class.mlv-page--padding-none]': 'padding() === \"none\"',\n    '[class.mlv-page--padding-s]': 'padding() === \"s\"',\n    '[class.mlv-page--padding-m]': 'padding() === \"m\"',\n    '[class.mlv-page--padding-l]': 'padding() === \"l\"',\n    '[class.mlv-page--surface-anchored]': 'surface() === \"anchored\"',\n    '[class.mlv-page--surface-flat]': 'surface() === \"flat\"',\n    '[class.mlv-page--sticky-header]': 'stickyHeader()',\n    '[class.mlv-page--scrolled]': 'scrolled()',\n    '[style.--mlv-page-max-width]': 'maxWidth()',\n  },\n})\nexport class MlvPage implements MlvPageScrollState {\n  /** Unique landmark id; set explicitly when targeting the page from a skip link. */\n  readonly id = input(mlvNextId('mlv-page'));\n\n  /** Selects whether the page or a consumer-owned region handles scrolling. */\n  readonly scroll = input<MlvPageScroll>('auto');\n\n  /** Optional maximum width for the centred inner page canvas. */\n  readonly maxWidth = input<string | null>(null);\n\n  /** Selects the responsive inset applied around projected page content. */\n  readonly padding = input<MlvPagePadding>('m');\n\n  /** Selects the anchored rounded canvas or a completely flat surface. */\n  readonly surface = input<MlvPageSurface>('anchored');\n\n  /** Makes projected page headers sticky within this page's scroll container. */\n  readonly stickyHeader = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Scroll distance in pixels mapped onto the full snap timeline: scrolling\n   * this far takes the top chrome from fully expanded to fully snapped.\n   */\n  readonly snapRange = input(96);\n\n  /** Current vertical scroll offset of the page scroll owner, in pixels. */\n  get scrollTop(): MlvPageScrollState['scrollTop'] {\n    return this._scrollTop.asReadonly();\n  }\n\n  /** True once the page has scrolled past a small hysteresis threshold. */\n  get scrolled(): MlvPageScrollState['scrolled'] {\n    return this._scrolled.asReadonly();\n  }\n\n  /** @private Writable source behind the public `scrollTop` signal. */\n  private readonly _scrollTop = signal(0);\n\n  /** @private Writable source behind the public `scrolled` signal. */\n  private readonly _scrolled = signal(false);\n\n  /** @private The page-owned scrollbar whose viewport is observed. */\n  private readonly _scrollbar = viewChild.required(MlvScrollbar);\n\n  /** @private Zone reference; the scroll listener runs outside the zone. */\n  private readonly _ngZone = inject(NgZone);\n\n  /** @private Cleans up the native scroll listener. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /** @private Snap state provided to descendants and scrubbed from scroll. */\n  private readonly _snap = inject(MlvPageSnapController);\n\n  /** @private Host element carrying the published snap custom property. */\n  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor() {\n    afterNextRender(() => {\n      const viewport = this._scrollbar().viewportElement;\n      const onScroll = (): void => {\n        const top = viewport.scrollTop;\n        this._scrollTop.set(top);\n        this._scrolled.set(top > SCROLLED_THRESHOLD);\n        this._snap.updateFromScroll(top, this.snapRange());\n      };\n      // Signal writes propagate through the reactivity graph without zone\n      // involvement, so the frequent listener can stay outside the zone.\n      this._ngZone.runOutsideAngular(() => {\n        viewport.addEventListener('scroll', onScroll, { passive: true });\n      });\n      this._destroyRef.onDestroy(() => {\n        viewport.removeEventListener('scroll', onScroll);\n      });\n    });\n\n    // Publish the effective snap progress as a CSS custom property so\n    // descendant styles can scrub their state with pure calc() interpolation,\n    // then rebalance the chrome spacer against the freshly applied progress.\n    afterRenderEffect(() => {\n      const progress = this._snap.progress();\n      // Track the spacer scale too: the reclaim tween must republish.\n      this._snap.spacerScale();\n      this._elementRef.nativeElement.style.setProperty(\n        '--mlv-page-snap',\n        String(Math.round(progress * 1000) / 1000),\n      );\n      this._measureSnapOffset();\n    });\n\n    afterNextRender(() => {\n      const host = this._elementRef.nativeElement;\n      this._snapChrome = Array.from(\n        host.querySelectorAll<HTMLElement>(\n          '.mlv-page__inner > .mlv-page-header, .mlv-page__inner > .mlv-page-summary',\n        ),\n      );\n      this._measureSnapOffset();\n      // Re-measure when chrome content itself resizes (wrapping, data).\n      if (typeof ResizeObserver !== 'undefined') {\n        const observer = new ResizeObserver(() => this._measureSnapOffset());\n        this._snapChrome.forEach((element) => observer.observe(element));\n        this._destroyRef.onDestroy(() => observer.disconnect());\n      }\n    });\n  }\n\n  /** @private Direct chrome children whose snapping height is compensated. */\n  private _snapChrome: HTMLElement[] = [];\n\n  /** @private Expanded (progress 0) chrome height, the compensation baseline. */\n  private _snapExpandedHeight = 0;\n\n  /**\n   * @private Snapping shrinks in-flow chrome (the header with its projected\n   * summary row), which would shift the content and the scroll height while\n   * the user is still scrolling — a feedback loop that reads as mid-scroll\n   * jumping. The removed height is re-added as a spacer after the chrome\n   * (`--mlv-page-snap-offset`), keeping the document geometry stable so\n   * content tracks the scroll 1:1. The controller's `spacerScale` scales the\n   * spacer away while the chrome is manually pinned collapsed — a frozen\n   * chrome never changes height mid-scroll, so the spacer is pure dead space.\n   */\n  private _measureSnapOffset(): void {\n    if (this._snapChrome.length === 0) {\n      return;\n    }\n    const total = this._snapChrome.reduce(\n      (sum, element) => sum + element.offsetHeight,\n      0,\n    );\n    if (this._snap.progress() <= 0.001) {\n      this._snapExpandedHeight = total;\n    }\n    const offset =\n      Math.max(0, this._snapExpandedHeight - total) * this._snap.spacerScale();\n    this._elementRef.nativeElement.style.setProperty(\n      '--mlv-page-snap-offset',\n      `${Math.round(offset * 100) / 100}px`,\n    );\n  }\n}\n"]}

package/esm2022/page/lib/page-content/page-aside.js

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+/** Marks content rendered in the complementary page-aside landmark. */
+export class MlvPageAside extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageAside, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageAside, isStandalone: true, selector: "[mlvPageAside]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageAside, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvPageAside]' }]
+        }] });
+//# sourceMappingURL=page-aside.js.map

package/esm2022/page/lib/page-content/page-aside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-aside.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-content/page-aside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAEpD,uEAAuE;AAEvE,MAAM,OAAO,YAAa,SAAQ,aAAa;uGAAlC,YAAY;2FAAZ,YAAY;;2FAAZ,YAAY;kBADxB,SAAS;mBAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n/** Marks content rendered in the complementary page-aside landmark. */\n@Directive({ selector: '[mlvPageAside]' })\nexport class MlvPageAside extends MlvStructural {}\n"]}

package/esm2022/page/lib/page-content/page-content.js

@@ -0,0 +1,72 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewEncapsulation, computed, contentChild, inject, input, signal, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MlvResizeObserverService } from '@malva-ui/cdk/utils';
+import { MlvPageAside } from './page-aside';
+import * as i0 from "@angular/core";
+/** Responsive main-content and complementary-aside grid. */
+export class MlvPageContent {
+    /** Places the complementary column before or after the main content. */
+    asidePlacement = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asidePlacement" }] : /* istanbul ignore next */ []));
+    /** Preferred width of the complementary column while rendered inline. */
+    asideWidth = input('20rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideWidth" }] : /* istanbul ignore next */ []));
+    /** Keeps the complementary column visible while the page scrolls. */
+    asideSticky = input(true, { ...(ngDevMode ? { debugName: "asideSticky" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Selects the spacing between the main and complementary columns. */
+    gap = input('m', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Container width in CSS pixels below which the columns stack. */
+    stackBelow = input(1024, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackBelow" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the complementary `<aside>` landmark. */
+    asideLabel = input('Related content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Optional complementary content projected via `[mlvPageAside]`. */
+    _asideRef = contentChild(MlvPageAside, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asideRef" }] : /* istanbul ignore next */ []));
+    /** @private Host element observed so responsiveness follows available content width. */
+    _elementRef = inject((ElementRef));
+    /** @private Shared observer used to measure the page-content container. */
+    _resizeObserver = inject(MlvResizeObserverService);
+    /** @private Destroy scope for the resize-observer subscription. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Latest measured inline size in CSS pixels. */
+    _containerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the current container is narrower than `stackBelow`. */
+    _stacked = computed(() => {
+        const width = this._containerWidth();
+        return width > 0 && width < this.stackBelow();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stacked" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this._resizeObserver
+            .observe(this._elementRef)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((entries) => {
+            const width = entries[entries.length - 1]?.contentRect.width;
+            if (width !== undefined)
+                this._containerWidth.set(width);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPageContent, isStandalone: true, selector: "mlv-page-content", inputs: { asidePlacement: { classPropertyName: "asidePlacement", publicName: "asidePlacement", isSignal: true, isRequired: false, transformFunction: null }, asideWidth: { classPropertyName: "asideWidth", publicName: "asideWidth", isSignal: true, isRequired: false, transformFunction: null }, asideSticky: { classPropertyName: "asideSticky", publicName: "asideSticky", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, stackBelow: { classPropertyName: "stackBelow", publicName: "stackBelow", isSignal: true, isRequired: false, transformFunction: null }, asideLabel: { classPropertyName: "asideLabel", publicName: "asideLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mlv-page-content--aside-start": "asidePlacement() === \"start\"", "class.mlv-page-content--aside-end": "asidePlacement() === \"end\"", "class.mlv-page-content--aside-sticky": "asideSticky()", "class.mlv-page-content--gap-s": "gap() === \"s\"", "class.mlv-page-content--gap-m": "gap() === \"m\"", "class.mlv-page-content--gap-l": "gap() === \"l\"", "class.mlv-page-content--stacked": "_stacked()", "style.--mlv-page-aside-width": "asideWidth()" }, classAttribute: "mlv-page-content" }, queries: [{ propertyName: "_asideRef", first: true, predicate: MlvPageAside, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mlv-page-content__main\"><ng-content /></div>\n\n@if (_asideRef()?.templateRef; as asideTpl) {\n<aside class=\"mlv-page-content__aside\" [attr.aria-label]=\"asideLabel()\">\n  <ng-template [ngTemplateOutlet]=\"asideTpl\" />\n</aside>\n}\n", styles: [".mlv-page-content{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-content *{box-sizing:border-box}.mlv-page-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--mlv-page-aside-width, 20rem));grid-template-areas:\"main aside\";align-items:start;min-width:0;padding-top:var(--mlv-spacing-2)}.mlv-page-content--aside-start{grid-template-columns:minmax(0,var(--mlv-page-aside-width, 20rem)) minmax(0,1fr);grid-template-areas:\"aside main\"}.mlv-page-content--gap-s{gap:var(--mlv-spacing-2)}.mlv-page-content--gap-m{gap:var(--mlv-spacing-4)}.mlv-page-content--gap-l{gap:var(--mlv-spacing-6)}.mlv-page-content__main{grid-area:main;min-width:0}.mlv-page-content__aside{grid-area:aside;min-width:0}.mlv-page-content--aside-sticky .mlv-page-content__aside{position:sticky;top:var(--mlv-page-aside-offset, var(--mlv-spacing-4))}.mlv-page-content--stacked{grid-template-columns:minmax(0,1fr);grid-template-areas:\"main\" \"aside\"}.mlv-page-content--stacked.mlv-page-content--aside-start{grid-template-areas:\"aside\" \"main\"}.mlv-page-content--stacked .mlv-page-content__aside{position:static}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-content', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-content',
+                        '[class.mlv-page-content--aside-start]': 'asidePlacement() === "start"',
+                        '[class.mlv-page-content--aside-end]': 'asidePlacement() === "end"',
+                        '[class.mlv-page-content--aside-sticky]': 'asideSticky()',
+                        '[class.mlv-page-content--gap-s]': 'gap() === "s"',
+                        '[class.mlv-page-content--gap-m]': 'gap() === "m"',
+                        '[class.mlv-page-content--gap-l]': 'gap() === "l"',
+                        '[class.mlv-page-content--stacked]': '_stacked()',
+                        '[style.--mlv-page-aside-width]': 'asideWidth()',
+                    }, template: "<div class=\"mlv-page-content__main\"><ng-content /></div>\n\n@if (_asideRef()?.templateRef; as asideTpl) {\n<aside class=\"mlv-page-content__aside\" [attr.aria-label]=\"asideLabel()\">\n  <ng-template [ngTemplateOutlet]=\"asideTpl\" />\n</aside>\n}\n", styles: [".mlv-page-content{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-content *{box-sizing:border-box}.mlv-page-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--mlv-page-aside-width, 20rem));grid-template-areas:\"main aside\";align-items:start;min-width:0;padding-top:var(--mlv-spacing-2)}.mlv-page-content--aside-start{grid-template-columns:minmax(0,var(--mlv-page-aside-width, 20rem)) minmax(0,1fr);grid-template-areas:\"aside main\"}.mlv-page-content--gap-s{gap:var(--mlv-spacing-2)}.mlv-page-content--gap-m{gap:var(--mlv-spacing-4)}.mlv-page-content--gap-l{gap:var(--mlv-spacing-6)}.mlv-page-content__main{grid-area:main;min-width:0}.mlv-page-content__aside{grid-area:aside;min-width:0}.mlv-page-content--aside-sticky .mlv-page-content__aside{position:sticky;top:var(--mlv-page-aside-offset, var(--mlv-spacing-4))}.mlv-page-content--stacked{grid-template-columns:minmax(0,1fr);grid-template-areas:\"main\" \"aside\"}.mlv-page-content--stacked.mlv-page-content--aside-start{grid-template-areas:\"aside\" \"main\"}.mlv-page-content--stacked .mlv-page-content__aside{position:static}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { asidePlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "asidePlacement", required: false }] }], asideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideWidth", required: false }] }], asideSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideSticky", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], stackBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackBelow", required: false }] }], asideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideLabel", required: false }] }], _asideRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPageAside), { isSignal: true }] }] } });
+//# sourceMappingURL=page-content.js.map

package/esm2022/page/lib/page-content/page-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-content.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-content/page-content.ts","../../../../../../../libs/core/page/src/lib/page-content/page-content.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;;AAQ5C,4DAA4D;AAoB5D,MAAM,OAAO,cAAc;IACzB,wEAAwE;IAC/D,cAAc,GAAG,KAAK,CAAwB,KAAK;uFAAC,CAAC;IAE9D,yEAAyE;IAChE,UAAU,GAAG,KAAK,CAAC,OAAO;mFAAC,CAAC;IAErC,qEAAqE;IAC5D,WAAW,GAAG,KAAK,CAAwB,IAAI,mFACtD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,sEAAsE;IAC7D,GAAG,GAAG,KAAK,CAAoB,GAAG;4EAAC,CAAC;IAE7C,mEAAmE;IAC1D,UAAU,GAAG,KAAK,CAAC,IAAI;mFAAC,CAAC;IAElC,gEAAgE;IACvD,UAAU,GAAG,KAAK,CAAC,iBAAiB;mFAAC,CAAC;IAE/C,gFAAgF;IAC7D,SAAS,GAAG,YAAY,CAAC,YAAY;kFAAC,CAAC;IAE1D,wFAAwF;IACvE,WAAW,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAE/D,2EAA2E;IAC1D,eAAe,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAC;IAEpE,mEAAmE;IAClD,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAElD,0DAA0D;IACzC,eAAe,GAAG,MAAM,CAAC,CAAC;wFAAC,CAAC;IAE7C,8EAA8E;IAC3D,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAChD,CAAC;iFAAC,CAAC;IAEH;QACE,IAAI,CAAC,eAAe;aACjB,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC;aACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAC1C,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC;YAC7D,IAAI,KAAK,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACP,CAAC;uGAlDU,cAAc;2FAAd,cAAc,q6CAsBmB,YAAY,gECnE1D,6PAOA,6tCDqBY,gBAAgB;;2FAiBf,cAAc;kBAnB1B,SAAS;+BACE,kBAAkB,WACnB,CAAC,gBAAgB,CAAC,iBAGZ,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,kBAAkB;wBACzB,uCAAuC,EAAE,8BAA8B;wBACvE,qCAAqC,EAAE,4BAA4B;wBACnE,wCAAwC,EAAE,eAAe;wBACzD,iCAAiC,EAAE,eAAe;wBAClD,iCAAiC,EAAE,eAAe;wBAClD,iCAAiC,EAAE,eAAe;wBAClD,mCAAmC,EAAE,YAAY;wBACjD,gCAAgC,EAAE,cAAc;qBACjD;4sBAwB2C,YAAY","sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  contentChild,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MlvResizeObserverService } from '@malva-ui/cdk/utils';\nimport { MlvPageAside } from './page-aside';\n\n/** Placement of the complementary page column. */\nexport type MlvPageAsidePlacement = 'start' | 'end';\n\n/** Spacing between the main page column and its complementary aside. */\nexport type MlvPageContentGap = 's' | 'm' | 'l';\n\n/** Responsive main-content and complementary-aside grid. */\n@Component({\n  selector: 'mlv-page-content',\n  imports: [NgTemplateOutlet],\n  templateUrl: './page-content.html',\n  styleUrl: './page-content.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-page-content',\n    '[class.mlv-page-content--aside-start]': 'asidePlacement() === \"start\"',\n    '[class.mlv-page-content--aside-end]': 'asidePlacement() === \"end\"',\n    '[class.mlv-page-content--aside-sticky]': 'asideSticky()',\n    '[class.mlv-page-content--gap-s]': 'gap() === \"s\"',\n    '[class.mlv-page-content--gap-m]': 'gap() === \"m\"',\n    '[class.mlv-page-content--gap-l]': 'gap() === \"l\"',\n    '[class.mlv-page-content--stacked]': '_stacked()',\n    '[style.--mlv-page-aside-width]': 'asideWidth()',\n  },\n})\nexport class MlvPageContent {\n  /** Places the complementary column before or after the main content. */\n  readonly asidePlacement = input<MlvPageAsidePlacement>('end');\n\n  /** Preferred width of the complementary column while rendered inline. */\n  readonly asideWidth = input('20rem');\n\n  /** Keeps the complementary column visible while the page scrolls. */\n  readonly asideSticky = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Selects the spacing between the main and complementary columns. */\n  readonly gap = input<MlvPageContentGap>('m');\n\n  /** Container width in CSS pixels below which the columns stack. */\n  readonly stackBelow = input(1024);\n\n  /** Accessible name for the complementary `<aside>` landmark. */\n  readonly asideLabel = input('Related content');\n\n  /** @protected Optional complementary content projected via `[mlvPageAside]`. */\n  protected readonly _asideRef = contentChild(MlvPageAside);\n\n  /** @private Host element observed so responsiveness follows available content width. */\n  private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n  /** @private Shared observer used to measure the page-content container. */\n  private readonly _resizeObserver = inject(MlvResizeObserverService);\n\n  /** @private Destroy scope for the resize-observer subscription. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /** @private Latest measured inline size in CSS pixels. */\n  private readonly _containerWidth = signal(0);\n\n  /** @protected Whether the current container is narrower than `stackBelow`. */\n  protected readonly _stacked = computed(() => {\n    const width = this._containerWidth();\n    return width > 0 && width < this.stackBelow();\n  });\n\n  constructor() {\n    this._resizeObserver\n      .observe(this._elementRef)\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe((entries) => {\n        const width = entries[entries.length - 1]?.contentRect.width;\n        if (width !== undefined) this._containerWidth.set(width);\n      });\n  }\n}\n","<div class=\"mlv-page-content__main\"><ng-content /></div>\n\n@if (_asideRef()?.templateRef; as asideTpl) {\n<aside class=\"mlv-page-content__aside\" [attr.aria-label]=\"asideLabel()\">\n  <ng-template [ngTemplateOutlet]=\"asideTpl\" />\n</aside>\n}\n"]}