@acorex/components 20.7.36 → 20.7.38

package/fesm2022/acorex-components-scheduler.mjs

@@ -6,16 +6,16 @@ import { AXDecoratorIconComponent, AXDecoratorGenericComponent } from '@acorex/c
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXSelectBoxComponent } from '@acorex/components/select-box';
 import { AXCalendarService } from '@acorex/core/date-time';
+import { AXEventService, AXSystemEvents } from '@acorex/core/events';
 import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
 import { AXLocaleService } from '@acorex/core/locale';
-import { AXPlatform } from '@acorex/core/platform';
 import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
 import { inject, signal, Injectable, DOCUMENT, input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, viewChild, linkedSignal, model, effect, untracked, NgModule } from '@angular/core';
-import { map } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { filter } from 'rxjs';
 import { isEqual, orderBy } from 'lodash-es';
 import { AXDragDirective, AXDropZoneDirective } from '@acorex/cdk/drag-drop';
 import { AXTooltipDirective } from '@acorex/components/tooltip';
@@ -25,6 +25,7 @@ class AXSchedulerService {
     constructor() {
         this.formatService = inject(AXFormatService);
         this.calendarService = inject(AXCalendarService);
+        this.localeService = inject(AXLocaleService);
         this.HOURS_PER_DAY = 24;
         this.MINUTES_PER_HOUR = 60;
         this.BLOCK_DURATION_MINUTES = 30;
@@ -322,6 +323,24 @@ class AXSchedulerService {
                 return 1;
         }
     }
+    /**
+     * Resolves the 0-based week-start index (0 = Sunday … 6 = Saturday) from locale or an override.
+     */
+    resolveWeekStartsOn(firstDayOfWeek) {
+        if (firstDayOfWeek) {
+            return this.getDayOfWeekNumber(firstDayOfWeek) - 1;
+        }
+        return this.localeService.activeProfile().calendar.week.startsOn;
+    }
+    /**
+     * Aligns a date to the start of its week using locale week layout and calendar weekday indexing.
+     */
+    alignToWeekStart(date, options) {
+        const startsOn = this.resolveWeekStartsOn(options?.firstDayOfWeek);
+        const dayIndex = date.weekdayIndex;
+        const daysToSubtract = (dayIndex - startsOn + 7) % 7;
+        return date.startOf('day').add('day', -daysToSubtract);
+    }
     /**
      * Gets slot data for a given start date and view.
      *
@@ -562,9 +581,9 @@ class AXSchedulerService {
         const internalWeekend = this.internalWeekend();
         const globalWeekend = this.calendarService.resolveCalendar(calendar).weekend;
         if (internalWeekend.length === 0) {
-            return globalWeekend.includes(date.dayOfWeek - 1);
+            return globalWeekend.includes(date.weekdayIndex);
         }
-        return this.internalWeekend().includes(date.dayOfWeek - 1);
+        return this.internalWeekend().includes(date.weekdayIndex);
     }
     /**
      * Filters appointments by resources and unassigned appointments.
@@ -1398,7 +1417,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
         this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
         this.date = input.required(...(ngDevMode ? [{ debugName: "date" }] : []));
         this.appointments = input([], ...(ngDevMode ? [{ debugName: "appointments" }] : []));
-        this.firstDayOfWeek = input('saturday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+        this.firstDayOfWeek = input(...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : []));
         this.selectedAppointmentId = input(null, ...(ngDevMode ? [{ debugName: "selectedAppointmentId" }] : []));
         this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
         // --- Constants ---
@@ -1435,19 +1454,11 @@ class AXSchedulerMonthViewComponent extends NXComponent {
         }, ...(ngDevMode ? [{ debugName: "monthStartDate" }] : []));
         // Generate the list of weekday names based on the firstDayOfWeek
         this.daysArray = computed(() => {
-            const dayNames = [];
-            const currentDate = this.date(); // Use a stable date for generating week headers
-            const currentDayOfWeek = currentDate.dayOfWeek;
-            const desiredFirstDayName = this.firstDayOfWeek();
-            const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
-            // Calculate days to subtract to get to the start of the week based on firstDayOfWeek
-            const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
-            let headerStartDate = currentDate.add('day', -daysToSubtract);
-            for (let i = 0; i < 7; i++) {
-                dayNames.push(headerStartDate);
-                headerStartDate = headerStartDate.add('day', 1);
-            }
-            return dayNames;
+            const currentDate = this.date();
+            const headerStartDate = this.schedulerService.alignToWeekStart(currentDate, {
+                firstDayOfWeek: this.firstDayOfWeek(),
+            });
+            return Array.from({ length: 7 }, (_, index) => headerStartDate.add('day', index));
         }, ...(ngDevMode ? [{ debugName: "daysArray" }] : []));
         // --- Calendar Grid Calculation ---
         this.calendarDaysInfo = computed(() => {
@@ -1456,10 +1467,11 @@ class AXSchedulerMonthViewComponent extends NXComponent {
                 return { days: [], weeksNeeded: 0 };
             const firstDayOfMonth = monthStart;
             const lastDayOfMonth = monthStart.endOf('month');
-            const firstDayGridNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
-            const firstDisplayedDayOfWeek = firstDayOfMonth.dayOfWeek;
-            const leadingDays = (firstDisplayedDayOfWeek - firstDayGridNum + this.DAYS_IN_WEEK) % this.DAYS_IN_WEEK;
-            const firstDayOfGrid = firstDayOfMonth.add('day', -leadingDays);
+            const firstDayOfGrid = this.schedulerService.alignToWeekStart(firstDayOfMonth, {
+                firstDayOfWeek: this.firstDayOfWeek(),
+            });
+            const leadingDays = Math.round((firstDayOfMonth.startOf('day').date.getTime() - firstDayOfGrid.startOf('day').date.getTime()) /
+                this.schedulerService.MILLISECONDS_PER_DAY);
             // Determine how many total days to show to fill out the weeks
             // A common approach is 6 weeks to ensure consistency, but your dynamic weeksNeeded is fine too.
             // Let's stick to your dynamic `weeksNeeded` and `totalDaysToGenerate`
@@ -4520,13 +4532,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 class AXSchedulerComponent extends NXComponent {
     constructor() {
         super(...arguments);
-        this.platformService = inject(AXPlatform);
         this.unsubscriber = inject(AXUnsubscriber);
         this.formatService = inject(AXFormatService);
         this.localeService = inject(AXLocaleService);
         this.calendarService = inject(AXCalendarService);
         this.schedulerService = inject(AXSchedulerService);
         this.translationService = inject(AXTranslationService);
+        this.eventService = inject(AXEventService);
+        this.translationRevision = signal(0, ...(ngDevMode ? [{ debugName: "translationRevision" }] : []));
         this.viewModeSelectbox = viewChild(AXSelectBoxComponent, ...(ngDevMode ? [{ debugName: "viewModeSelectbox" }] : []));
         this.calendarPopover = viewChild('calendarPopover', ...(ngDevMode ? [{ debugName: "calendarPopover" }] : []));
         this._calendarDayCellTemplate = viewChild('calendarDayCellTemplate', ...(ngDevMode ? [{ debugName: "_calendarDayCellTemplate" }] : []));
@@ -4543,12 +4556,32 @@ class AXSchedulerComponent extends NXComponent {
             agenda: 'agenda',
         };
         this.calendar = input(...(ngDevMode ? [undefined, { debugName: "calendar" }] : []));
-        this.calendarType = linkedSignal(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendarType" }] : []));
+        this.calendarType = linkedSignal(() => this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendarType" }] : []));
         this.startingDate = input(new Date(), ...(ngDevMode ? [{ debugName: "startingDate" }] : []));
-        this.currentDate = linkedSignal(() => this.calendarService.create(this.startingDate(), this.calendarType()).startOf('day'), ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
+        this.currentDate = linkedSignal(...(ngDevMode ? [{ debugName: "currentDate", source: () => ({
+                    startingDate: this.startingDate(),
+                    calendarType: this.calendarType(),
+                }),
+                computation: (source, previous) => {
+                    if (previous) {
+                        return this.calendarService.create(previous.value.date, source.calendarType);
+                    }
+                    return this.calendarService.create(source.startingDate, source.calendarType).startOf('day');
+                } }] : [{
+                source: () => ({
+                    startingDate: this.startingDate(),
+                    calendarType: this.calendarType(),
+                }),
+                computation: (source, previous) => {
+                    if (previous) {
+                        return this.calendarService.create(previous.value.date, source.calendarType);
+                    }
+                    return this.calendarService.create(source.startingDate, source.calendarType).startOf('day');
+                },
+            }]));
         this._appointments = signal([], ...(ngDevMode ? [{ debugName: "_appointments" }] : []));
         this.appointments = this._appointments.asReadonly();
-        this.rtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "rtl" }] : []));
+        this.rtl = this.localeService.isRtl;
         this.isFullScreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullScreen" }] : []));
         this.viewsDataSource = signal([], ...(ngDevMode ? [{ debugName: "viewsDataSource" }] : []));
         this.prevDate = signal(this.calendarService.create(new Date(), this.calendarType()), ...(ngDevMode ? [{ debugName: "prevDate" }] : []));
@@ -4570,7 +4603,7 @@ class AXSchedulerComponent extends NXComponent {
         this.showUnassignedAppointments = input(true, ...(ngDevMode ? [{ debugName: "showUnassignedAppointments" }] : []));
         this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
         this.resourceTemplate = input(...(ngDevMode ? [undefined, { debugName: "resourceTemplate" }] : []));
-        this.firstDayOfWeek = input('sunday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+        this.firstDayOfWeek = input(...(ngDevMode ? [undefined, { debugName: "firstDayOfWeek" }] : []));
         this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
         this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
         this.holidays = input(...(ngDevMode ? [undefined, { debugName: "holidays" }] : []));
@@ -4597,6 +4630,14 @@ class AXSchedulerComponent extends NXComponent {
         this.onAppointmentClicked = output();
         this.onAppointmentDblClicked = output();
         this.onAppointmentRightClick = output();
+        /** Applies an explicit `[calendar]` override only when it differs from the active locale profile. */
+        this.#calendarOverrideEffect = effect(() => {
+            const override = this.calendar();
+            const profileSystem = this.localeService.activeProfile().calendar.system;
+            if (override != null && override !== profileSystem) {
+                untracked(() => this.calendarType.set(override));
+            }
+        }, ...(ngDevMode ? [{ debugName: "#calendarOverrideEffect" }] : []));
         this.#appointmentEffect = effect(() => {
             const dataSource = this.dataSource();
             const range = {
@@ -4646,6 +4687,8 @@ class AXSchedulerComponent extends NXComponent {
             this.schedulerService.internalWeekend.set(weekend);
         }, ...(ngDevMode ? [{ debugName: "#weekendEffect" }] : []));
         this.currentDateText = computed(() => {
+            this.translationRevision();
+            this.localeService.activeProfile();
             switch (this.selectedView()) {
                 case 'day':
                 case 'timeline-day':
@@ -4817,12 +4860,14 @@ class AXSchedulerComponent extends NXComponent {
     }
     ngOnInit() {
         this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
-            const currentDate = this.calendarService.create(this.currentDate().date, this.calendarType());
-            if (!currentDate.equal(this.currentDate())) {
-                this.currentDate.set(currentDate);
-            }
+            this.syncCurrentDateAfterLocaleChange();
+        });
+        this.localeService.profileChanged$.pipe(this.unsubscriber.takeUntilDestroy).subscribe((profile) => {
+            this.calendarType.set(profile.calendar.system);
+            queueMicrotask(() => this.syncCurrentDateAfterLocaleChange());
         });
         this.translationService.langChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
+            this.translationRevision.update((v) => v + 1);
             await this.fillDataSource();
             this.viewModeSelectbox()?.selectItems(this.viewsDataSource().find((c) => c.id == this.selectedView()));
             const currentDate = this.calendarService.create(this.currentDate().date, this.calendarType());
@@ -4830,11 +4875,38 @@ class AXSchedulerComponent extends NXComponent {
                 this.currentDate.set(currentDate);
             }
         });
-        this.platformService.directionChange
-            .pipe(map((event) => event.data === 'rtl'), this.unsubscriber.takeUntilDestroy)
-            .subscribe((isRtl) => this.rtl.set(isRtl));
+        this.eventService.onEvent
+            .pipe(filter((event) => event.type === AXSystemEvents.AXLanguageLoaded), this.unsubscriber.takeUntilDestroy)
+            .subscribe(() => this.translationRevision.update((v) => v + 1));
         this.fillDataSource();
     }
+    /** Applies an explicit `[calendar]` override only when it differs from the active locale profile. */
+    #calendarOverrideEffect;
+    /**
+     * Picks a stable anchor inside the visible week so re-aligning after a locale
+     * change does not drift when the previous week start was a Sunday/Monday edge.
+     */
+    getWeekReanchorDate() {
+        const current = this.calendarService.create(this.currentDate().date, this.calendarType());
+        const today = this.calendarService.now(this.calendarType()).startOf('day');
+        const weekEnd = current.add('day', 6);
+        if (today.compare(current, 'day') >= 0 && today.compare(weekEnd, 'day') <= 0) {
+            return today;
+        }
+        return current.add('day', 3);
+    }
+    syncCurrentDateAfterLocaleChange() {
+        let currentDate = this.calendarService.create(this.currentDate().date, this.calendarType());
+        const view = this.selectedView();
+        if (view === 'week' || view === 'timeline-weekly') {
+            currentDate = this.schedulerService.alignToWeekStart(this.getWeekReanchorDate(), {
+                firstDayOfWeek: this.firstDayOfWeek(),
+            });
+        }
+        if (!currentDate.equal(this.currentDate())) {
+            this.currentDate.set(currentDate);
+        }
+    }
     #appointmentEffect;
     #holidayEffect;
     #weekendEffect;
@@ -4848,11 +4920,9 @@ class AXSchedulerComponent extends NXComponent {
     }
     getGridDateRange(dateInMonth) {
         const firstDayOfMonth = dateInMonth.startOf('month');
-        const firstDayGridNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
-        const firstDisplayedDayOfWeek = firstDayOfMonth.dayOfWeek;
-        const daysFromPrevMonth = (firstDisplayedDayOfWeek - firstDayGridNum + 7) % 7;
-        const gridStartDate = firstDayOfMonth.add('day', -daysFromPrevMonth);
-        // Calculate end date based on standard 6 weeks for safety, or calculate dynamically if preferred
+        const gridStartDate = this.schedulerService.alignToWeekStart(firstDayOfMonth, {
+            firstDayOfWeek: this.firstDayOfWeek(),
+        });
         const gridEndDate = gridStartDate.add('day', 6 * 7 - 1);
         return { gridStartDate, gridEndDate };
     }
@@ -4920,20 +4990,21 @@ class AXSchedulerComponent extends NXComponent {
         this.handleViewChanged(oldView, newView);
     }
     handleViewChanged(oldView, newView) {
+        if (oldView === newView) {
+            return;
+        }
         if (oldView === 'week') {
-            const oldDayOfWeek = this.prevDate().dayOfWeek % 7;
-            const date = this.currentDate().add('day', oldDayOfWeek - 1);
-            this.currentDate.set(date);
+            const startsOn = this.schedulerService.resolveWeekStartsOn(this.firstDayOfWeek());
+            const offset = (this.prevDate().weekdayIndex - startsOn + 7) % 7;
+            this.currentDate.set(this.currentDate().add('day', offset));
         }
         this.prevDate.set(this.currentDate());
-        if (newView === 'week') {
-            const currentDate = this.currentDate();
-            const currentDayOfWeek = currentDate.dayOfWeek;
-            const desiredFirstDayName = this.firstDayOfWeek();
-            const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
-            const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
-            const startOfWeekDate = currentDate.add('day', -daysToSubtract);
-            this.currentDate.set(startOfWeekDate);
+        if (newView === 'week' || newView === 'timeline-weekly') {
+            const today = this.calendarService.now(this.calendarType()).startOf('day');
+            this.prevDate.set(today);
+            this.currentDate.set(this.schedulerService.alignToWeekStart(today, {
+                firstDayOfWeek: this.firstDayOfWeek(),
+            }));
         }
         this.prevView.set(newView);
     }
@@ -4947,7 +5018,9 @@ class AXSchedulerComponent extends NXComponent {
                 this.currentDate.set(this.currentDate().add('day', 1));
                 break;
             case 'week':
-                this.currentDate.set(this.currentDate().add('week', 1));
+                this.currentDate.set(this.schedulerService.alignToWeekStart(this.currentDate().add('week', 1), {
+                    firstDayOfWeek: this.firstDayOfWeek(),
+                }));
                 break;
             case 'agenda':
             case 'timeline-weekly':
@@ -4972,7 +5045,9 @@ class AXSchedulerComponent extends NXComponent {
                 this.currentDate.set(this.currentDate().add('day', -1));
                 break;
             case 'week':
-                this.currentDate.set(this.currentDate().add('week', -1));
+                this.currentDate.set(this.schedulerService.alignToWeekStart(this.currentDate().add('week', -1), {
+                    firstDayOfWeek: this.firstDayOfWeek(),
+                }));
                 break;
             case 'agenda':
             case 'timeline-weekly':
@@ -4995,11 +5070,9 @@ class AXSchedulerComponent extends NXComponent {
     calendarDateChanged(e) {
         let currentDate = this.calendarService.create(e.value, this.calendarType());
         if (this.selectedView() === 'week') {
-            const currentDayOfWeek = currentDate.dayOfWeek;
-            const desiredFirstDayName = this.firstDayOfWeek();
-            const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
-            const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
-            currentDate = currentDate.add('day', -daysToSubtract);
+            currentDate = this.schedulerService.alignToWeekStart(currentDate, {
+                firstDayOfWeek: this.firstDayOfWeek(),
+            });
         }
         if (!currentDate.equal(this.currentDate())) {
             this.currentDate.set(currentDate);