@imihai/angular-datetime-picker 21.0.0 → 21.0.2

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

@@ -1,44 +0,0 @@
-<button class="owl-dt-control-button owl-dt-control-arrow-button"
-        [disabled]="!previousEnabled()" [attr.aria-label]="prevButtonLabel"
-        type="button" tabindex="0" (click)="prevYearList($event)">
-    <span class="owl-dt-control-button-content" tabindex="-1">
-        <!-- <editor-fold desc="SVG Arrow Left"> -->
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-             version="1.1" x="0px" y="0px" viewBox="0 0 250.738 250.738"
-             style="enable-background:new 0 0 250.738 250.738;" xml:space="preserve"
-             width="100%" height="100%">
-            <path style="fill-rule: evenodd; clip-rule: evenodd;" d="M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z"/>
-        </svg>
-        <!-- </editor-fold> -->
-    </span>
-</button>
-<table class="owl-dt-calendar-table owl-dt-calendar-multi-year-table">
-    <thead class="owl-dt-calendar-header">
-    <tr>
-        <th colspan="3">{{tableHeader}}</th>
-    </tr>
-    </thead>
-    <tbody owl-date-time-calendar-body role="grid"
-           [rows]="years" [numCols]="3" [cellRatio]="3 / 7"
-           [activeCell]="activeCell"
-           [todayValue]="todayYear"
-           [selectedValues]="selectedYears"
-           [selectMode]="selectMode"
-           (keydown)="handleCalendarKeydown($event)"
-           (select)="selectCalendarCell($event)"></tbody>
-</table>
-<button class="owl-dt-control-button owl-dt-control-arrow-button"
-        [disabled]="!nextEnabled()" [attr.aria-label]="nextButtonLabel"
-        type="button" tabindex="0" (click)="nextYearList($event)">
-    <span class="owl-dt-control-button-content" tabindex="-1">
-        <!-- <editor-fold desc="SVG Arrow Right"> -->
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-             viewBox="0 0 250.738 250.738" style="enable-background:new 0 0 250.738 250.738;" xml:space="preserve">
-            <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0
-                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545
-                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681
-                C197.237,120.447,195.534,115.448,191.75,111.689z"/>
-        </svg>
-        <!-- </editor-fold> -->
-    </span>
-</button>

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

@@ -1,343 +0,0 @@
-/**
- * calendar-multi-year-view.component.spec
- */
-
-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 {
-    OwlMultiYearViewComponent,
-} from './calendar-multi-year-view.component';
-import { dispatchMouseEvent, dispatchKeyboardEvent } from '../../test-helpers';
-import {
-    DOWN_ARROW,
-    END,
-    HOME,
-    LEFT_ARROW,
-    PAGE_DOWN,
-    PAGE_UP,
-    RIGHT_ARROW,
-    UP_ARROW
-} from '@angular/cdk/keycodes';
-import { Options, OptionsTokens } from './options-provider';
-
-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;
-
-const YEAR_ROWS = 7;
-const YEARS_PER_ROW = 3;
-
-describe('OwlMultiYearViewComponent', () => {
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [OwlNativeDateTimeModule, OwlDateTimeModule],
-            declarations: [
-                StandardMultiYearViewComponent,
-                MultiYearViewWithDateFilterComponent
-            ],
-            providers: [OwlDateTimeIntl, {
-                provide: OptionsTokens.multiYear,
-                useFactory: () =>
-                    ({
-                        yearRows: YEAR_ROWS,
-                        yearsPerRow: YEARS_PER_ROW,
-                    } as Options['multiYear']),
-            },]
-        }).compileComponents();
-    });
-
-    describe('standard multi-years view', () => {
-        let fixture: ComponentFixture<StandardMultiYearViewComponent>;
-        let testComponent: StandardMultiYearViewComponent;
-        let multiYearViewDebugElement: DebugElement;
-        let multiYearViewElement: HTMLElement;
-        let multiYearViewInstance: OwlMultiYearViewComponent<Date>;
-
-        beforeEach(() => {
-            fixture = TestBed.createComponent(StandardMultiYearViewComponent);
-            fixture.detectChanges();
-
-            multiYearViewDebugElement = fixture.debugElement.query(
-                By.directive(OwlMultiYearViewComponent)
-            );
-            multiYearViewElement = multiYearViewDebugElement.nativeElement;
-            testComponent = fixture.componentInstance;
-            multiYearViewInstance = multiYearViewDebugElement.componentInstance;
-        });
-
-        it('should have correct number of years', () => {
-            const cellEls = multiYearViewElement.querySelectorAll(
-                '.owl-dt-calendar-cell'
-            );
-            expect(cellEls.length).toBe(YEARS_PER_ROW * YEAR_ROWS);
-        });
-
-        it('should shows selected year if in same range', () => {
-            const selectedElContent = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-cell-selected.owl-dt-calendar-cell-content'
-            );
-            expect(selectedElContent.innerHTML.trim()).toBe('2020');
-        });
-
-        it('should NOT show selected year if in different range', () => {
-            testComponent.selected = new Date(2040, JAN, 10);
-            fixture.detectChanges();
-
-            const selectedElContent = multiYearViewElement.querySelector(
-                '.owl-calendar-body-selected.owl-dt-calendar-cell-content'
-            );
-            expect(selectedElContent).toBeNull();
-        });
-
-        it('should fire change event on cell clicked', () => {
-            const cellDecember = multiYearViewElement.querySelector(
-                '[aria-label="2030"]'
-            );
-            dispatchMouseEvent(cellDecember, 'click');
-            fixture.detectChanges();
-
-            const selectedElContent = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-cell-active .owl-dt-calendar-cell-content'
-            );
-            expect(selectedElContent.innerHTML.trim()).toBe('2030');
-        });
-
-        it('should mark active date', () => {
-            const cell2017 = multiYearViewElement.querySelector(
-                '[aria-label="2018"]'
-            );
-            expect((cell2017 as HTMLElement).innerText.trim()).toBe('2018');
-            expect(cell2017.classList).toContain('owl-dt-calendar-cell-active');
-        });
-
-        it('should decrement year on left arrow press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2017, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2016, JAN, 5)
-            );
-        });
-
-        it('should increment year on right arrow press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2019, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', RIGHT_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2020, JAN, 5)
-            );
-        });
-
-        it('should go up a row on up arrow press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 - YEARS_PER_ROW, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', UP_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 - YEARS_PER_ROW * 2, JAN, 5)
-            );
-        });
-
-        it('should go down a row on down arrow press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 + YEARS_PER_ROW, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', DOWN_ARROW);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 + YEARS_PER_ROW * 2, JAN, 5)
-            );
-        });
-
-        it('should go to first year in current range on home press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2016, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', HOME);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2016, JAN, 5)
-            );
-        });
-
-        it('should go to last year in current range on end press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2036, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', END);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2036, JAN, 5)
-            );
-        });
-
-        it('should go to same index in previous year range page up press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 - YEARS_PER_ROW * YEAR_ROWS, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_UP);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 - YEARS_PER_ROW * YEAR_ROWS * 2, JAN, 5)
-            );
-        });
-
-        it('should go to same index in next year range on page down press', () => {
-            const calendarBodyEl = multiYearViewElement.querySelector(
-                '.owl-dt-calendar-body'
-            );
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 + YEARS_PER_ROW * YEAR_ROWS, JAN, 5)
-            );
-
-            dispatchKeyboardEvent(calendarBodyEl, 'keydown', PAGE_DOWN);
-            fixture.detectChanges();
-
-            expect(multiYearViewInstance.pickerMoment).toEqual(
-                new Date(2018 + YEARS_PER_ROW * YEAR_ROWS * 2, JAN, 5)
-            );
-        });
-    });
-
-    describe('multi-years view with date filter', () => {
-        let fixture: ComponentFixture<MultiYearViewWithDateFilterComponent>;
-        let multiYearViewElement: Element;
-
-        beforeEach(() => {
-            fixture = TestBed.createComponent(
-                MultiYearViewWithDateFilterComponent
-            );
-            fixture.detectChanges();
-
-            const multiYearViewDebugElement = fixture.debugElement.query(
-                By.directive(OwlMultiYearViewComponent)
-            );
-            multiYearViewElement = multiYearViewDebugElement.nativeElement;
-        });
-
-        it('should disable filtered years', () => {
-            const cell2018 = multiYearViewElement.querySelector(
-                '[aria-label="2018"]'
-            );
-            const cell2019 = multiYearViewElement.querySelector(
-                '[aria-label="2019"]'
-            );
-            expect(cell2019.classList).not.toContain(
-                'owl-dt-calendar-cell-disabled'
-            );
-            expect(cell2018.classList).toContain(
-                'owl-dt-calendar-cell-disabled'
-            );
-        });
-    });
-});
-
-@Component({
-    standalone: false,
-    template: `
-        <owl-date-time-multi-year-view
-                [selected]="selected"
-                [(pickerMoment)]="pickerMoment"
-                (change)="handleChange($event)"></owl-date-time-multi-year-view>
-    `
-})
-class StandardMultiYearViewComponent {
-    selected = new Date(2020, JAN, 10);
-    pickerMoment = new Date(2018, JAN, 5);
-
-    handleChange(date: Date): void {
-        this.pickerMoment = new Date(date);
-    }
-}
-
-@Component({
-    standalone: false,
-    template: `
-        <owl-date-time-multi-year-view
-                [(pickerMoment)]="pickerMoment"
-                [dateFilter]="dateFilter"></owl-date-time-multi-year-view>
-    `
-})
-class MultiYearViewWithDateFilterComponent {
-    pickerMoment = new Date(2018, JAN, 1);
-    dateFilter(date: Date) {
-        return date.getFullYear() !== 2018;
-    }
-}