@malva-ui/core 0.1.12

package/esm2022/page/lib/page-shell/page-shell.slots.js

@@ -0,0 +1,41 @@
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Marks the global top-navigation element projected into `mlv-page-shell`. */
+export class MlvPageTopbar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageTopbar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageTopbar, isStandalone: true, selector: "[mlvPageTopbar]", host: { classAttribute: "mlv-page-shell__topbar" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageTopbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageTopbar]',
+                    host: { class: 'mlv-page-shell__topbar' },
+                }]
+        }] });
+/** Marks the primary navigation sidebar projected into `mlv-page-shell`. */
+export class MlvPageSidebar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSidebar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageSidebar, isStandalone: true, selector: "[mlvPageSidebar]", host: { classAttribute: "mlv-page-shell__sidebar" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSidebar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageSidebar]',
+                    host: { class: 'mlv-page-shell__sidebar' },
+                }]
+        }] });
+/** Marks an optional second, trailing sidebar projected into `mlv-page-shell`. */
+export class MlvPageEndSidebar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndSidebar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPageEndSidebar, isStandalone: true, selector: "[mlvPageEndSidebar]", host: { classAttribute: "mlv-page-shell__sidebar mlv-page-shell__sidebar--end" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageEndSidebar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPageEndSidebar]',
+                    host: {
+                        class: 'mlv-page-shell__sidebar mlv-page-shell__sidebar--end',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=page-shell.slots.js.map

package/esm2022/page/lib/page-shell/page-shell.slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell.slots.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-shell/page-shell.slots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C,+EAA+E;AAK/E,MAAM,OAAO,aAAa;uGAAb,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBAJzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE;iBAC1C;;AAGD,4EAA4E;AAK5E,MAAM,OAAO,cAAc;uGAAd,cAAc;2FAAd,cAAc;;2FAAd,cAAc;kBAJ1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE;iBAC3C;;AAGD,kFAAkF;AAOlF,MAAM,OAAO,iBAAiB;uGAAjB,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAN7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,IAAI,EAAE;wBACJ,KAAK,EAAE,sDAAsD;qBAC9D;iBACF","sourcesContent":["import { Directive } from '@angular/core';\n\n/** Marks the global top-navigation element projected into `mlv-page-shell`. */\n@Directive({\n  selector: '[mlvPageTopbar]',\n  host: { class: 'mlv-page-shell__topbar' },\n})\nexport class MlvPageTopbar {}\n\n/** Marks the primary navigation sidebar projected into `mlv-page-shell`. */\n@Directive({\n  selector: '[mlvPageSidebar]',\n  host: { class: 'mlv-page-shell__sidebar' },\n})\nexport class MlvPageSidebar {}\n\n/** Marks an optional second, trailing sidebar projected into `mlv-page-shell`. */\n@Directive({\n  selector: '[mlvPageEndSidebar]',\n  host: {\n    class: 'mlv-page-shell__sidebar mlv-page-shell__sidebar--end',\n  },\n})\nexport class MlvPageEndSidebar {}\n"]}

package/esm2022/page/lib/page-summary/page-summary-item.js

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * One labelled key fact inside `mlv-page-summary`. The label renders above
+ * the projected value content.
+ */
+export class MlvPageSummaryItem {
+    /** Visible label describing the projected value. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummaryItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvPageSummaryItem, isStandalone: true, selector: "mlv-page-summary-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "mlv-page-summary-item" }, ngImport: i0, template: `
+    <span class="mlv-page-summary-item__label">{{ label() }}</span>
+    <div class="mlv-page-summary-item__value"><ng-content /></div>
+  `, isInline: true, styles: [".mlv-page-summary-item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary-item *{box-sizing:border-box}.mlv-page-summary-item{display:flex;flex:1 1 10rem;flex-direction:column;gap:var(--mlv-spacing-0-5);min-width:0}.mlv-page-summary-item__label{color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-summary-item__value{overflow:hidden;color:var(--mlv-text-primary);font-size:var(--mlv-typography-body-m-size);line-height:var(--mlv-typography-body-m-line-height);text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummaryItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-summary-item', template: `
+    <span class="mlv-page-summary-item__label">{{ label() }}</span>
+    <div class="mlv-page-summary-item__value"><ng-content /></div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-summary-item',
+                    }, styles: [".mlv-page-summary-item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary-item *{box-sizing:border-box}.mlv-page-summary-item{display:flex;flex:1 1 10rem;flex-direction:column;gap:var(--mlv-spacing-0-5);min-width:0}.mlv-page-summary-item__label{color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);line-height:var(--mlv-typography-body-s-line-height)}.mlv-page-summary-item__value{overflow:hidden;color:var(--mlv-text-primary);font-size:var(--mlv-typography-body-m-size);line-height:var(--mlv-typography-body-m-line-height);text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+//# sourceMappingURL=page-summary-item.js.map

package/esm2022/page/lib/page-summary/page-summary-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-summary-item.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-summary/page-summary-item.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,KAAK,GACN,MAAM,eAAe,CAAC;;AAEvB;;;GAGG;AAcH,MAAM,OAAO,kBAAkB;IAC7B,oDAAoD;IAC3C,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU,CAAC;uGAF/B,kBAAkB;2FAAlB,kBAAkB,uQAXnB;;;GAGT;;2FAQU,kBAAkB;kBAb9B,SAAS;+BACE,uBAAuB,YACvB;;;GAGT,iBAEc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,uBAAuB;qBAC/B","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\n/**\n * One labelled key fact inside `mlv-page-summary`. The label renders above\n * the projected value content.\n */\n@Component({\n  selector: 'mlv-page-summary-item',\n  template: `\n    <span class=\"mlv-page-summary-item__label\">{{ label() }}</span>\n    <div class=\"mlv-page-summary-item__value\"><ng-content /></div>\n  `,\n  styleUrl: './page-summary-item.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-page-summary-item',\n  },\n})\nexport class MlvPageSummaryItem {\n  /** Visible label describing the projected value. */\n  readonly label = input.required<string>();\n}\n"]}

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

@@ -0,0 +1,87 @@
+import { afterNextRender, ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, computed, inject, input, signal, viewChild, } from '@angular/core';
+import { MlvResizeObserverService } from '@malva-ui/cdk/utils';
+import { MlvPageSnapController } from '../page/page-snap-controller';
+import * as i0 from "@angular/core";
+/**
+ * Key-facts strip rendered under a page header. Projects
+ * `mlv-page-summary-item` children in a wrapping row.
+ *
+ * Inside `main[mlvPage]` the strip participates in the scroll-scrubbed snap
+ * timeline: its height and opacity are interpolated from the page-level
+ * `--mlv-page-snap` progress over the `snapFrom`..`snapTo` stagger window.
+ * Collapse/expand and pinning are controlled by the header's snap controls
+ * (`mlv-page-header[snapControls]`) through `MlvPageSnapController` — the
+ * strip itself is purely presentational.
+ */
+export class MlvPageSummary {
+    /** Accessible name for the facts region. */
+    summaryLabel = input('Page summary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaryLabel" }] : /* istanbul ignore next */ []));
+    /** Progress at which the strip starts collapsing (0..1). */
+    snapFrom = input(0.1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapFrom" }] : /* istanbul ignore next */ []));
+    /** Progress at which the strip is fully collapsed (0..1). */
+    snapTo = input(0.95, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapTo" }] : /* 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 */ []));
+    /** @private Snap state of the owning page, when rendered inside one. */
+    _snap = inject(MlvPageSnapController, { optional: true });
+    /**
+     * @protected True once the strip has fully collapsed; also removes it from
+     * the accessibility tree and tab order.
+     */
+    _snapped = computed(() => (this._snap?.progress() ?? 0) >= Math.min(this.snapTo(), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_snapped" }] : /* istanbul ignore next */ []));
+    /** @protected Natural height of the items row, driving the height scrub. */
+    _measuredHeight = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_measuredHeight" }] : /* istanbul ignore next */ []));
+    /** @private The measured items row. */
+    _items = viewChild.required('items', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const resizeObserver = inject(MlvResizeObserverService);
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const itemsEl = this._items().nativeElement;
+            // offsetHeight includes the row's own padding, matching the host
+            // max-height the scrub interpolates against.
+            this._measuredHeight.set(itemsEl.offsetHeight);
+            const subscription = resizeObserver.observe(itemsEl).subscribe(() => {
+                if (itemsEl.offsetHeight > 0) {
+                    this._measuredHeight.set(itemsEl.offsetHeight);
+                }
+            });
+            destroyRef.onDestroy(() => subscription.unsubscribe());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvPageSummary, isStandalone: true, selector: "mlv-page-summary", inputs: { summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", 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 } }, host: { properties: { "class.mlv-page-summary--snapped": "_snapped()", "style.--mlv-snap-from": "snapFrom()", "style.--mlv-snap-scale": "_scale()", "style.--mlv-page-summary-size": "_measuredHeight()", "style.visibility": "_snapped() ? \"hidden\" : null" }, classAttribute: "mlv-page-summary" }, viewQueries: [{ propertyName: "_items", first: true, predicate: ["items"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    #items
+    class="mlv-page-summary__items"
+    role="group"
+    [attr.aria-label]="summaryLabel()"
+  >
+    <ng-content />
+  </div>`, isInline: true, styles: [".mlv-page-summary{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary *{box-sizing:border-box}.mlv-page-summary{--mlv-page-summary-snap: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, .1)) * var(--mlv-snap-scale, 1.18), 1 );position:relative;z-index:9;display:block;min-width:0;max-height:calc(var(--mlv-page-summary-size, 480) * 1px * (1 - var(--mlv-page-summary-snap)));overflow:hidden;background-color:var(--mlv-page-chrome-bg, color-mix(in srgb, var(--mlv-elevation-bg-3), transparent 50%));border-bottom:.0625rem solid var(--mlv-page-chrome-border, var(--mlv-border-subtle));backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem);opacity:calc(1 - var(--mlv-page-summary-snap) * 1.25)}.mlv-page-summary__items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--mlv-spacing-2) var(--mlv-spacing-4);padding:var(--mlv-spacing-2) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3)) var(--mlv-spacing-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPageSummary, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-page-summary', template: `<div
+    #items
+    class="mlv-page-summary__items"
+    role="group"
+    [attr.aria-label]="summaryLabel()"
+  >
+    <ng-content />
+  </div>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-page-summary',
+                        '[class.mlv-page-summary--snapped]': '_snapped()',
+                        '[style.--mlv-snap-from]': 'snapFrom()',
+                        '[style.--mlv-snap-scale]': '_scale()',
+                        '[style.--mlv-page-summary-size]': '_measuredHeight()',
+                        '[style.visibility]': '_snapped() ? "hidden" : null',
+                    }, styles: [".mlv-page-summary{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-page-summary *{box-sizing:border-box}.mlv-page-summary{--mlv-page-summary-snap: clamp( 0, (var(--mlv-page-snap, 0) - var(--mlv-snap-from, .1)) * var(--mlv-snap-scale, 1.18), 1 );position:relative;z-index:9;display:block;min-width:0;max-height:calc(var(--mlv-page-summary-size, 480) * 1px * (1 - var(--mlv-page-summary-snap)));overflow:hidden;background-color:var(--mlv-page-chrome-bg, color-mix(in srgb, var(--mlv-elevation-bg-3), transparent 50%));border-bottom:.0625rem solid var(--mlv-page-chrome-border, var(--mlv-border-subtle));backdrop-filter:blur(1.25rem);-webkit-backdrop-filter:blur(1.25rem);opacity:calc(1 - var(--mlv-page-summary-snap) * 1.25)}.mlv-page-summary__items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--mlv-spacing-2) var(--mlv-spacing-4);padding:var(--mlv-spacing-2) max(var(--mlv-page-inset, 0rem),var(--mlv-spacing-3)) var(--mlv-spacing-4)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], snapFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapFrom", required: false }] }], snapTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapTo", required: false }] }], _items: [{ type: i0.ViewChild, args: ['items', { isSignal: true }] }] } });
+//# sourceMappingURL=page-summary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-summary.js","sourceRoot":"","sources":["../../../../../../../libs/core/page/src/lib/page-summary/page-summary.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,GACV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;;AAErE;;;;;;;;;;GAUG;AAuBH,MAAM,OAAO,cAAc;IACzB,4CAA4C;IACnC,YAAY,GAAG,KAAK,CAAC,cAAc;qFAAC,CAAC;IAE9C,4DAA4D;IACnD,QAAQ,GAAG,KAAK,CAAC,GAAG;iFAAC,CAAC;IAE/B,6DAA6D;IACpD,MAAM,GAAG,KAAK,CAAC,IAAI;+EAAC,CAAC;IAE9B,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,wEAAwE;IACvD,KAAK,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE3E;;;OAGG;IACgB,QAAQ,GAAG,QAAQ,CACpC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;iFAClE,CAAC;IAEF,4EAA4E;IACzD,eAAe,GAAG,MAAM,CAAgB,IAAI;wFAAC,CAAC;IAEjE,uCAAuC;IACtB,MAAM,GACrB,SAAS,CAAC,QAAQ,CAA0B,OAAO;+EAAC,CAAC;IAEvD;QACE,MAAM,cAAc,GAAG,MAAM,CAAC,wBAAwB,CAAC,CAAC;QACxD,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QACtC,eAAe,CAAC,GAAG,EAAE;YACnB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,aAAa,CAAC;YAC5C,iEAAiE;YACjE,6CAA6C;YAC7C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YAC/C,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE;gBAClE,IAAI,OAAO,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;oBAC7B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;gBACjD,CAAC;YACH,CAAC,CAAC,CAAC;YACH,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;IACL,CAAC;uGAhDU,cAAc;2FAAd,cAAc,03BApBf;;;;;;;SAOH;;2FAaI,cAAc;kBAtB1B,SAAS;+BACE,kBAAkB,YAClB;;;;;;;SAOH,iBAEQ,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,kBAAkB;wBACzB,mCAAmC,EAAE,YAAY;wBACjD,yBAAyB,EAAE,YAAY;wBACvC,0BAA0B,EAAE,UAAU;wBACtC,iCAAiC,EAAE,mBAAmB;wBACtD,oBAAoB,EAAE,8BAA8B;qBACrD;kYAiC6C,OAAO","sourcesContent":["import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport type { ElementRef } from '@angular/core';\nimport { MlvResizeObserverService } from '@malva-ui/cdk/utils';\nimport { MlvPageSnapController } from '../page/page-snap-controller';\n\n/**\n * Key-facts strip rendered under a page header. Projects\n * `mlv-page-summary-item` children in a wrapping row.\n *\n * Inside `main[mlvPage]` the strip participates in the scroll-scrubbed snap\n * timeline: its height and opacity are interpolated from the page-level\n * `--mlv-page-snap` progress over the `snapFrom`..`snapTo` stagger window.\n * Collapse/expand and pinning are controlled by the header's snap controls\n * (`mlv-page-header[snapControls]`) through `MlvPageSnapController` — the\n * strip itself is purely presentational.\n */\n@Component({\n  selector: 'mlv-page-summary',\n  template: `<div\n    #items\n    class=\"mlv-page-summary__items\"\n    role=\"group\"\n    [attr.aria-label]=\"summaryLabel()\"\n  >\n    <ng-content />\n  </div>`,\n  styleUrl: './page-summary.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-page-summary',\n    '[class.mlv-page-summary--snapped]': '_snapped()',\n    '[style.--mlv-snap-from]': 'snapFrom()',\n    '[style.--mlv-snap-scale]': '_scale()',\n    '[style.--mlv-page-summary-size]': '_measuredHeight()',\n    '[style.visibility]': '_snapped() ? \"hidden\" : null',\n  },\n})\nexport class MlvPageSummary {\n  /** Accessible name for the facts region. */\n  readonly summaryLabel = input('Page summary');\n\n  /** Progress at which the strip starts collapsing (0..1). */\n  readonly snapFrom = input(0.1);\n\n  /** Progress at which the strip is fully collapsed (0..1). */\n  readonly snapTo = input(0.95);\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  /** @private Snap state of the owning page, when rendered inside one. */\n  private readonly _snap = inject(MlvPageSnapController, { optional: true });\n\n  /**\n   * @protected True once the strip has fully collapsed; also removes it from\n   * the accessibility tree and tab order.\n   */\n  protected readonly _snapped = computed(\n    () => (this._snap?.progress() ?? 0) >= Math.min(this.snapTo(), 1),\n  );\n\n  /** @protected Natural height of the items row, driving the height scrub. */\n  protected readonly _measuredHeight = signal<number | null>(null);\n\n  /** @private The measured items row. */\n  private readonly _items =\n    viewChild.required<ElementRef<HTMLElement>>('items');\n\n  constructor() {\n    const resizeObserver = inject(MlvResizeObserverService);\n    const destroyRef = inject(DestroyRef);\n    afterNextRender(() => {\n      const itemsEl = this._items().nativeElement;\n      // offsetHeight includes the row's own padding, matching the host\n      // max-height the scrub interpolates against.\n      this._measuredHeight.set(itemsEl.offsetHeight);\n      const subscription = resizeObserver.observe(itemsEl).subscribe(() => {\n        if (itemsEl.offsetHeight > 0) {\n          this._measuredHeight.set(itemsEl.offsetHeight);\n        }\n      });\n      destroyRef.onDestroy(() => subscription.unsubscribe());\n    });\n  }\n}\n"]}

package/esm2022/page/malva-ui-core-page.js

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

package/esm2022/page/malva-ui-core-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-page.js","sourceRoot":"","sources":["../../../../../libs/core/page/src/malva-ui-core-page.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/pagination/index.js

@@ -0,0 +1,5 @@
+export * from './lib/pagination/pagination';
+export * from './lib/pagination/pagination.service';
+export * from './lib/pagination/pagination.model';
+export * from './lib/pagination/pagination.directives';
+//# sourceMappingURL=index.js.map

package/esm2022/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/pagination/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC","sourcesContent":["export * from './lib/pagination/pagination';\nexport * from './lib/pagination/pagination.service';\nexport * from './lib/pagination/pagination.model';\nexport * from './lib/pagination/pagination.directives';\n"]}

package/esm2022/pagination/lib/pagination/pagination.directives.js

@@ -0,0 +1,58 @@
+import { Directive } from '@angular/core';
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+/**
+ * Replaces the item-count text of `mlv-pagination` with a projected template.
+ *
+ * Receives `MlvPagination.getCellContext()`: `$implicit` is the current page,
+ * plus `total`, `start`, `end` and `options`.
+ *
+ * @example
+ * ```html
+ * <mlv-pagination [totalItems]="total" [(currentPage)]="page">
+ *   <ng-template mlvPaginationCount let-page let-total="total">
+ *     Page {{ page }} · {{ total }} records
+ *   </ng-template>
+ * </mlv-pagination>
+ * ```
+ */
+export class MlvPaginationCount extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPaginationCount, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPaginationCount, isStandalone: true, selector: "[mlvPaginationCount]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPaginationCount, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPaginationCount]',
+                }]
+        }] });
+/**
+ * Replaces the whole items-per-page selector of `mlv-pagination` — the trigger
+ * button *and* its dropdown — with a projected template. Rendered only while
+ * there is more than one per-page option to offer.
+ *
+ * Receives the same context as {@link MlvPaginationCount}. The template owns the
+ * entire interaction, so it must call `setItemsPerPage()` itself.
+ *
+ * @example
+ * ```html
+ * <mlv-pagination #p [totalItems]="total" [(currentPage)]="page">
+ *   <ng-template mlvPaginationPerPageItem let-options="options">
+ *     @for (option of options; track option) {
+ *       <button type="button" (click)="p.setItemsPerPage(option)">{{ option }}</button>
+ *     }
+ *   </ng-template>
+ * </mlv-pagination>
+ * ```
+ */
+export class MlvPaginationPerPageItem extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPaginationPerPageItem, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvPaginationPerPageItem, isStandalone: true, selector: "[mlvPaginationPerPageItem]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPaginationPerPageItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvPaginationPerPageItem]',
+                }]
+        }] });
+//# sourceMappingURL=pagination.directives.js.map

package/esm2022/pagination/lib/pagination/pagination.directives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.directives.js","sourceRoot":"","sources":["../../../../../../../libs/core/pagination/src/lib/pagination/pagination.directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAEpD;;;;;;;;;;;;;;GAcG;AAIH,MAAM,OAAO,kBAAmB,SAAQ,aAAa;uGAAxC,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAH9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;iBACjC;;AAGD;;;;;;;;;;;;;;;;;;GAkBG;AAIH,MAAM,OAAO,wBAAyB,SAAQ,aAAa;uGAA9C,wBAAwB;2FAAxB,wBAAwB;;2FAAxB,wBAAwB;kBAHpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,4BAA4B;iBACvC","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n/**\n * Replaces the item-count text of `mlv-pagination` with a projected template.\n *\n * Receives `MlvPagination.getCellContext()`: `$implicit` is the current page,\n * plus `total`, `start`, `end` and `options`.\n *\n * @example\n * ```html\n * <mlv-pagination [totalItems]=\"total\" [(currentPage)]=\"page\">\n *   <ng-template mlvPaginationCount let-page let-total=\"total\">\n *     Page {{ page }} · {{ total }} records\n *   </ng-template>\n * </mlv-pagination>\n * ```\n */\n@Directive({\n  selector: '[mlvPaginationCount]',\n})\nexport class MlvPaginationCount extends MlvStructural {}\n\n/**\n * Replaces the whole items-per-page selector of `mlv-pagination` — the trigger\n * button *and* its dropdown — with a projected template. Rendered only while\n * there is more than one per-page option to offer.\n *\n * Receives the same context as {@link MlvPaginationCount}. The template owns the\n * entire interaction, so it must call `setItemsPerPage()` itself.\n *\n * @example\n * ```html\n * <mlv-pagination #p [totalItems]=\"total\" [(currentPage)]=\"page\">\n *   <ng-template mlvPaginationPerPageItem let-options=\"options\">\n *     @for (option of options; track option) {\n *       <button type=\"button\" (click)=\"p.setItemsPerPage(option)\">{{ option }}</button>\n *     }\n *   </ng-template>\n * </mlv-pagination>\n * ```\n */\n@Directive({\n  selector: '[mlvPaginationPerPageItem]',\n})\nexport class MlvPaginationPerPageItem extends MlvStructural {}\n"]}

package/esm2022/pagination/lib/pagination/pagination.js

@@ -0,0 +1,293 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, model, inject, computed, effect, contentChild, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvPaginationService } from './pagination.service';
+import { MlvPaginationCount, MlvPaginationPerPageItem, } from './pagination.directives';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvButton } from '@malva-ui/core/button';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
+import { MlvInput } from '@malva-ui/core/input';
+import { MlvClick } from '@malva-ui/cdk/accessibility';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvPopup, MlvPopupContent, MlvPopupTrigger, } from '@malva-ui/core/popup';
+import { MlvDropdownPanel } from '@malva-ui/core/dropdown';
+import { MlvSelectionService } from '@malva-ui/core/form-utils';
+import { MLV_PAGINATION_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+/** Constant representing the default number of items per page. */
+const DEFAULT_ITEMS_PER_PAGE = 10;
+const DEFAULT_ITEMS_PER_PAGE_OPTIONS = [10, 30, 60, 100, Infinity];
+/**
+ * Pagination control: an item-count line with an items-per-page selector, and a
+ * page-navigation strip with prev/next arrows and numbered page buttons.
+ *
+ * Both `currentPage` and `itemsPerPage` are two-way bindable models — the
+ * component owns no data, only the position within it. `totalItems` is the one
+ * required input.
+ *
+ * The page strip collapses on **page count**, not on width: once there are more
+ * pages than fit the fixed window, `MlvPaginationService` replaces the middle
+ * runs with an ellipsis marker that renders as a small numeric field. Type a
+ * page number there and press Enter to jump. The whole strip is hidden while
+ * there is only one page, and the per-page selector is hidden while
+ * `totalItems` is at or below the smallest `perPageOptions` entry.
+ *
+ * @example Basic
+ * ```html
+ * <mlv-pagination [totalItems]="total" [(currentPage)]="page" />
+ * ```
+ *
+ * @example Custom per-page choices, including "all items"
+ * ```html
+ * <mlv-pagination
+ *   [totalItems]="total"
+ *   [(currentPage)]="page"
+ *   [(itemsPerPage)]="perPage"
+ *   [perPageOptions]="[10, 25, 50, Infinity]"
+ * />
+ * ```
+ *
+ * @example Replacing the item-count text
+ * ```html
+ * <mlv-pagination [totalItems]="total" [(currentPage)]="page">
+ *   <ng-template mlvPaginationCount let-page let-start="start" let-end="end">
+ *     Showing {{ start }}–{{ end }} on page {{ page }}
+ *   </ng-template>
+ * </mlv-pagination>
+ * ```
+ */
+export class MlvPagination {
+    /** @protected Projected custom item-count template, if any. */
+    _itemsCountRef = contentChild(MlvPaginationCount, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_itemsCountRef" }] : /* istanbul ignore next */ []));
+    /** @protected Projected custom items-per-page template, if any. */
+    _itemsPerPageRef = contentChild(MlvPaginationPerPageItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_itemsPerPageRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Unique id for this pagination instance, defaulted to a generated one.
+     *
+     * **Currently inert** — nothing reads it. The per-page trigger and its
+     * listbox pair through their own generated `_perPageListboxId`, and the id is
+     * not reflected onto the host. Binding it compiles but changes nothing.
+     */
+    id = input(mlvNextId('mlv-pagination'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * Adds `mlv-pagination--mobile` to the host.
+     *
+     * The library ships **no rules** for that class — the component's own layout
+     * is identical either way. Treat it as a styling hook for the consumer, not
+     * as a built-in responsive mode.
+     */
+    mobile = input(false, { ...(ngDevMode ? { debugName: "mobile" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Total number of items across all pages. Required.
+     *
+     * Drives the page count (`totalItems / itemsPerPage`), the "X–Y of Z" range
+     * text, and which `perPageOptions` are offered: the list is cut after the
+     * first option that covers `totalItems`, and the selector disappears entirely
+     * when `totalItems` is at or below the smallest option.
+     *
+     * Not coerced: bind a `number`, not a route-param string.
+     */
+    totalItems = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Items shown per page. Two-way bindable; also set by the per-page selector.
+     * `Infinity` means "all items on one page".
+     */
+    itemsPerPage = model(DEFAULT_ITEMS_PER_PAGE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
+    /**
+     * Choices offered by the items-per-page selector.
+     *
+     * The list is cut after the first option that covers `totalItems` — so one
+     * "show everything" choice always survives and the rest are dropped. Include
+     * `Infinity` to offer "All (Z)" for datasets larger than every option.
+     */
+    perPageOptions = input(DEFAULT_ITEMS_PER_PAGE_OPTIONS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "perPageOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * **Currently inert** — nothing reads it. The item count is always rendered;
+     * project an `[mlvPaginationCount]` template to change or suppress the text.
+     */
+    displayTotalItems = input(true, { ...(ngDevMode ? { debugName: "displayTotalItems" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Currently active page, 1-based. Two-way bindable. */
+    currentPage = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    /**
+     * Density applied to the items-per-page dropdown list.
+     *
+     * The dropdown panel is portaled to the CDK overlay container, outside the
+     * component's DOM tree, so ancestor density classes cannot cascade into it.
+     * Forwarded to the underlying `mlv-popup`, which stamps the resolved
+     * `mlv--{density}` class on the detached panel. When omitted, the global
+     * `MlvDensityService` density applies.
+     */
+    mlvDensity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvDensity" }] : /* istanbul ignore next */ []));
+    /** @protected Component-scoped pagination state service. */
+    _service = inject(MlvPaginationService);
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_PAGINATION_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @protected Index of the first item shown on the current page (1-based). */
+    _currentItemsStart = computed(() => (this.currentPage() - 1) * this.itemsPerPage() + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentItemsStart" }] : /* istanbul ignore next */ []));
+    /** @protected Index of the last item shown on the current page (clamped to total). */
+    _currentItemsEnd = computed(() => {
+        const calculatedEnd = this._currentItemsStart() + this.itemsPerPage() - 1;
+        return Math.min(calculatedEnd, this.totalItems());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentItemsEnd" }] : /* istanbul ignore next */ []));
+    /** @protected `Infinity` constant exposed for the "All items" per-page option comparison in the template. */
+    infinity = Infinity;
+    /** @protected Resolved total item count display (e.g. "50 items"). */
+    _resolvedItemCount = computed(() => {
+        const i18n = this._i18n();
+        return this._resolver.resolve(i18n, 'itemCount', {
+            count: this.totalItems(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedItemCount" }] : /* istanbul ignore next */ []));
+    /** @protected Resolved "X–Y of Z" range display. */
+    _resolvedRange = computed(() => {
+        const i18n = this._i18n();
+        return this._resolver.resolve(i18n, 'itemRange', {
+            start: this._currentItemsStart(),
+            end: this._currentItemsEnd(),
+            total: this.totalItems(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedRange" }] : /* istanbul ignore next */ []));
+    /** @protected Resolved "All (Z)" label for the Infinity per-page option in the trigger button. */
+    _resolvedAllItems = computed(() => {
+        const i18n = this._i18n();
+        return this._resolver.resolve(i18n, 'allItems', {
+            total: this.totalItems(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAllItems" }] : /* istanbul ignore next */ []));
+    /** @protected Resolves per-page option label (e.g. "10 items per page" or "All (50)"). */
+    _resolvedPerPageLabel(option) {
+        const i18n = this._i18n();
+        if (option === Infinity) {
+            return this._resolver.resolve(i18n, 'allItems', {
+                total: this.totalItems(),
+            });
+        }
+        return this._resolver.resolve(i18n, 'itemsPerPage', {
+            count: option,
+        });
+    }
+    /**
+     * @protected Per-page choices in the shape `mlv-dropdown-panel` consumes.
+     *
+     * Labels come from {@link _resolvedPerPageLabel}, so the `Infinity` entry keeps
+     * its "All (Z)" wording rather than rendering as a number.
+     */
+    _perPageOptions = computed(() => this._service.normalizedItemsPerPageOptions().map((option) => ({
+        label: this._resolvedPerPageLabel(option),
+        value: option,
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_perPageOptions" }] : /* istanbul ignore next */ []));
+    /** @protected Currently selected per-page value, as the panel's array shape. */
+    _selectedPerPage = computed(() => [
+        this.itemsPerPage(),
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedPerPage" }] : /* istanbul ignore next */ []));
+    /** @protected Id linking the trigger's `aria-controls` to the panel's listbox. */
+    _perPageListboxId = mlvNextId('mlv-pagination-per-page');
+    /** @private Aggregated pagination inputs pushed into the pagination service. */
+    _paginationObject = computed(() => ({
+        totalItems: this.totalItems(),
+        currentPage: this.currentPage(),
+        itemsPerPage: this.itemsPerPage(),
+        itemsPerPageOptions: this.perPageOptions(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_paginationObject" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this._service.pagination.set(this._paginationObject());
+        });
+    }
+    /**
+     * Template context handed to a projected `[mlvPaginationCount]` or
+     * `[mlvPaginationPerPageItem]` slot.
+     *
+     * `$implicit` is the current page; `start`/`end` are the 1-based indices of
+     * the first and last item on it (`end` clamped to `totalItems`); `options` is
+     * the per-page list after trimming against `totalItems`.
+     */
+    getCellContext() {
+        return {
+            $implicit: this.currentPage(),
+            total: this.totalItems(),
+            start: this._currentItemsStart(),
+            end: this._currentItemsEnd(),
+            options: this._service.normalizedItemsPerPageOptions(),
+        };
+    }
+    /**
+     * Sets `currentPage`. Performs no clamping — callers inside the component
+     * only reach it from enabled controls, so the page is already in range.
+     */
+    goToPage(page) {
+        this.currentPage.set(page);
+    }
+    /** Sets `itemsPerPage`. `Infinity` puts every item on one page. */
+    setItemsPerPage(itemsPerPage) {
+        this.itemsPerPage.set(itemsPerPage);
+    }
+    /**
+     * @protected Applies a per-page choice from the dropdown panel.
+     *
+     * The panel's selection model is array-shaped even for single select, so the
+     * one value is unwrapped here. An empty emission means the panel deselected
+     * rather than selected, which is not a per-page choice.
+     */
+    _onPerPageChange(values) {
+        const [next] = values;
+        if (next === undefined)
+            return;
+        this.setItemsPerPage(next);
+    }
+    /**
+     * Jumps to the page typed into an ellipsis page-jump field (Enter keydown).
+     * Out-of-range values are ignored — the field keeps its text and the page
+     * does not change.
+     */
+    setPageFromInput(event) {
+        const value = Number(event.target.value);
+        const totalPages = this._service.totalPages();
+        if (value < 1 || value > totalPages) {
+            return;
+        }
+        this.goToPage(value);
+    }
+    /** @protected Resolves the accessible label for a numbered page button. */
+    _pageAriaLabel(page) {
+        return this._resolver.resolve(this._i18n(), 'page', { page });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvPagination, isStandalone: true, selector: "mlv-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, displayTotalItems: { classPropertyName: "displayTotalItems", publicName: "displayTotalItems", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, mlvDensity: { classPropertyName: "mlvDensity", publicName: "mlvDensity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", currentPage: "currentPageChange" }, host: { properties: { "class.mlv-pagination--mobile": "mobile()" }, classAttribute: "mlv-pagination" }, providers: [MlvPaginationService, MlvSelectionService], queries: [{ propertyName: "_itemsCountRef", first: true, predicate: MlvPaginationCount, descendants: true, isSignal: true }, { propertyName: "_itemsPerPageRef", first: true, predicate: MlvPaginationPerPageItem, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mlv-pagination__items-count-wrapper\">\n  <div class=\"mlv-pagination__items-count\">\n    @if (_itemsCountRef()?.templateRef; as itemsCountTpl) {\n    <ng-template\n      [ngTemplateOutlet]=\"itemsCountTpl\"\n      [ngTemplateOutletContext]=\"getCellContext()\"\n    ></ng-template>\n    } @else {\n    <span>{{ _resolvedItemCount() }}</span>\n    }\n  </div>\n\n  @if (_service.normalizedItemsPerPageOptions().length) {\n  <div class=\"mlv-pagination__items-per-page\">\n    @if (_itemsPerPageRef()?.templateRef; as itemsPerPageTpl) {\n    <ng-template\n      [ngTemplateOutlet]=\"itemsPerPageTpl\"\n      [ngTemplateOutletContext]=\"getCellContext()\"\n    ></ng-template>\n    } @else {\n    <button\n      type=\"button\"\n      mlvButton\n      mlvDensity=\"compact\"\n      variant=\"transparent\"\n      #popupTrigger=\"mlvPopupTrigger\"\n      [mlvPopupTrigger]=\"perPagePopup\"\n      [ariaHasPopup]=\"'listbox'\"\n      [attr.aria-controls]=\"_perPageListboxId\"\n    >\n      @if (infinity === itemsPerPage()) { {{ _resolvedAllItems() }} } @else { {{\n      _resolvedRange() }} }\n    </button>\n    <mlv-popup #perPagePopup [mlvDensity]=\"mlvDensity()\">\n      <!--\n        The shared panel owns the listbox pattern: it pins listRole/itemRole and\n        the aria selection defaults, and renders the selected state, so none of\n        that is hand-rolled here. Same composition mlv-select uses.\n      -->\n      <mlv-dropdown-panel\n        *mlvPopupContent\n        [options]=\"_perPageOptions()\"\n        [selectedValues]=\"_selectedPerPage()\"\n        [listboxId]=\"_perPageListboxId\"\n        (valueChange)=\"_onPerPageChange($event); popupTrigger.close()\"\n      />\n    </mlv-popup>\n    }\n  </div>\n  }\n</div>\n\n@if (_service.totalPages() > 1) {\n<div\n  class=\"mlv-pagination__items-wrapper\"\n  role=\"navigation\"\n  [attr.aria-label]=\"_i18n().navigationLabel\"\n>\n  <div class=\"mlv-pagination__items\">\n    <button\n      type=\"button\"\n      mlvDensity=\"compact\"\n      class=\"mlv-pagination__item\"\n      shape=\"square\"\n      variant=\"transparent\"\n      mlvButton\n      [disabled]=\"currentPage() === 1\"\n      (mlvClick)=\"goToPage(currentPage() - 1)\"\n      [attr.aria-label]=\"_i18n().previousPage\"\n    >\n      <svg lucideChevronLeft size=\"20\" />\n    </button>\n\n    <div class=\"mlv-pagination__items__container\">\n      @for (page of _service.pages(); track `${page}-${$index}`) { @if (page ===\n      _service.moreElementValue) {\n      <mlv-input\n        type=\"number\"\n        (keydown.enter)=\"setPageFromInput($event)\"\n        class=\"mlv-pagination__item mlv-pagination__item--input\"\n        placeholder=\"...\"\n        [ariaLabel]=\"_i18n().goToPage\"\n      />\n      } @else {\n      <button\n        type=\"button\"\n        mlvDensity=\"compact\"\n        class=\"mlv-pagination__item\"\n        [variant]=\"page === currentPage() ? 'primary' : 'transparent'\"\n        shape=\"square\"\n        mlvButton\n        (mlvClick)=\"goToPage(page)\"\n        [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n        [attr.aria-label]=\"_pageAriaLabel(page)\"\n      >\n        {{ page }}\n      </button>\n      } }\n    </div>\n\n    <button\n      type=\"button\"\n      mlvDensity=\"compact\"\n      class=\"mlv-pagination__item\"\n      variant=\"transparent\"\n      shape=\"square\"\n      mlvButton\n      [disabled]=\"currentPage() === _service.totalPages()\"\n      (mlvClick)=\"goToPage(currentPage() + 1)\"\n      [attr.aria-label]=\"_i18n().nextPage\"\n    >\n      <svg lucideChevronRight size=\"20\" />\n    </button>\n  </div>\n</div>\n}\n", styles: [".mlv-pagination{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-pagination *{box-sizing:border-box}.mlv-pagination{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 0}.mlv-pagination__items-count{font-size:var(--mlv-font-size-s);color:var(--mlv-text-secondary)}.mlv-pagination__items-count-wrapper{display:flex;align-items:center;flex-basis:400%;white-space:nowrap;gap:var(--mlv-spacing-2)}.mlv-pagination__items-wrapper{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;flex-basis:60%}.mlv-pagination__items-per-page-container{flex-basis:30%}.mlv-pagination__items-per-page-container>div{display:flex;gap:var(--mlv-spacing-2)}.mlv-pagination__items{display:flex;align-items:center;gap:1rem}.mlv-pagination__items__container{display:flex;align-items:center;gap:var(--mlv-spacing-2)}.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper{width:var(--mlv-height-s);height:var(--mlv-height-s);display:block}.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper__control-container{padding:.125rem}.mlv-pagination__item.mlv-pagination__item--input .mlv-input__native{text-align:center;height:1.625rem;font-size:var(--mlv-font-size-s)}.mlv-pagination__item.mlv-pagination__item--input .mlv-input__native::-webkit-inner-spin-button{display:none}.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper__label-container,.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper__message-container{display:none}.mlv-pagination__item-per-page__description{width:var(--mlv-pagination-item-width, 0);opacity:var(--mlv-pagination-item-opacity, 0);transition:width .1s ease-out,opacity .2s ease-out}@media(prefers-reduced-motion:reduce){.mlv-pagination__item-per-page__description{transition:none}}.mlv-pagination__item-per-page--active{--mlv-pagination-item-width: fit-content;--mlv-pagination-item-opacity: 1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: MlvInput, selector: "mlv-input", inputs: ["type", "placeholder", "autocomplete", "inputMode", "maxLength", "minLength", "pattern", "name", "autofocus", "min", "max", "step", "bare", "projectControl", "role", "ariaExpanded", "ariaHasPopup", "ariaAutocomplete", "ariaControls", "ariaActiveDescendant", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputFocus", "inputBlur"] }, { kind: "directive", type: MlvClick, selector: "[mlvClick]", inputs: ["disabled", "hostRole"], outputs: ["mlvClick"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "component", type: MlvDropdownPanel, selector: "mlv-dropdown-panel", inputs: ["scrollMode", "minHeight", "maxHeight", "options", "multiple", "selectedValues", "itemTemplate", "focusMode", "activeIndex", "listboxId", "highlightQuery", "loading", "loadingText", "loadingMore", "hasMore", "infiniteScrollThreshold"], outputs: ["loadMore", "valueChange"] }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-pagination', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MlvPaginationService, MlvSelectionService], imports: [
+                        NgTemplateOutlet,
+                        MlvButton,
+                        LucideChevronLeft,
+                        LucideChevronRight,
+                        MlvInput,
+                        MlvClick,
+                        MlvPopup,
+                        MlvDropdownPanel,
+                        MlvPopupTrigger,
+                        MlvPopupContent,
+                    ], host: {
+                        class: 'mlv-pagination',
+                        '[class.mlv-pagination--mobile]': 'mobile()',
+                    }, template: "<div class=\"mlv-pagination__items-count-wrapper\">\n  <div class=\"mlv-pagination__items-count\">\n    @if (_itemsCountRef()?.templateRef; as itemsCountTpl) {\n    <ng-template\n      [ngTemplateOutlet]=\"itemsCountTpl\"\n      [ngTemplateOutletContext]=\"getCellContext()\"\n    ></ng-template>\n    } @else {\n    <span>{{ _resolvedItemCount() }}</span>\n    }\n  </div>\n\n  @if (_service.normalizedItemsPerPageOptions().length) {\n  <div class=\"mlv-pagination__items-per-page\">\n    @if (_itemsPerPageRef()?.templateRef; as itemsPerPageTpl) {\n    <ng-template\n      [ngTemplateOutlet]=\"itemsPerPageTpl\"\n      [ngTemplateOutletContext]=\"getCellContext()\"\n    ></ng-template>\n    } @else {\n    <button\n      type=\"button\"\n      mlvButton\n      mlvDensity=\"compact\"\n      variant=\"transparent\"\n      #popupTrigger=\"mlvPopupTrigger\"\n      [mlvPopupTrigger]=\"perPagePopup\"\n      [ariaHasPopup]=\"'listbox'\"\n      [attr.aria-controls]=\"_perPageListboxId\"\n    >\n      @if (infinity === itemsPerPage()) { {{ _resolvedAllItems() }} } @else { {{\n      _resolvedRange() }} }\n    </button>\n    <mlv-popup #perPagePopup [mlvDensity]=\"mlvDensity()\">\n      <!--\n        The shared panel owns the listbox pattern: it pins listRole/itemRole and\n        the aria selection defaults, and renders the selected state, so none of\n        that is hand-rolled here. Same composition mlv-select uses.\n      -->\n      <mlv-dropdown-panel\n        *mlvPopupContent\n        [options]=\"_perPageOptions()\"\n        [selectedValues]=\"_selectedPerPage()\"\n        [listboxId]=\"_perPageListboxId\"\n        (valueChange)=\"_onPerPageChange($event); popupTrigger.close()\"\n      />\n    </mlv-popup>\n    }\n  </div>\n  }\n</div>\n\n@if (_service.totalPages() > 1) {\n<div\n  class=\"mlv-pagination__items-wrapper\"\n  role=\"navigation\"\n  [attr.aria-label]=\"_i18n().navigationLabel\"\n>\n  <div class=\"mlv-pagination__items\">\n    <button\n      type=\"button\"\n      mlvDensity=\"compact\"\n      class=\"mlv-pagination__item\"\n      shape=\"square\"\n      variant=\"transparent\"\n      mlvButton\n      [disabled]=\"currentPage() === 1\"\n      (mlvClick)=\"goToPage(currentPage() - 1)\"\n      [attr.aria-label]=\"_i18n().previousPage\"\n    >\n      <svg lucideChevronLeft size=\"20\" />\n    </button>\n\n    <div class=\"mlv-pagination__items__container\">\n      @for (page of _service.pages(); track `${page}-${$index}`) { @if (page ===\n      _service.moreElementValue) {\n      <mlv-input\n        type=\"number\"\n        (keydown.enter)=\"setPageFromInput($event)\"\n        class=\"mlv-pagination__item mlv-pagination__item--input\"\n        placeholder=\"...\"\n        [ariaLabel]=\"_i18n().goToPage\"\n      />\n      } @else {\n      <button\n        type=\"button\"\n        mlvDensity=\"compact\"\n        class=\"mlv-pagination__item\"\n        [variant]=\"page === currentPage() ? 'primary' : 'transparent'\"\n        shape=\"square\"\n        mlvButton\n        (mlvClick)=\"goToPage(page)\"\n        [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n        [attr.aria-label]=\"_pageAriaLabel(page)\"\n      >\n        {{ page }}\n      </button>\n      } }\n    </div>\n\n    <button\n      type=\"button\"\n      mlvDensity=\"compact\"\n      class=\"mlv-pagination__item\"\n      variant=\"transparent\"\n      shape=\"square\"\n      mlvButton\n      [disabled]=\"currentPage() === _service.totalPages()\"\n      (mlvClick)=\"goToPage(currentPage() + 1)\"\n      [attr.aria-label]=\"_i18n().nextPage\"\n    >\n      <svg lucideChevronRight size=\"20\" />\n    </button>\n  </div>\n</div>\n}\n", styles: [".mlv-pagination{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-pagination *{box-sizing:border-box}.mlv-pagination{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 0}.mlv-pagination__items-count{font-size:var(--mlv-font-size-s);color:var(--mlv-text-secondary)}.mlv-pagination__items-count-wrapper{display:flex;align-items:center;flex-basis:400%;white-space:nowrap;gap:var(--mlv-spacing-2)}.mlv-pagination__items-wrapper{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;flex-basis:60%}.mlv-pagination__items-per-page-container{flex-basis:30%}.mlv-pagination__items-per-page-container>div{display:flex;gap:var(--mlv-spacing-2)}.mlv-pagination__items{display:flex;align-items:center;gap:1rem}.mlv-pagination__items__container{display:flex;align-items:center;gap:var(--mlv-spacing-2)}.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper{width:var(--mlv-height-s);height:var(--mlv-height-s);display:block}.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper__control-container{padding:.125rem}.mlv-pagination__item.mlv-pagination__item--input .mlv-input__native{text-align:center;height:1.625rem;font-size:var(--mlv-font-size-s)}.mlv-pagination__item.mlv-pagination__item--input .mlv-input__native::-webkit-inner-spin-button{display:none}.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper__label-container,.mlv-pagination__item.mlv-pagination__item--input .mlv-form-control-wrapper__message-container{display:none}.mlv-pagination__item-per-page__description{width:var(--mlv-pagination-item-width, 0);opacity:var(--mlv-pagination-item-opacity, 0);transition:width .1s ease-out,opacity .2s ease-out}@media(prefers-reduced-motion:reduce){.mlv-pagination__item-per-page__description{transition:none}}.mlv-pagination__item-per-page--active{--mlv-pagination-item-width: fit-content;--mlv-pagination-item-opacity: 1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _itemsCountRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPaginationCount), { isSignal: true }] }], _itemsPerPageRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvPaginationPerPageItem), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], mobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobile", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }, { type: i0.Output, args: ["itemsPerPageChange"] }], perPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageOptions", required: false }] }], displayTotalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayTotalItems", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], mlvDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDensity", required: false }] }] } });
+//# sourceMappingURL=pagination.js.map