mn-angular-lib 1.0.113 → 1.0.115

package/fesm2022/mn-angular-lib.mjs

@@ -1,16 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Renderer2, HostListener, ViewChild, ViewContainerRef, forwardRef, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
+import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, Renderer2, HostListener, ViewChild, ViewContainerRef, forwardRef, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
-import { BehaviorSubject, firstValueFrom, skip, fromEvent, Subject, debounceTime as debounceTime$1, of, takeUntil, map, catchError } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
 import { tv } from 'tailwind-variants';
-import * as i2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import JSON5 from 'json5';
 import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideChevronLeft, LucideChevronRight, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideFilter, LucideFunnel, LucideDynamicIcon } from '@lucide/angular';
-import { debounceTime } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -1640,7 +1639,7 @@ class MnInputField {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n    @if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n    @if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, decorators: [{
             type: Component,
@@ -2916,41 +2915,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
+/** A full week: the most days the strip shows, and the size it aligns to. */
+const DAYS_IN_WEEK = 7;
+/** Fewest days worth showing before the picker takes over instead. */
+const MIN_TILE_COUNT = 3;
+/** `Date.getDay()` value for Monday. */
+const MONDAY = 1;
 /**
- * Custom day-tile breakpoint ladder, evaluated from widest to narrowest so the
- * first matching {@link TileBreakpoint.minWidth} wins.
- *
- * The counts are tuned to the bar's two-layout responsive design. Below the
- * template's `xl` breakpoint (1280px) the bar stacks and the day strip gets its
- * own full-width row, so it can afford more tiles; at/above `xl` everything sits on
- * one row alongside the Today button, arrows, divider and date picker (≥1500px);
- * below that the strip sits on its own full-width row, so a full week fits without
- * crowding. The steps:
- * - ≥ 1028px: 7 tiles — the strip's own row (or the wide single-row layout) has
- *   room for a full week.
- * - 640–1027px: 5 tiles — small tablets / large phones.
- * - below 640px: 3 tiles — phones stay compact and page via the arrows.
- *
- * Note: below {@link MnDateSelectorBar.MIN_STRIP_WIDTH}px the strip is hidden
- * entirely (only Today + the date picker remain), so those counts never render.
+ * Width one day occupies. Days are sized by their content: a three-letter weekday
+ * and a two-digit number at their set sizes measure about 72px including padding,
+ * plus the `gap-1` beside it. Rounded up, because coming in under the real width
+ * overflows the strip into the arrow beside it.
  */
-const TILE_BREAKPOINTS = [
-    { minWidth: 1028, tiles: 7 },
-    { minWidth: 640, tiles: 5 },
-    { minWidth: 0, tiles: 3 },
-];
+const TILE_SLOT_WIDTH = 80;
+/** Space reserved for the two borderless window arrows and their gaps. */
+const ARROWS_ZONE_WIDTH = 88;
+/**
+ * Space the Today button claims, including the bar's own horizontal padding and
+ * the gap beside it.
+ */
+const CONTROLS_ZONE_WIDTH = 150;
+/** Space the month caption claims beside the strip. */
+const MONTH_CAPTION_WIDTH = 88;
+/** Everything on the row that isn't a day tile. */
+const RESERVED_WIDTH = ARROWS_ZONE_WIDTH + CONTROLS_ZONE_WIDTH + MONTH_CAPTION_WIDTH;
+/** Below this the strip can't hold even {@link MIN_TILE_COUNT} days. */
+const COMPACT_MAX_WIDTH = MIN_TILE_COUNT * TILE_SLOT_WIDTH + RESERVED_WIDTH;
+/** Assumed width before the first measurement (and during server-side rendering). */
+const UNMEASURED_WIDTH = 960;
+/** Counter used to give each bar instance a unique date-picker id. */
+let instanceCounter$1 = 0;
 /**
  * Reusable, responsive date selector bar.
  *
- * Renders a "Today" button, previous/next day-window arrows, a strip of day
- * tiles (3 → 5 → 7 as the viewport widens; see {@link TILE_BREAKPOINTS}) and a
- * date picker. Selecting a
- * tile, pressing "Today", or picking a date through the picker emits the chosen
- * day via {@link dateSelected}. The arrows only shift the visible tile window and
- * never emit.
+ * Renders a "Today" button, a month caption, previous/next arrows and a strip of
+ * day tiles. Selecting a tile or pressing "Today" emits the chosen day via
+ * {@link dateSelected}. The arrows only shift the visible days and never emit.
+ *
+ * Given room, the strip is a whole week running Monday to Sunday, so the weekday
+ * columns hold still as you page and no weekday appears twice. As the bar narrows
+ * it shows fewer days rather than adding a second row — a partial strip has no
+ * week to align to, so it slides to keep the selection in view instead. Narrower
+ * still, and the days give way to a date picker beside Today, which keeps every
+ * date reachable on a phone rather than leaving a strip too cramped to use.
  *
- * The component carries no hard-coded copy: button/placeholder text is supplied
- * through {@link todayLabel} / {@link pickDateLabel}, and day/month names follow
+ * Selecting a day already on the strip leaves it exactly where it is; a selection
+ * from outside moves the strip to where that day is. The arrows page by whatever
+ * is on show, without touching the selection.
+ *
+ * The component carries no hard-coded copy: button, placeholder and assistive
+ * text are supplied through the label inputs, and day/month names follow
  * {@link locale} (falling back to the active {@link MnLanguageService} locale).
  *
  * @example
@@ -2965,18 +2979,18 @@ const TILE_BREAKPOINTS = [
  * ```
  */
 class MnDateSelectorBar {
-    /**
-     * Minimum viewport width (px) at which the day strip (arrows + tiles) is shown.
-     * On narrower screens there isn't room for it, so only the Today button and the
-     * date picker remain.
-     */
-    static MIN_STRIP_WIDTH = 320;
     /** The currently selected date, provided by the parent. */
     selectedDate = input(this.getToday(), ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
     /** Label for the "Today" button. */
     todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : []));
-    /** Placeholder for the date picker input. */
+    /** Placeholder for the date picker shown in place of a too-cramped week strip. */
     pickDateLabel = input('Pick a date', ...(ngDevMode ? [{ debugName: "pickDateLabel" }] : []));
+    /** Accessible name for the previous-week arrow. */
+    previousLabel = input('Show the previous week', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    /** Accessible name for the next-week arrow. */
+    nextLabel = input('Show the next week', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    /** Accessible name for the day strip as a whole. */
+    dayStripLabel = input('Select a day', ...(ngDevMode ? [{ debugName: "dayStripLabel" }] : []));
     /**
      * BCP 47 locale used to format day/month names. When empty, the active
      * {@link MnLanguageService} locale is used.
@@ -2984,89 +2998,181 @@ class MnDateSelectorBar {
     locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     /** Emits when the user selects a new date. */
     dateSelected = output();
-    /** The selected date formatted as YYYY-MM-DD for the date-picker input. */
-    selectedDateString = computed(() => {
-        const d = this.selectedDate();
-        const pad = (n) => n.toString().padStart(2, '0');
-        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-    }, ...(ngDevMode ? [{ debugName: "selectedDateString" }] : []));
+    /** Unique id for this instance's date picker, so several bars can coexist. */
+    pickerId = `mn-dsb-date-${++instanceCounter$1}`;
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    host = inject((ElementRef));
     lang = inject(MnLanguageService);
-    /** Current viewport width in pixels, tracked so the tile count stays responsive. */
-    viewportWidth = signal(this.getViewportWidth(), ...(ngDevMode ? [{ debugName: "viewportWidth" }] : []));
-    /**
-     * Whether the day strip (arrows + day tiles) is shown. Below
-     * {@link MnDateSelectorBar.MIN_STRIP_WIDTH} it is hidden, leaving only the Today
-     * button and the date picker.
-     */
-    showDayStrip = computed(() => this.viewportWidth() >= MnDateSelectorBar.MIN_STRIP_WIDTH, ...(ngDevMode ? [{ debugName: "showDayStrip" }] : []));
-    /** Start offset (in days from today) for the visible day-tile window. */
-    dayOffset = signal(0, ...(ngDevMode ? [{ debugName: "dayOffset" }] : []));
+    tileButtons = viewChildren('tileButton', ...(ngDevMode ? [{ debugName: "tileButtons" }] : []));
+    /** The bar's own width in px, tracked so the layout follows its container. */
+    containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
     /** Bumped whenever the active language changes so name formatting re-runs. */
     localeTick = signal(0, ...(ngDevMode ? [{ debugName: "localeTick" }] : []));
+    /** How the bar is arranged at the current width. */
+    layout = computed(() => (this.containerWidth() || UNMEASURED_WIDTH) >= COMPACT_MAX_WIDTH ? 'inline' : 'compact', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /** Whether the day strip is shown, or the picker has taken its place. */
+    showDayStrip = computed(() => this.layout() === 'inline', ...(ngDevMode ? [{ debugName: "showDayStrip" }] : []));
     /**
-     * Number of day tiles to render, resolved from {@link TILE_BREAKPOINTS} against
-     * the current viewport width (3 → 5 → 7 as the screen widens).
+     * Days in the visible strip: a full week where there's room, fewer as the bar
+     * narrows. The bar drops days rather than adding a second row, so it stays one
+     * line at every width it can.
      */
     tileCount = computed(() => {
-        const width = this.viewportWidth();
-        return (TILE_BREAKPOINTS.find((bp) => width >= bp.minWidth)?.tiles ??
-            TILE_BREAKPOINTS[TILE_BREAKPOINTS.length - 1].tiles);
+        if (!this.showDayStrip())
+            return 0;
+        const width = this.containerWidth() || UNMEASURED_WIDTH;
+        const fits = Math.floor((width - RESERVED_WIDTH) / TILE_SLOT_WIDTH);
+        return Math.min(DAYS_IN_WEEK, Math.max(MIN_TILE_COUNT, fits));
     }, ...(ngDevMode ? [{ debugName: "tileCount" }] : []));
     /** Effective locale: explicit input, else the active app locale. */
     effectiveLocale = computed(() => {
         this.localeTick();
         return this.locale() || this.lang.locale;
     }, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : []));
-    /** The visible day tiles, derived from the selected date, offset and viewport. */
+    /**
+     * First day of the visible strip — the week's Monday when a whole week is on
+     * show, otherwise whatever start keeps the selection in view.
+     *
+     * The strip holds still while the selection stays on screen; a selection
+     * outside it moves to where that day is. The arrows write here directly to page
+     * away from the selection.
+     */
+    windowStart = linkedSignal({ ...(ngDevMode ? { debugName: "windowStart" } : {}), source: () => ({ selected: this.selectedDate().getTime(), count: this.tileCount() }),
+        computation: (source, previous) => {
+            const selected = new Date(source.selected);
+            const { count } = source;
+            const anchored = this.anchorFor(selected, count);
+            if (!previous || count === 0)
+                return anchored;
+            const current = previous.value;
+            const holdsSelection = (() => {
+                const offset = this.daysBetween(current, selected);
+                return offset >= 0 && offset < count;
+            })();
+            // A whole week must also still be Monday-aligned to be worth keeping —
+            // otherwise a strip that grew back to seven would keep a stale start.
+            const stillValid = count === DAYS_IN_WEEK
+                ? holdsSelection && current.getDay() === MONDAY
+                : holdsSelection;
+            return stillValid ? current : anchored;
+        } });
+    /**
+     * Index of the tile that is currently keyboard-reachable (roving tabindex).
+     * Tracks the selection so Tab lands on the selected day, falling back to Monday
+     * when the selection has been paged out of sight.
+     */
+    focusedIndex = linkedSignal({ ...(ngDevMode ? { debugName: "focusedIndex" } : {}), source: () => this.selectedDate().getTime(),
+        computation: () => Math.max(0, this.indexOfSelected()) });
+    /** The visible days, derived from the window start and the current selection. */
     dayTiles = computed(() => {
-        const today = this.getToday();
-        const selected = this.selectedDate();
-        const offset = this.dayOffset();
         const count = this.tileCount();
+        if (count === 0)
+            return [];
+        const start = this.windowStart();
+        const selected = this.selectedDate();
+        const today = this.getToday();
         const locale = this.effectiveLocale();
         const tiles = [];
+        let previousMonth = -1;
+        let previousYear = -1;
         for (let i = 0; i < count; i++) {
-            const date = new Date(today);
-            date.setDate(today.getDate() + offset + i);
+            const date = new Date(start);
+            date.setDate(start.getDate() + i);
+            const month = date.getMonth();
+            const year = date.getFullYear();
+            const startsNewMonth = i > 0 && (month !== previousMonth || year !== previousYear);
             tiles.push({
                 date,
                 dayName: date.toLocaleDateString(locale, { weekday: 'short' }),
                 dayNumber: date.getDate(),
                 monthName: date.toLocaleDateString(locale, { month: 'short' }),
+                startsNewMonth,
                 isSelected: this.isSameDay(date, selected),
                 isToday: this.isSameDay(date, today),
+                accessibleLabel: date.toLocaleDateString(locale, {
+                    weekday: 'long',
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                }),
             });
+            previousMonth = month;
+            previousYear = year;
         }
         return tiles;
     }, ...(ngDevMode ? [{ debugName: "dayTiles" }] : []));
+    /**
+     * Names the month the strip is currently in, so the days are never just loose
+     * numbers. Reads as a range when the strip straddles two months, and carries
+     * both years when it straddles two of those.
+     */
+    monthCaption = computed(() => {
+        const locale = this.effectiveLocale();
+        const tiles = this.dayTiles();
+        // With no strip to describe — the compact layout — the caption names the
+        // month the selection sits in, so the bar is never unlabelled.
+        if (!tiles.length) {
+            return this.selectedDate().toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+        }
+        const first = tiles[0].date;
+        const last = tiles[tiles.length - 1].date;
+        if (first.getFullYear() !== last.getFullYear()) {
+            const from = first.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            const to = last.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            return `${from} – ${to}`;
+        }
+        if (first.getMonth() !== last.getMonth()) {
+            const from = first.toLocaleDateString(locale, { month: 'short' });
+            const to = last.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            return `${from} – ${to}`;
+        }
+        return first.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+    }, ...(ngDevMode ? [{ debugName: "monthCaption" }] : []));
+    /** The selected date formatted as YYYY-MM-DD for the date-picker input. */
+    selectedDateString = computed(() => {
+        const d = this.selectedDate();
+        const pad = (n) => n.toString().padStart(2, '0');
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+    }, ...(ngDevMode ? [{ debugName: "selectedDateString" }] : []));
+    /**
+     * Props for the compact-layout date picker. Sized to match the Today button it
+     * sits beside, and filling the rest of the row so it stays an easy tap target.
+     */
+    pickerProps = computed(() => ({
+        id: this.pickerId,
+        mode: 'date',
+        placeholder: this.pickDateLabel(),
+        size: 'md',
+        borderRadius: 'lg',
+        hover: true,
+        fullWidth: true,
+    }), ...(ngDevMode ? [{ debugName: "pickerProps" }] : []));
     ngOnInit() {
         // Re-format names when the active language changes.
         this.lang.locale$
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.localeTick.update((v) => v + 1));
-        // Track viewport width so the tile count stays responsive.
-        if (typeof window !== 'undefined') {
-            fromEvent(window, 'resize')
-                .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this.viewportWidth.set(this.getViewportWidth()));
-        }
+        this.observeOwnWidth();
     }
-    /** Shifts the visible window back by one tile-count without changing the selection. */
+    /** Shows the days before the visible ones, without changing the selection. */
     navigatePrevious() {
-        this.dayOffset.update((o) => o - this.tileCount());
+        this.shiftWindow(-1);
     }
-    /** Shifts the visible window forward by one tile-count without changing the selection. */
+    /** Shows the days after the visible ones, without changing the selection. */
     navigateNext() {
-        this.dayOffset.update((o) => o + this.tileCount());
+        this.shiftWindow(1);
     }
-    /** Resets the window to today and selects today. */
+    /** Returns to today: brings today into the strip and selects it. */
     goToToday() {
-        this.dayOffset.set(0);
-        // Only emit when today isn't already the selected day, so pressing "Today"
-        // while on today doesn't trigger a redundant reload.
-        if (!this.isSameDay(this.getToday(), this.selectedDate())) {
-            this.dateSelected.emit(this.getToday());
+        const today = this.getToday();
+        // Move explicitly: when today is already selected the window signal has no new
+        // source value to react to, but the user still expects to land on it.
+        this.windowStart.set(this.anchorFor(today, this.tileCount()));
+        // Only emit when today isn't already selected, so pressing "Today" while on
+        // today doesn't trigger a redundant reload.
+        if (!this.isSameDay(today, this.selectedDate())) {
+            this.dateSelected.emit(today);
         }
     }
     /** Selects a date and emits it, unless it is already the selected day. */
@@ -3078,8 +3184,8 @@ class MnDateSelectorBar {
         this.dateSelected.emit(date);
     }
     /**
-     * Handles the date-picker model change: centres the window on the picked date
-     * and emits it (unless it is already the selected day).
+     * Handles the date-picker model change: shows the picked day's week and emits
+     * it (unless it is already the selected day).
      * @param value The date string in YYYY-MM-DD format.
      */
     onDateModelChanged(value) {
@@ -3088,21 +3194,126 @@ class MnDateSelectorBar {
         const picked = new Date(value + 'T00:00:00');
         if (isNaN(picked.getTime()))
             return;
-        const today = this.getToday();
-        const diffDays = Math.round((picked.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-        // Centre the picked date in the visible tile window.
-        this.dayOffset.set(diffDays - Math.floor(this.tileCount() / 2));
+        this.windowStart.set(this.anchorFor(picked, this.tileCount()));
         // Picking the day that's already selected shouldn't re-emit.
         if (!this.isSameDay(picked, this.selectedDate())) {
             this.dateSelected.emit(picked);
         }
     }
+    /** Whether the tile at `index` is the one reachable with Tab. */
+    isTabbable(index) {
+        return index === this.focusedIndex();
+    }
+    /** Remembers which tile last held focus, so Tab returns to it. */
+    onTileFocus(index) {
+        this.focusedIndex.set(index);
+    }
     /**
-     * Returns the current viewport width in pixels, falling back to a desktop-ish
-     * width when there is no window (e.g. server-side rendering).
+     * Moves focus across the week with the arrow keys. Running off either end turns
+     * the page to the neighbouring week and lands on the day that continues the run,
+     * so the weeks read as one continuous calendar.
      */
-    getViewportWidth() {
-        return typeof window === 'undefined' ? 1280 : window.innerWidth;
+    onTileKeydown(event, index) {
+        const lastIndex = this.tileCount() - 1;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < lastIndex) {
+                    this.moveFocusTo(index + 1);
+                }
+                else {
+                    // Off the end: turn the page and land on the day that continues the run.
+                    this.shiftWindow(1);
+                    this.moveFocusTo(0);
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0) {
+                    this.moveFocusTo(index - 1);
+                }
+                else {
+                    this.shiftWindow(-1);
+                    this.moveFocusTo(lastIndex);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.moveFocusTo(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.moveFocusTo(lastIndex);
+                break;
+            default:
+                break;
+        }
+    }
+    /** trackBy key for day tiles. */
+    trackByTile(_index, tile) {
+        return tile.date.getTime();
+    }
+    /**
+     * Moves the strip by `pages` of whatever it is currently showing. Paging by the
+     * visible count is what keeps a full week Monday-aligned — seven days forward
+     * from a Monday is the next Monday.
+     */
+    shiftWindow(pages) {
+        const next = new Date(this.windowStart());
+        next.setDate(next.getDate() + pages * this.tileCount());
+        this.windowStart.set(next);
+    }
+    /** Focuses the tile at `index` once the week has rendered. */
+    moveFocusTo(index) {
+        this.focusedIndex.set(index);
+        afterNextRender(() => this.tileButtons()[index]?.nativeElement.focus(), { injector: this.injector });
+    }
+    /** Index of the selected day within the visible week, or -1 when off-week. */
+    indexOfSelected() {
+        return this.dayTiles().findIndex((tile) => tile.isSelected);
+    }
+    /**
+     * Where the strip should start to show `date` among `count` days: the week's
+     * Monday when a whole week is on show, otherwise centred on the day, since a
+     * partial strip has no week to align to.
+     */
+    anchorFor(date, count) {
+        if (count === DAYS_IN_WEEK)
+            return this.startOfWeek(date);
+        const start = new Date(date);
+        start.setHours(0, 0, 0, 0);
+        start.setDate(start.getDate() - Math.floor(count / 2));
+        return start;
+    }
+    /**
+     * Returns the Monday of the week containing `date`. `getDay()` counts from
+     * Sunday, so the shift maps Sunday to the end of the week rather than the start.
+     */
+    startOfWeek(date) {
+        const start = new Date(date);
+        start.setHours(0, 0, 0, 0);
+        start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
+        return start;
+    }
+    /** Whole calendar days from `from` to `to`, ignoring time of day and DST. */
+    daysBetween(from, to) {
+        const a = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
+        const b = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
+        return Math.round((b - a) / 86400000);
+    }
+    /** Tracks the bar's own width so the layout responds to its container. */
+    observeOwnWidth() {
+        const element = this.host.nativeElement;
+        this.containerWidth.set(element.getBoundingClientRect().width);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            if (width > 0)
+                this.containerWidth.set(width);
+        });
+        observer.observe(element);
+        this.destroyRef.onDestroy(() => observer.disconnect());
     }
     /** Returns a Date object for today at midnight. */
     getToday() {
@@ -3117,7 +3328,7 @@ class MnDateSelectorBar {
             a.getDate() === b.getDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDateSelectorBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDateSelectorBar, isStandalone: true, selector: "mn-date-selector-bar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, pickDateLabel: { classPropertyName: "pickDateLabel", publicName: "pickDateLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: "<!-- Date selector bar -->\n<div\n  class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center justify-center rounded-xl px-4 py-5 gap-x-6 gap-y-6 overflow-hidden\">\n  <!-- Top row on mobile/tablet: Today + Date picker side by side -->\n  <div class=\"flex min-[1500px]:contents items-center gap-3\">\n    <!-- Today button -->\n    <button (click)=\"goToToday()\" [data]=\"{ variant: 'fill', color: 'primary', size: 'lg' }\"\n            class=\"flex-1 min-[1500px]:flex-none\"\n            mnButton>\n      {{ todayLabel() }}\n    </button>\n\n    <!-- Date picker (visible on mobile/tablet in top row, moves to end on desktop).\n         Wrapped in a div that owns the responsive hide: with fullWidth the datetime sets an\n         inline `display:block` on its host, which would override `min-[1500px]:hidden` and leave it\n         visible on desktop (showing two pickers). Hiding the wrapper avoids that. -->\n    <div class=\"min-[1500px]:hidden flex-1 min-w-0\">\n      <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                       [ngModel]=\"selectedDateString()\"\n                       [props]=\"{ id: 'mn-dsb-date-mobile', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true, fullWidth: true }\"\n                       class=\"block w-full\"></mn-lib-datetime>\n    </div>\n  </div>\n\n  <!-- Date navigation (arrows + day tiles). Hidden on very narrow screens\n       (< MIN_STRIP_WIDTH), where only the Today button and date picker remain. -->\n  @if (showDayStrip()) {\n    <div class=\"flex items-center gap-4 overflow-x-auto mx-auto min-[1500px]:mx-0 pb-2 max-w-full\">\n      <!-- Left arrow: shifts the visible day window backward -->\n      <button (click)=\"navigatePrevious()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Day tiles -->\n      @for (tile of dayTiles(); track tile.date.getTime()) {\n        <button\n          (click)=\"selectDate(tile.date)\"\n          [class.bg-primary]=\"tile.isSelected\"\n          [class.hover:bg-base-200]=\"!tile.isSelected\"\n          [class.text-primary-content]=\"tile.isSelected\"\n          class=\"flex flex-col items-center min-w-12 min-[1500px]:min-w-16 px-2 min-[1500px]:px-3 py-2 rounded-lg transition-all cursor-pointer shrink-0\"\n        >\n          <span class=\"text-xs font-medium uppercase\">{{ tile.dayName }}</span>\n          <span class=\"text-base min-[1500px]:text-lg font-bold\">{{ tile.dayNumber }}</span>\n        </button>\n      }\n\n      <!-- Right arrow: shifts the visible day window forward -->\n      <button (click)=\"navigateNext()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n\n  <!-- Vertical divider (hidden on mobile/tablet) -->\n  <div class=\"hidden min-[1500px]:block w-px h-10 bg-base-300\"></div>\n\n  <!-- Date picker (desktop only, hidden on mobile/tablet since it's in the top row) -->\n  <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                   [ngModel]=\"selectedDateString()\"\n                   [props]=\"{ id: 'mn-dsb-date-desktop', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true }\"\n                   class=\"hidden min-[1500px]:block\"></mn-lib-datetime>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDateSelectorBar, isStandalone: true, selector: "mn-date-selector-bar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, pickDateLabel: { classPropertyName: "pickDateLabel", publicName: "pickDateLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, dayStripLabel: { classPropertyName: "dayStripLabel", publicName: "dayStripLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "tileButtons", predicate: ["tileButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. It never\n     stacks: as room runs out it shows fewer days, then hands over to the picker.\n     Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex items-center gap-4 px-4 py-3\">\n\n  <!-- Today: returns the strip and the selection to the current day, and the\n       control people reach for most, so it carries the weight of a filled button. -->\n  <button (click)=\"goToToday()\"\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md' }\"\n          class=\"shrink-0\"\n          mnButton\n          type=\"button\">\n    {{ todayLabel() }}\n  </button>\n\n  <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n       Every date stays reachable on a phone, in one tap rather than by paging.\n       The caption comes along, so the compact bar is labelled like the wide one \u2014\n       it names the selected day's month rather than a visible range. -->\n  @if (!showDayStrip()) {\n    <span aria-hidden=\"true\"\n          class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n      {{ monthCaption() }}\n    </span>\n\n    <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                     [ngModel]=\"selectedDateString()\"\n                     [props]=\"pickerProps()\"\n                     class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n  }\n\n  <!-- The strip takes the room left over and centres its contents in it, so on a\n       wide bar the days sit in the middle rather than trailing off to one side. -->\n  @if (showDayStrip()) {\n    <div [attr.aria-label]=\"dayStripLabel()\"\n         class=\"flex min-w-0 flex-1 items-center justify-center gap-3\"\n         role=\"group\">\n      <!-- Names the month the strip is in, so the day numbers are never loose. -->\n      <span aria-hidden=\"true\"\n            class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n        {{ monthCaption() }}\n      </span>\n\n      <button (click)=\"navigatePrevious()\"\n              [attr.aria-label]=\"previousLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Days read on one line so each sits at the same height as the buttons\n           either side of it. Roving tabindex: one day is in the tab order, the\n           arrow keys move between the rest and page the strip at either end. -->\n      <div class=\"flex min-w-0 gap-1\">\n        @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n          <!-- A month break is marked by extra breathing room rather than a rule,\n               so the run of days stays unbroken; the caption names both months. -->\n          <button #tileButton\n                  (click)=\"selectDate(tile.date)\"\n                  (focus)=\"onTileFocus(i)\"\n                  (keydown)=\"onTileKeydown($event, i)\"\n                  [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                  [attr.aria-label]=\"tile.accessibleLabel\"\n                  [attr.aria-pressed]=\"tile.isSelected\"\n                  [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                  [class.bg-primary]=\"tile.isSelected\"\n                  [class.hover:bg-base-200]=\"!tile.isSelected\"\n                  [class.ml-3]=\"tile.startsNewMonth\"\n                  [class.text-primary-content]=\"tile.isSelected\"\n                  class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                  type=\"button\">\n            <span [class.opacity-60]=\"!tile.isSelected\"\n                  [class.opacity-90]=\"tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"text-xs font-medium uppercase\">\n              {{ tile.dayName }}\n            </span>\n            <span aria-hidden=\"true\" class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            <!-- Today's dot. Every day reserves the space so no tile changes\n                 width; only its colour says which one is today, and exactly one\n                 colour class applies at a time so they can't fight. -->\n            <span [class.bg-primary-content]=\"tile.isToday && tile.isSelected\"\n                  [class.bg-primary]=\"tile.isToday && !tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"size-1 shrink-0 rounded-full\"></span>\n          </button>\n        }\n      </div>\n\n      <button (click)=\"navigateNext()\"\n              [attr.aria-label]=\"nextLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDateSelectorBar, decorators: [{
             type: Component,
@@ -3128,8 +3339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnDatetime,
                         LucideChevronLeft,
                         LucideChevronRight,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Date selector bar -->\n<div\n  class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center justify-center rounded-xl px-4 py-5 gap-x-6 gap-y-6 overflow-hidden\">\n  <!-- Top row on mobile/tablet: Today + Date picker side by side -->\n  <div class=\"flex min-[1500px]:contents items-center gap-3\">\n    <!-- Today button -->\n    <button (click)=\"goToToday()\" [data]=\"{ variant: 'fill', color: 'primary', size: 'lg' }\"\n            class=\"flex-1 min-[1500px]:flex-none\"\n            mnButton>\n      {{ todayLabel() }}\n    </button>\n\n    <!-- Date picker (visible on mobile/tablet in top row, moves to end on desktop).\n         Wrapped in a div that owns the responsive hide: with fullWidth the datetime sets an\n         inline `display:block` on its host, which would override `min-[1500px]:hidden` and leave it\n         visible on desktop (showing two pickers). Hiding the wrapper avoids that. -->\n    <div class=\"min-[1500px]:hidden flex-1 min-w-0\">\n      <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                       [ngModel]=\"selectedDateString()\"\n                       [props]=\"{ id: 'mn-dsb-date-mobile', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true, fullWidth: true }\"\n                       class=\"block w-full\"></mn-lib-datetime>\n    </div>\n  </div>\n\n  <!-- Date navigation (arrows + day tiles). Hidden on very narrow screens\n       (< MIN_STRIP_WIDTH), where only the Today button and date picker remain. -->\n  @if (showDayStrip()) {\n    <div class=\"flex items-center gap-4 overflow-x-auto mx-auto min-[1500px]:mx-0 pb-2 max-w-full\">\n      <!-- Left arrow: shifts the visible day window backward -->\n      <button (click)=\"navigatePrevious()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Day tiles -->\n      @for (tile of dayTiles(); track tile.date.getTime()) {\n        <button\n          (click)=\"selectDate(tile.date)\"\n          [class.bg-primary]=\"tile.isSelected\"\n          [class.hover:bg-base-200]=\"!tile.isSelected\"\n          [class.text-primary-content]=\"tile.isSelected\"\n          class=\"flex flex-col items-center min-w-12 min-[1500px]:min-w-16 px-2 min-[1500px]:px-3 py-2 rounded-lg transition-all cursor-pointer shrink-0\"\n        >\n          <span class=\"text-xs font-medium uppercase\">{{ tile.dayName }}</span>\n          <span class=\"text-base min-[1500px]:text-lg font-bold\">{{ tile.dayNumber }}</span>\n        </button>\n      }\n\n      <!-- Right arrow: shifts the visible day window forward -->\n      <button (click)=\"navigateNext()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n\n  <!-- Vertical divider (hidden on mobile/tablet) -->\n  <div class=\"hidden min-[1500px]:block w-px h-10 bg-base-300\"></div>\n\n  <!-- Date picker (desktop only, hidden on mobile/tablet since it's in the top row) -->\n  <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                   [ngModel]=\"selectedDateString()\"\n                   [props]=\"{ id: 'mn-dsb-date-desktop', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true }\"\n                   class=\"hidden min-[1500px]:block\"></mn-lib-datetime>\n</div>\n" }]
-        }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], pickDateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickDateLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. It never\n     stacks: as room runs out it shows fewer days, then hands over to the picker.\n     Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex items-center gap-4 px-4 py-3\">\n\n  <!-- Today: returns the strip and the selection to the current day, and the\n       control people reach for most, so it carries the weight of a filled button. -->\n  <button (click)=\"goToToday()\"\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md' }\"\n          class=\"shrink-0\"\n          mnButton\n          type=\"button\">\n    {{ todayLabel() }}\n  </button>\n\n  <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n       Every date stays reachable on a phone, in one tap rather than by paging.\n       The caption comes along, so the compact bar is labelled like the wide one \u2014\n       it names the selected day's month rather than a visible range. -->\n  @if (!showDayStrip()) {\n    <span aria-hidden=\"true\"\n          class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n      {{ monthCaption() }}\n    </span>\n\n    <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                     [ngModel]=\"selectedDateString()\"\n                     [props]=\"pickerProps()\"\n                     class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n  }\n\n  <!-- The strip takes the room left over and centres its contents in it, so on a\n       wide bar the days sit in the middle rather than trailing off to one side. -->\n  @if (showDayStrip()) {\n    <div [attr.aria-label]=\"dayStripLabel()\"\n         class=\"flex min-w-0 flex-1 items-center justify-center gap-3\"\n         role=\"group\">\n      <!-- Names the month the strip is in, so the day numbers are never loose. -->\n      <span aria-hidden=\"true\"\n            class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n        {{ monthCaption() }}\n      </span>\n\n      <button (click)=\"navigatePrevious()\"\n              [attr.aria-label]=\"previousLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Days read on one line so each sits at the same height as the buttons\n           either side of it. Roving tabindex: one day is in the tab order, the\n           arrow keys move between the rest and page the strip at either end. -->\n      <div class=\"flex min-w-0 gap-1\">\n        @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n          <!-- A month break is marked by extra breathing room rather than a rule,\n               so the run of days stays unbroken; the caption names both months. -->\n          <button #tileButton\n                  (click)=\"selectDate(tile.date)\"\n                  (focus)=\"onTileFocus(i)\"\n                  (keydown)=\"onTileKeydown($event, i)\"\n                  [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                  [attr.aria-label]=\"tile.accessibleLabel\"\n                  [attr.aria-pressed]=\"tile.isSelected\"\n                  [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                  [class.bg-primary]=\"tile.isSelected\"\n                  [class.hover:bg-base-200]=\"!tile.isSelected\"\n                  [class.ml-3]=\"tile.startsNewMonth\"\n                  [class.text-primary-content]=\"tile.isSelected\"\n                  class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                  type=\"button\">\n            <span [class.opacity-60]=\"!tile.isSelected\"\n                  [class.opacity-90]=\"tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"text-xs font-medium uppercase\">\n              {{ tile.dayName }}\n            </span>\n            <span aria-hidden=\"true\" class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            <!-- Today's dot. Every day reserves the space so no tile changes\n                 width; only its colour says which one is today, and exactly one\n                 colour class applies at a time so they can't fight. -->\n            <span [class.bg-primary-content]=\"tile.isToday && tile.isSelected\"\n                  [class.bg-primary]=\"tile.isToday && !tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"size-1 shrink-0 rounded-full\"></span>\n          </button>\n        }\n      </div>\n\n      <button (click)=\"navigateNext()\"\n              [attr.aria-label]=\"nextLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], pickDateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickDateLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], dayStripLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStripLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], tileButtons: [{ type: i0.ViewChildren, args: ['tileButton', { isSignal: true }] }] } });
 
 const mnMultiSelectVariants = tv({
     base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm cursor-pointer',
@@ -5060,7 +5271,7 @@ class MnCollectionBase {
             this.cdr.markForCheck();
         });
         this.searchSubscription = this.searchSubject
-            .pipe(debounceTime$1(300))
+            .pipe(debounceTime(300))
             .subscribe(value => {
             this.searchValue = value;
             this.applyFilter(true);
@@ -5420,7 +5631,7 @@ class MnCollectionPagination {
         return Object.entries(params).reduce((result, [key, value]) => result.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), String(value)), template);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden md:flex items-center gap-2\">\n        <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden md:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\" class=\"md:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 md:gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"'Page ' + slot.page\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 md:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCollectionPagination, isStandalone: true, selector: "mn-collection-pagination", inputs: { idPrefix: "idPrefix", isPaginated: "isPaginated", isServerPaginated: "isServerPaginated", showLoadMore: "showLoadMore", loadingMoreRows: "loadingMoreRows", currentPage: "currentPage", pageSize: "pageSize", totalPages: "totalPages", totalItemCount: "totalItemCount", visiblePages: "visiblePages", pageSizeSelectOptions: "pageSizeSelectOptions", labels: "labels" }, outputs: { loadMore: "loadMore", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      (click)=\"loadMore.emit()\"\n      [data]=\"{ size: 'sm', variant: 'outline', color: 'primary' }\"\n      [disabled]=\"loadingMoreRows\"\n      class=\"px-4 py-1.5 text-sm rounded border border-primary-500 text-primary-500 hover:bg-primary-100 transition-colors disabled:opacity-50\"\n      mnButton\n    >\n      @if (loadingMoreRows) {\n        <span\n          class=\"inline-block w-3 h-3 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      {{ labels?.loadMore || 'Load more' }}\n    </button>\n  </div>\n}\n\n<!-- Pagination controls -->\n@if (showPagination) {\n  <div class=\"flex items-center justify-between gap-2 px-2 py-3 text-sm text-base-content\">\n    @if (pageSizeSelectOptions.length > 1) {\n      <div class=\"hidden md:flex items-center gap-2\">\n        <span>{{ labels?.rowsPerPage || 'Items per page:' }}</span>\n        <mn-lib-select\n          (ngModelChange)=\"pageSizeChange.emit($event)\"\n          [ngModel]=\"pageSize\"\n          [props]=\"{\n            id: idPrefix + '-page-size',\n            options: pageSizeSelectOptions,\n            size: 'sm'\n          }\"\n        ></mn-lib-select>\n      </div>\n    } @else {\n      <div class=\"hidden md:block\"></div>\n    }\n\n    <!-- Narrow viewports state the page position outright: the strip's last-page\n         anchor only appears once the window stops reaching the end, so it can't\n         be relied on to carry the total. -->\n    <span aria-live=\"polite\" class=\"md:hidden text-xs opacity-70 whitespace-nowrap\">{{ pageIndicatorLabel }}</span>\n\n    <div class=\"flex flex-wrap items-center justify-center gap-0.5 md:gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ itemRangeLabel }}</span>\n\n      <button\n        (click)=\"pageChange.emit(1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"First page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00AB\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(currentPage - 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === 1 }\"\n        [disabled]=\"currentPage === 1\"\n        aria-label=\"Previous page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u2039\n      </button>\n\n      @for (slot of pageSlots; track $index) {\n        <span [class]=\"slotVisibility(slot)\">\n          @if (slot.page !== null) {\n            <button\n              (click)=\"pageChange.emit(slot.page)\"\n              [attr.aria-current]=\"slot.page === currentPage ? 'page' : null\"\n              [attr.aria-label]=\"'Page ' + slot.page\"\n              [data]=\"{ size: 'sm', variant: 'text', color: slot.page === currentPage ? 'primary' : 'gray' }\"\n              class=\"px-1.5 md:px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\n              mnButton\n            >{{ slot.page }}\n            </button>\n          } @else {\n            <span aria-hidden=\"true\" class=\"px-0.5 text-xs opacity-50 select-none\">\u2026</span>\n          }\n        </span>\n      }\n\n      <button\n        (click)=\"pageChange.emit(currentPage + 1)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Next page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u203A\n      </button>\n\n      <button\n        (click)=\"pageChange.emit(totalPages)\"\n        [data]=\"{ size: 'sm', variant: 'outline', color: 'secondary', disabled: currentPage === totalPages }\"\n        [disabled]=\"currentPage === totalPages\"\n        aria-label=\"Last page\"\n        class=\"px-2 py-1 rounded border border-base-300 hover:bg-base-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed aspect-square leading-none\"\n        mnButton\n      >\u00BB\n      </button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCollectionPagination, decorators: [{
             type: Component,
@@ -5745,7 +5956,7 @@ class MnTable extends MnSelectableCollectionBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n  <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full min-[375px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              @if ((column.filterType ?? 'text') === 'text') {\n                <mn-lib-input-field\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    type: 'text',\n                    label: '',\n                    placeholder: column.filterPlaceholder ?? '',\n                    autocomplete: column.filterAutocomplete ?? undefined,\n                    size: 'sm',\n                    borderRadius: 'md',\n                    fullWidth: true,\n                    hover: true\n                  }\"\n                  [ngModel]=\"columnFilters[column.key]\"\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                ></mn-lib-input-field>\n              } @else if (column.filterType === 'select') {\n                <mn-lib-select\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  [ngModel]=\"columnFilters[column.key] ?? ''\"\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    options: getFilterSelectOptions(column),\n                    size: 'sm',\n                    fullWidth: true\n                  }\"\n                ></mn-lib-select>\n              }\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\" class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px) -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 \"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <mn-lib-input-field\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      type: 'text',\n                      label: '',\n                      placeholder: column.filterPlaceholder ?? '',\n                      autocomplete: column.filterAutocomplete ?? undefined,\n                      size: 'sm',\n                      borderRadius: 'md',\n                      fullWidth: true,\n                      hover: true\n                    }\"\n                    [ngModel]=\"columnFilters[column.key]\"\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  ></mn-lib-input-field>\n                } @else if (column.filterType === 'select') {\n                  <mn-lib-select\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                    [ngModel]=\"columnFilters[column.key] ?? ''\"\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      options: getFilterSelectOptions(column),\n                      size: 'sm',\n                      fullWidth: true\n                    }\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></mn-lib-select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", outputs: { sortChange: "sortChange", rowClick: "rowClick" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n  <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n    <!-- Small-screen filter toggle: replaces the inline per-column filter row below 640px -->\n    @if (hasColumnFilters && filtersCollapsed) {\n      <button\n        type=\"button\"\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'primary', size: 'md', borderRadius: 'md', hover: true }\"\n        class=\"w-full min-[375px]:w-auto gap-1.5\"\n        [attr.aria-expanded]=\"filtersPanelOpen\"\n        aria-controls=\"mn-table-filters-panel\"\n        (click)=\"toggleFiltersPanel()\"\n      >\n        <svg lucideFunnel [size]=\"15\"></svg>\n        <span>{{ filtersButtonLabel }}</span>\n      </button>\n    }\n  </div>\n</div>\n\n<!-- Small-screen filter panel: stacked, full-width fields decoupled from column widths -->\n@if (hasColumnFilters && filtersCollapsed) {\n  <div\n    id=\"mn-table-filters-panel\"\n    class=\"grid transition-all duration-200 ease-out motion-reduce:transition-none\"\n    [style.grid-template-rows]=\"filtersPanelOpen ? '1fr' : '0fr'\"\n  >\n    <div class=\"overflow-hidden\" [attr.inert]=\"filtersPanelOpen ? null : ''\">\n      <div class=\"flex flex-col gap-3 rounded-md border border-base-300 bg-base-100 p-3 mb-3\">\n        @for (column of dataSource.columns; track column.key) {\n          @if (column.filterable) {\n            <div class=\"flex flex-col gap-1\">\n              <label\n                class=\"text-xs font-medium text-base-content/70\"\n                [attr.for]=\"'mn-table-filter-' + column.key\"\n              >\n                @if (isTemplateRef(column.header)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n                } @else {\n                  {{ column.header }}\n                }\n              </label>\n              @if ((column.filterType ?? 'text') === 'text') {\n                <mn-lib-input-field\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    type: 'text',\n                    label: '',\n                    placeholder: column.filterPlaceholder ?? '',\n                    autocomplete: column.filterAutocomplete ?? undefined,\n                    size: 'sm',\n                    borderRadius: 'md',\n                    fullWidth: true,\n                    hover: true\n                  }\"\n                  [ngModel]=\"columnFilters[column.key]\"\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                ></mn-lib-input-field>\n              } @else if (column.filterType === 'select') {\n                <mn-lib-select\n                  (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  [ngModel]=\"columnFilters[column.key] ?? ''\"\n                  [props]=\"{\n                    id: 'mn-table-filter-' + column.key,\n                    options: getFilterSelectOptions(column),\n                    size: 'sm',\n                    fullWidth: true\n                  }\"\n                ></mn-lib-select>\n              }\n            </div>\n          }\n        }\n        @if (hasActiveFilters) {\n          <button\n            type=\"button\"\n            mnButton\n            [data]=\"{ variant: 'text', color: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n            class=\"self-start gap-1\"\n            (click)=\"clearAllFilters()\"\n          >\n            <svg lucideX [size]=\"14\"></svg>\n            <span>{{ clearFiltersButtonLabel }}</span>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Table wrapper with horizontal scroll -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\" aria-label=\"Data table\" class=\"overflow-x-auto\"\n     role=\"region\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n            @if (isMultiSelect) {\n              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row (wide screens only; collapses into a panel below 640px) -->\n      @if (hasColumnFilters && !filtersCollapsed) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1 \"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-2\"\n              [mnHiddenBelow]=\"column.hiddenBelow\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <mn-lib-input-field\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      type: 'text',\n                      label: '',\n                      placeholder: column.filterPlaceholder ?? '',\n                      autocomplete: column.filterAutocomplete ?? undefined,\n                      size: 'sm',\n                      borderRadius: 'md',\n                      fullWidth: true,\n                      hover: true\n                    }\"\n                    [ngModel]=\"columnFilters[column.key]\"\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                  ></mn-lib-input-field>\n                } @else if (column.filterType === 'select') {\n                  <mn-lib-select\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                    [ngModel]=\"columnFilters[column.key] ?? ''\"\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      options: getFilterSelectOptions(column),\n                      size: 'sm',\n                      fullWidth: true\n                    }\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></mn-lib-select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n        @if (isLoadingState) {\n        @for (_ of skeletonRows; track $index) {\n          <tr>\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\">\n                <mn-skeleton [data]=\"{ shape: 'rectangle', width: '1rem', height: '1rem' }\"></mn-skeleton>\n              </td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                  [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.skeleton)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.skeleton)\"></ng-container>\n                } @else {\n                  <mn-skeleton [data]=\"getColumnSkeletonData(column)\"></mn-skeleton>\n                }\n              </td>\n            }\n          </tr>\n        }\n        } @else if (isErrorState) {\n          <!-- Error state -->\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.errorTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-error\">\n                  <p class=\"text-sm\">{{ dataSource.errorMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of paginatedItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150 hover:cursor-pointer\"\n            [ngClass]=\"{'bg-primary/10': isSelected(row)}\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggle(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-table\"\n></mn-collection-pagination>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
@@ -6460,7 +6671,7 @@ class MnFormBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter", hideCustomBody: "hideCustomBody" }, outputs: { formStatusChange: "formStatusChange" }, viewQueries: [{ propertyName: "inputFields", predicate: MnInputField, descendants: true }, { propertyName: "textareas", predicate: MnTextarea, descendants: true }], ngImport: i0, template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div>\n          <mn-lib-file-input\n            (cleared)=\"onFileCleared(rowField.field)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              accept: asField(rowField.field).accept,\n              multiple: asField(rowField.field).multiple,\n              maxFiles: asField(rowField.field).maxFiles,\n              maxSize: asField(rowField.field).maxSize,\n              displayMode: asField(rowField.field).displayMode,\n              dropzoneHint: asField(rowField.field).dropzoneHint,\n              replaceLabel: asField(rowField.field).replaceLabel,\n              removeLabel: asField(rowField.field).removeLabel,\n              currentUrl: asField(rowField.field).currentUrl,\n              currentUrls: asField(rowField.field).currentUrls,\n              disabled: isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\n            })\"\n          ></mn-lib-file-input>\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                     class=\"flex flex-col gap-2 mn-form-cell\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                 class=\"flex flex-col gap-2 mn-form-cell\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 pb-6 border-t border-base-300 mt-auto sticky bottom-0 bg-base-100 z-10\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        @if (cancelIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        @if (submitIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}.mn-form-row{grid-template-columns:repeat(var(--mn-form-cols, 1),minmax(0,1fr))}.mn-form-cell{grid-column:span var(--mn-form-span, 1)}@media(max-width:639.98px){.mn-form-row{grid-template-columns:1fr}.mn-form-cell{grid-column:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "component", type: MnFileInput, selector: "mn-lib-file-input", inputs: ["props"], outputs: ["filesChange", "cleared"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", outputs: ["sortChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter", hideCustomBody: "hideCustomBody" }, outputs: { formStatusChange: "formStatusChange" }, viewQueries: [{ propertyName: "inputFields", predicate: MnInputField, descendants: true }, { propertyName: "textareas", predicate: MnTextarea, descendants: true }], ngImport: i0, template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field),\n              fullWidth: true\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div>\n          <mn-lib-file-input\n            (cleared)=\"onFileCleared(rowField.field)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              accept: asField(rowField.field).accept,\n              multiple: asField(rowField.field).multiple,\n              maxFiles: asField(rowField.field).maxFiles,\n              maxSize: asField(rowField.field).maxSize,\n              displayMode: asField(rowField.field).displayMode,\n              dropzoneHint: asField(rowField.field).dropzoneHint,\n              replaceLabel: asField(rowField.field).replaceLabel,\n              removeLabel: asField(rowField.field).removeLabel,\n              currentUrl: asField(rowField.field).currentUrl,\n              currentUrls: asField(rowField.field).currentUrls,\n              disabled: isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\n            })\"\n          ></mn-lib-file-input>\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                     class=\"flex flex-col gap-2 mn-form-cell\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                 class=\"flex flex-col gap-2 mn-form-cell\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 pb-6 border-t border-base-300 mt-auto sticky bottom-0 bg-base-100 z-10\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        @if (cancelIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        @if (submitIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\n        }\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}.mn-form-row{grid-template-columns:repeat(var(--mn-form-cols, 1),minmax(0,1fr))}.mn-form-cell{grid-column:span var(--mn-form-span, 1)}@media(max-width:639.98px){.mn-form-row{grid-template-columns:1fr}.mn-form-cell{grid-column:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "component", type: MnFileInput, selector: "mn-lib-file-input", inputs: ["props"], outputs: ["filesChange", "cleared"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", outputs: ["sortChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, decorators: [{
             type: Component,
@@ -7807,7 +8018,7 @@ class MnGrid extends MnCollectionBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnGrid, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnGrid, isStandalone: true, selector: "mn-grid", outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template. Below 375px the search takes its\n     own full-width row and the toolbar template stacks beneath it; from 375px up\n     they share a row aligned to the right (matching mn-table). -->\n@if (dataSource.canSearch || dataSource.toolbarTemplate) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center min-[375px]:justify-end gap-2 mb-3\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        (ngModelChange)=\"onSearch($event)\"\n        [ngModel]=\"searchValue\"\n        [props]=\"{\n          id: 'mn-grid-search',\n          type: 'search',\n          label: '',\n          placeholder: dataSource.searchPlaceholder ?? 'Search...',\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true\n        }\"\n        class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class.mn-grid--auto]=\"isAutoLayout\"\n    [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n    [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n    [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n    [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n    [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n    [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n    [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    class=\"mn-grid\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100\">\n        <p class=\"text-sm text-base-content/40\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n      [class.mn-grid--auto]=\"isAutoLayout\"\n      [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n      [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n      [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n      [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n      [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n      [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n      [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n      aria-label=\"Card grid\"\n      class=\"mn-grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n", styles: [":host{display:block}.mn-grid{display:grid;gap:var(--mn-grid-gap, 1rem);grid-template-columns:repeat(var(--mn-grid-cols-base, 1),minmax(0,1fr))}@media(min-width:640px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)),minmax(0,1fr))}}@media(min-width:768px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))),minmax(0,1fr))}}@media(min-width:1024px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)))),minmax(0,1fr))}}@media(min-width:1280px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-xl, var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))))),minmax(0,1fr))}}.mn-grid.mn-grid--auto{grid-template-columns:repeat(auto-fit,minmax(var(--mn-grid-min, 18rem),1fr))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnGrid, isStandalone: true, selector: "mn-grid", outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "collectionBody", first: true, predicate: ["collectionBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template. Below 375px the search takes its\n     own full-width row and the toolbar template stacks beneath it; from 375px up\n     they share a row aligned to the right (matching mn-table). -->\n@if (dataSource.canSearch || dataSource.toolbarTemplate) {\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center min-[375px]:justify-end gap-2 mb-3\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        (ngModelChange)=\"onSearch($event)\"\n        [ngModel]=\"searchValue\"\n        [props]=\"{\n          id: 'mn-grid-search',\n          type: 'search',\n          label: '',\n          placeholder: dataSource.searchPlaceholder ?? 'Search...',\n          size: 'sm',\n          borderRadius: 'md',\n          fullWidth: true\n        }\"\n        class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n}\n\n<!-- Body: skeleton/data swap region. Wrapper holds its height during a server reload. -->\n<div #collectionBody [style.min-height.px]=\"bodyMinHeight\">\n<!-- Loading state -->\n  @if (isLoadingState) {\n  <div\n    [class.mn-grid--auto]=\"isAutoLayout\"\n    [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n    [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n    [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n    [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n    [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n    [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n    [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n    aria-busy=\"true\"\n    aria-label=\"Loading\"\n    class=\"mn-grid\"\n    role=\"list\"\n  >\n    @for (_ of skeletonRows; track $index) {\n      <div role=\"listitem\">\n        @if (isTemplateRef(dataSource.skeleton)) {\n          <ng-container [ngTemplateOutlet]=\"$any(dataSource.skeleton)\"></ng-container>\n        } @else {\n          <div class=\"flex flex-col gap-2 p-4 border border-base-300 rounded-lg\">\n            @for (line of skeletonLines; track $index) {\n              <mn-skeleton [data]=\"line\"></mn-skeleton>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  } @else if (isErrorState) {\n    <!-- Error state -->\n    @if (dataSource.errorTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.errorTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-error/30 bg-base-100\">\n        <p class=\"text-sm text-error\">{{ dataSource.errorMessage }}</p>\n      </div>\n    }\n} @else {\n  <!-- Empty state: a caller-provided template/component (rendered unwrapped, full\n       control over its own layout) or, when none is given, the default text. -->\n  @if (filteredItems.length === 0) {\n    @if (dataSource.emptyTemplate) {\n      <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n    } @else {\n      <div\n        class=\"flex items-center justify-center min-h-[6rem] py-8 rounded-xl border border-dashed border-base-content/15 bg-base-100\">\n        <p class=\"text-sm text-base-content/40\">{{ dataSource.emptyMessage }}</p>\n      </div>\n    }\n  } @else {\n    <!-- Card grid -->\n    <div\n      [class.mn-grid--auto]=\"isAutoLayout\"\n      [style.--mn-grid-cols-base]=\"dataSource.layout?.cols?.base\"\n      [style.--mn-grid-cols-lg]=\"dataSource.layout?.cols?.lg\"\n      [style.--mn-grid-cols-md]=\"dataSource.layout?.cols?.md\"\n      [style.--mn-grid-cols-sm]=\"dataSource.layout?.cols?.sm\"\n      [style.--mn-grid-cols-xl]=\"dataSource.layout?.cols?.xl\"\n      [style.--mn-grid-gap]=\"dataSource.layout?.gap\"\n      [style.--mn-grid-min]=\"dataSource.layout?.minCardWidth\"\n      aria-label=\"Card grid\"\n      class=\"mn-grid\"\n      role=\"list\"\n    >\n      @for (item of paginatedItems; track trackByID($index, item)) {\n        <div\n          (click)=\"onItemClick(item)\"\n          (keyup.enter)=\"onItemClick(item)\"\n          [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n          [class.cursor-pointer]=\"!!dataSource.onItemClick\"\n          class=\"transition-colors duration-150\"\n          role=\"listitem\"\n        >\n          <ng-container\n            [ngTemplateOutletContext]=\"{ $implicit: item, data: item }\"\n            [ngTemplateOutlet]=\"dataSource.cardTemplate\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n}\n</div>\n\n<!-- Load more + pagination -->\n<mn-collection-pagination\n  (loadMore)=\"loadMoreRows()\"\n  (pageChange)=\"goToPage($event)\"\n  (pageSizeChange)=\"onPageSizeChange($event)\"\n  [currentPage]=\"currentPage\"\n  [isPaginated]=\"isPaginated\"\n  [isServerPaginated]=\"isServerPaginated\"\n  [labels]=\"dataSource.labels\"\n  [loadingMoreRows]=\"loadingMoreRows\"\n  [pageSizeSelectOptions]=\"pageSizeSelectOptions\"\n  [pageSize]=\"pageSize\"\n  [showLoadMore]=\"showLoadMore\"\n  [totalItemCount]=\"totalItemCount\"\n  [totalPages]=\"totalPages\"\n  [visiblePages]=\"visiblePages\"\n  idPrefix=\"mn-grid\"\n></mn-collection-pagination>\n", styles: [":host{display:block}.mn-grid{display:grid;gap:var(--mn-grid-gap, 1rem);grid-template-columns:repeat(var(--mn-grid-cols-base, 1),minmax(0,1fr))}@media(min-width:640px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)),minmax(0,1fr))}}@media(min-width:768px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))),minmax(0,1fr))}}@media(min-width:1024px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1)))),minmax(0,1fr))}}@media(min-width:1280px){.mn-grid{grid-template-columns:repeat(var(--mn-grid-cols-xl, var(--mn-grid-cols-lg, var(--mn-grid-cols-md, var(--mn-grid-cols-sm, var(--mn-grid-cols-base, 1))))),minmax(0,1fr))}}.mn-grid.mn-grid--auto{grid-template-columns:repeat(auto-fit,minmax(var(--mn-grid-min, 18rem),1fr))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCollectionPagination, selector: "mn-collection-pagination", inputs: ["idPrefix", "isPaginated", "isServerPaginated", "showLoadMore", "loadingMoreRows", "currentPage", "pageSize", "totalPages", "totalItemCount", "visiblePages", "pageSizeSelectOptions", "labels"], outputs: ["loadMore", "pageChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnGrid, decorators: [{
             type: Component,
@@ -7854,6 +8065,8 @@ const DEFAULT_CALENDAR_CONFIG = (() => {
         locale,
         todayLabel: 'Today',
         pickDateLabel: 'Pick a date',
+        previousLabel: 'Previous',
+        nextLabel: 'Next',
         upcomingEventsTitle: 'Upcoming events',
         noUpcomingEvents: 'No upcoming events',
         viewLabels: { MONTH: 'Month', WEEK: 'Week', DAY: 'Day' },
@@ -8875,6 +9088,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Output
             }] } });
 
+/** Gives each calendar instance a unique id to tie its tabs to its view panel. */
+let instanceCounter = 0;
 /**
  * Main calendar orchestrator component.
  *
@@ -8917,6 +9132,8 @@ class CalendarViewComponent {
     /** Emits when the action button is clicked. */
     ButtonClickedEvent = new EventEmitter();
     CalendarView = CalendarView;
+    /** Ties the view tabs to the panel they control, uniquely per calendar. */
+    panelId = `mn-calendar-panel-${++instanceCounter}`;
     currentView = CalendarView.WEEK;
     focusDay = new Date();
     viewOptions = [];
@@ -8971,9 +9188,79 @@ class CalendarViewComponent {
         }
         this.currentView = view;
     }
-    /** Handles a day selection from the date-selector bar. */
-    onDateStripChange(date) {
-        this.setFocusDay(date);
+    /**
+     * Names the stretch of time on screen — the day, the week, or the month. It is
+     * the toolbar's orientation: without it, navigating leaves you somewhere with
+     * no label. Announced politely, so stepping through says where you landed.
+     */
+    get periodLabel() {
+        const locale = this.config.locale;
+        if (this.currentView === CalendarView.MONTH) {
+            return this.focusDay.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
+        }
+        if (this.currentView === CalendarView.DAY) {
+            // No weekday: the view's own column header already says which day it is,
+            // and the year only earns its place once it stops being the obvious one.
+            return this.focusDay.toLocaleDateString(locale, {
+                day: 'numeric',
+                month: 'long',
+                ...(this.focusDay.getFullYear() !== new Date().getFullYear() ? { year: 'numeric' } : {}),
+            });
+        }
+        const start = this.startOfWeek(this.focusDay);
+        const end = new Date(start);
+        end.setDate(end.getDate() + 6);
+        // Only repeat what actually changes across the week's two ends.
+        const from = start.getFullYear() !== end.getFullYear()
+            ? start.toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' })
+            : start.toLocaleDateString(locale, {
+                day: 'numeric',
+                ...(start.getMonth() !== end.getMonth() ? { month: 'short' } : {}),
+            });
+        const to = end.toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' });
+        return `${from} – ${to}`;
+    }
+    /** The focus day as YYYY-MM-DD, for the toolbar's date picker. */
+    get focusDayString() {
+        const pad = (n) => n.toString().padStart(2, '0');
+        const d = this.focusDay;
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+    }
+    /**
+     * Steps the calendar by one unit of whatever is on screen: a day in day view,
+     * a week in week view, a month in month view. Navigating by the visible unit is
+     * what makes one pair of arrows serve all three.
+     */
+    navigate(step) {
+        const next = new Date(this.focusDay);
+        switch (this.currentView) {
+            case CalendarView.DAY:
+                next.setDate(next.getDate() + step);
+                break;
+            case CalendarView.WEEK:
+                next.setDate(next.getDate() + step * 7);
+                break;
+            default:
+                this.setFocusDay(this.addMonths(this.focusDay, step));
+                return;
+        }
+        this.setFocusDay(next);
+    }
+    /** Returns the calendar to today. */
+    goToToday() {
+        this.setFocusDay(new Date());
+    }
+    /**
+     * Handles the toolbar date picker.
+     * @param value The date string in YYYY-MM-DD format.
+     */
+    onPickDate(value) {
+        if (!value)
+            return;
+        const picked = new Date(value + 'T00:00:00');
+        if (isNaN(picked.getTime()))
+            return;
+        this.setFocusDay(picked);
     }
     /** Handles a day click from the month view — switches to day view. */
     onMonthDayClick(date) {
@@ -9009,6 +9296,26 @@ class CalendarViewComponent {
             this.currentView = CalendarView.DAY;
         }
     }
+    /**
+     * Adds months without the end-of-month overflow `setMonth` alone produces —
+     * 31 January plus one month is 28 February, not 3 March.
+     */
+    addMonths(date, months) {
+        const day = date.getDate();
+        const shifted = new Date(date);
+        shifted.setDate(1);
+        shifted.setMonth(shifted.getMonth() + months);
+        const lastDayOfMonth = new Date(shifted.getFullYear(), shifted.getMonth() + 1, 0).getDate();
+        shifted.setDate(Math.min(day, lastDayOfMonth));
+        return shifted;
+    }
+    /** Monday of the week containing `date`, matching the grid the views draw. */
+    startOfWeek(date) {
+        const start = new Date(date);
+        start.setHours(0, 0, 0, 0);
+        start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
+        return start;
+    }
     setFocusDay(date) {
         this.focusDay = date;
         this.internalFocusDayChanged.next(date);
@@ -9017,21 +9324,24 @@ class CalendarViewComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "mn-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", buttons: "buttons", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar: date strip and calendar controls (view switcher + action buttons) share one row only on very\n       wide screens (\u22651500px). The breakpoint matches the date-selector bar's own two-layer\u2192single-row switch\n       so they flip in lockstep; a mismatched breakpoint left the controls inlined while the date bar was\n       still stacked, producing a mixed layout. -->\n  <div class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center gap-2 py-3\">\n    <!-- Responsive date-selector bar: Today, day-window arrows, day tiles and a date picker. -->\n    <mn-date-selector-bar\n      (dateSelected)=\"onDateStripChange($event)\"\n      [locale]=\"config.locale\"\n      [pickDateLabel]=\"config.pickDateLabel\"\n      [selectedDate]=\"focusDay\"\n      [todayLabel]=\"config.todayLabel\"\n      class=\"min-w-0 min-[1500px]:flex-1\">\n    </mn-date-selector-bar>\n\n    @if (!isMobileView || buttons.length || showButton) {\n      <!-- order-first stacks the controls above the date strip when the toolbar wraps (below 1500px). -->\n      <div class=\"flex items-center justify-end gap-2 shrink-0 order-first min-[1500px]:order-none\">\n        <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n        @if (!isMobileView) {\n          <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n            @for (view of viewOptions; track view.value) {\n              <button\n                (click)=\"switchView(view.value)\"\n                [attr.aria-selected]=\"currentView === view.value\"\n                [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n                mnButton\n                role=\"tab\">\n                {{ view.label }}\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Action buttons (custom buttons + optional showButton CTA). -->\n        @if (buttons.length || showButton) {\n          <div [class.flex-1]=\"isMobileView\" class=\"flex items-center gap-2\">\n            @for (btn of buttons; track btn.label) {\n              <button (click)=\"btn.onClick()\" [class.flex-1]=\"isMobileView\" [data]=\"btn.buttonData || {}\"\n                      mnButton>{{ btn.label }}\n              </button>\n            }\n            @if (showButton) {\n              <button (click)=\"ButtonClickedEvent.emit()\" [class.flex-1]=\"isMobileView\" [data]=\"{}\"\n                      mnButton>{{ buttonTitle }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDateSelectorBar, selector: "mn-date-selector-bar", inputs: ["selectedDate", "todayLabel", "pickDateLabel", "locale"], outputs: ["dateSelected"] }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- The toolbar sits on the same columns as the body below it, so it spans the\n       calendar grid rather than the grid plus the sidebar. Without this the date\n       centres on the whole component and reads as off-centre against the days it\n       belongs to. -->\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3\">\n\n    <!-- Navigation on the left, the controls that change what's shown on the\n         right. Left-aligned rather than centred: centring the date depends on the\n         two sides staying evenly weighted, and a consumer adding action buttons\n         tips that balance without warning. -->\n    <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n      <button (click)=\"goToToday()\"\n              [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        {{ config.todayLabel }}\n      </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. One pair\n         serves every view because they step by whatever is on screen: a day, a\n         week, or a month. -->\n    <!-- `grow`, not `flex-1`: a 0% basis would make this group report no width,\n         so the row would look like it fits, refuse to wrap, and then overflow\n         once the label's minimum width kicked back in. An auto basis measures the\n         group honestly, so the controls wrap to a second row when they must. -->\n    <div class=\"flex grow items-center gap-1\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Where you are. `aria-live` announces the new period after each step, so\n           navigating by keyboard says where it landed instead of going silent.\n           The set width keeps the forward arrow still as the date changes length,\n           and holds a readable minimum rather than truncating: squeezed, the\n           toolbar wraps its controls to a second row instead of eating the one\n           label that says what you are looking at. -->\n      <h2 aria-live=\"polite\" class=\"min-w-56 text-center text-base font-semibold\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Changing what's shown, and acting on it. -->\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <!-- Jumping somewhere far off, which the arrows would take all day to reach. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n              {{ btn.label }}\n            </button>\n          }\n          @if (showButton) {\n            <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n              {{ buttonTitle }}\n            </button>\n          }\n        </div>\n      }\n      </div>\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mn-calendar-view', standalone: true, imports: [
                         CommonModule,
+                        FormsModule,
                         CalendarMonthComponent,
                         CalendarWeekComponent,
                         CalendarDayComponent,
                         UpcomingEventsComponent,
                         MnButton,
-                        MnDateSelectorBar
+                        MnDatetime,
+                        LucideChevronLeft,
+                        LucideChevronRight
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar: date strip and calendar controls (view switcher + action buttons) share one row only on very\n       wide screens (\u22651500px). The breakpoint matches the date-selector bar's own two-layer\u2192single-row switch\n       so they flip in lockstep; a mismatched breakpoint left the controls inlined while the date bar was\n       still stacked, producing a mixed layout. -->\n  <div class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center gap-2 py-3\">\n    <!-- Responsive date-selector bar: Today, day-window arrows, day tiles and a date picker. -->\n    <mn-date-selector-bar\n      (dateSelected)=\"onDateStripChange($event)\"\n      [locale]=\"config.locale\"\n      [pickDateLabel]=\"config.pickDateLabel\"\n      [selectedDate]=\"focusDay\"\n      [todayLabel]=\"config.todayLabel\"\n      class=\"min-w-0 min-[1500px]:flex-1\">\n    </mn-date-selector-bar>\n\n    @if (!isMobileView || buttons.length || showButton) {\n      <!-- order-first stacks the controls above the date strip when the toolbar wraps (below 1500px). -->\n      <div class=\"flex items-center justify-end gap-2 shrink-0 order-first min-[1500px]:order-none\">\n        <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n        @if (!isMobileView) {\n          <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n            @for (view of viewOptions; track view.value) {\n              <button\n                (click)=\"switchView(view.value)\"\n                [attr.aria-selected]=\"currentView === view.value\"\n                [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n                mnButton\n                role=\"tab\">\n                {{ view.label }}\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Action buttons (custom buttons + optional showButton CTA). -->\n        @if (buttons.length || showButton) {\n          <div [class.flex-1]=\"isMobileView\" class=\"flex items-center gap-2\">\n            @for (btn of buttons; track btn.label) {\n              <button (click)=\"btn.onClick()\" [class.flex-1]=\"isMobileView\" [data]=\"btn.buttonData || {}\"\n                      mnButton>{{ btn.label }}\n              </button>\n            }\n            @if (showButton) {\n              <button (click)=\"ButtonClickedEvent.emit()\" [class.flex-1]=\"isMobileView\" [data]=\"{}\"\n                      mnButton>{{ buttonTitle }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- The toolbar sits on the same columns as the body below it, so it spans the\n       calendar grid rather than the grid plus the sidebar. Without this the date\n       centres on the whole component and reads as off-centre against the days it\n       belongs to. -->\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3\">\n\n    <!-- Navigation on the left, the controls that change what's shown on the\n         right. Left-aligned rather than centred: centring the date depends on the\n         two sides staying evenly weighted, and a consumer adding action buttons\n         tips that balance without warning. -->\n    <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n      <button (click)=\"goToToday()\"\n              [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        {{ config.todayLabel }}\n      </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. One pair\n         serves every view because they step by whatever is on screen: a day, a\n         week, or a month. -->\n    <!-- `grow`, not `flex-1`: a 0% basis would make this group report no width,\n         so the row would look like it fits, refuse to wrap, and then overflow\n         once the label's minimum width kicked back in. An auto basis measures the\n         group honestly, so the controls wrap to a second row when they must. -->\n    <div class=\"flex grow items-center gap-1\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Where you are. `aria-live` announces the new period after each step, so\n           navigating by keyboard says where it landed instead of going silent.\n           The set width keeps the forward arrow still as the date changes length,\n           and holds a readable minimum rather than truncating: squeezed, the\n           toolbar wraps its controls to a second row instead of eating the one\n           label that says what you are looking at. -->\n      <h2 aria-live=\"polite\" class=\"min-w-56 text-center text-base font-semibold\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Changing what's shown, and acting on it. -->\n    <div class=\"flex items-center gap-2 shrink-0\">\n      <!-- Jumping somewhere far off, which the arrows would take all day to reach. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n              {{ btn.label }}\n            </button>\n          }\n          @if (showButton) {\n            <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n              {{ buttonTitle }}\n            </button>\n          }\n        </div>\n      }\n      </div>\n    </div>\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showButton: [{
                 type: Input
             }], buttonTitle: [{