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

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

@@ -1,21 +0,0 @@
-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

@@ -1,175 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<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

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

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

@@ -1,21 +0,0 @@
-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();
-  });
-});