mn-angular-lib 1.0.102 → 1.0.104

package/fesm2022/mn-angular-lib.mjs

@@ -1,7 +1,7 @@
 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, HostListener, ViewChild, ViewContainerRef, forwardRef, Renderer2, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, 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, HostListener, ViewChild, ViewContainerRef, forwardRef, Renderer2, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
-import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, skip, fromEvent, Subject, debounceTime as debounceTime$1, 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';
@@ -9,7 +9,9 @@ import * as i2 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, LucideFilter, LucideFunnel } from '@lucide/angular';
+import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideChevronLeft, LucideChevronRight, LucideFilter, LucideFunnel } from '@lucide/angular';
+import { debounceTime } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 
 // projects/mn-angular-lib/src/lib/mn-mn-alert/mn-mn-alert.tokens.ts
@@ -2895,7 +2897,7 @@ class MnDatetime {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", 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  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\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</div>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", 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  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\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</div>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, decorators: [{
             type: Component,
@@ -2908,12 +2910,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         // when fullWidth is requested so 100% has something to fill.
                         '[style.display]': "props?.fullWidth ? 'block' : null",
                         '[style.width]': "props?.fullWidth ? '100%' : null",
-                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\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</div>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}\n"] }]
+                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"handleClick(dateInput)\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\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</div>\n", styles: ["input::-webkit-calendar-picker-indicator{cursor:pointer}@media(pointer:coarse){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;box-sizing:border-box}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
 
+/**
+ * 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.
+ */
+const TILE_BREAKPOINTS = [
+    { minWidth: 1028, tiles: 7 },
+    { minWidth: 640, tiles: 5 },
+    { minWidth: 0, tiles: 3 },
+];
+/**
+ * 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.
+ *
+ * The component carries no hard-coded copy: button/placeholder text is supplied
+ * through {@link todayLabel} / {@link pickDateLabel}, and day/month names follow
+ * {@link locale} (falling back to the active {@link MnLanguageService} locale).
+ *
+ * @example
+ * ```html
+ * <mn-date-selector-bar
+ *   [selectedDate]="focusDay"
+ *   [todayLabel]="'Today'"
+ *   [pickDateLabel]="'Pick a date'"
+ *   [locale]="'nl-NL'"
+ *   (dateSelected)="onDaySelected($event)">
+ * </mn-date-selector-bar>
+ * ```
+ */
+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. */
+    pickDateLabel = input('Pick a date', ...(ngDevMode ? [{ debugName: "pickDateLabel" }] : []));
+    /**
+     * BCP 47 locale used to format day/month names. When empty, the active
+     * {@link MnLanguageService} locale is used.
+     */
+    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" }] : []));
+    destroyRef = inject(DestroyRef);
+    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" }] : []));
+    /** Bumped whenever the active language changes so name formatting re-runs. */
+    localeTick = signal(0, ...(ngDevMode ? [{ debugName: "localeTick" }] : []));
+    /**
+     * Number of day tiles to render, resolved from {@link TILE_BREAKPOINTS} against
+     * the current viewport width (3 → 5 → 7 as the screen widens).
+     */
+    tileCount = computed(() => {
+        const width = this.viewportWidth();
+        return (TILE_BREAKPOINTS.find((bp) => width >= bp.minWidth)?.tiles ??
+            TILE_BREAKPOINTS[TILE_BREAKPOINTS.length - 1].tiles);
+    }, ...(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. */
+    dayTiles = computed(() => {
+        const today = this.getToday();
+        const selected = this.selectedDate();
+        const offset = this.dayOffset();
+        const count = this.tileCount();
+        const locale = this.effectiveLocale();
+        const tiles = [];
+        for (let i = 0; i < count; i++) {
+            const date = new Date(today);
+            date.setDate(today.getDate() + offset + i);
+            tiles.push({
+                date,
+                dayName: date.toLocaleDateString(locale, { weekday: 'short' }),
+                dayNumber: date.getDate(),
+                monthName: date.toLocaleDateString(locale, { month: 'short' }),
+                isSelected: this.isSameDay(date, selected),
+                isToday: this.isSameDay(date, today),
+            });
+        }
+        return tiles;
+    }, ...(ngDevMode ? [{ debugName: "dayTiles" }] : []));
+    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()));
+        }
+    }
+    /** Shifts the visible window back by one tile-count without changing the selection. */
+    navigatePrevious() {
+        this.dayOffset.update((o) => o - this.tileCount());
+    }
+    /** Shifts the visible window forward by one tile-count without changing the selection. */
+    navigateNext() {
+        this.dayOffset.update((o) => o + this.tileCount());
+    }
+    /** Resets the window to today and selects today. */
+    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());
+        }
+    }
+    /** Selects a date and emits it, unless it is already the selected day. */
+    selectDate(date) {
+        // Re-selecting the current day is a no-op: emitting again would make
+        // consumers reload for no change.
+        if (this.isSameDay(date, this.selectedDate()))
+            return;
+        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).
+     * @param value The date string in YYYY-MM-DD format.
+     */
+    onDateModelChanged(value) {
+        if (!value)
+            return;
+        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));
+        // Picking the day that's already selected shouldn't re-emit.
+        if (!this.isSameDay(picked, this.selectedDate())) {
+            this.dateSelected.emit(picked);
+        }
+    }
+    /**
+     * Returns the current viewport width in pixels, falling back to a desktop-ish
+     * width when there is no window (e.g. server-side rendering).
+     */
+    getViewportWidth() {
+        return typeof window === 'undefined' ? 1280 : window.innerWidth;
+    }
+    /** Returns a Date object for today at midnight. */
+    getToday() {
+        const now = new Date();
+        now.setHours(0, 0, 0, 0);
+        return now;
+    }
+    /** Checks whether two dates fall on the same calendar day. */
+    isSameDay(a, b) {
+        return (a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDateSelectorBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-date-selector-bar', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MnButton,
+                        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"] }] } });
+
 const mnMultiSelectVariants = tv({
     base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm cursor-pointer',
     variants: {
@@ -4701,7 +4918,7 @@ class MnCollectionBase {
             this.cdr.markForCheck();
         });
         this.searchSubscription = this.searchSubject
-            .pipe(debounceTime(300))
+            .pipe(debounceTime$1(300))
             .subscribe(value => {
             this.searchValue = value;
             this.applyFilter(true);
@@ -5318,11 +5535,11 @@ 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: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n        class=\"w-full min-[375px]:w-auto gap-1.5\"\n        [class.border-primary]=\"hasActiveFilters\"\n        [class.text-primary]=\"hasActiveFilters\"\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: 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel], changeDetection: ChangeDetectionStrategy.OnPush, 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: 'gray', size: 'sm', borderRadius: 'md', hover: true }\"\n        class=\"w-full min-[375px]:w-auto gap-1.5\"\n        [class.border-primary]=\"hasActiveFilters\"\n        [class.text-primary]=\"hasActiveFilters\"\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" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgTemplateOutlet, MnCheckbox, MnHiddenBelowDirective, MnShowAboveDirective, MnShowBelowDirective, MnInputField, MnSelect, MnSkeleton, FormsModule, MnCollectionPagination, MnButton, LucideFilter, LucideX, LucideFunnel], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], propDecorators: { sortChange: [{
                 type: Output
             }], rowClick: [{
@@ -6137,6 +6354,14 @@ class MnWizardBodyComponent {
     formBodies;
     stepWrappers;
     currentStepId;
+    /**
+     * Title of the currently active step, mirrored into a signal so the modal
+     * shell can append it to the modal title on small screens (where the step
+     * labels under the progress circles are hidden). A signal — not a getter —
+     * because the shell lives outside this component's change-detection subtree,
+     * so a plain field mutation here would not update the shell in a zoneless app.
+     */
+    currentStepTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "currentStepTitle" }] : []));
     visitedStepIds = [];
     isCurrentStepValid = true;
     isCompleting = false;
@@ -6197,7 +6422,7 @@ class MnWizardBodyComponent {
                 };
             }
         }
-        this.currentStepId = this.config.startStepId || this.config.steps[0]?.id;
+        this.setCurrentStep(this.config.startStepId || this.config.steps[0]?.id);
         if (this.currentStepId) {
             this.visitedStepIds.push(this.currentStepId);
         }
@@ -6225,6 +6450,25 @@ class MnWizardBodyComponent {
     isTextBody(step) {
         return typeof step.body === 'string';
     }
+    async goToStep(step) {
+        if (!this.canNavigateToStep(step))
+            return;
+        if (step.id === this.currentStepId)
+            return;
+        // Validate current step's form before allowing direct step navigation
+        const formBody = this.getCurrentFormBody();
+        if (formBody && formBody.form.invalid) {
+            formBody.form.markAllAsTouched();
+            return;
+        }
+        const previousStepId = this.currentStepId;
+        this.setCurrentStep(step.id);
+        if (!this.visitedStepIds.includes(this.currentStepId)) {
+            this.visitedStepIds.push(this.currentStepId);
+        }
+        await this.notifyStepChange(previousStepId, NavigationDirection.DIRECT);
+        this.trackCurrentStepValidity();
+    }
     ngOnDestroy() {
         this.statusSubscription?.unsubscribe();
         this.formBodiesSubscription?.unsubscribe();
@@ -6296,23 +6540,43 @@ class MnWizardBodyComponent {
             return false;
         return this.isStepVisible(step);
     }
-    async goToStep(step) {
-        if (!this.canNavigateToStep(step))
-            return;
-        if (step.id === this.currentStepId)
+    async next() {
+        if (!this.canGoNext)
             return;
-        // Validate current step's form before allowing direct step navigation
+        const currentStep = this.currentStep;
+        // Validate embedded form if present
         const formBody = this.getCurrentFormBody();
         if (formBody && formBody.form.invalid) {
             formBody.form.markAllAsTouched();
             return;
         }
+        if (currentStep?.guard?.canExit) {
+            const canExit = await currentStep.guard.canExit();
+            if (!canExit)
+                return;
+        }
+        if (currentStep?.validators) {
+            for (const validator of currentStep.validators) {
+                const result = await validator.validate();
+                if (result.status === 'invalid')
+                    return;
+            }
+        }
+        // Find next visible step
+        const nextStep = this.visibleSteps[this.currentVisibleIndex + 1];
+        if (!nextStep)
+            return;
+        if (nextStep.guard?.canEnter) {
+            const canEnter = await nextStep.guard.canEnter();
+            if (!canEnter)
+                return;
+        }
         const previousStepId = this.currentStepId;
-        this.currentStepId = step.id;
+        this.setCurrentStep(nextStep.id);
         if (!this.visitedStepIds.includes(this.currentStepId)) {
             this.visitedStepIds.push(this.currentStepId);
         }
-        await this.notifyStepChange(previousStepId, NavigationDirection.DIRECT);
+        await this.notifyStepChange(previousStepId, NavigationDirection.FORWARD);
         this.trackCurrentStepValidity();
     }
     /** Find the MnFormBodyComponent for the current step */
@@ -6346,45 +6610,6 @@ class MnWizardBodyComponent {
         }
         this.cdr.detectChanges();
     }
-    async next() {
-        if (!this.canGoNext)
-            return;
-        const currentStep = this.currentStep;
-        // Validate embedded form if present
-        const formBody = this.getCurrentFormBody();
-        if (formBody && formBody.form.invalid) {
-            formBody.form.markAllAsTouched();
-            return;
-        }
-        if (currentStep?.guard?.canExit) {
-            const canExit = await currentStep.guard.canExit();
-            if (!canExit)
-                return;
-        }
-        if (currentStep?.validators) {
-            for (const validator of currentStep.validators) {
-                const result = await validator.validate();
-                if (result.status === 'invalid')
-                    return;
-            }
-        }
-        // Find next visible step
-        const nextStep = this.visibleSteps[this.currentVisibleIndex + 1];
-        if (!nextStep)
-            return;
-        if (nextStep.guard?.canEnter) {
-            const canEnter = await nextStep.guard.canEnter();
-            if (!canEnter)
-                return;
-        }
-        const previousStepId = this.currentStepId;
-        this.currentStepId = nextStep.id;
-        if (!this.visitedStepIds.includes(this.currentStepId)) {
-            this.visitedStepIds.push(this.currentStepId);
-        }
-        await this.notifyStepChange(previousStepId, NavigationDirection.FORWARD);
-        this.trackCurrentStepValidity();
-    }
     async back() {
         if (!this.canGoBack) {
             // Call onCancel handler if configured
@@ -6398,10 +6623,19 @@ class MnWizardBodyComponent {
         const previousStepId = this.currentStepId;
         // Remove current step from visited so the circle resets
         this.visitedStepIds = this.visitedStepIds.filter(id => id !== this.currentStepId);
-        this.currentStepId = prevStep.id;
+        this.setCurrentStep(prevStep.id);
         await this.notifyStepChange(previousStepId, NavigationDirection.BACKWARD);
         this.trackCurrentStepValidity();
     }
+    /**
+     * Activates a step and mirrors its title into {@link currentStepTitle} so the
+     * shell can reflect the step name in the modal title on small screens.
+     * @param stepId Id of the step to make current.
+     */
+    setCurrentStep(stepId) {
+        this.currentStepId = stepId;
+        this.currentStepTitle.set(this.config.steps.find(s => s.id === stepId)?.title);
+    }
     async complete() {
         if (this.isCompleting)
             return;
@@ -6649,6 +6883,14 @@ class MnModalShellComponent {
      */
     isStacked = signal(false, ...(ngDevMode ? [{ debugName: "isStacked" }] : []));
     ModalKind = ModalKind;
+    /** The rendered wizard body, when this modal is a wizard — used to read the active step title. */
+    wizardBody = viewChild(MnWizardBodyComponent, ...(ngDevMode ? [{ debugName: "wizardBody" }] : []));
+    /**
+     * Title of the wizard's current step, or undefined for non-wizard modals.
+     * The template appends it to the modal title on small screens, where the
+     * step labels under the progress circles are hidden.
+     */
+    wizardStepTitle = computed(() => this.wizardBody()?.currentStepTitle(), ...(ngDevMode ? [{ debugName: "wizardStepTitle" }] : []));
     previouslyFocusedElement = null;
     focusTrapListener = null;
     pollingTimer = null;
@@ -7044,7 +7286,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -7057,12 +7299,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnFooterActionsComponent,
                         MnButton,
                         LucideX,
-                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
                 type: Input
-            }], onEscapeKey: [{
+            }], wizardBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MnWizardBodyComponent), { isSignal: true }] }], onEscapeKey: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
             }], hostClasses: [{
@@ -7269,6 +7511,7 @@ const DEFAULT_CALENDAR_CONFIG = (() => {
         endHour: 22,
         locale,
         todayLabel: 'Today',
+        pickDateLabel: 'Pick a date',
         upcomingEventsTitle: 'Upcoming events',
         noUpcomingEvents: 'No upcoming events',
         viewLabels: { MONTH: 'Month', WEEK: 'Week', DAY: 'Day' },
@@ -7351,18 +7594,6 @@ function resolveCalendarConfig(partial) {
     };
 }
 
-/**
- * Injection token for the calendar date formatter.
- *
- * @example
- * ```ts
- * providers: [
- *   { provide: CALENDAR_DATE_FORMATTER, useClass: MyCustomFormatter }
- * ]
- * ```
- */
-const CALENDAR_DATE_FORMATTER = new InjectionToken('CalendarDateFormatter');
-
 /**
  * Default implementation of {@link CalendarDateFormatter} that uses the
  * browser's `Intl.DateTimeFormat` API for locale-aware formatting.
@@ -7718,6 +7949,18 @@ class CalendarUtility {
     }
 }
 
+/**
+ * Injection token for the calendar date formatter.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   { provide: CALENDAR_DATE_FORMATTER, useClass: MyCustomFormatter }
+ * ]
+ * ```
+ */
+const CALENDAR_DATE_FORMATTER = new InjectionToken('CalendarDateFormatter');
+
 /**
  * Default event renderer used when no custom component is provided.
  *
@@ -8334,7 +8577,6 @@ class CalendarViewComponent {
     CalendarView = CalendarView;
     currentView = CalendarView.WEEK;
     focusDay = new Date();
-    dateInputValue = '';
     viewOptions = [];
     isMobileView = false;
     isTabletView = false;
@@ -8343,17 +8585,14 @@ class CalendarViewComponent {
     /** Subject for broadcasting focus-day changes to child views. */
     internalFocusDayChanged = new Subject();
     destroy$ = new Subject();
-    formatter;
     config;
     /** Reference to the injected mn-config object (mutated in-place on locale change). */
     mnConfigRef;
     destroyRef = inject(DestroyRef);
     lang = inject(MnLanguageService);
     constructor() {
-        const formatter = inject(CALENDAR_DATE_FORMATTER, { optional: true });
         const mnConfig = inject(MN_CALENDAR_CONFIG, { optional: true });
         const legacyConfig = inject(CALENDAR_CONFIG, { optional: true });
-        this.formatter = formatter ?? new DefaultCalendarDateFormatter();
         // Keep a reference to the injected config so we can re-read it after locale changes.
         this.mnConfigRef = mnConfig;
         // Priority: mn-config system > legacy CALENDAR_CONFIG > built-in defaults
@@ -8371,7 +8610,6 @@ class CalendarViewComponent {
         });
         this.destroyRef.onDestroy(() => sub.unsubscribe());
         this.checkMobileView();
-        this.updateDateInput();
         this.RequestNewCalendarItemsEvent.emit(this.focusDay);
         if (this.NewCalendarItemsEvent) {
             this.NewCalendarItemsEvent.pipe(takeUntil(this.destroy$)).subscribe(events => {
@@ -8391,54 +8629,9 @@ class CalendarViewComponent {
         }
         this.currentView = view;
     }
-    /** Navigates to the previous period (month / week / day). */
-    navigatePrevious() {
-        const d = new Date(this.focusDay);
-        switch (this.currentView) {
-            case CalendarView.MONTH:
-                d.setMonth(d.getMonth() - 1);
-                break;
-            case CalendarView.WEEK:
-                d.setDate(d.getDate() - 7);
-                break;
-            case CalendarView.DAY:
-                d.setDate(d.getDate() - 1);
-                break;
-        }
-        this.setFocusDay(d);
-    }
-    /** Navigates to the next period (month / week / day). */
-    navigateNext() {
-        const d = new Date(this.focusDay);
-        switch (this.currentView) {
-            case CalendarView.MONTH:
-                d.setMonth(d.getMonth() + 1);
-                break;
-            case CalendarView.WEEK:
-                d.setDate(d.getDate() + 7);
-                break;
-            case CalendarView.DAY:
-                d.setDate(d.getDate() + 1);
-                break;
-        }
-        this.setFocusDay(d);
-    }
-    /** Navigates to today. */
-    goToToday() {
-        this.setFocusDay(new Date());
-    }
-    /** Handles the date-picker input change. */
-    onDateInputChange(event) {
-        const value = event.target.value;
-        if (value) {
-            this.setFocusDay(new Date(value));
-        }
-    }
-    /** Handles the mn-lib-datetime ngModel change. */
-    onDateStringChange(value) {
-        if (value) {
-            this.setFocusDay(new Date(value));
-        }
+    /** Handles a day selection from the date-selector bar. */
+    onDateStripChange(date) {
+        this.setFocusDay(date);
     }
     /** Handles a day click from the month view — switches to day view. */
     onMonthDayClick(date) {
@@ -8476,17 +8669,13 @@ class CalendarViewComponent {
     }
     setFocusDay(date) {
         this.focusDay = date;
-        this.updateDateInput();
         this.internalFocusDayChanged.next(date);
         this.RequestNewCalendarItemsEvent.emit(date);
     }
-    updateDateInput() {
-        this.dateInputValue = this.formatter.formatDateForFormControl(this.focusDay);
-    }
     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  @if (isMobileView) {\n    <!-- Mobile (<475px): action button as a full-width CTA on top; Today folds into the date-nav row below. -->\n    <div class=\"flex flex-col gap-2 py-3\">\n      @if (buttons.length || showButton) {\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button class=\"flex-1\" mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n          }\n          @if (showButton) {\n            <button class=\"flex-1\" mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n          }\n        </div>\n      }\n      <div class=\"flex items-center gap-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <div class=\"min-w-0 flex-1\">\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n        </div>\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n      </div>\n    </div>\n  } @else if (isTabletView) {\n    <!-- Tablet (375px\u00E2\u20AC\u201C1023px): single row \u00E2\u20AC\u201D Today / date-nav / action buttons -->\n    <div class=\"flex items-center gap-3 py-3\">\n      <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <div class=\"min-w-0 flex-1\">\n            <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          </div>\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2 shrink-0\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- Desktop (\u00E2\u2030\u00A51024px): full row \u00E2\u20AC\u201D Today / date-nav / view-switcher / action buttons -->\n    <div class=\"flex items-center justify-between gap-3 py-3\">\n      <div class=\"flex items-center gap-3\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1\">\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n        <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              mnButton\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              role=\"tab\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              (click)=\"switchView(view.value)\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  }\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: MnDatetime, selector: "mn-lib-datetime", 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"] }] });
+        ], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
@@ -8497,11 +8686,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         CalendarDayComponent,
                         UpcomingEventsComponent,
                         MnButton,
-                        MnDatetime,
-                        FormsModule
+                        MnDateSelectorBar
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  @if (isMobileView) {\n    <!-- Mobile (<475px): action button as a full-width CTA on top; Today folds into the date-nav row below. -->\n    <div class=\"flex flex-col gap-2 py-3\">\n      @if (buttons.length || showButton) {\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button class=\"flex-1\" mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n          }\n          @if (showButton) {\n            <button class=\"flex-1\" mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n          }\n        </div>\n      }\n      <div class=\"flex items-center gap-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <div class=\"min-w-0 flex-1\">\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n        </div>\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n      </div>\n    </div>\n  } @else if (isTabletView) {\n    <!-- Tablet (375px\u00E2\u20AC\u201C1023px): single row \u00E2\u20AC\u201D Today / date-nav / action buttons -->\n    <div class=\"flex items-center gap-3 py-3\">\n      <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <div class=\"min-w-0 flex-1\">\n            <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          </div>\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2 shrink-0\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- Desktop (\u00E2\u2030\u00A51024px): full row \u00E2\u20AC\u201D Today / date-nav / view-switcher / action buttons -->\n    <div class=\"flex items-center justify-between gap-3 py-3\">\n      <div class=\"flex items-center gap-3\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1\">\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n        <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              mnButton\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              role=\"tab\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              (click)=\"switchView(view.value)\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  }\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  <!-- 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"] }]
         }], ctorParameters: () => [], propDecorators: { showButton: [{
                 type: Input
             }], buttonTitle: [{
@@ -9256,5 +9444,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
 //# sourceMappingURL=mn-angular-lib.mjs.map