@imihai/angular-datetime-picker 21.0.1 → 21.0.2

package/projects/picker/src/lib/date-time/date-time.class.ts

@@ -1,256 +0,0 @@
-/**
- * date-time.class
- */
-import {EventEmitter, Inject, Input, Optional, Directive} from '@angular/core';
-import {
-    coerceBooleanProperty,
-    coerceNumberProperty
-} from '@angular/cdk/coercion';
-import {DateTimeAdapter} from './adapter/date-time-adapter.class';
-import {
-    OWL_DATE_TIME_FORMATS,
-    OwlDateTimeFormats
-} from './adapter/date-time-format.class';
-
-let nextUniqueId = 0;
-
-export type PickerType = 'both' | 'calendar' | 'timer';
-
-export type PickerMode = 'popup' | 'dialog' | 'inline';
-
-export type SelectMode = 'single' | 'range' | 'rangeFrom' | 'rangeTo';
-
-export enum DateView {
-    MONTH = 'month',
-    YEAR = 'year',
-    MULTI_YEARS = 'multi-years'
-}
-
-export type DateViewType = DateView.MONTH | DateView.YEAR | DateView.MULTI_YEARS;
-
-@Directive()
-export abstract class OwlDateTime<T> {
-    /**
-     * Whether to show the second's timer
-     */
-    private _showSecondsTimer = false;
-    @Input()
-    get showSecondsTimer(): boolean {
-        return this._showSecondsTimer;
-    }
-
-    set showSecondsTimer(val: boolean) {
-        this._showSecondsTimer = coerceBooleanProperty(val);
-    }
-
-    /**
-     * Whether the timer is in hour12 format
-     */
-    private _hour12Timer = false;
-    @Input()
-    get hour12Timer(): boolean {
-        return this._hour12Timer;
-    }
-
-    set hour12Timer(val: boolean) {
-        this._hour12Timer = coerceBooleanProperty(val);
-    }
-
-    /**
-     * The view that the calendar should start in.
-     */
-    @Input()
-    startView: DateViewType = DateView.MONTH;
-
-    /**
-     * Whether to show calendar weeks in the calendar
-     * */
-    @Input()
-    showCalendarWeeks = false;
-
-    /**
-     * Whether to should only the year and multi-year views.
-     */
-    @Input()
-    yearOnly = false;
-
-    /**
-     * Whether to should only the multi-year view.
-     */
-    @Input()
-    multiyearOnly = false;
-
-    /**
-     * Hours to change per step
-     */
-    private _stepHour = 1;
-    @Input()
-    get stepHour(): number {
-        return this._stepHour;
-    }
-
-    set stepHour(val: number) {
-        this._stepHour = coerceNumberProperty(val, 1);
-    }
-
-    /**
-     * Minutes to change per step
-     */
-    private _stepMinute = 1;
-    @Input()
-    get stepMinute(): number {
-        return this._stepMinute;
-    }
-
-    set stepMinute(val: number) {
-        this._stepMinute = coerceNumberProperty(val, 1);
-    }
-
-    /**
-     * Seconds to change per step
-     */
-    private _stepSecond = 1;
-    @Input()
-    get stepSecond(): number {
-        return this._stepSecond;
-    }
-
-    set stepSecond(val: number) {
-        this._stepSecond = coerceNumberProperty(val, 1);
-    }
-
-    /**
-     * Set the first day of week
-     */
-    private _firstDayOfWeek: number;
-    @Input()
-    get firstDayOfWeek() {
-        return this._firstDayOfWeek;
-    }
-
-    set firstDayOfWeek(value: number) {
-        value = coerceNumberProperty(value);
-        if (value > 6 || value < 0) {
-            this._firstDayOfWeek = undefined;
-        } else {
-            this._firstDayOfWeek = value;
-        }
-    }
-
-    /**
-     * Whether to hide dates in other months at the start or end of the current month.
-     */
-    private _hideOtherMonths = false;
-    @Input()
-    get hideOtherMonths(): boolean {
-        return this._hideOtherMonths;
-    }
-
-    set hideOtherMonths(val: boolean) {
-        this._hideOtherMonths = coerceBooleanProperty(val);
-    }
-
-    private readonly _id: string;
-    get id(): string {
-        return this._id;
-    }
-
-    abstract get selected(): T | null;
-
-    abstract get selecteds(): T[] | null;
-
-    abstract get dateTimeFilter(): (date: T | null) => boolean;
-
-    abstract get maxDateTime(): T | null;
-
-    abstract get minDateTime(): T | null;
-
-    abstract get selectMode(): SelectMode;
-
-    abstract get startAt(): T | null;
-
-    abstract get endAt(): T | null;
-
-    abstract get opened(): boolean;
-
-    abstract get pickerMode(): PickerMode;
-
-    abstract get pickerType(): PickerType;
-
-    abstract get isInSingleMode(): boolean;
-
-    abstract get isInRangeMode(): boolean;
-
-    abstract select(date: T | T[]): void;
-
-    abstract yearSelected: EventEmitter<T>;
-
-    abstract monthSelected: EventEmitter<T>;
-
-    abstract dateSelected: EventEmitter<T>;
-
-    abstract selectYear(normalizedYear: T): void;
-
-    abstract selectMonth(normalizedMonth: T): void;
-
-    abstract selectDate(normalizedDate: T): void;
-
-    get formatString(): string {
-        return this.pickerType === 'both'
-            ? this.dateTimeFormats.fullPickerInput
-            : this.pickerType === 'calendar'
-                ? this.dateTimeFormats.datePickerInput
-                : this.dateTimeFormats.timePickerInput;
-    }
-
-    /**
-     * Date Time Checker to check if the give dateTime is selectable
-     */
-    public dateTimeChecker = (dateTime: T) => {
-        return (
-            !!dateTime &&
-            (!this.dateTimeFilter || this.dateTimeFilter(dateTime)) &&
-            (!this.minDateTime ||
-                this.dateTimeAdapter.compare(dateTime, this.minDateTime) >=
-                0) &&
-            (!this.maxDateTime ||
-                this.dateTimeAdapter.compare(dateTime, this.maxDateTime) <= 0)
-        );
-    };
-
-    get disabled(): boolean {
-        return false;
-    }
-
-    protected constructor(
-        @Optional() protected dateTimeAdapter: DateTimeAdapter<T>,
-        @Optional()
-        @Inject(OWL_DATE_TIME_FORMATS)
-        protected dateTimeFormats: OwlDateTimeFormats
-    ) {
-        if (!this.dateTimeAdapter) {
-            throw Error(
-                `OwlDateTimePicker: No provider found for DateTimeAdapter. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`
-            );
-        }
-
-        if (!this.dateTimeFormats) {
-            throw Error(
-                `OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`
-            );
-        }
-
-        this._id = `owl-dt-picker-${nextUniqueId++}`;
-    }
-
-    protected getValidDate(obj: any): T | null {
-        return this.dateTimeAdapter.isDateInstance(obj) &&
-        this.dateTimeAdapter.isValid(obj)
-            ? obj
-            : null;
-    }
-}

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

@@ -1,61 +0,0 @@
-/**
- * date-time.module
- */
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { A11yModule } from '@angular/cdk/a11y';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { OwlDateTimeTriggerDirective } from './date-time-picker-trigger.directive';
-import { OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER, OwlDateTimeComponent } from './date-time-picker.component';
-import { OwlDateTimeContainerComponent } from './date-time-picker-container.component';
-import { OwlDateTimeInputDirective } from './date-time-picker-input.directive';
-import { OwlDateTimeIntl } from './date-time-picker-intl.service';
-import { OwlMonthViewComponent } from './calendar-month-view.component';
-import { OwlCalendarBodyComponent } from './calendar-body.component';
-import { OwlYearViewComponent } from './calendar-year-view.component';
-import { OwlMultiYearViewComponent } from './calendar-multi-year-view.component';
-import { OwlTimerBoxComponent } from './timer-box.component';
-import { OwlTimerComponent } from './timer.component';
-import { NumberFixedLenPipe } from './numberedFixLen.pipe';
-import { OwlCalendarComponent } from './calendar.component';
-import { OwlDateTimeInlineComponent } from './date-time-inline.component';
-import { OwlDialogModule } from '../dialog/dialog.module';
-import { optionsProviders } from './options-provider';
-
-@NgModule({
-    imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule],
-    exports: [
-        OwlCalendarComponent,
-        OwlTimerComponent,
-        OwlDateTimeTriggerDirective,
-        OwlDateTimeInputDirective,
-        OwlDateTimeComponent,
-        OwlDateTimeInlineComponent,
-        OwlMultiYearViewComponent,
-        OwlYearViewComponent,
-        OwlMonthViewComponent,
-    ],
-    declarations: [
-        OwlDateTimeTriggerDirective,
-        OwlDateTimeInputDirective,
-        OwlDateTimeComponent,
-        OwlDateTimeContainerComponent,
-        OwlMultiYearViewComponent,
-        OwlYearViewComponent,
-        OwlMonthViewComponent,
-        OwlTimerComponent,
-        OwlTimerBoxComponent,
-        OwlCalendarComponent,
-        OwlCalendarBodyComponent,
-        NumberFixedLenPipe,
-        OwlDateTimeInlineComponent,
-    ],
-    providers: [
-        OwlDateTimeIntl,
-        OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER,
-        ...optionsProviders,
-    ]
-})
-export class OwlDateTimeModule {
-}

package/projects/picker/src/lib/date-time/numberedFixLen.pipe.ts

@@ -1,28 +0,0 @@
-/**
- * numberFixedLen.pipe
- */
-
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-    name: 'numberFixedLen',
-    standalone: false,
-})
-export class NumberFixedLenPipe implements PipeTransform {
-    transform( num: number, len: number ): any {
-        const number = Math.floor(num);
-        const length = Math.floor(len);
-
-        if (num === null || isNaN(number) || isNaN(length)) {
-            return num;
-        }
-
-        let numString = number.toString();
-
-        while (numString.length < length) {
-            numString = '0' + numString;
-        }
-
-        return numString;
-    }
-}

package/projects/picker/src/lib/date-time/options-provider.ts

@@ -1,44 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-export function defaultOptionsFactory() {
-    return DefaultOptions.create();
-
-}
-export function multiYearOptionsFactory(options: Options) {
-    return options.multiYear;
-  }
-
-export interface Options {
-    multiYear: {
-        yearsPerRow: number,
-        yearRows: number
-    };
-}
-export class DefaultOptions {
-    public static create(): Options {
-        // Always return new instance
-        return {
-            multiYear: {
-                yearRows: 7,
-                yearsPerRow: 3
-            }
-        };
-    }
-}
-
-export abstract class OptionsTokens {
-    public static all = new InjectionToken<Options>('All options token');
-    public static multiYear = new InjectionToken<Options['multiYear']>('Grid view options token');
-}
-
-export const optionsProviders: Provider[] = [
-    {
-        provide: OptionsTokens.all,
-        useFactory: defaultOptionsFactory,
-    },
-    {
-        provide: OptionsTokens.multiYear,
-        useFactory: multiYearOptionsFactory,
-        deps: [OptionsTokens.all],
-    },
-];

package/projects/picker/src/lib/date-time/timer-box.component.html

@@ -1,79 +0,0 @@
-@if (showDivider) {
-    <div class="owl-dt-timer-divider" aria-hidden="true"></div>
-}
-<button
-    class="owl-dt-control-button owl-dt-control-arrow-button"
-    type="button"
-    tabindex="-1"
-    [disabled]="upBtnDisabled"
-    [attr.aria-label]="upBtnAriaLabel"
-    (click)="upBtnClicked()"
->
-    <span class="owl-dt-control-button-content" tabindex="-1">
-        <!-- <editor-fold desc="SVG Arrow Up"> -->
-        <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 451.847 451.846"
-            style="enable-background: new 0 0 451.847 451.846"
-            xml:space="preserve"
-            width="100%"
-            height="100%"
-        >
-            <path
-                d="M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0
-                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4
-                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z"
-            />
-        </svg>
-        <!-- </editor-fold> -->
-    </span>
-</button>
-<label class="owl-dt-timer-content">
-    <input
-        class="owl-dt-timer-input"
-        maxlength="2"
-        [value]="displayValue"
-        (keydown.arrowup)="!upBtnDisabled && upBtnClicked()"
-        (keydown.arrowdown)="!downBtnDisabled && downBtnClicked()"
-        (input)="handleInputChange(valueInput.value)"
-        (focusin)="focusIn()"
-        (focusout)="focusOut(valueInput.value)"
-        #valueInput
-    />
-    <span class="owl-hidden-accessible">{{ inputLabel }}</span>
-</label>
-<button
-    class="owl-dt-control-button owl-dt-control-arrow-button"
-    type="button"
-    tabindex="-1"
-    [disabled]="downBtnDisabled"
-    [attr.aria-label]="downBtnAriaLabel"
-    (click)="downBtnClicked()"
->
-    <span class="owl-dt-control-button-content" tabindex="-1">
-        <!-- <editor-fold desc="SVG Arrow Down"> -->
-        <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 451.847 451.846"
-            style="enable-background: new 0 0 451.847 451.846"
-            xml:space="preserve"
-            width="100%"
-            height="100%"
-        >
-            <path
-                d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
-                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0
-                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
-            />
-        </svg>
-        <!-- </editor-fold> -->
-    </span>
-</button>

package/projects/picker/src/lib/date-time/timer-box.component.ts

@@ -1,175 +0,0 @@
-/**
- * timer-box.component
- */
-
-import {
-    ChangeDetectionStrategy,
-    Component,
-    EventEmitter,
-    ElementRef,
-    ViewChild,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output
-} from '@angular/core';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-
-@Component({
-    exportAs: 'owlDateTimeTimerBox',
-    selector: 'owl-date-time-timer-box',
-    templateUrl: './timer-box.component.html',
-    styleUrls: ['./timer-box.component.scss'],
-    standalone: false,
-    preserveWhitespaces: false,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    host: {
-        '[class.owl-dt-timer-box]': 'owlDTTimerBoxClass'
-    }
-})
-
-export class OwlTimerBoxComponent implements OnInit, OnDestroy {
-
-    @Input() showDivider = false;
-
-    @Input() upBtnAriaLabel: string;
-
-    @Input() upBtnDisabled: boolean;
-
-    @Input() downBtnAriaLabel: string;
-
-    @Input() downBtnDisabled: boolean;
-
-    /**
-     * Value would be displayed in the box
-     * If it is null, the box would display [value]
-     * */
-    @Input() boxValue: number;
-
-    @Input() value: number;
-
-    @Input() min: number;
-
-    @Input() max: number;
-
-    @Input() step = 1;
-
-    @Input() inputLabel: string;
-
-    @Output() valueChange = new EventEmitter<number>();
-
-    @Output() inputChange = new EventEmitter<number>();
-
-    private inputStream = new Subject<string>();
-
-    private inputStreamSub = Subscription.EMPTY;
-
-    private hasFocus = false;
-
-    get displayValue(): string {
-        if (this.hasFocus) {
-            // Don't try to reformat the value that user is currently editing
-            return this.valueInput.nativeElement.value;
-        }
-
-        const value = this.boxValue || this.value;
-
-        if (value === null || isNaN(value)) {
-            return '';
-        }
-
-        return value < 10 ? '0' + value.toString() : value.toString();
-    }
-
-    get owlDTTimerBoxClass(): boolean {
-        return true;
-    }
-
-    @ViewChild('valueInput', { static: true })
-    private valueInput: ElementRef<HTMLInputElement>;
-    private onValueInputMouseWheelBind = this.onValueInputMouseWheel.bind(this);
-
-    constructor() {
-    }
-
-    public ngOnInit() {
-        this.inputStreamSub = this.inputStream.pipe(debounceTime(750)).subscribe(( val: string ) => {
-            if (val) {
-                const inputValue = coerceNumberProperty(val, 0);
-                this.updateValueViaInput(inputValue);
-            }
-        });
-        this.bindValueInputMouseWheel();
-    }
-
-    public ngOnDestroy(): void {
-        this.unbindValueInputMouseWheel();
-        this.inputStreamSub.unsubscribe();
-    }
-
-    public upBtnClicked(): void {
-        this.updateValue(this.value + this.step);
-    }
-
-    public downBtnClicked(): void {
-        this.updateValue(this.value - this.step);
-    }
-
-    public handleInputChange(val: string ): void {
-        this.inputStream.next(val);
-    }
-
-    public focusIn(): void {
-        this.hasFocus = true;
-    }
-
-    public focusOut(value: string): void {
-        this.hasFocus = false;
-        if (value) {
-            const inputValue = coerceNumberProperty(value, 0);
-            this.updateValueViaInput(inputValue);
-        }
-    }
-
-    private updateValue( value: number ): void {
-        this.valueChange.emit(value);
-    }
-
-    private updateValueViaInput( value: number ): void {
-        if (value > this.max || value < this.min) {
-            return;
-        }
-        this.inputChange.emit(value);
-    }
-
-    private onValueInputMouseWheel( event: any ): void {
-        event = event || window.event;
-        const delta = event.wheelDelta || -event.deltaY || -event.detail;
-
-        if (delta > 0) {
-          if (!this.upBtnDisabled) {
-            this.upBtnClicked();
-          }
-        } else if (delta < 0) {
-          if (!this.downBtnDisabled) {
-            this.downBtnClicked();
-          }
-        }
-
-        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
-    }
-
-    private bindValueInputMouseWheel(): void {
-        this.valueInput.nativeElement.addEventListener(
-            'onwheel' in document ? 'wheel' : 'mousewheel',
-            this.onValueInputMouseWheelBind);
-    }
-
-    private unbindValueInputMouseWheel(): void {
-        this.valueInput.nativeElement.removeEventListener(
-            'onwheel' in document ? 'wheel' : 'mousewheel',
-            this.onValueInputMouseWheelBind);
-    }
-}

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

@@ -1,58 +0,0 @@
-<owl-date-time-timer-box
-    [upBtnAriaLabel]="upHourButtonLabel"
-    [downBtnAriaLabel]="downHourButtonLabel"
-    [upBtnDisabled]="!upHourEnabled()"
-    [downBtnDisabled]="!downHourEnabled()"
-    [boxValue]="hourBoxValue"
-    [value]="hourValue"
-    [min]="0"
-    [max]="23"
-    [step]="stepHour"
-    [inputLabel]="'Hour'"
-    (inputChange)="setHourValueViaInput($event)"
-    (valueChange)="setHourValue($event)"
-></owl-date-time-timer-box>
-<owl-date-time-timer-box
-    [showDivider]="true"
-    [upBtnAriaLabel]="upMinuteButtonLabel"
-    [downBtnAriaLabel]="downMinuteButtonLabel"
-    [upBtnDisabled]="!upMinuteEnabled()"
-    [downBtnDisabled]="!downMinuteEnabled()"
-    [value]="minuteValue"
-    [min]="0"
-    [max]="59"
-    [step]="stepMinute"
-    [inputLabel]="'Minute'"
-    (inputChange)="setMinuteValue($event)"
-    (valueChange)="setMinuteValue($event)"
-></owl-date-time-timer-box>
-@if (showSecondsTimer) {
-    <owl-date-time-timer-box
-        [showDivider]="true"
-        [upBtnAriaLabel]="upSecondButtonLabel"
-        [downBtnAriaLabel]="downSecondButtonLabel"
-        [upBtnDisabled]="!upSecondEnabled()"
-        [downBtnDisabled]="!downSecondEnabled()"
-        [value]="secondValue"
-        [min]="0"
-        [max]="59"
-        [step]="stepSecond"
-        [inputLabel]="'Second'"
-        (inputChange)="setSecondValue($event)"
-        (valueChange)="setSecondValue($event)"
-    ></owl-date-time-timer-box>
-}
-@if (hour12Timer) {
-    <div class="owl-dt-timer-hour12">
-        <button
-            class="owl-dt-control-button owl-dt-timer-hour12-box"
-            type="button"
-            tabindex="0"
-            (click)="setMeridiem($event)"
-        >
-            <span class="owl-dt-control-button-content" tabindex="-1">
-                {{ hour12ButtonLabel }}
-            </span>
-        </button>
-    </div>
-}