@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.9

package/calendar/src/components/calendar-header/calendar-header.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CalendarHeaderComponent } from './calendar-header.component';
+
+describe('CalendarHeaderComponent', () => {
+  let component: CalendarHeaderComponent;
+  let fixture: ComponentFixture<CalendarHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CalendarHeaderComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CalendarHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/calendar/src/components/calendar-header/calendar-header.component.ts

@@ -0,0 +1,175 @@
+import { Component, inject } from '@angular/core';
+import { DateService } from '@updevs/sdk/core';
+
+import { CalendarService } from '../../services/calendar.service';
+import { CalendarSignalsService } from '../../services/calendar-signals.service';
+import { yearsPerPage } from '../calendar-multi-year-view/calendar-multi-year-view.component';
+
+let calendarHeaderId = 1;
+
+@Component({
+    selector: 'upd-calendar-header',
+    templateUrl: './calendar-header.component.html',
+    styleUrl: './calendar-header.component.scss'
+})
+export class CalendarHeaderComponent {
+    /**
+     * The `aria-label` for changing the calendar view.
+     */
+    get periodButtonLabel(): string {
+        return this.calendarSignalsService.currentView() === 'month' ? 'SwitchToMultiYearView' : 'SwitchToMonthView';
+    }
+
+    /**
+     * The label for the previous button.
+     */
+    get prevButtonLabel(): string {
+        return {
+            'month': 'PreviousMonth',
+            'year': 'PreviousYear',
+            'multi-year': 'PreviousMultiYear'
+        }[this.calendarSignalsService.currentView()];
+    }
+
+    /**
+     * The label for the next button.
+     */
+    get nextButtonLabel(): string {
+        return {
+            'month': 'NextMonth',
+            'year': 'NextYear',
+            'multi-year': 'NextMultiYear'
+        }[this.calendarSignalsService.currentView()];
+    }
+
+    /**
+     * Whether the selected view is not a month.
+     */
+    get isNotMonth(): boolean {
+        return this.calendarSignalsService.currentView() !== 'month';
+    }
+
+    /**
+     * ID of the label of the period button.
+     */
+    get periodButtonLabelId(): string {
+        return `${this.id}-period-label`;
+    }
+
+    get minYearOfPageLabel(): string {
+        return this.dateService.getYearName(this.dateService.create(this.minYearOfPage, 0, 1));
+    }
+
+    get maxYearOfPageLabel(): string {
+        const maxYearOfPage = this.minYearOfPage + yearsPerPage - 1;
+        return this.dateService.getYearName(this.dateService.create(maxYearOfPage, 0, 1));
+    }
+
+    get periodText(): string {
+        if (this.calendarSignalsService.currentView() === 'month') {
+            return this.dateService
+                .format(this.calendarSignalsService.activeDate(), { year: 'numeric', month: 'short' })
+                .toLocaleUpperCase();
+        }
+
+        if (this.calendarSignalsService.currentView() === 'year') {
+            return this.dateService.getYearName(this.calendarSignalsService.activeDate());
+        }
+
+        return '';
+    }
+
+    private get minYearOfPage(): number {
+        // The offset from the active year to the "slot" for the starting year is the
+        // *actual* first rendered year in the multi-year view, and the last year is
+        // just yearsPerPage - 1 away.
+        const activeDate = this.calendarSignalsService.activeDate();
+        const activeYear = activeDate.getFullYear();
+        const offset = this.calendarService.getMultiYearActiveOffset(
+            activeDate,
+            this.calendarSignalsService.minDate(),
+            this.calendarSignalsService.maxDate()
+        );
+
+        return activeYear - offset;
+    }
+
+    private id = `upd-calendar-header-${calendarHeaderId++}`;
+    private readonly calendarService = inject(CalendarService);
+    private readonly calendarSignalsService = inject(CalendarSignalsService);
+    private readonly dateService = inject(DateService);
+
+    /**
+     * Handles user clicks on the period label.
+     */
+    currentPeriodClicked(): void {
+        this.calendarSignalsService.currentView = this.calendarSignalsService.currentView() === 'month' ? 'multi-year' : 'month';
+    }
+
+    /**
+     * Handles user clicks on the previous button.
+     */
+    previousClicked(): void {
+        this.calendarSignalsService.activeDate =
+            this.calendarSignalsService.currentView() === 'month'
+                ? this.dateService.addMonths(this.calendarSignalsService.activeDate(), -1)
+                : this.dateService.addYears(
+                    this.calendarSignalsService.activeDate(),
+                    this.calendarSignalsService.currentView() === 'year' ? -1 : -yearsPerPage
+                );
+    }
+
+    /**
+     * Handles user clicks on the next button.
+     */
+    nextClicked(): void {
+        this.calendarSignalsService.activeDate =
+            this.calendarSignalsService.currentView() === 'month'
+                ? this.dateService.addMonths(this.calendarSignalsService.activeDate(), 1)
+                : this.dateService.addYears(
+                    this.calendarSignalsService.activeDate(),
+                    this.calendarSignalsService.currentView() === 'year' ? 1 : yearsPerPage
+                );
+    }
+
+    /**
+     * Whether the previous period button is enabled.
+     */
+    previousEnabled(): boolean {
+        if (!this.calendarSignalsService.minDate()) {
+            return true;
+        }
+
+        return !this.calendarSignalsService.minDate()
+            || !this.isSameView(this.calendarSignalsService.activeDate(), this.calendarSignalsService.minDate()!);
+    }
+
+    /**
+     * Whether the next period button is enabled.
+     */
+    nextEnabled(): boolean {
+        return !this.calendarSignalsService.maxDate()
+            || !this.isSameView(this.calendarSignalsService.activeDate(), this.calendarSignalsService.maxDate()!);
+    }
+
+    /**
+     * Whether the two dates represent the same view in the current view mode (month or year).
+     */
+    private isSameView(date1: Date, date2: Date): boolean {
+        if (this.calendarSignalsService.currentView() === 'month') {
+            return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+        }
+
+        if (this.calendarSignalsService.currentView() === 'year') {
+            return date1.getFullYear() === date2.getFullYear();
+        }
+
+        // Otherwise we are in 'multi-year' view.
+        return this.calendarService.isSameMultiYearView(
+            date1,
+            date2,
+            this.calendarSignalsService.minDate(),
+            this.calendarSignalsService.maxDate()
+        );
+    }
+}

package/calendar/src/components/calendar-month-view/calendar-month-view.component.html

@@ -0,0 +1,19 @@
+<upd-calendar-header></upd-calendar-header>
+<div class="container mt-2">
+    <div class="row seven-cols">
+        @for (day of weekdays; track day.id) {
+            <div class="col-1 p-1 d-flex justify-content-center align-items-center">
+                <span class="visually-hidden">{{ day.long }}</span>
+                <span aria-hidden="true">{{ day.narrow }}</span>
+            </div>
+        }
+    </div>
+</div>
+<upd-calendar-body [label]="monthLabel" [rows]="weeks" [todayValue]="todayDate!" [startValue]="rangeStart!"
+    [endValue]="rangeEnd!" [comparisonStart]="comparisonRangeStart" [comparisonEnd]="comparisonRangeEnd"
+    [previewStart]="previewStart" [previewEnd]="previewEnd" [isRange]="isRange" [labelMinRequiredCells]="3"
+    [activeCell]="activeDate.getDate() - 1" [startDateAccessibleName]="startDateAccessibleName"
+    [endDateAccessibleName]="endDateAccessibleName" (selectedValueChange)="dateSelected($event)"
+    (previewChange)="previewChanged($event)" (dragStarted)="dragStarted.emit($event)" (dragEnded)="_dragEnded($event)"
+    (keyup)="handleCalendarBodyKeyup($event)" (keydown)="handleCalendarBodyKeydown($event)">
+</upd-calendar-body>

package/calendar/src/components/calendar-month-view/calendar-month-view.component.scss

@@ -0,0 +1 @@
+@import '../../../../assets/styles/seven-columns';

package/calendar/src/components/calendar-month-view/calendar-month-view.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CalendarMonthViewComponent } from './calendar-month-view.component';
+
+describe('CalendarMonthViewComponent', () => {
+  let component: CalendarMonthViewComponent;
+  let fixture: ComponentFixture<CalendarMonthViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CalendarMonthViewComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CalendarMonthViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});