mn-angular-lib 1.0.120 → 1.0.122

package/fesm2022/mn-angular-lib.mjs

@@ -9246,7 +9246,6 @@ class CalendarViewComponent {
     focusDay = new Date();
     viewOptions = [];
     isMobileView = false;
-    isTabletView = false;
     /** BehaviorSubject so late-subscribing child views receive the last emitted events. */
     internalEventsChanged = new BehaviorSubject([]);
     /** Subject for broadcasting focus-day changes to child views. */
@@ -9403,7 +9402,6 @@ class CalendarViewComponent {
         // view takes over earlier — and consumers can tune where via `mobileBreakpoint`.
         const breakpoint = this.config.mobileBreakpoint;
         this.isMobileView = width < breakpoint;
-        this.isTabletView = width >= breakpoint && width < 1024;
         if (this.isMobileView && !wasMobile) {
             this.currentView = CalendarView.DAY;
         }
@@ -9436,7 +9434,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 spans the full width so the primary action can sit above the\n       upcoming-events sidebar, using that otherwise-empty space. On mobile it\n       reflows: Today and the controls share the top row, and the \u2039 date \u203A nav\n       drops to its own full-width row below. Responsive `order` does the reflow. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"order-1 shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Jumping somewhere far off, which the arrows would take all day to reach.\n         On mobile the picker collapses to its icon-only variant. Its `ml-auto`\n         pulls the picker \u2014 and the switcher and action button that follow it \u2014 to\n         the right of the row on every width, leaving Today (and the nav) on the\n         left, so the controls align right consistently across devices. -->\n    <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                     [ngModel]=\"focusDayString\"\n                     [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                     class=\"order-2 ml-auto block lg:order-3\"></mn-lib-datetime>\n\n    <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n    @if (!isMobileView) {\n      <div aria-label=\"Calendar view\" class=\"order-3 flex border border-base-300 rounded-md overflow-hidden lg:order-4\" role=\"tablist\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            (click)=\"switchView(view.value)\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n            mnButton\n            role=\"tab\"\n            type=\"button\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Action buttons (custom buttons + optional showButton CTA). They follow the\n         picker, so the picker's `ml-auto` carries them to the right of the row on\n         every width \u2014 on desktop that lands them above the upcoming-events sidebar. -->\n    @if (buttons.length || showButton) {\n      <div class=\"order-4 flex items-center gap-2 lg:order-5\">\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. On mobile this\n         nav takes its own full-width row (basis-full, ordered last) with the date\n         centred between the arrows at the row's edges; on desktop it sits inline\n         after Today. `aria-live` announces the new period after each step. -->\n    <div class=\"order-5 flex basis-full items-center justify-between gap-1 lg:order-2 lg:basis-auto lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\" class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar has one layout below the desktop (`lg`) width and one at it. Below\n       `lg`: a controls row (Today anchored left, the right-hand cluster anchored\n       right) with the \u2039 date \u203A nav centred on its own row beneath \u2014 the same\n       shape from phone through tablet, so nothing wraps into a lopsided diagonal.\n       At `lg`, where the upcoming-events sidebar also appears, the nav folds up\n       inline after Today and the whole toolbar becomes a single row. The one JS\n       breakpoint (`mobileBreakpoint`) governs the phone controls \u2014 icon-only\n       picker, hidden view-switcher, forced day view \u2014 not the toolbar's shape. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. Below `lg` it\n         sits centred on its own row (basis-full, ordered last) \u2014 a period header\n         above the grid, tight rather than flinging the arrows to the row's edges.\n         At `lg` it folds inline right after Today, taking a stable min-width so\n         the arrows don't jitter as the label's length changes. -->\n    <div class=\"flex basis-full order-last justify-center items-center gap-1\n                lg:basis-auto lg:order-none lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\"\n          class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Right-hand controls travel together as one cluster with `ml-auto`, so they\n         hold to the right of the row on every width \u2014 and when space runs short the\n         whole group wraps to a new line as a unit rather than stranding a lone\n         button. On desktop the cluster lands above the upcoming-events sidebar,\n         using that otherwise-empty space. -->\n    <div class=\"ml-auto flex items-center gap-2\">\n      <!-- On mobile the picker collapses to its icon-only variant. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      }\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 [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
@@ -9453,7 +9451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         LucideChevronRight
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar spans the full width so the primary action can sit above the\n       upcoming-events sidebar, using that otherwise-empty space. On mobile it\n       reflows: Today and the controls share the top row, and the \u2039 date \u203A nav\n       drops to its own full-width row below. Responsive `order` does the reflow. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"order-1 shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Jumping somewhere far off, which the arrows would take all day to reach.\n         On mobile the picker collapses to its icon-only variant. Its `ml-auto`\n         pulls the picker \u2014 and the switcher and action button that follow it \u2014 to\n         the right of the row on every width, leaving Today (and the nav) on the\n         left, so the controls align right consistently across devices. -->\n    <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                     [ngModel]=\"focusDayString\"\n                     [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                     class=\"order-2 ml-auto block lg:order-3\"></mn-lib-datetime>\n\n    <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n    @if (!isMobileView) {\n      <div aria-label=\"Calendar view\" class=\"order-3 flex border border-base-300 rounded-md overflow-hidden lg:order-4\" role=\"tablist\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            (click)=\"switchView(view.value)\"\n            [attr.aria-controls]=\"panelId\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n            mnButton\n            role=\"tab\"\n            type=\"button\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Action buttons (custom buttons + optional showButton CTA). They follow the\n         picker, so the picker's `ml-auto` carries them to the right of the row on\n         every width \u2014 on desktop that lands them above the upcoming-events sidebar. -->\n    @if (buttons.length || showButton) {\n      <div class=\"order-4 flex items-center gap-2 lg:order-5\">\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. On mobile this\n         nav takes its own full-width row (basis-full, ordered last) with the date\n         centred between the arrows at the row's edges; on desktop it sits inline\n         after Today. `aria-live` announces the new period after each step. -->\n    <div class=\"order-5 flex basis-full items-center justify-between gap-1 lg:order-2 lg:basis-auto lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\" class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n  </div>\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
+                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  <!-- Toolbar has one layout below the desktop (`lg`) width and one at it. Below\n       `lg`: a controls row (Today anchored left, the right-hand cluster anchored\n       right) with the \u2039 date \u203A nav centred on its own row beneath \u2014 the same\n       shape from phone through tablet, so nothing wraps into a lopsided diagonal.\n       At `lg`, where the upcoming-events sidebar also appears, the nav folds up\n       inline after Today and the whole toolbar becomes a single row. The one JS\n       breakpoint (`mobileBreakpoint`) governs the phone controls \u2014 icon-only\n       picker, hidden view-switcher, forced day view \u2014 not the toolbar's shape. -->\n  <div class=\"flex flex-wrap items-center gap-x-3 gap-y-2 py-3\">\n\n    <button (click)=\"goToToday()\"\n            [data]=\"{ variant: 'outline', size: 'md', color: 'primary' }\"\n            class=\"shrink-0\"\n            mnButton\n            type=\"button\">\n      {{ config.todayLabel }}\n    </button>\n\n    <!-- Stepping through time. The arrows sit either side of the date they move,\n         so the control and the thing it controls read as one unit. Below `lg` it\n         sits centred on its own row (basis-full, ordered last) \u2014 a period header\n         above the grid, tight rather than flinging the arrows to the row's edges.\n         At `lg` it folds inline right after Today, taking a stable min-width so\n         the arrows don't jitter as the label's length changes. -->\n    <div class=\"flex basis-full order-last justify-center items-center gap-1\n                lg:basis-auto lg:order-none lg:justify-start\">\n      <button (click)=\"navigate(-1)\"\n              [attr.aria-label]=\"config.previousLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronLeft></svg>\n      </button>\n\n      <h2 aria-live=\"polite\"\n          class=\"text-center text-base font-semibold whitespace-nowrap px-1 lg:min-w-56\">\n        {{ periodLabel }}\n      </h2>\n\n      <button (click)=\"navigate(1)\"\n              [attr.aria-label]=\"config.nextLabel\"\n              [data]=\"{ variant: 'text', size: 'md', color: 'gray' }\"\n              class=\"shrink-0\"\n              mnButton\n              type=\"button\">\n        <svg [size]=\"18\" lucideChevronRight></svg>\n      </button>\n    </div>\n\n    <!-- Right-hand controls travel together as one cluster with `ml-auto`, so they\n         hold to the right of the row on every width \u2014 and when space runs short the\n         whole group wraps to a new line as a unit rather than stranding a lone\n         button. On desktop the cluster lands above the upcoming-events sidebar,\n         using that otherwise-empty space. -->\n    <div class=\"ml-auto flex items-center gap-2\">\n      <!-- On mobile the picker collapses to its icon-only variant. -->\n      <mn-lib-datetime (ngModelChange)=\"onPickDate($event)\"\n                       [ngModel]=\"focusDayString\"\n                       [props]=\"{ id: panelId + '-date', mode: 'date', placeholder: config.pickDateLabel, size: 'md', borderRadius: 'lg', hover: true, iconOnly: isMobileView }\"\n                       class=\"block\"></mn-lib-datetime>\n\n      <!-- View switcher (month / week / day) \u2014 hidden on mobile, which is forced to day view. -->\n      @if (!isMobileView) {\n        <div aria-label=\"Calendar view\" class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              (click)=\"switchView(view.value)\"\n              [attr.aria-controls]=\"panelId\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              mnButton\n              role=\"tab\"\n              type=\"button\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Action buttons (custom buttons + optional showButton CTA). -->\n      @if (buttons.length || showButton) {\n        @for (btn of buttons; track btn.label) {\n          <button (click)=\"btn.onClick()\" [data]=\"btn.buttonData || {}\" mnButton type=\"button\">\n            {{ btn.label }}\n          </button>\n        }\n        @if (showButton) {\n          <button (click)=\"ButtonClickedEvent.emit()\" [data]=\"{}\" mnButton type=\"button\">\n            {{ buttonTitle }}\n          </button>\n        }\n      }\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 [id]=\"panelId\" class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\" role=\"tabpanel\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showButton: [{
                 type: Input
             }], buttonTitle: [{
@@ -9484,13 +9482,22 @@ const DEFAULT_SKELETON_TAB_COUNT = 3;
  * Supports translation keys for labels via MnTranslatePipe.
  */
 class MnTabComponent {
+    /** The horizontally-scrolling wrapper the edge fade is painted onto. */
+    scrollContainer;
+    /** How far the fade reaches in from each overflowing edge. */
+    static FADE = '2rem';
     /** Data source containing tab items and default active index. */
     dataSource;
     /**
      * Whether to enable horizontal scrolling when items overflow.
-     * If true, tabs will scroll horizontally instead of shrinking too much.
+     * When true, tabs scroll horizontally instead of overflowing their container.
+     *
+     * Defaults to `true`: the tab bar never wraps (`flex-nowrap`), so without
+     * scrolling an overflowing bar would clip its last tabs or push the page width
+     * on narrow screens. When the tabs already fit, `overflow-x-auto` is a no-op,
+     * so this default only ever changes behaviour for the overflow case it fixes.
      */
-    scrollable = false;
+    scrollable = true;
     /**
      * Whether tabs should stretch to fill the available width.
      * Defaults to false, so tabs only take as much space as their content.
@@ -9500,6 +9507,8 @@ class MnTabComponent {
     activeChange = new EventEmitter();
     /** The currently active tab item. */
     currentActive;
+    /** Watches the wrapper and the tab row so the fade re-evaluates on width or content changes. */
+    resizeObserver;
     /**
      * Whether the tab bar is loading and should render skeleton tabs, from
      * {@link MnTabDataSource.state}.
@@ -9528,6 +9537,51 @@ class MnTabComponent {
     ngDoCheck() {
         this.syncActiveTab();
     }
+    /**
+     * Starts watching the scroll wrapper so the edge fade stays honest. A scroll
+     * moves the fade to whichever side now hides tabs; a resize (viewport change)
+     * or a change to the tab row's width (tabs added, relabelled, skeleton →
+     * loaded) re-checks whether either edge overflows at all.
+     */
+    ngAfterViewInit() {
+        const el = this.scrollContainer?.nativeElement;
+        if (!el)
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.updateEdgeFades());
+        this.resizeObserver.observe(el);
+        if (el.firstElementChild)
+            this.resizeObserver.observe(el.firstElementChild);
+        this.updateEdgeFades();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Paints a fade over whichever edge has tabs scrolled out of view — a soft
+     * dissolve that reads as "more this way", the affordance a hidden scrollbar
+     * otherwise costs us. Uses a mask (content → transparent) rather than a
+     * background-coloured overlay, so it needs no knowledge of the theme.
+     */
+    updateEdgeFades() {
+        const el = this.scrollContainer?.nativeElement;
+        if (!el)
+            return;
+        const fadeStart = el.scrollLeft > 1;
+        const fadeEnd = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        const f = MnTabComponent.FADE;
+        let mask = '';
+        if (this.scrollable && fadeStart && fadeEnd) {
+            mask = `linear-gradient(to right, transparent 0, #000 ${f}, #000 calc(100% - ${f}), transparent 100%)`;
+        }
+        else if (this.scrollable && fadeStart) {
+            mask = `linear-gradient(to right, transparent 0, #000 ${f}, #000 100%)`;
+        }
+        else if (this.scrollable && fadeEnd) {
+            mask = `linear-gradient(to right, #000 0, #000 calc(100% - ${f}), transparent 100%)`;
+        }
+        el.style.maskImage = mask;
+        el.style.setProperty('-webkit-mask-image', mask);
+    }
     /**
      * Sets the given tab item as active, invoking deactivate/activate callbacks.
      * @param item - The tab item to activate.
@@ -9569,12 +9623,15 @@ class MnTabComponent {
         this.currentActive = items[index];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { dataSource: [{
+            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.border-primary]=\"currentActive === item\"\n            [class.border-transparent]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer']
+            }], dataSource: [{
                 type: Input
             }], scrollable: [{
                 type: Input