mn-angular-lib 1.0.113 → 1.0.114

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, input, output, Renderer2, HostListener, ViewChild, ViewContainerRef, forwardRef, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
+import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, Renderer2, HostListener, ViewChild, ViewContainerRef, forwardRef, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
-import { BehaviorSubject, firstValueFrom, skip, fromEvent, Subject, debounceTime as debounceTime$1, of, takeUntil, map, catchError } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
 import { tv } from 'tailwind-variants';
@@ -10,7 +10,6 @@ import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, Rea
 import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import JSON5 from 'json5';
 import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideChevronLeft, LucideChevronRight, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideFilter, LucideFunnel, LucideDynamicIcon } from '@lucide/angular';
-import { debounceTime } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -2916,41 +2915,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
+/** A full week: the most days the strip shows, and the size it aligns to. */
+const DAYS_IN_WEEK = 7;
+/** Fewest days worth showing before the picker takes over instead. */
+const MIN_TILE_COUNT = 3;
+/** `Date.getDay()` value for Monday. */
+const MONDAY = 1;
 /**
- * Custom day-tile breakpoint ladder, evaluated from widest to narrowest so the
- * first matching {@link TileBreakpoint.minWidth} wins.
- *
- * The counts are tuned to the bar's two-layout responsive design. Below the
- * template's `xl` breakpoint (1280px) the bar stacks and the day strip gets its
- * own full-width row, so it can afford more tiles; at/above `xl` everything sits on
- * one row alongside the Today button, arrows, divider and date picker (≥1500px);
- * below that the strip sits on its own full-width row, so a full week fits without
- * crowding. The steps:
- * - ≥ 1028px: 7 tiles — the strip's own row (or the wide single-row layout) has
- *   room for a full week.
- * - 640–1027px: 5 tiles — small tablets / large phones.
- * - below 640px: 3 tiles — phones stay compact and page via the arrows.
- *
- * Note: below {@link MnDateSelectorBar.MIN_STRIP_WIDTH}px the strip is hidden
- * entirely (only Today + the date picker remain), so those counts never render.
+ * Width one day occupies. Days are sized by their content: a three-letter weekday
+ * and a two-digit number at their set sizes measure about 72px including padding,
+ * plus the `gap-1` beside it. Rounded up, because coming in under the real width
+ * overflows the strip into the arrow beside it.
  */
-const TILE_BREAKPOINTS = [
-    { minWidth: 1028, tiles: 7 },
-    { minWidth: 640, tiles: 5 },
-    { minWidth: 0, tiles: 3 },
-];
+const TILE_SLOT_WIDTH = 80;
+/** Space reserved for the two borderless window arrows and their gaps. */
+const ARROWS_ZONE_WIDTH = 88;
+/**
+ * Space the Today button claims, including the bar's own horizontal padding and
+ * the gap beside it.
+ */
+const CONTROLS_ZONE_WIDTH = 150;
+/** Space the month caption claims beside the strip. */
+const MONTH_CAPTION_WIDTH = 88;
+/** Everything on the row that isn't a day tile. */
+const RESERVED_WIDTH = ARROWS_ZONE_WIDTH + CONTROLS_ZONE_WIDTH + MONTH_CAPTION_WIDTH;
+/** Below this the strip can't hold even {@link MIN_TILE_COUNT} days. */
+const COMPACT_MAX_WIDTH = MIN_TILE_COUNT * TILE_SLOT_WIDTH + RESERVED_WIDTH;
+/** Assumed width before the first measurement (and during server-side rendering). */
+const UNMEASURED_WIDTH = 960;
+/** Counter used to give each bar instance a unique date-picker id. */
+let instanceCounter = 0;
 /**
  * Reusable, responsive date selector bar.
  *
- * Renders a "Today" button, previous/next day-window arrows, a strip of day
- * tiles (3 → 5 → 7 as the viewport widens; see {@link TILE_BREAKPOINTS}) and a
- * date picker. Selecting a
- * tile, pressing "Today", or picking a date through the picker emits the chosen
- * day via {@link dateSelected}. The arrows only shift the visible tile window and
- * never emit.
+ * Renders a "Today" button, a month caption, previous/next arrows and a strip of
+ * day tiles. Selecting a tile or pressing "Today" emits the chosen day via
+ * {@link dateSelected}. The arrows only shift the visible days and never emit.
  *
- * The component carries no hard-coded copy: button/placeholder text is supplied
- * through {@link todayLabel} / {@link pickDateLabel}, and day/month names follow
+ * Given room, the strip is a whole week running Monday to Sunday, so the weekday
+ * columns hold still as you page and no weekday appears twice. As the bar narrows
+ * it shows fewer days rather than adding a second row — a partial strip has no
+ * week to align to, so it slides to keep the selection in view instead. Narrower
+ * still, and the days give way to a date picker beside Today, which keeps every
+ * date reachable on a phone rather than leaving a strip too cramped to use.
+ *
+ * Selecting a day already on the strip leaves it exactly where it is; a selection
+ * from outside moves the strip to where that day is. The arrows page by whatever
+ * is on show, without touching the selection.
+ *
+ * The component carries no hard-coded copy: button, placeholder and assistive
+ * text are supplied through the label inputs, and day/month names follow
  * {@link locale} (falling back to the active {@link MnLanguageService} locale).
  *
  * @example
@@ -2965,18 +2979,18 @@ const TILE_BREAKPOINTS = [
  * ```
  */
 class MnDateSelectorBar {
-    /**
-     * Minimum viewport width (px) at which the day strip (arrows + tiles) is shown.
-     * On narrower screens there isn't room for it, so only the Today button and the
-     * date picker remain.
-     */
-    static MIN_STRIP_WIDTH = 320;
     /** The currently selected date, provided by the parent. */
     selectedDate = input(this.getToday(), ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
     /** Label for the "Today" button. */
     todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : []));
-    /** Placeholder for the date picker input. */
+    /** Placeholder for the date picker shown in place of a too-cramped week strip. */
     pickDateLabel = input('Pick a date', ...(ngDevMode ? [{ debugName: "pickDateLabel" }] : []));
+    /** Accessible name for the previous-week arrow. */
+    previousLabel = input('Show the previous week', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    /** Accessible name for the next-week arrow. */
+    nextLabel = input('Show the next week', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    /** Accessible name for the day strip as a whole. */
+    dayStripLabel = input('Select a day', ...(ngDevMode ? [{ debugName: "dayStripLabel" }] : []));
     /**
      * BCP 47 locale used to format day/month names. When empty, the active
      * {@link MnLanguageService} locale is used.
@@ -2984,89 +2998,181 @@ class MnDateSelectorBar {
     locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     /** Emits when the user selects a new date. */
     dateSelected = output();
-    /** The selected date formatted as YYYY-MM-DD for the date-picker input. */
-    selectedDateString = computed(() => {
-        const d = this.selectedDate();
-        const pad = (n) => n.toString().padStart(2, '0');
-        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-    }, ...(ngDevMode ? [{ debugName: "selectedDateString" }] : []));
+    /** Unique id for this instance's date picker, so several bars can coexist. */
+    pickerId = `mn-dsb-date-${++instanceCounter}`;
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    host = inject((ElementRef));
     lang = inject(MnLanguageService);
-    /** Current viewport width in pixels, tracked so the tile count stays responsive. */
-    viewportWidth = signal(this.getViewportWidth(), ...(ngDevMode ? [{ debugName: "viewportWidth" }] : []));
-    /**
-     * Whether the day strip (arrows + day tiles) is shown. Below
-     * {@link MnDateSelectorBar.MIN_STRIP_WIDTH} it is hidden, leaving only the Today
-     * button and the date picker.
-     */
-    showDayStrip = computed(() => this.viewportWidth() >= MnDateSelectorBar.MIN_STRIP_WIDTH, ...(ngDevMode ? [{ debugName: "showDayStrip" }] : []));
-    /** Start offset (in days from today) for the visible day-tile window. */
-    dayOffset = signal(0, ...(ngDevMode ? [{ debugName: "dayOffset" }] : []));
+    tileButtons = viewChildren('tileButton', ...(ngDevMode ? [{ debugName: "tileButtons" }] : []));
+    /** The bar's own width in px, tracked so the layout follows its container. */
+    containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
     /** Bumped whenever the active language changes so name formatting re-runs. */
     localeTick = signal(0, ...(ngDevMode ? [{ debugName: "localeTick" }] : []));
+    /** How the bar is arranged at the current width. */
+    layout = computed(() => (this.containerWidth() || UNMEASURED_WIDTH) >= COMPACT_MAX_WIDTH ? 'inline' : 'compact', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /** Whether the day strip is shown, or the picker has taken its place. */
+    showDayStrip = computed(() => this.layout() === 'inline', ...(ngDevMode ? [{ debugName: "showDayStrip" }] : []));
     /**
-     * Number of day tiles to render, resolved from {@link TILE_BREAKPOINTS} against
-     * the current viewport width (3 → 5 → 7 as the screen widens).
+     * Days in the visible strip: a full week where there's room, fewer as the bar
+     * narrows. The bar drops days rather than adding a second row, so it stays one
+     * line at every width it can.
      */
     tileCount = computed(() => {
-        const width = this.viewportWidth();
-        return (TILE_BREAKPOINTS.find((bp) => width >= bp.minWidth)?.tiles ??
-            TILE_BREAKPOINTS[TILE_BREAKPOINTS.length - 1].tiles);
+        if (!this.showDayStrip())
+            return 0;
+        const width = this.containerWidth() || UNMEASURED_WIDTH;
+        const fits = Math.floor((width - RESERVED_WIDTH) / TILE_SLOT_WIDTH);
+        return Math.min(DAYS_IN_WEEK, Math.max(MIN_TILE_COUNT, fits));
     }, ...(ngDevMode ? [{ debugName: "tileCount" }] : []));
     /** Effective locale: explicit input, else the active app locale. */
     effectiveLocale = computed(() => {
         this.localeTick();
         return this.locale() || this.lang.locale;
     }, ...(ngDevMode ? [{ debugName: "effectiveLocale" }] : []));
-    /** The visible day tiles, derived from the selected date, offset and viewport. */
+    /**
+     * First day of the visible strip — the week's Monday when a whole week is on
+     * show, otherwise whatever start keeps the selection in view.
+     *
+     * The strip holds still while the selection stays on screen; a selection
+     * outside it moves to where that day is. The arrows write here directly to page
+     * away from the selection.
+     */
+    windowStart = linkedSignal({ ...(ngDevMode ? { debugName: "windowStart" } : {}), source: () => ({ selected: this.selectedDate().getTime(), count: this.tileCount() }),
+        computation: (source, previous) => {
+            const selected = new Date(source.selected);
+            const { count } = source;
+            const anchored = this.anchorFor(selected, count);
+            if (!previous || count === 0)
+                return anchored;
+            const current = previous.value;
+            const holdsSelection = (() => {
+                const offset = this.daysBetween(current, selected);
+                return offset >= 0 && offset < count;
+            })();
+            // A whole week must also still be Monday-aligned to be worth keeping —
+            // otherwise a strip that grew back to seven would keep a stale start.
+            const stillValid = count === DAYS_IN_WEEK
+                ? holdsSelection && current.getDay() === MONDAY
+                : holdsSelection;
+            return stillValid ? current : anchored;
+        } });
+    /**
+     * Index of the tile that is currently keyboard-reachable (roving tabindex).
+     * Tracks the selection so Tab lands on the selected day, falling back to Monday
+     * when the selection has been paged out of sight.
+     */
+    focusedIndex = linkedSignal({ ...(ngDevMode ? { debugName: "focusedIndex" } : {}), source: () => this.selectedDate().getTime(),
+        computation: () => Math.max(0, this.indexOfSelected()) });
+    /** The visible days, derived from the window start and the current selection. */
     dayTiles = computed(() => {
-        const today = this.getToday();
-        const selected = this.selectedDate();
-        const offset = this.dayOffset();
         const count = this.tileCount();
+        if (count === 0)
+            return [];
+        const start = this.windowStart();
+        const selected = this.selectedDate();
+        const today = this.getToday();
         const locale = this.effectiveLocale();
         const tiles = [];
+        let previousMonth = -1;
+        let previousYear = -1;
         for (let i = 0; i < count; i++) {
-            const date = new Date(today);
-            date.setDate(today.getDate() + offset + i);
+            const date = new Date(start);
+            date.setDate(start.getDate() + i);
+            const month = date.getMonth();
+            const year = date.getFullYear();
+            const startsNewMonth = i > 0 && (month !== previousMonth || year !== previousYear);
             tiles.push({
                 date,
                 dayName: date.toLocaleDateString(locale, { weekday: 'short' }),
                 dayNumber: date.getDate(),
                 monthName: date.toLocaleDateString(locale, { month: 'short' }),
+                startsNewMonth,
                 isSelected: this.isSameDay(date, selected),
                 isToday: this.isSameDay(date, today),
+                accessibleLabel: date.toLocaleDateString(locale, {
+                    weekday: 'long',
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                }),
             });
+            previousMonth = month;
+            previousYear = year;
         }
         return tiles;
     }, ...(ngDevMode ? [{ debugName: "dayTiles" }] : []));
+    /**
+     * Names the month the strip is currently in, so the days are never just loose
+     * numbers. Reads as a range when the strip straddles two months, and carries
+     * both years when it straddles two of those.
+     */
+    monthCaption = computed(() => {
+        const locale = this.effectiveLocale();
+        const tiles = this.dayTiles();
+        // With no strip to describe — the compact layout — the caption names the
+        // month the selection sits in, so the bar is never unlabelled.
+        if (!tiles.length) {
+            return this.selectedDate().toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+        }
+        const first = tiles[0].date;
+        const last = tiles[tiles.length - 1].date;
+        if (first.getFullYear() !== last.getFullYear()) {
+            const from = first.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            const to = last.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            return `${from} – ${to}`;
+        }
+        if (first.getMonth() !== last.getMonth()) {
+            const from = first.toLocaleDateString(locale, { month: 'short' });
+            const to = last.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+            return `${from} – ${to}`;
+        }
+        return first.toLocaleDateString(locale, { month: 'short', year: 'numeric' });
+    }, ...(ngDevMode ? [{ debugName: "monthCaption" }] : []));
+    /** The selected date formatted as YYYY-MM-DD for the date-picker input. */
+    selectedDateString = computed(() => {
+        const d = this.selectedDate();
+        const pad = (n) => n.toString().padStart(2, '0');
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+    }, ...(ngDevMode ? [{ debugName: "selectedDateString" }] : []));
+    /**
+     * Props for the compact-layout date picker. Sized to match the Today button it
+     * sits beside, and filling the rest of the row so it stays an easy tap target.
+     */
+    pickerProps = computed(() => ({
+        id: this.pickerId,
+        mode: 'date',
+        placeholder: this.pickDateLabel(),
+        size: 'md',
+        borderRadius: 'lg',
+        hover: true,
+        fullWidth: true,
+    }), ...(ngDevMode ? [{ debugName: "pickerProps" }] : []));
     ngOnInit() {
         // Re-format names when the active language changes.
         this.lang.locale$
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.localeTick.update((v) => v + 1));
-        // Track viewport width so the tile count stays responsive.
-        if (typeof window !== 'undefined') {
-            fromEvent(window, 'resize')
-                .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this.viewportWidth.set(this.getViewportWidth()));
-        }
+        this.observeOwnWidth();
     }
-    /** Shifts the visible window back by one tile-count without changing the selection. */
+    /** Shows the days before the visible ones, without changing the selection. */
     navigatePrevious() {
-        this.dayOffset.update((o) => o - this.tileCount());
+        this.shiftWindow(-1);
     }
-    /** Shifts the visible window forward by one tile-count without changing the selection. */
+    /** Shows the days after the visible ones, without changing the selection. */
     navigateNext() {
-        this.dayOffset.update((o) => o + this.tileCount());
+        this.shiftWindow(1);
     }
-    /** Resets the window to today and selects today. */
+    /** Returns to today: brings today into the strip and selects it. */
     goToToday() {
-        this.dayOffset.set(0);
-        // Only emit when today isn't already the selected day, so pressing "Today"
-        // while on today doesn't trigger a redundant reload.
-        if (!this.isSameDay(this.getToday(), this.selectedDate())) {
-            this.dateSelected.emit(this.getToday());
+        const today = this.getToday();
+        // Move explicitly: when today is already selected the window signal has no new
+        // source value to react to, but the user still expects to land on it.
+        this.windowStart.set(this.anchorFor(today, this.tileCount()));
+        // Only emit when today isn't already selected, so pressing "Today" while on
+        // today doesn't trigger a redundant reload.
+        if (!this.isSameDay(today, this.selectedDate())) {
+            this.dateSelected.emit(today);
         }
     }
     /** Selects a date and emits it, unless it is already the selected day. */
@@ -3078,8 +3184,8 @@ class MnDateSelectorBar {
         this.dateSelected.emit(date);
     }
     /**
-     * Handles the date-picker model change: centres the window on the picked date
-     * and emits it (unless it is already the selected day).
+     * Handles the date-picker model change: shows the picked day's week and emits
+     * it (unless it is already the selected day).
      * @param value The date string in YYYY-MM-DD format.
      */
     onDateModelChanged(value) {
@@ -3088,21 +3194,126 @@ class MnDateSelectorBar {
         const picked = new Date(value + 'T00:00:00');
         if (isNaN(picked.getTime()))
             return;
-        const today = this.getToday();
-        const diffDays = Math.round((picked.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-        // Centre the picked date in the visible tile window.
-        this.dayOffset.set(diffDays - Math.floor(this.tileCount() / 2));
+        this.windowStart.set(this.anchorFor(picked, this.tileCount()));
         // Picking the day that's already selected shouldn't re-emit.
         if (!this.isSameDay(picked, this.selectedDate())) {
             this.dateSelected.emit(picked);
         }
     }
+    /** Whether the tile at `index` is the one reachable with Tab. */
+    isTabbable(index) {
+        return index === this.focusedIndex();
+    }
+    /** Remembers which tile last held focus, so Tab returns to it. */
+    onTileFocus(index) {
+        this.focusedIndex.set(index);
+    }
+    /**
+     * Moves focus across the week with the arrow keys. Running off either end turns
+     * the page to the neighbouring week and lands on the day that continues the run,
+     * so the weeks read as one continuous calendar.
+     */
+    onTileKeydown(event, index) {
+        const lastIndex = this.tileCount() - 1;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < lastIndex) {
+                    this.moveFocusTo(index + 1);
+                }
+                else {
+                    // Off the end: turn the page and land on the day that continues the run.
+                    this.shiftWindow(1);
+                    this.moveFocusTo(0);
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0) {
+                    this.moveFocusTo(index - 1);
+                }
+                else {
+                    this.shiftWindow(-1);
+                    this.moveFocusTo(lastIndex);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.moveFocusTo(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.moveFocusTo(lastIndex);
+                break;
+            default:
+                break;
+        }
+    }
+    /** trackBy key for day tiles. */
+    trackByTile(_index, tile) {
+        return tile.date.getTime();
+    }
     /**
-     * Returns the current viewport width in pixels, falling back to a desktop-ish
-     * width when there is no window (e.g. server-side rendering).
+     * Moves the strip by `pages` of whatever it is currently showing. Paging by the
+     * visible count is what keeps a full week Monday-aligned — seven days forward
+     * from a Monday is the next Monday.
      */
-    getViewportWidth() {
-        return typeof window === 'undefined' ? 1280 : window.innerWidth;
+    shiftWindow(pages) {
+        const next = new Date(this.windowStart());
+        next.setDate(next.getDate() + pages * this.tileCount());
+        this.windowStart.set(next);
+    }
+    /** Focuses the tile at `index` once the week has rendered. */
+    moveFocusTo(index) {
+        this.focusedIndex.set(index);
+        afterNextRender(() => this.tileButtons()[index]?.nativeElement.focus(), { injector: this.injector });
+    }
+    /** Index of the selected day within the visible week, or -1 when off-week. */
+    indexOfSelected() {
+        return this.dayTiles().findIndex((tile) => tile.isSelected);
+    }
+    /**
+     * Where the strip should start to show `date` among `count` days: the week's
+     * Monday when a whole week is on show, otherwise centred on the day, since a
+     * partial strip has no week to align to.
+     */
+    anchorFor(date, count) {
+        if (count === DAYS_IN_WEEK)
+            return this.startOfWeek(date);
+        const start = new Date(date);
+        start.setHours(0, 0, 0, 0);
+        start.setDate(start.getDate() - Math.floor(count / 2));
+        return start;
+    }
+    /**
+     * Returns the Monday of the week containing `date`. `getDay()` counts from
+     * Sunday, so the shift maps Sunday to the end of the week rather than the start.
+     */
+    startOfWeek(date) {
+        const start = new Date(date);
+        start.setHours(0, 0, 0, 0);
+        start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
+        return start;
+    }
+    /** Whole calendar days from `from` to `to`, ignoring time of day and DST. */
+    daysBetween(from, to) {
+        const a = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
+        const b = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
+        return Math.round((b - a) / 86400000);
+    }
+    /** Tracks the bar's own width so the layout responds to its container. */
+    observeOwnWidth() {
+        const element = this.host.nativeElement;
+        this.containerWidth.set(element.getBoundingClientRect().width);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            if (width > 0)
+                this.containerWidth.set(width);
+        });
+        observer.observe(element);
+        this.destroyRef.onDestroy(() => observer.disconnect());
     }
     /** Returns a Date object for today at midnight. */
     getToday() {
@@ -3117,7 +3328,7 @@ class MnDateSelectorBar {
             a.getDate() === b.getDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDateSelectorBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDateSelectorBar, isStandalone: true, selector: "mn-date-selector-bar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, pickDateLabel: { classPropertyName: "pickDateLabel", publicName: "pickDateLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: "<!-- Date selector bar -->\n<div\n  class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center justify-center rounded-xl px-4 py-5 gap-x-6 gap-y-6 overflow-hidden\">\n  <!-- Top row on mobile/tablet: Today + Date picker side by side -->\n  <div class=\"flex min-[1500px]:contents items-center gap-3\">\n    <!-- Today button -->\n    <button (click)=\"goToToday()\" [data]=\"{ variant: 'fill', color: 'primary', size: 'lg' }\"\n            class=\"flex-1 min-[1500px]:flex-none\"\n            mnButton>\n      {{ todayLabel() }}\n    </button>\n\n    <!-- Date picker (visible on mobile/tablet in top row, moves to end on desktop).\n         Wrapped in a div that owns the responsive hide: with fullWidth the datetime sets an\n         inline `display:block` on its host, which would override `min-[1500px]:hidden` and leave it\n         visible on desktop (showing two pickers). Hiding the wrapper avoids that. -->\n    <div class=\"min-[1500px]:hidden flex-1 min-w-0\">\n      <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                       [ngModel]=\"selectedDateString()\"\n                       [props]=\"{ id: 'mn-dsb-date-mobile', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true, fullWidth: true }\"\n                       class=\"block w-full\"></mn-lib-datetime>\n    </div>\n  </div>\n\n  <!-- Date navigation (arrows + day tiles). Hidden on very narrow screens\n       (< MIN_STRIP_WIDTH), where only the Today button and date picker remain. -->\n  @if (showDayStrip()) {\n    <div class=\"flex items-center gap-4 overflow-x-auto mx-auto min-[1500px]:mx-0 pb-2 max-w-full\">\n      <!-- Left arrow: shifts the visible day window backward -->\n      <button (click)=\"navigatePrevious()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Day tiles -->\n      @for (tile of dayTiles(); track tile.date.getTime()) {\n        <button\n          (click)=\"selectDate(tile.date)\"\n          [class.bg-primary]=\"tile.isSelected\"\n          [class.hover:bg-base-200]=\"!tile.isSelected\"\n          [class.text-primary-content]=\"tile.isSelected\"\n          class=\"flex flex-col items-center min-w-12 min-[1500px]:min-w-16 px-2 min-[1500px]:px-3 py-2 rounded-lg transition-all cursor-pointer shrink-0\"\n        >\n          <span class=\"text-xs font-medium uppercase\">{{ tile.dayName }}</span>\n          <span class=\"text-base min-[1500px]:text-lg font-bold\">{{ tile.dayNumber }}</span>\n        </button>\n      }\n\n      <!-- Right arrow: shifts the visible day window forward -->\n      <button (click)=\"navigateNext()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n\n  <!-- Vertical divider (hidden on mobile/tablet) -->\n  <div class=\"hidden min-[1500px]:block w-px h-10 bg-base-300\"></div>\n\n  <!-- Date picker (desktop only, hidden on mobile/tablet since it's in the top row) -->\n  <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                   [ngModel]=\"selectedDateString()\"\n                   [props]=\"{ id: 'mn-dsb-date-desktop', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true }\"\n                   class=\"hidden min-[1500px]:block\"></mn-lib-datetime>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDateSelectorBar, isStandalone: true, selector: "mn-date-selector-bar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, pickDateLabel: { classPropertyName: "pickDateLabel", publicName: "pickDateLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, dayStripLabel: { classPropertyName: "dayStripLabel", publicName: "dayStripLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "tileButtons", predicate: ["tileButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. It never\n     stacks: as room runs out it shows fewer days, then hands over to the picker.\n     Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex items-center gap-4 px-4 py-3\">\n\n  <!-- Today: returns the strip and the selection to the current day, and the\n       control people reach for most, so it carries the weight of a filled button. -->\n  <button (click)=\"goToToday()\"\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md' }\"\n          class=\"shrink-0\"\n          mnButton\n          type=\"button\">\n    {{ todayLabel() }}\n  </button>\n\n  <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n       Every date stays reachable on a phone, in one tap rather than by paging.\n       The caption comes along, so the compact bar is labelled like the wide one \u2014\n       it names the selected day's month rather than a visible range. -->\n  @if (!showDayStrip()) {\n    <span aria-hidden=\"true\"\n          class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n      {{ monthCaption() }}\n    </span>\n\n    <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                     [ngModel]=\"selectedDateString()\"\n                     [props]=\"pickerProps()\"\n                     class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n  }\n\n  <!-- The strip takes the room left over and centres its contents in it, so on a\n       wide bar the days sit in the middle rather than trailing off to one side. -->\n  @if (showDayStrip()) {\n    <div [attr.aria-label]=\"dayStripLabel()\"\n         class=\"flex min-w-0 flex-1 items-center justify-center gap-3\"\n         role=\"group\">\n      <!-- Names the month the strip is in, so the day numbers are never loose. -->\n      <span aria-hidden=\"true\"\n            class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n        {{ monthCaption() }}\n      </span>\n\n      <button (click)=\"navigatePrevious()\"\n              [attr.aria-label]=\"previousLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Days read on one line so each sits at the same height as the buttons\n           either side of it. Roving tabindex: one day is in the tab order, the\n           arrow keys move between the rest and page the strip at either end. -->\n      <div class=\"flex min-w-0 gap-1\">\n        @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n          <!-- A month break is marked by extra breathing room rather than a rule,\n               so the run of days stays unbroken; the caption names both months. -->\n          <button #tileButton\n                  (click)=\"selectDate(tile.date)\"\n                  (focus)=\"onTileFocus(i)\"\n                  (keydown)=\"onTileKeydown($event, i)\"\n                  [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                  [attr.aria-label]=\"tile.accessibleLabel\"\n                  [attr.aria-pressed]=\"tile.isSelected\"\n                  [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                  [class.bg-primary]=\"tile.isSelected\"\n                  [class.hover:bg-base-200]=\"!tile.isSelected\"\n                  [class.ml-3]=\"tile.startsNewMonth\"\n                  [class.text-primary-content]=\"tile.isSelected\"\n                  class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                  type=\"button\">\n            <span [class.opacity-60]=\"!tile.isSelected\"\n                  [class.opacity-90]=\"tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"text-xs font-medium uppercase\">\n              {{ tile.dayName }}\n            </span>\n            <span aria-hidden=\"true\" class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            <!-- Today's dot. Every day reserves the space so no tile changes\n                 width; only its colour says which one is today, and exactly one\n                 colour class applies at a time so they can't fight. -->\n            <span [class.bg-primary-content]=\"tile.isToday && tile.isSelected\"\n                  [class.bg-primary]=\"tile.isToday && !tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"size-1 shrink-0 rounded-full\"></span>\n          </button>\n        }\n      </div>\n\n      <button (click)=\"navigateNext()\"\n              [attr.aria-label]=\"nextLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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,
@@ -3128,8 +3339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnDatetime,
                         LucideChevronLeft,
                         LucideChevronRight,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Date selector bar -->\n<div\n  class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center justify-center rounded-xl px-4 py-5 gap-x-6 gap-y-6 overflow-hidden\">\n  <!-- Top row on mobile/tablet: Today + Date picker side by side -->\n  <div class=\"flex min-[1500px]:contents items-center gap-3\">\n    <!-- Today button -->\n    <button (click)=\"goToToday()\" [data]=\"{ variant: 'fill', color: 'primary', size: 'lg' }\"\n            class=\"flex-1 min-[1500px]:flex-none\"\n            mnButton>\n      {{ todayLabel() }}\n    </button>\n\n    <!-- Date picker (visible on mobile/tablet in top row, moves to end on desktop).\n         Wrapped in a div that owns the responsive hide: with fullWidth the datetime sets an\n         inline `display:block` on its host, which would override `min-[1500px]:hidden` and leave it\n         visible on desktop (showing two pickers). Hiding the wrapper avoids that. -->\n    <div class=\"min-[1500px]:hidden flex-1 min-w-0\">\n      <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                       [ngModel]=\"selectedDateString()\"\n                       [props]=\"{ id: 'mn-dsb-date-mobile', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true, fullWidth: true }\"\n                       class=\"block w-full\"></mn-lib-datetime>\n    </div>\n  </div>\n\n  <!-- Date navigation (arrows + day tiles). Hidden on very narrow screens\n       (< MIN_STRIP_WIDTH), where only the Today button and date picker remain. -->\n  @if (showDayStrip()) {\n    <div class=\"flex items-center gap-4 overflow-x-auto mx-auto min-[1500px]:mx-0 pb-2 max-w-full\">\n      <!-- Left arrow: shifts the visible day window backward -->\n      <button (click)=\"navigatePrevious()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Day tiles -->\n      @for (tile of dayTiles(); track tile.date.getTime()) {\n        <button\n          (click)=\"selectDate(tile.date)\"\n          [class.bg-primary]=\"tile.isSelected\"\n          [class.hover:bg-base-200]=\"!tile.isSelected\"\n          [class.text-primary-content]=\"tile.isSelected\"\n          class=\"flex flex-col items-center min-w-12 min-[1500px]:min-w-16 px-2 min-[1500px]:px-3 py-2 rounded-lg transition-all cursor-pointer shrink-0\"\n        >\n          <span class=\"text-xs font-medium uppercase\">{{ tile.dayName }}</span>\n          <span class=\"text-base min-[1500px]:text-lg font-bold\">{{ tile.dayNumber }}</span>\n        </button>\n      }\n\n      <!-- Right arrow: shifts the visible day window forward -->\n      <button (click)=\"navigateNext()\" [data]=\"{ variant: 'outline', size: 'md', color: 'gray' }\" class=\"shrink-0\"\n              mnButton>\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n\n  <!-- Vertical divider (hidden on mobile/tablet) -->\n  <div class=\"hidden min-[1500px]:block w-px h-10 bg-base-300\"></div>\n\n  <!-- Date picker (desktop only, hidden on mobile/tablet since it's in the top row) -->\n  <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                   [ngModel]=\"selectedDateString()\"\n                   [props]=\"{ id: 'mn-dsb-date-desktop', mode: 'date', placeholder: pickDateLabel(), size: 'lg', borderRadius: 'xl', hover: true }\"\n                   class=\"hidden min-[1500px]:block\"></mn-lib-datetime>\n</div>\n" }]
-        }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], pickDateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickDateLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!-- Date selector bar. Layout is driven by the bar's own measured width, so it\n     rearranges for the space the bar was given, not for the viewport. It never\n     stacks: as room runs out it shows fewer days, then hands over to the picker.\n     Nothing here is boxed \u2014 spacing does the grouping, not borders. -->\n<div class=\"flex items-center gap-4 px-4 py-3\">\n\n  <!-- Today: returns the strip and the selection to the current day, and the\n       control people reach for most, so it carries the weight of a filled button. -->\n  <button (click)=\"goToToday()\"\n          [data]=\"{ variant: 'fill', color: 'primary', size: 'md' }\"\n          class=\"shrink-0\"\n          mnButton\n          type=\"button\">\n    {{ todayLabel() }}\n  </button>\n\n  <!-- Too narrow for a usable strip, so the picker takes its place beside Today.\n       Every date stays reachable on a phone, in one tap rather than by paging.\n       The caption comes along, so the compact bar is labelled like the wide one \u2014\n       it names the selected day's month rather than a visible range. -->\n  @if (!showDayStrip()) {\n    <span aria-hidden=\"true\"\n          class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n      {{ monthCaption() }}\n    </span>\n\n    <mn-lib-datetime (ngModelChange)=\"onDateModelChanged($event)\"\n                     [ngModel]=\"selectedDateString()\"\n                     [props]=\"pickerProps()\"\n                     class=\"block min-w-0 flex-1\"></mn-lib-datetime>\n  }\n\n  <!-- The strip takes the room left over and centres its contents in it, so on a\n       wide bar the days sit in the middle rather than trailing off to one side. -->\n  @if (showDayStrip()) {\n    <div [attr.aria-label]=\"dayStripLabel()\"\n         class=\"flex min-w-0 flex-1 items-center justify-center gap-3\"\n         role=\"group\">\n      <!-- Names the month the strip is in, so the day numbers are never loose. -->\n      <span aria-hidden=\"true\"\n            class=\"shrink-0 text-xs font-semibold tracking-wide whitespace-nowrap uppercase opacity-55\">\n        {{ monthCaption() }}\n      </span>\n\n      <button (click)=\"navigatePrevious()\"\n              [attr.aria-label]=\"previousLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <!-- Days read on one line so each sits at the same height as the buttons\n           either side of it. Roving tabindex: one day is in the tab order, the\n           arrow keys move between the rest and page the strip at either end. -->\n      <div class=\"flex min-w-0 gap-1\">\n        @for (tile of dayTiles(); track tile.date.getTime(); let i = $index) {\n          <!-- A month break is marked by extra breathing room rather than a rule,\n               so the run of days stays unbroken; the caption names both months. -->\n          <button #tileButton\n                  (click)=\"selectDate(tile.date)\"\n                  (focus)=\"onTileFocus(i)\"\n                  (keydown)=\"onTileKeydown($event, i)\"\n                  [attr.aria-current]=\"tile.isToday ? 'date' : null\"\n                  [attr.aria-label]=\"tile.accessibleLabel\"\n                  [attr.aria-pressed]=\"tile.isSelected\"\n                  [attr.tabindex]=\"isTabbable(i) ? 0 : -1\"\n                  [class.bg-primary]=\"tile.isSelected\"\n                  [class.hover:bg-base-200]=\"!tile.isSelected\"\n                  [class.ml-3]=\"tile.startsNewMonth\"\n                  [class.text-primary-content]=\"tile.isSelected\"\n                  class=\"flex min-w-16 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none\"\n                  type=\"button\">\n            <span [class.opacity-60]=\"!tile.isSelected\"\n                  [class.opacity-90]=\"tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"text-xs font-medium uppercase\">\n              {{ tile.dayName }}\n            </span>\n            <span aria-hidden=\"true\" class=\"font-bold tabular-nums\">{{ tile.dayNumber }}</span>\n            <!-- Today's dot. Every day reserves the space so no tile changes\n                 width; only its colour says which one is today, and exactly one\n                 colour class applies at a time so they can't fight. -->\n            <span [class.bg-primary-content]=\"tile.isToday && tile.isSelected\"\n                  [class.bg-primary]=\"tile.isToday && !tile.isSelected\"\n                  aria-hidden=\"true\"\n                  class=\"size-1 shrink-0 rounded-full\"></span>\n          </button>\n        }\n      </div>\n\n      <button (click)=\"navigateNext()\"\n              [attr.aria-label]=\"nextLabel()\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], pickDateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickDateLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], dayStripLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStripLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], tileButtons: [{ type: i0.ViewChildren, args: ['tileButton', { isSignal: true }] }] } });
 
 const mnMultiSelectVariants = tv({
     base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm cursor-pointer',
@@ -5060,7 +5271,7 @@ class MnCollectionBase {
             this.cdr.markForCheck();
         });
         this.searchSubscription = this.searchSubject
-            .pipe(debounceTime$1(300))
+            .pipe(debounceTime(300))
             .subscribe(value => {
             this.searchValue = value;
             this.applyFilter(true);
@@ -9017,7 +9228,7 @@ class CalendarViewComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "mn-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", buttons: "buttons", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar: date strip and calendar controls (view switcher + action buttons) share one row only on very\n       wide screens (\u22651500px). The breakpoint matches the date-selector bar's own two-layer\u2192single-row switch\n       so they flip in lockstep; a mismatched breakpoint left the controls inlined while the date bar was\n       still stacked, producing a mixed layout. -->\n  <div class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center gap-2 py-3\">\n    <!-- Responsive date-selector bar: Today, day-window arrows, day tiles and a date picker. -->\n    <mn-date-selector-bar\n      (dateSelected)=\"onDateStripChange($event)\"\n      [locale]=\"config.locale\"\n      [pickDateLabel]=\"config.pickDateLabel\"\n      [selectedDate]=\"focusDay\"\n      [todayLabel]=\"config.todayLabel\"\n      class=\"min-w-0 min-[1500px]:flex-1\">\n    </mn-date-selector-bar>\n\n    @if (!isMobileView || buttons.length || showButton) {\n      <!-- order-first stacks the controls above the date strip when the toolbar wraps (below 1500px). -->\n      <div class=\"flex items-center justify-end gap-2 shrink-0 order-first min-[1500px]:order-none\">\n        <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n        @if (!isMobileView) {\n          <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n            @for (view of viewOptions; track view.value) {\n              <button\n                (click)=\"switchView(view.value)\"\n                [attr.aria-selected]=\"currentView === view.value\"\n                [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n                mnButton\n                role=\"tab\">\n                {{ view.label }}\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Action buttons (custom buttons + optional showButton CTA). -->\n        @if (buttons.length || showButton) {\n          <div [class.flex-1]=\"isMobileView\" class=\"flex items-center gap-2\">\n            @for (btn of buttons; track btn.label) {\n              <button (click)=\"btn.onClick()\" [class.flex-1]=\"isMobileView\" [data]=\"btn.buttonData || {}\"\n                      mnButton>{{ btn.label }}\n              </button>\n            }\n            @if (showButton) {\n              <button (click)=\"ButtonClickedEvent.emit()\" [class.flex-1]=\"isMobileView\" [data]=\"{}\"\n                      mnButton>{{ buttonTitle }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDateSelectorBar, selector: "mn-date-selector-bar", inputs: ["selectedDate", "todayLabel", "pickDateLabel", "locale"], outputs: ["dateSelected"] }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar: date strip and calendar controls (view switcher + action buttons) share one row only on very\n       wide screens (\u22651500px). This breakpoint is the toolbar's own concern \u2014 the date-selector bar now sizes\n       itself from its measured width, so it adapts to whatever column this layout hands it and the two no\n       longer have to be kept in sync. -->\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", "previousLabel", "nextLabel", "dayStripLabel", "locale"], outputs: ["dateSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
@@ -9031,7 +9242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnDateSelectorBar
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar: date strip and calendar controls (view switcher + action buttons) share one row only on very\n       wide screens (\u22651500px). The breakpoint matches the date-selector bar's own two-layer\u2192single-row switch\n       so they flip in lockstep; a mismatched breakpoint left the controls inlined while the date bar was\n       still stacked, producing a mixed layout. -->\n  <div class=\"flex flex-col min-[1500px]:flex-row min-[1500px]:items-center gap-2 py-3\">\n    <!-- Responsive date-selector bar: Today, day-window arrows, day tiles and a date picker. -->\n    <mn-date-selector-bar\n      (dateSelected)=\"onDateStripChange($event)\"\n      [locale]=\"config.locale\"\n      [pickDateLabel]=\"config.pickDateLabel\"\n      [selectedDate]=\"focusDay\"\n      [todayLabel]=\"config.todayLabel\"\n      class=\"min-w-0 min-[1500px]:flex-1\">\n    </mn-date-selector-bar>\n\n    @if (!isMobileView || buttons.length || showButton) {\n      <!-- order-first stacks the controls above the date strip when the toolbar wraps (below 1500px). -->\n      <div class=\"flex items-center justify-end gap-2 shrink-0 order-first min-[1500px]:order-none\">\n        <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n        @if (!isMobileView) {\n          <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n            @for (view of viewOptions; track view.value) {\n              <button\n                (click)=\"switchView(view.value)\"\n                [attr.aria-selected]=\"currentView === view.value\"\n                [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n                mnButton\n                role=\"tab\">\n                {{ view.label }}\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Action buttons (custom buttons + optional showButton CTA). -->\n        @if (buttons.length || showButton) {\n          <div [class.flex-1]=\"isMobileView\" class=\"flex items-center gap-2\">\n            @for (btn of buttons; track btn.label) {\n              <button (click)=\"btn.onClick()\" [class.flex-1]=\"isMobileView\" [data]=\"btn.buttonData || {}\"\n                      mnButton>{{ btn.label }}\n              </button>\n            }\n            @if (showButton) {\n              <button (click)=\"ButtonClickedEvent.emit()\" [class.flex-1]=\"isMobileView\" [data]=\"{}\"\n                      mnButton>{{ buttonTitle }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar: date strip and calendar controls (view switcher + action buttons) share one row only on very\n       wide screens (\u22651500px). This breakpoint is the toolbar's own concern \u2014 the date-selector bar now sizes\n       itself from its measured width, so it adapts to whatever column this layout hands it and the two no\n       longer have to be kept in sync. -->\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: [{