@imihai/angular-datetime-picker 21.0.2 → 22.0.0

package/projects/picker/src/lib/date-time/adapter/unix-timestamp-adapter/unix-timestamp-date-time.module.ts

@@ -0,0 +1,26 @@
+/**
+ * unix-timestamp-date-time.module
+ */
+
+import {NgModule} from '@angular/core';
+import {PlatformModule} from '@angular/cdk/platform';
+import {DateTimeAdapter} from '../date-time-adapter.class';
+import {OWL_DATE_TIME_FORMATS} from '../date-time-format.class';
+import {UnixTimestampDateTimeAdapter} from './unix-timestamp-date-time-adapter.class';
+import {OWL_UNIX_TIMESTAMP_DATE_TIME_FORMATS} from './unix-timestamp-date-time-format.class';
+
+@NgModule({
+    imports: [PlatformModule],
+    providers: [
+        {provide: DateTimeAdapter, useClass: UnixTimestampDateTimeAdapter},
+    ],
+})
+export class UnixTimestampDateTimeModule {
+}
+
+@NgModule({
+    imports: [UnixTimestampDateTimeModule],
+    providers: [{provide: OWL_DATE_TIME_FORMATS, useValue: OWL_UNIX_TIMESTAMP_DATE_TIME_FORMATS}],
+})
+export class OwlUnixTimestampDateTimeModule {
+}

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

@@ -0,0 +1,38 @@
+@for (row of rows; track $index; let rowIndex = $index) {
+    <tr role="row">
+        @for (item of row; track $index; let colIndex = $index) {
+            <td
+                class="owl-dt-calendar-cell {{ item.cellClass }}"
+                [tabindex]="isActiveCell(rowIndex, colIndex) ? 0 : -1"
+                [class.owl-dt-calendar-cell-active]="
+                    isActiveCell(rowIndex, colIndex)
+                "
+                [class.owl-dt-calendar-cell-disabled]="!item.enabled"
+                [class.owl-dt-calendar-cell-in-range]="isInRange(item.value)"
+                [class.owl-dt-calendar-cell-range-from]="
+                    isRangeFrom(item.value)
+                "
+                [class.owl-dt-calendar-cell-range-to]="isRangeTo(item.value)"
+                [attr.aria-label]="item.ariaLabel"
+                [attr.aria-disabled]="!item.enabled || null"
+                [attr.aria-current]="item.value === todayValue ? 'date' : null"
+                [attr.aria-selected]="isSelected(item.value)"
+                [style.width.%]="100 / numCols"
+                [style.paddingTop.%]="(50 * cellRatio) / numCols"
+                [style.paddingBottom.%]="(50 * cellRatio) / numCols"
+                (click)="selectCell(item)"
+            >
+                <span
+                    class="owl-dt-calendar-cell-content"
+                    [ngClass]="{
+                        'owl-dt-calendar-cell-out': item.out,
+                        'owl-dt-calendar-cell-today': item.value === todayValue,
+                        'owl-dt-calendar-cell-selected': isSelected(item.value),
+                    }"
+                >
+                    {{ item.displayValue }}
+                </span>
+            </td>
+        }
+    </tr>
+}

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

@@ -0,0 +1,120 @@
+/**
+ * calendar-body.component.spec
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CalendarCell, OwlCalendarBodyComponent } from './calendar-body.component';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('OwlCalendarBodyComponent', () => {
+    beforeEach((() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                OwlCalendarBodyComponent,
+
+                // Test components
+                StandardCalendarBodyComponent,
+            ],
+        }).compileComponents();
+    }));
+
+    describe('standard CalendarBodyComponent', () => {
+        let fixture: ComponentFixture<StandardCalendarBodyComponent>;
+        let testComponent: StandardCalendarBodyComponent;
+        let calendarBodyNativeElement: Element;
+        let rowEls: NodeListOf<Element>;
+        let cellEls: NodeListOf<Element>;
+
+        const refreshElementLists = () => {
+            rowEls = calendarBodyNativeElement.querySelectorAll('tr');
+            cellEls = calendarBodyNativeElement.querySelectorAll('.owl-dt-calendar-cell');
+        };
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(StandardCalendarBodyComponent);
+            fixture.detectChanges();
+
+            const calendarBodyDebugElement = fixture.debugElement.query(By.directive(OwlCalendarBodyComponent));
+            calendarBodyNativeElement = calendarBodyDebugElement.nativeElement;
+            testComponent = fixture.componentInstance;
+
+            refreshElementLists();
+        });
+
+        it('should create body', () => {
+            expect(rowEls.length).toBe(2);
+            expect(cellEls.length).toBe(14);
+        });
+
+        it('should highlight today', () => {
+            const todayCell = calendarBodyNativeElement.querySelector('.owl-dt-calendar-cell-today');
+            expect(todayCell).not.toBeNull();
+            expect(todayCell.innerHTML.trim()).toBe('3');
+        });
+
+        it('should highlight selected', () => {
+            const selectedCell = calendarBodyNativeElement.querySelector('.owl-dt-calendar-cell-selected');
+            expect(selectedCell).not.toBeNull();
+            expect(selectedCell.innerHTML.trim()).toBe('4');
+        });
+
+        it('cell should be selected on click', () => {
+            spyOn(testComponent, 'handleSelect');
+            expect(testComponent.handleSelect).not.toHaveBeenCalled();
+            const todayElement =
+                calendarBodyNativeElement.querySelector('.owl-dt-calendar-cell-today') as HTMLElement;
+            todayElement.click();
+            fixture.detectChanges();
+
+            expect(testComponent.handleSelect).toHaveBeenCalled();
+        });
+
+        it('should mark active date', () => {
+            expect((cellEls[10] as HTMLElement).innerText.trim()).toBe('11');
+            expect(cellEls[10].classList).toContain('owl-dt-calendar-cell-active');
+        });
+
+        it('should have aria-current set for today', () => {
+            const currentCells = calendarBodyNativeElement.querySelectorAll('.owl-dt-calendar-cell[aria-current]');
+            expect(currentCells.length).toBe(1);
+            const todayCell = calendarBodyNativeElement.querySelector('.owl-dt-calendar-cell-today');
+            expect(currentCells[0].getAttribute('aria-current')).toBe('date');
+            expect(currentCells[0].firstChild).toBe(todayCell);
+        });
+
+        it('should have aria-selected set on selected cells', () => {
+            const calendarCells = calendarBodyNativeElement.querySelectorAll('.owl-dt-calendar-cell');
+            const selectedCells = calendarBodyNativeElement.querySelectorAll('.owl-dt-calendar-cell[aria-selected=true]');
+            const nonSelectedCells = calendarBodyNativeElement.querySelectorAll('.owl-dt-calendar-cell[aria-selected=false]');
+            expect(nonSelectedCells.length).toBe(calendarCells.length - selectedCells.length);
+            const selectedCell = calendarBodyNativeElement.querySelector('.owl-dt-calendar-cell-selected');
+            expect(selectedCells[0].firstChild).toBe(selectedCell);
+        });
+    });
+});
+
+@Component({
+    standalone: false,
+    template: `
+        <table owl-date-time-calendar-body
+               [rows]="rows"
+               [todayValue]="todayValue"
+               [selectedValues]="selectedValues"
+               [selectMode]="'single'"
+               [activeCell]="activeCell"
+               (select)="handleSelect()">
+        </table>`,
+})
+class StandardCalendarBodyComponent {
+    rows = [[1, 2, 3, 4, 5, 6, 7], [8, 9, 10, 11, 12, 13, 14]].map(r => r.map(createCell));
+    todayValue = 3;
+    selectedValues = [4];
+    activeCell = 10;
+
+    handleSelect() {
+    }
+}
+
+function createCell( value: number ) {
+    return new CalendarCell(value, `${value}`, `${value}-label`, true);
+}

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

@@ -0,0 +1,190 @@
+/**
+ * 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

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

@@ -0,0 +1,16 @@
+.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;
+  } 
+}