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

package/calendar/src/calendar.component.html

@@ -0,0 +1,34 @@
+@switch (currentView) {
+    @case ('month') {
+        <upd-calendar-month-view [(activeDate)]="activeDate" [isRange]="isRange" [selected]="selected" [dateFilter]="dateFilter"
+            [maxDate]="maxDate" [minDate]="minDate" [dateClass]="dateClass" [comparisonStart]="comparisonStart"
+            [comparisonEnd]="comparisonEnd" [startDateAccessibleName]="startDateAccessibleName"
+            [endDateAccessibleName]="endDateAccessibleName" (userSelection)="_dateSelected($event)" (dragStarted)="_dragStarted($event)"
+            (dragEnded)="_dragEnded($event)" [activeDrag]="_activeDrag">
+        </upd-calendar-month-view>
+    }
+    @case ('year') {
+        YEAR!
+            <!--        <upd-calendar-year-view-->
+            <!--            [(activeDate)]="activeDate"-->
+            <!--            [selected]="selected"-->
+            <!--            [dateFilter]="dateFilter"-->
+            <!--            [maxDate]="maxDate"-->
+            <!--            [minDate]="minDate"-->
+            <!--            [dateClass]="dateClass"-->
+            <!--            (monthSelected)="_monthSelectedInYearView($event)"-->
+            <!--            (selectedChange)="_goToDateInView($event, 'month')"></upd-calendar-year-view>-->
+    }
+    @case ('multi-year') {
+        MUUMUMUULTI-YEAR!
+            <!--        <upd-calendar-multi-year-view-->
+            <!--            [(activeDate)]="activeDate"-->
+            <!--            [selected]="selected"-->
+            <!--            [dateFilter]="dateFilter"-->
+            <!--            [maxDate]="maxDate"-->
+            <!--            [minDate]="minDate"-->
+            <!--            [dateClass]="dateClass"-->
+            <!--            (yearSelected)="_yearSelectedInMultiYearView($event)"-->
+            <!--            (selectedChange)="_goToDateInView($event, 'year')"></upd-calendar-multi-year-view>-->
+    }
+}

package/calendar/src/calendar.component.scss

@@ -0,0 +1 @@
+

package/calendar/src/calendar.component.spec.ts

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

package/calendar/src/calendar.component.ts

@@ -0,0 +1,290 @@
+import {
+    AfterContentInit,
+    AfterViewChecked,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChange,
+    SimpleChanges,
+    ViewChild,
+    inject
+} from '@angular/core';
+import { OptionalType } from '@updevs/sdk/types';
+import { DateService } from '@updevs/sdk/core';
+
+import { DateRangeModel } from './models/date-range.model';
+import { CalendarViewType } from './types/calendar-view.type';
+import { CalendarUserEventModel } from './models/calendar-user-event.model';
+import { CalendarCellClassFunctionType } from './types/calendar-cell-class-function.type';
+import { CalendarMonthViewComponent } from './components/calendar-month-view/calendar-month-view.component';
+import { CalendarYearViewComponent } from './components/calendar-year-view/calendar-year-view.component';
+import { CalendarMultiYearViewComponent } from './components/calendar-multi-year-view/calendar-multi-year-view.component';
+
+@Component({
+    selector: 'upd-calendar',
+    templateUrl: './calendar.component.html',
+    styleUrl: './calendar.component.scss'
+})
+export class CalendarComponent implements AfterContentInit, AfterViewChecked, OnChanges {
+    /** Reference to the current month view component. */
+    @ViewChild(CalendarMonthViewComponent) monthView?: CalendarMonthViewComponent;
+
+    /** Reference to the current year view component. */
+    @ViewChild(CalendarYearViewComponent) yearView?: CalendarYearViewComponent;
+
+    /** Reference to the current multi-year view component. */
+    @ViewChild(CalendarMultiYearViewComponent) multiYearView?: CalendarMultiYearViewComponent;
+
+    /** A date representing the period (month or year) to start the calendar in. */
+    @Input()
+    get startAt(): OptionalType<Date> {
+        return this._startAt;
+    }
+    set startAt(value: OptionalType<Date>) {
+        this._startAt = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+
+    /**
+     * Whether the calendar should be started in month or year view.
+     */
+    @Input() startView: CalendarViewType = 'month';
+    /**
+     * The currently selected date.
+     */
+    @Input()
+    get selected(): DateRangeModel | OptionalType<Date> {
+        return this._selected;
+    }
+    set selected(value: DateRangeModel | OptionalType<Date>) {
+        console.log('setting selected', value);
+        if (value instanceof DateRangeModel) {
+            this._selected = value;
+        } else {
+            this._selected = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+        }
+    }
+    /**
+     * The minimum selectable date.
+     */
+    @Input()
+    get minDate(): OptionalType<Date> {
+        return this._minDate;
+    }
+    set minDate(value: OptionalType<Date>) {
+        this._minDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+    /**
+     * The maximum selectable date.
+     */
+    @Input()
+    get maxDate(): OptionalType<Date> {
+        return this._maxDate;
+    }
+    set maxDate(value: OptionalType<Date>) {
+        this._maxDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
+    }
+    /**
+     * Function used to filter which dates are selectable.
+     */
+    @Input() dateFilter?: (date: Date) => boolean;
+
+    /** Function that can be used to add custom CSS classes to dates. */
+    @Input() dateClass?: CalendarCellClassFunctionType;
+
+    /** Start of the comparison range. */
+    @Input() comparisonStart?: Date;
+
+    /** End of the comparison range. */
+    @Input() comparisonEnd?: Date;
+
+    /** ARIA Accessible name of the `<input matStartDate/>` */
+    @Input() startDateAccessibleName?: string;
+
+    /** ARIA Accessible name of the `<input matEndDate/>` */
+    @Input() endDateAccessibleName?: string;
+    /** Whether the user is currently selecting a range of dates. */
+    @Input() isRange = false;
+
+    /** Emits when the currently selected date changes. */
+    @Output() readonly selectedChange = new EventEmitter<OptionalType<Date>>();
+
+    /**
+     * Emits the year chosen in multiyear view.
+     * This doesn't imply a change on the selected date.
+     */
+    @Output() readonly yearSelected = new EventEmitter<Date>();
+
+    /**
+     * Emits the month chosen in year view.
+     * This doesn't imply a change on the selected date.
+     */
+    @Output() readonly monthSelected = new EventEmitter<Date>();
+
+    /**
+     * Emits when the current view changes.
+     */
+    @Output() readonly viewChanged = new EventEmitter<CalendarViewType>(true);
+
+    /** Emits when any date is selected. */
+    @Output() readonly userSelection = new EventEmitter<CalendarUserEventModel<OptionalType<Date>>>();
+
+    /** Emits a new date range value when the user completes a drag drop operation. */
+    @Output() readonly userDragDrop = new EventEmitter<CalendarUserEventModel<DateRangeModel>>();
+
+    /**
+     * The current active date. This determines which time period is shown and which date is
+     * highlighted when using keyboard navigation.
+     */
+    get activeDate(): Date {
+        return this._clampedActiveDate;
+    }
+    set activeDate(value: Date) {
+        this._clampedActiveDate = this.dateService.clamp(value, this.minDate, this.maxDate);
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /** Whether the calendar is in month view. */
+    get currentView(): CalendarViewType {
+        return this._currentView;
+    }
+    set currentView(value: CalendarViewType) {
+        const viewChangedResult = this._currentView !== value ? value : undefined;
+        this._currentView = value;
+        this._moveFocusOnNextTick = true;
+
+        this._changeDetectorRef.markForCheck();
+
+        if (viewChangedResult) {
+            this.viewChanged.emit(viewChangedResult);
+        }
+    }
+
+    /** Origin of active drag, or null when dragging is not active. */
+    protected _activeDrag?: CalendarUserEventModel<Date>;
+
+    private _clampedActiveDate!: Date;
+    private _startAt?: Date;
+    private _selected?: DateRangeModel | Date;
+    private _minDate?: Date;
+    private _maxDate?: Date;
+
+    /**
+     * Used for scheduling that focus should be moved to the active cell on the next tick.
+     * We need to schedule it, rather than do it immediately, because we have to wait
+     * for Angular to re-evaluate the view children.
+     */
+    private _moveFocusOnNextTick = false;
+    private _currentView!: CalendarViewType;
+
+    private readonly dateService = inject(DateService);
+    private readonly _changeDetectorRef = inject(ChangeDetectorRef);
+
+    ngAfterContentInit(): void {
+        this.activeDate = this.startAt || new Date();
+        // Assign to the private property since we don't want to move focus on init.
+        this._currentView = this.startView;
+    }
+
+    ngAfterViewChecked(): void {
+        if (this._moveFocusOnNextTick) {
+            this._moveFocusOnNextTick = false;
+            this.focusActiveCell();
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        // Ignore date changes that are at a different time on the same day. This fixes issues where
+        // the calendar re-renders when there is no meaningful change to [minDate] or [maxDate]
+        // (#24435).
+        const minDateChange: OptionalType<SimpleChange> =
+            changes['minDate'] && !this.dateService.areEqual(changes['minDate'].previousValue, changes['minDate'].currentValue)
+                ? changes['minDate']
+                : undefined;
+        const maxDateChange: OptionalType<SimpleChange> =
+            changes['maxDate'] && !this.dateService.areEqual(changes['maxDate'].previousValue, changes['maxDate'].currentValue)
+                ? changes['maxDate']
+                : undefined;
+
+        const change = minDateChange || maxDateChange || changes['dateFilter'];
+
+        if (change && !change.firstChange) {
+            const view = this._getCurrentViewComponent();
+
+            if (view) {
+                // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
+                // passed down to the view via data bindings which won't be up-to-date when we call `_init`.
+                this._changeDetectorRef.detectChanges();
+                view.init();
+            }
+        }
+    }
+
+    /** Focuses the active date. */
+    focusActiveCell() {
+        this._getCurrentViewComponent().focusActiveCell(false);
+    }
+
+    /** Updates today's date after an update of the active date */
+    updateTodaysDate() {
+        this._getCurrentViewComponent().init();
+    }
+
+    /** Handles date selection in the month view. */
+    _dateSelected(event: CalendarUserEventModel<OptionalType<Date>>): void {
+        const date = event.value;
+
+        if (this.selected instanceof DateRangeModel || (date && !this.dateService.areEqual(date, this.selected))) {
+            this.selectedChange.emit(date);
+        }
+
+        this.userSelection.emit(event);
+    }
+
+    /** Handles year selection in the multiyear view. */
+    _yearSelectedInMultiYearView(normalizedYear: Date) {
+        this.yearSelected.emit(normalizedYear);
+    }
+
+    /** Handles month selection in the year view. */
+    _monthSelectedInYearView(normalizedMonth: Date) {
+        this.monthSelected.emit(normalizedMonth);
+    }
+
+    /** Handles year/month selection in the multi-year/year views. */
+    _goToDateInView(date: Date, view: CalendarViewType): void {
+        this.activeDate = date;
+        this.currentView = view;
+    }
+
+    /** Called when the user starts dragging to change a date range. */
+    _dragStarted(event: CalendarUserEventModel<Date>) {
+        this._activeDrag = event;
+    }
+
+    /**
+     * Called when a drag completes. It may end in cancelation or in the selection
+     * of a new range.
+     */
+    _dragEnded(event: CalendarUserEventModel<OptionalType<DateRangeModel>>) {
+        if (!this._activeDrag) {
+            return;
+        }
+
+        if (event.value) {
+            this.userDragDrop.emit(event as CalendarUserEventModel<DateRangeModel>);
+        }
+
+        this._activeDrag = undefined;
+    }
+
+    /** Returns the component instance that corresponds to the current calendar view. */
+    private _getCurrentViewComponent(): CalendarMonthViewComponent | CalendarYearViewComponent | CalendarMultiYearViewComponent {
+        // The return type is explicitly written as a union to ensure that the Closure compiler does
+        // not optimize calls to _init(). Without the explicit return type, TypeScript narrows it to
+        // only the first component type. See https://github.com/angular/components/issues/22996.
+        return (this.monthView || this.yearView || this.multiYearView)!;
+    }
+}

package/calendar/src/components/calendar-body/calendar-body.component.html

@@ -0,0 +1,75 @@
+<div class="container">
+    <!--
+      If there's not enough space in the first row, create a separate label row. We mark this row as
+      aria-hidden because we don't want it to be read out as one of the weeks in the month.
+    -->
+    @if (firstRowOffset < labelMinRequiredCells) {
+        <div class="row seven-cols" aria-hidden="true">
+            <div class="col-7 p-1 d-flex align-items-center" [style.min-height.px]="40">
+                {{ label }}
+            </div>
+        </div>
+    }
+
+    <!-- Create the first row separately so we can include a special spacer cell. -->
+    @for (row of rows; track trackRow(row); let rowIndex = $index) {
+        <div class="row seven-cols">
+            <!--
+              This cell is purely decorative, but we can't put `aria-hidden` or `role="presentation"` on it,
+              because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the
+              table cells is maintained by setting the top and bottom padding as a percentage of the width
+              (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
+            -->
+            @if (rowIndex === 0 && firstRowOffset) {
+                <div [ngClass]="colspanClass" class="p-1 d-flex align-items-center" [style.min-height.px]="40">
+                    {{ firstRowOffset >= labelMinRequiredCells ? label : '' }}
+                </div>
+            }
+
+            <!--
+              Each gridcell in the calendar contains a button, which signals to assistive technology that the
+              cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for
+              background.
+            -->
+            @for (item of row; track item.id; let colIndex = $index) {
+                <div class="col-1 justify-content-center p-1 d-flex align-items-center cursor-pointer" [attr.data-upd-row]="rowIndex"
+                    [attr.data-upd-col]="colIndex" [style.min-height.px]="40"
+                    [class.bg-secondary-lt]="hoveredDate === getIndex(rowIndex, colIndex)" [class.border]="isActiveCell(rowIndex, colIndex)"
+                    [class.border-secondary]="isActiveCell(rowIndex, colIndex)" [class.bg-azure]="isSelected(item.compareValue)"
+                    [class.text-azure-fg]="isSelected(item.compareValue)" [tabindex]="isActiveCell(rowIndex, colIndex) ? 0 : -1"
+                    [class.upd-calendar-body-disabled]="!item.isEnabled" [class.bg-danger]="isRangeStart(item.compareValue)"
+                    [class.text-danger-fg]="isRangeStart(item.compareValue)" [class.bg-muted]="isRangeEnd(item.compareValue)"
+                    [class.text-muted-fg]="isRangeEnd(item.compareValue)"
+                    [class.upd-calendar-body-range-end]="isRangeEnd(item.compareValue)"
+                    [class.upd-calendar-body-in-range]="isInRange(item.compareValue)"
+                    [class.upd-calendar-body-comparison-bridge-start]="isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)"
+                    [class.upd-calendar-body-comparison-bridge-end]="isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)"
+                    [class.upd-calendar-body-comparison-start]="isComparisonStart(item.compareValue)"
+                    [class.upd-calendar-body-comparison-end]="isComparisonEnd(item.compareValue)"
+                    [class.upd-calendar-body-in-comparison-range]="isInComparisonRange(item.compareValue)"
+                    [class.rounded-start]="isPreviewStart(item.compareValue)" [class.rounded-end]="isPreviewEnd(item.compareValue)"
+                    [class.border-top]="isInPreview(item.compareValue)" [class.fw-bold]="isInPreview(item.compareValue)"
+                    [class.border-bottom]="isInPreview(item.compareValue)" [class.border-secondary-lt]="isInPreview(item.compareValue)"
+                    [attr.aria-label]="item.ariaLabel" [attr.aria-disabled]="!item.isEnabled || undefined"
+                    [attr.aria-pressed]="isSelected(item.compareValue)"
+                    [attr.aria-current]="todayValue === item.compareValue ? 'date' : undefined"
+                    [attr.aria-describedby]="getDescribedby(item.compareValue)" (click)="cellClicked(item, $event)"
+                    (focus)="emitActiveDateChange(item)" (mouseenter)="onDateEnter(getIndex(rowIndex, colIndex))"
+                    (mouseleave)="onDateLeave()">
+                    <span [class.upd-calendar-body-selected]="isSelected(item.compareValue)"
+                        [class.upd-calendar-body-comparison-identical]="isComparisonIdentical(item.compareValue)"
+                        [class.upd-calendar-body-today]="todayValue === item.compareValue">
+                            {{ item.displayValue }}
+                    </span>
+                </div>
+            }
+        </div>
+    }
+
+    <label [id]="startDateLabelId" class="upd-calendar-body-hidden-label">
+        {{ startDateAccessibleName }}
+    </label>
+    <label [id]="endDateLabelId" class="upd-calendar-body-hidden-label">
+        {{ endDateAccessibleName }}
+    </label>
+</div>

package/calendar/src/components/calendar-body/calendar-body.component.scss

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

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

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