@imihai/angular-datetime-picker 22.0.0 → 22.0.6

package/projects/picker/src/lib/date-time/calendar-body.component.ts

@@ -1,190 +0,0 @@
-/**
- * calendar-body.component
- */
-
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    NgZone,
-    OnInit,
-    Output
-} from '@angular/core';
-import { SelectMode } from './date-time.class';
-import { take } from 'rxjs/operators';
-
-export class CalendarCell {
-    constructor(
-        public value: number,
-        public displayValue: string,
-        public ariaLabel: string,
-        public enabled: boolean,
-        public out: boolean = false,
-        public cellClass: string = ''
-    ) {}
-}
-
-@Component({
-    selector: '[owl-date-time-calendar-body]',
-    exportAs: 'owlDateTimeCalendarBody',
-    templateUrl: './calendar-body.component.html',
-    styleUrls: ['./calendar-body.component.scss'],
-    host: {
-        '[class.owl-dt-calendar-body]': 'owlDTCalendarBodyClass'
-    },
-    preserveWhitespaces: false,
-    standalone: false,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class OwlCalendarBodyComponent implements OnInit {
-    /**
-     * The cell number of the active cell in the table.
-     */
-    @Input()
-    activeCell = 0;
-
-    /**
-     * The cells to display in the table.
-     * */
-    @Input()
-    rows: CalendarCell[][];
-
-    /**
-     * The number of columns in the table.
-     * */
-    @Input()
-    numCols = 7;
-
-    /**
-     * The ratio (width / height) to use for the cells in the table.
-     */
-    @Input()
-    cellRatio = 1;
-
-    /**
-     * The value in the table that corresponds to today.
-     * */
-    @Input()
-    todayValue: number;
-
-    /**
-     * The value in the table that is currently selected.
-     * */
-    @Input()
-    selectedValues: number[];
-
-    /**
-     * Current picker select mode
-     */
-    @Input()
-    selectMode: SelectMode;
-
-    /**
-     * Emit when a calendar cell is selected
-     * */
-    @Output()
-    public readonly select = new EventEmitter<CalendarCell>();
-
-    get owlDTCalendarBodyClass(): boolean {
-        return true;
-    }
-
-    get isInSingleMode(): boolean {
-        return this.selectMode === 'single';
-    }
-
-    get isInRangeMode(): boolean {
-        return (
-            this.selectMode === 'range' ||
-            this.selectMode === 'rangeFrom' ||
-            this.selectMode === 'rangeTo'
-        );
-    }
-
-    constructor(private elmRef: ElementRef, private ngZone: NgZone) {}
-
-    public ngOnInit() {}
-
-    public selectCell(cell: CalendarCell): void {
-        this.select.emit(cell);
-    }
-
-    public isActiveCell(rowIndex: number, colIndex: number): boolean {
-        const cellNumber = rowIndex * this.numCols + colIndex;
-        return cellNumber === this.activeCell;
-    }
-
-    /**
-     * Check if the cell is selected
-     */
-    public isSelected(value: number): boolean {
-        if (!this.selectedValues || this.selectedValues.length === 0) {
-            return false;
-        }
-
-        if (this.isInSingleMode) {
-            return value === this.selectedValues[0];
-        }
-
-        if (this.isInRangeMode) {
-            const fromValue = this.selectedValues[0];
-            const toValue = this.selectedValues[1];
-
-            return value === fromValue || value === toValue;
-        }
-    }
-
-    /**
-     * Check if the cell in the range
-     * */
-    public isInRange(value: number): boolean {
-        if (this.isInRangeMode) {
-            const fromValue = this.selectedValues[0];
-            const toValue = this.selectedValues[1];
-
-            if (fromValue !== null && toValue !== null) {
-                return value >= fromValue && value <= toValue;
-            } else {
-                return value === fromValue || value === toValue;
-            }
-        }
-    }
-
-    /**
-     * Check if the cell is the range from
-     * */
-    public isRangeFrom(value: number): boolean {
-        if (this.isInRangeMode) {
-            const fromValue = this.selectedValues[0];
-            return fromValue !== null && value === fromValue;
-        }
-    }
-
-    /**
-     * Check if the cell is the range to
-     * */
-    public isRangeTo(value: number): boolean {
-        if (this.isInRangeMode) {
-            const toValue = this.selectedValues[1];
-            return toValue !== null && value === toValue;
-        }
-    }
-
-    /**
-     * Focus to a active cell
-     * */
-    public focusActiveCell(): void {
-        this.ngZone.runOutsideAngular(() => {
-            this.ngZone.onStable
-                .asObservable()
-                .pipe(take(1))
-                .subscribe(() => {
-                    this.elmRef.nativeElement
-                        .querySelector('.owl-dt-calendar-cell-active')
-                        .focus();
-                });
-        });
-    }
-}

package/projects/picker/src/lib/date-time/calendar-month-view.component.html

@@ -1,47 +0,0 @@
-@if (showCalendarWeeks) {
-    <ul class="week-number">
-        @for (week of weekNumbers; track week) {
-            <li>
-                <span>{{ week }}</span>
-            </li>
-        }
-    </ul>
-}
-<table
-    class="owl-dt-calendar-table owl-dt-calendar-month-table"
-    [ngClass]="{ 'owl-calendar-weeks': showCalendarWeeks }"
-    [class.owl-dt-calendar-only-current-month]="hideOtherMonths"
->
-    <thead class="owl-dt-calendar-header">
-        <tr class="owl-dt-weekdays">
-            @for (weekday of weekdays; track weekday.short) {
-                <th
-                    [attr.aria-label]="weekday.long"
-                    class="owl-dt-weekday"
-                    scope="col"
-                >
-                    <span>{{ weekday.short }}</span>
-                </th>
-            }
-        </tr>
-        <tr>
-            <th
-                class="owl-dt-calendar-table-divider"
-                [ngClass]="{ 'owl-calendar-weeks': showCalendarWeeks }"
-                aria-hidden="true"
-                colspan="7"
-            ></th>
-        </tr>
-    </thead>
-    <tbody
-        owl-date-time-calendar-body
-        role="grid"
-        [rows]="days"
-        [todayValue]="todayDate"
-        [selectedValues]="selectedDates"
-        [selectMode]="selectMode"
-        [activeCell]="activeCell"
-        (keydown)="handleCalendarKeydown($event)"
-        (select)="selectCalendarCell($event)"
-    ></tbody>
-</table>

package/projects/picker/src/lib/date-time/calendar-month-view.component.scss

@@ -1,16 +0,0 @@
-.week-number {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  margin-bottom: 14px;
-  margin-top: 46px;
-  border-right: 1px solid rgba(0, 0, 0, .12);
-  width: 8%;
-  font-weight: bold;
-  li {
-    font-size: .8em;
-  } 
-}

package/projects/picker/src/lib/date-time/calendar-month-view.component.spec.ts

@@ -1,394 +0,0 @@
-/**
- * calendar-month-view.component.spec
- */
-import { registerLocaleData } from '@angular/common';
-import localeDutch from '@angular/common/locales/nl';
-import { DateTimeAdapter } from './adapter/date-time-adapter.class';
-import { OwlMonthViewComponent } from './calendar-month-view.component';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { OwlDateTimeIntl } from './date-time-picker-intl.service';
-import { OwlNativeDateTimeModule } from './adapter/native-date-time.module';
-import { OwlDateTimeModule } from './date-time.module';
-import { Component, DebugElement } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { dispatchKeyboardEvent } from '../../test-helpers';
-import {
-    DOWN_ARROW,
-    END,
-    ENTER,
-    HOME,
-    LEFT_ARROW,
-    PAGE_DOWN,
-    PAGE_UP,
-    RIGHT_ARROW,
-    UP_ARROW
-} from '@angular/cdk/keycodes';
-
-const JAN = 0,
-    FEB = 1,
-    MAR = 2,
-    APR = 3,
-    MAY = 4,
-    JUN = 5,
-    JUL = 6,
-    AUG = 7,
-    SEP = 8,
-    OCT = 9,
-    NOV = 10,
-    DEC = 11;
-
-describe('OwlMonthViewComponent', () => {
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [OwlNativeDateTimeModule, OwlDateTimeModule],
-            declarations: [
-                StandardMonthViewComponent,
-                MonthViewWithDateFilterComponent
-            ],
-            providers: [OwlDateTimeIntl]
-        }).compileComponents();
-    });
-
-    describe('standard month view', () => {
-        let fixture: ComponentFixture<StandardMonthViewComponent>;
-        let testComponent: StandardMonthViewComponent;
-        let monthViewDebugElement: DebugElement;
-        let monthViewElement: HTMLElement;
-        let monthViewInstance: OwlMonthViewComponent<Date>;
-
-        beforeEach(() => {
-            fixture = TestBed.createComponent(StandardMonthViewComponent);
-            fixture.detectChanges();
-
-            monthViewDebugElement = fixture.debugElement.query(
-                By.directive(OwlMonthViewComponent)
-            );
-            monthViewElement = monthViewDebugElement.nativeElement;
-            testComponent = fixture.componentInstance;
-            monthViewInstance = monthViewDebugElement.componentInstance;
-        });
-
-        it('should have 42 calendar day cells', () => {
-            const cellEls = monthViewElement.querySelectorAll(
-                '.owl-dt-calendar-cell'
-            );
-            expect(cellEls.length).toBe(42);
-        });
-
-        it('should show selected date if in same month', () => {
-            const selectedEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-cell-selected'
-            );
-            expect(selectedEl.innerHTML.trim()).toBe('10');
-        });
-
-        it('should NOT show selected date if in different month', () => {
-            testComponent.selected = new Date(2018, MAR, 10);
-            fixture.detectChanges();
-            const selectedEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-cell-selected'
-            );
-            expect(selectedEl).toBeNull();
-        });
-
-        it('should mark active date', () => {
-            const selectedElContent = monthViewElement.querySelector(
-                '.owl-dt-calendar-cell-active .owl-dt-calendar-cell-content'
-            );
-            expect(selectedElContent.innerHTML.trim()).toBe('5');
-        });
-
-        it('should set Sunday as first day of week by default', () => {
-            expect(monthViewInstance.firstDayOfWeek).toBe(0);
-            const weekdayCells = monthViewElement.querySelectorAll(
-                '.owl-dt-weekday'
-            );
-            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Sunday');
-        });
-
-        it('should set Monday as first day of week if firstDayOfWeek set to 1', () => {
-            monthViewInstance.firstDayOfWeek = 1;
-            fixture.detectChanges();
-            const weekdayCells = monthViewElement.querySelectorAll(
-                '.owl-dt-weekday'
-            );
-            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Monday');
-        });
-
-        it('should set Saturday as first day of week if firstDayOfWeek set to 6', () => {
-            monthViewInstance.firstDayOfWeek = 6;
-            fixture.detectChanges();
-            const weekdayCells = monthViewElement.querySelectorAll(
-                '.owl-dt-weekday'
-            );
-            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Saturday');
-        });
-
-        it('should decrement date on left arrow press', () => {
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
-            fixture.detectChanges();
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 4));
-
-            monthViewInstance.pickerMoment = new Date(2017, JAN, 1);
-            fixture.detectChanges();
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2016, DEC, 31));
-        });
-
-        it('should increment date on right arrow press', () => {
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 6));
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 7));
-        });
-
-        it('should go up a row on up arrow press', () => {
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2017, DEC, 29));
-
-            monthViewInstance.pickerMoment = new Date(2017, JAN, 7);
-            fixture.detectChanges();
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2016, DEC, 31));
-        });
-
-        it('should go down a row on down arrow press', () => {
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 12));
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 19));
-        });
-
-        it('should go to beginning of the month on home press', () => {
-            monthViewInstance.pickerMoment = new Date(2018, JAN, 7);
-            fixture.detectChanges();
-
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 1));
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 1));
-        });
-
-        it('should go to end of the month on end press', () => {
-            monthViewInstance.pickerMoment = new Date(2018, JAN, 7);
-            fixture.detectChanges();
-
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 31));
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, JAN, 31));
-        });
-
-        it('should go back one month on page up press', () => {
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2017, DEC, 5));
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2017, NOV, 5));
-        });
-
-        it('should go forward one month on page down press', () => {
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, FEB, 5));
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
-            fixture.detectChanges();
-
-            expect(testComponent.pickerMoment).toEqual(new Date(2018, MAR, 5));
-        });
-
-        it('should select active date on enter', () => {
-            const calendarBodyEl = monthViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
-            fixture.detectChanges();
-
-            expect(testComponent.selected).toEqual(new Date(2018, JAN, 10));
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', ENTER);
-            fixture.detectChanges();
-
-            expect(testComponent.selected).toEqual(new Date(2018, JAN, 4));
-        });
-    });
-
-    describe('month view with date filter', () => {
-        let fixture: ComponentFixture<MonthViewWithDateFilterComponent>;
-        let monthViewNativeElement: Element;
-
-        beforeEach(() => {
-            fixture = TestBed.createComponent(MonthViewWithDateFilterComponent);
-            fixture.detectChanges();
-
-            const monthViewDebugElement = fixture.debugElement.query(
-                By.directive(OwlMonthViewComponent)
-            );
-            monthViewNativeElement = monthViewDebugElement.nativeElement;
-        });
-
-        it('should disable filtered dates', () => {
-            const cellOne = monthViewNativeElement.querySelector(
-                '[aria-label="January 1, 2018"]'
-            );
-            const cellTwo = monthViewNativeElement.querySelector(
-                '[aria-label="January 2, 2018"]'
-            );
-            expect(cellOne.classList).toContain(
-                'owl-dt-calendar-cell-disabled'
-            );
-            expect(cellTwo.classList).not.toContain(
-                'owl-dt-calendar-cell-disabled'
-            );
-        });
-    });
-
-
-    describe('standard month view (locale tests)', () => {
-        let fixture: ComponentFixture<StandardMonthViewComponent>;
-        let adapter: DateTimeAdapter<unknown>;
-        let monthViewDebugElement: DebugElement;
-        let monthViewElement: HTMLElement;
-        let monthViewInstance: OwlMonthViewComponent<Date>;
-
-        beforeAll(() => {
-            registerLocaleData(localeDutch);
-        });
-
-        beforeEach(() => {
-            fixture = TestBed.createComponent(StandardMonthViewComponent);
-
-            adapter = TestBed.inject(DateTimeAdapter);
-            monthViewDebugElement = fixture.debugElement.query(
-                By.directive(OwlMonthViewComponent)
-            );
-            monthViewElement = monthViewDebugElement.nativeElement;
-            monthViewInstance = monthViewDebugElement.componentInstance;
-        });
-
-        it('should derive the first day of the week based on the active locale', () => {
-            adapter.setLocale('nl-NL');
-
-            fixture.detectChanges();
-            const weekdayCells = monthViewElement.querySelectorAll(
-                '.owl-dt-weekday'
-            );
-            expect(weekdayCells[0].getAttribute('aria-label')).toBe('maandag');
-        });
-
-        it('should fallback to Sunday as first day of the week when when locale data is missing', () => {
-            adapter.setLocale('unknown');
-
-            fixture.detectChanges();
-            const weekdayCells = monthViewElement.querySelectorAll(
-                '.owl-dt-weekday'
-            );
-            expect(weekdayCells[0].getAttribute('aria-label')).toBe('Sunday');
-        });
-
-        it('should update the default day of the week when locale changes', () => {
-            adapter.setLocale('nl-NL');
-
-            fixture.detectChanges();
-            const weekdayCellsNl = monthViewElement.querySelectorAll(
-                '.owl-dt-weekday'
-            );
-            expect(weekdayCellsNl[0].getAttribute('aria-label')).toBe('maandag');
-
-            adapter.setLocale('en-US');
-
-            fixture.detectChanges();
-            const weekdayCellsUs = monthViewElement.querySelectorAll(
-                '.owl-dt-weekday'
-            );
-            expect(weekdayCellsUs[0].getAttribute('aria-label')).toBe('Sunday');
-        });
-    });
-});
-
-@Component({
-    standalone: false,
-    template: `
-        <owl-date-time-month-view
-                [(selected)]="selected"
-                [(pickerMoment)]="pickerMoment"></owl-date-time-month-view>
-    `
-})
-class StandardMonthViewComponent {
-    selected = new Date(2018, JAN, 10);
-    pickerMoment = new Date(2018, JAN, 5);
-}
-
-@Component({
-    standalone: false,
-    template: `
-        <owl-date-time-month-view
-                [(pickerMoment)]="pickerMoment"
-                [dateFilter]="dateFilter"></owl-date-time-month-view>
-    `
-})
-class MonthViewWithDateFilterComponent {
-    pickerMoment = new Date(2018, JAN, 1);
-    dateFilter(date: Date) {
-      // tslint:disable-next-line:triple-equals
-        return date.getDate() % 2 === 0;
-    }
-}