@dintecom/ngx-datetime-picker 22.0.1 → 22.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dintecom/ngx-datetime-picker",
-  "version": "22.0.1",
+  "version": "22.1.0",
   "description": "Angular Date Time Picker",
   "keywords": [
     "Angular",

package/types/dintecom-ngx-datetime-picker.d.ts

@@ -7,6 +7,7 @@ import * as i2 from '@angular/cdk/a11y';
 import * as i4 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { ControlValueAccessor, Validator, AbstractControl } from '@angular/forms';
+import * as _dintecom_ngx_datetime_picker from '@dintecom/ngx-datetime-picker';
 import { Subject, Observable } from 'rxjs';
 import * as i1$1 from '@angular/cdk/platform';
 
@@ -20,6 +21,14 @@ interface Options {
         yearsPerRow: number;
         yearRows: number;
     };
+    /** Default of the lazyValidation input of owl-date-time */
+    lazyValidation: boolean;
+    /** Default of the strictFormat input of input[owlDateTime] */
+    strictFormat: boolean;
+    /** Default of the wrapTimer input of owl-date-time and owl-date-time-inline */
+    wrapTimer: boolean;
+    /** Default of the timerInputDebounce input of owl-date-time and owl-date-time-inline */
+    timerInputDebounce: number;
 }
 declare class DefaultOptions {
     static create(): Options;
@@ -63,7 +72,8 @@ declare function provideOwlDateTime(): EnvironmentProviders;
  * Provides custom options for OwlDateTime.
  * This is optional - default options will be used if not provided.
  *
- * @param options - Custom options for multi-year view configuration
+ * @param options - Custom options: multi-year view configuration and the global defaults of the inputs,
+ * the missing ones keep their default values
  *
  * @example
  * ```typescript
@@ -75,7 +85,8 @@ declare function provideOwlDateTime(): EnvironmentProviders;
  *       multiYear: {
  *         yearsPerRow: 4,
  *         yearRows: 5
- *       }
+ *       },
+ *       lazyValidation: true
  *     })
  *   ]
  * });
@@ -554,6 +565,11 @@ declare abstract class DateTimeAdapter<T> {
      * Checks whether the given date is valid.
      */
     abstract isValid(date: T): boolean;
+    /**
+     * Checks whether the text matches the parse format.
+     * Used by the strictFormat input, accepts any text unless an adapter overrides it.
+     */
+    isValidFormat(value: string, parseFormat: any): boolean;
     /**
      * Gets date instance that is not valid.
      */
@@ -658,6 +674,8 @@ type DateViewType = DateView.MONTH | DateView.YEAR | DateView.MULTI_YEARS;
 declare abstract class OwlDateTime<T> {
     protected dateTimeAdapter: DateTimeAdapter<T>;
     protected dateTimeFormats: OwlDateTimeFormats;
+    /** Global defaults of the inputs, see provideOwlDateTimeOptions */
+    protected readonly options: _dintecom_ngx_datetime_picker.Options;
     /**
      * Whether to show the second's timer
      */
@@ -704,6 +722,21 @@ declare abstract class OwlDateTime<T> {
     private _stepSecond;
     get stepSecond(): number;
     set stepSecond(val: number);
+    /**
+     * Whether the hour, minute and second boxes go from the max to the min and back (59 → 0)
+     * instead of carrying over to the next hour or day.
+     * Defaults to the wrapTimer global option (false).
+     */
+    private _wrapTimer;
+    get wrapTimer(): boolean;
+    set wrapTimer(val: boolean);
+    /**
+     * Milliseconds the hour, minute and second boxes wait after typing before applying the value,
+     * 0 applies it at once. Defaults to the timerInputDebounce global option (750).
+     */
+    private _timerInputDebounce;
+    get timerInputDebounce(): number;
+    set timerInputDebounce(val: number);
     /**
      * Set the first day of week
      */
@@ -747,7 +780,7 @@ declare abstract class OwlDateTime<T> {
     protected constructor(dateTimeAdapter: DateTimeAdapter<T>, dateTimeFormats: OwlDateTimeFormats);
     protected getValidDate(obj: any): T | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OwlDateTime<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OwlDateTime<any>, never, never, { "showSecondsTimer": { "alias": "showSecondsTimer"; "required": false; }; "hour12Timer": { "alias": "hour12Timer"; "required": false; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "showCalendarWeeks": { "alias": "showCalendarWeeks"; "required": false; "isSignal": true; }; "yearOnly": { "alias": "yearOnly"; "required": false; "isSignal": true; }; "multiyearOnly": { "alias": "multiyearOnly"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; }; "stepMinute": { "alias": "stepMinute"; "required": false; }; "stepSecond": { "alias": "stepSecond"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "hideOtherMonths": { "alias": "hideOtherMonths"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OwlDateTime<any>, never, never, { "showSecondsTimer": { "alias": "showSecondsTimer"; "required": false; }; "hour12Timer": { "alias": "hour12Timer"; "required": false; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "showCalendarWeeks": { "alias": "showCalendarWeeks"; "required": false; "isSignal": true; }; "yearOnly": { "alias": "yearOnly"; "required": false; "isSignal": true; }; "multiyearOnly": { "alias": "multiyearOnly"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; }; "stepMinute": { "alias": "stepMinute"; "required": false; }; "stepSecond": { "alias": "stepSecond"; "required": false; }; "wrapTimer": { "alias": "wrapTimer"; "required": false; }; "timerInputDebounce": { "alias": "timerInputDebounce"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "hideOtherMonths": { "alias": "hideOtherMonths"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare const OWL_DATETIME_VALUE_ACCESSOR: any;
@@ -778,14 +811,25 @@ declare class OwlDateTimeInputDirective<T> implements OnInit, AfterContentInit,
     protected readonly _disabled: _angular_core.ModelSignal<boolean>;
     get disabled(): boolean;
     set disabled(value: boolean);
-    /** The minimum valid date. */
+    /** The minimum valid date. With strictFormat, it is year 1 by default. */
     private _min;
     get min(): T | null;
     set min(value: T | null);
-    /** The maximum valid date. */
+    /** The maximum valid date. With strictFormat, it is year 9999 by default. */
     private _max;
     get max(): T | null;
     set max(value: T | null);
+    /**
+     * Whether the typed text must match the display format of the picker (adapter isValidFormat),
+     * otherwise it gets the owlDateTimeParse error. Also limits min and max to 4-digit years.
+     * Defaults to the strictFormat global option (false).
+     */
+    private _strictFormat;
+    get strictFormat(): boolean;
+    set strictFormat(value: boolean);
+    private readonly options;
+    private strictMin;
+    private strictMax;
     /**
      * The picker's select mode
      */
@@ -881,6 +925,11 @@ declare class OwlDateTimeInputDirective<T> implements OnInit, AfterContentInit,
      * Convert a given obj to a valid date object
      */
     private getValidDate;
+    /**
+     * Whether the input text matches the display format of the picker, checked with strictFormat only.
+     * An empty text is valid, it means no value.
+     */
+    private isValidText;
     /**
      * Convert a time string to a date-time string
      * When pickerType is 'timer', the value in the picker's input is a time string.
@@ -905,7 +954,7 @@ declare class OwlDateTimeInputDirective<T> implements OnInit, AfterContentInit,
      */
     private isSameValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OwlDateTimeInputDirective<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OwlDateTimeInputDirective<any>, "input[owlDateTime]", ["owlDateTimeInput"], { "required": { "alias": "required"; "required": false; }; "owlDateTime": { "alias": "owlDateTime"; "required": false; }; "owlDateTimeFilter": { "alias": "owlDateTimeFilter"; "required": false; }; "_disabled": { "alias": "_disabled"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "selectMode": { "alias": "selectMode"; "required": false; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "values": { "alias": "values"; "required": false; }; }, { "_disabled": "_disabledChange"; "dateTimeChange": "dateTimeChange"; "dateTimeInput": "dateTimeInput"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OwlDateTimeInputDirective<any>, "input[owlDateTime]", ["owlDateTimeInput"], { "required": { "alias": "required"; "required": false; }; "owlDateTime": { "alias": "owlDateTime"; "required": false; }; "owlDateTimeFilter": { "alias": "owlDateTimeFilter"; "required": false; }; "_disabled": { "alias": "_disabled"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "strictFormat": { "alias": "strictFormat"; "required": false; }; "selectMode": { "alias": "selectMode"; "required": false; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "values": { "alias": "values"; "required": false; }; }, { "_disabled": "_disabledChange"; "dateTimeChange": "dateTimeChange"; "dateTimeInput": "dateTimeInput"; }, never, never, true, never>;
 }
 
 declare class OwlDateTimeComponent<T> extends OwlDateTime<T> implements OnInit, OnDestroy {
@@ -950,11 +999,26 @@ declare class OwlDateTimeComponent<T> extends OwlDateTime<T> implements OnInit,
     private _opened;
     get opened(): boolean;
     set opened(val: boolean);
+    /** Whether the picker is being opened: from open() until afterPickerOpen. */
+    private _opening;
+    get opening(): boolean;
+    /** Whether the picker is being closed: from close() until afterPickerClosed. */
+    private _closing;
+    get closing(): boolean;
     /**
      * The scroll strategy when the picker is open
      * Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies
      * */
     readonly scrollStrategy: _angular_core.InputSignal<ScrollStrategy>;
+    /**
+     * For the range mode: when false, an inverted range ('from' after 'to' or 'to' before 'from')
+     * is corrected on every change by setting both ends to the same value. When true, it is corrected only
+     * when 'Set' is clicked or the other end is activated, so the time can be edited step by step.
+     * Defaults to the lazyValidation global option (false).
+     * */
+    private _lazyValidation;
+    get lazyValidation(): boolean;
+    set lazyValidation(value: boolean);
     /**
      * Callback when the picker is closed
      * */
@@ -967,6 +1031,14 @@ declare class OwlDateTimeComponent<T> extends OwlDateTime<T> implements OnInit,
      * Callback when the picker is open
      * */
     readonly afterPickerOpen: _angular_core.OutputEmitterRef<any>;
+    /**
+     * Emits at the start of open(), before the picker is created
+     * */
+    readonly pickerOpening: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits at the start of close(), before the picker is destroyed
+     * */
+    readonly pickerClosing: _angular_core.OutputEmitterRef<void>;
     /**
      * Emits selected year in multi-year view
      * This doesn't imply a change on the selected date.
@@ -1068,7 +1140,7 @@ declare class OwlDateTimeComponent<T> extends OwlDateTime<T> implements OnInit,
      * */
     private createPopupPositionStrategy;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OwlDateTimeComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OwlDateTimeComponent<any>, "owl-date-time", ["owlDateTime"], { "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; }; "endAt": { "alias": "endAt"; "required": false; }; "pickerType": { "alias": "pickerType"; "required": false; }; "pickerMode": { "alias": "pickerMode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "scrollStrategy": { "alias": "scrollStrategy"; "required": false; "isSignal": true; }; }, { "afterPickerClosed": "afterPickerClosed"; "beforePickerOpen": "beforePickerOpen"; "afterPickerOpen": "afterPickerOpen"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "dateSelected": "dateSelected"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OwlDateTimeComponent<any>, "owl-date-time", ["owlDateTime"], { "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; }; "endAt": { "alias": "endAt"; "required": false; }; "pickerType": { "alias": "pickerType"; "required": false; }; "pickerMode": { "alias": "pickerMode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "scrollStrategy": { "alias": "scrollStrategy"; "required": false; "isSignal": true; }; "lazyValidation": { "alias": "lazyValidation"; "required": false; }; }, { "afterPickerClosed": "afterPickerClosed"; "beforePickerOpen": "beforePickerOpen"; "afterPickerOpen": "afterPickerOpen"; "pickerOpening": "pickerOpening"; "pickerClosing": "pickerClosing"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "dateSelected": "dateSelected"; }, never, never, true, never>;
 }
 
 declare class OwlDateTimeTriggerDirective<T> implements OnInit, OnChanges, AfterContentInit, OnDestroy {
@@ -1279,6 +1351,14 @@ declare class OwlTimerComponent<T> implements OnInit {
      * Seconds to change per step
      */
     readonly stepSecond: _angular_core.InputSignal<number>;
+    /**
+     * Whether the boxes go from the max to the min and back
+     */
+    readonly wrapTimer: _angular_core.InputSignal<boolean>;
+    /**
+     * Milliseconds the boxes wait after typing before applying the value
+     */
+    readonly timerInputDebounce: _angular_core.InputSignal<number>;
     get hourValue(): number;
     /**
      * The value would be displayed in hourBox.
@@ -1362,7 +1442,7 @@ declare class OwlTimerComponent<T> implements OnInit {
      */
     private getValidDate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OwlTimerComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OwlTimerComponent<any>, "owl-date-time-timer", ["owlDateTimeTimer"], { "pickerMoment": { "alias": "pickerMoment"; "required": false; }; "minDateTime": { "alias": "minDateTime"; "required": false; }; "maxDateTime": { "alias": "maxDateTime"; "required": false; }; "showSecondsTimer": { "alias": "showSecondsTimer"; "required": false; "isSignal": true; }; "hour12Timer": { "alias": "hour12Timer"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OwlTimerComponent<any>, "owl-date-time-timer", ["owlDateTimeTimer"], { "pickerMoment": { "alias": "pickerMoment"; "required": false; }; "minDateTime": { "alias": "minDateTime"; "required": false; }; "maxDateTime": { "alias": "maxDateTime"; "required": false; }; "showSecondsTimer": { "alias": "showSecondsTimer"; "required": false; "isSignal": true; }; "hour12Timer": { "alias": "hour12Timer"; "required": false; "isSignal": true; }; "stepHour": { "alias": "stepHour"; "required": false; "isSignal": true; }; "stepMinute": { "alias": "stepMinute"; "required": false; "isSignal": true; }; "stepSecond": { "alias": "stepSecond"; "required": false; "isSignal": true; }; "wrapTimer": { "alias": "wrapTimer"; "required": false; "isSignal": true; }; "timerInputDebounce": { "alias": "timerInputDebounce"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>;
 }
 
 declare class OwlDateTimeContainerComponent<T> implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
@@ -1374,6 +1454,8 @@ declare class OwlDateTimeContainerComponent<T> implements OnInit, AfterContentIn
     readonly timer: _angular_core.Signal<OwlTimerComponent<any>>;
     picker: OwlDateTime<T>;
     activeSelectedIndex: number;
+    /** Whether an inverted range is corrected only on 'Set' or when the other end is activated (see OwlDateTimeComponent). */
+    lazyValidation: boolean;
     /** Emits when an animation state changes. */
     animationStateChanged: EventEmitter<IDateTimePickerAnimationEvent>;
     private retainStartTime;
@@ -1480,6 +1562,14 @@ declare class OwlDateTimeContainerComponent<T> implements OnInit, AfterContentIn
      * if it is not valid, return null
      */
     private updateAndCheckCalendarDate;
+    /**
+     * Whether the picker moment of the active end is after 'to' (or before 'from').
+     */
+    private isRangeInverted;
+    /**
+     * With lazyValidation, sets both the 'from' and 'to' to the picker moment when the range is inverted.
+     */
+    private checkInvertedRange;
     /**
      * Focus to the picker
      * */
@@ -1939,12 +2029,19 @@ declare class OwlTimerBoxComponent implements OnInit, OnDestroy {
     readonly min: _angular_core.InputSignal<number>;
     readonly max: _angular_core.InputSignal<number>;
     readonly step: _angular_core.InputSignal<number>;
+    /** Whether the value goes from the max to the min and back */
+    readonly wrap: _angular_core.InputSignal<boolean>;
+    /** Milliseconds to wait after typing before applying the value, 0 applies it at once */
+    readonly inputDebounce: _angular_core.InputSignal<number>;
     readonly inputLabel: _angular_core.InputSignal<string>;
     readonly valueChange: _angular_core.OutputEmitterRef<number>;
     readonly inputChange: _angular_core.OutputEmitterRef<number>;
     private inputStream;
     private inputStreamSub;
     private hasFocus;
+    /** Whether the user typed into the box: the typed text is shown as is until the focus leaves */
+    private editing;
+    private readonly injector;
     get displayValue(): string;
     get owlDTTimerBoxClass(): boolean;
     private readonly valueInput;
@@ -1952,18 +2049,23 @@ declare class OwlTimerBoxComponent implements OnInit, OnDestroy {
     constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /** With wrap, past the max goes to the min (59 → 0), otherwise carries over to the larger unit. */
     upBtnClicked(): void;
+    /** With wrap, past the min goes to the max (0 → 59), otherwise carries over to the larger unit. */
     downBtnClicked(): void;
     handleInputChange(val: string): void;
     focusIn(): void;
     focusOut(value: string): void;
+    /** The value the arrows step from: the typed number while it is not applied yet */
+    private get stepBase();
+    /** Applies the arrow buttons, keys or wheel: the box shows the new value even while focused */
     private updateValue;
     private updateValueViaInput;
     private onValueInputMouseWheel;
     private bindValueInputMouseWheel;
     private unbindValueInputMouseWheel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OwlTimerBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OwlTimerBoxComponent, "owl-date-time-timer-box", ["owlDateTimeTimerBox"], { "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "upBtnAriaLabel": { "alias": "upBtnAriaLabel"; "required": false; "isSignal": true; }; "upBtnDisabled": { "alias": "upBtnDisabled"; "required": false; "isSignal": true; }; "downBtnAriaLabel": { "alias": "downBtnAriaLabel"; "required": false; "isSignal": true; }; "downBtnDisabled": { "alias": "downBtnDisabled"; "required": false; "isSignal": true; }; "boxValue": { "alias": "boxValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "inputLabel": { "alias": "inputLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "inputChange": "inputChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OwlTimerBoxComponent, "owl-date-time-timer-box", ["owlDateTimeTimerBox"], { "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "upBtnAriaLabel": { "alias": "upBtnAriaLabel"; "required": false; "isSignal": true; }; "upBtnDisabled": { "alias": "upBtnDisabled"; "required": false; "isSignal": true; }; "downBtnAriaLabel": { "alias": "downBtnAriaLabel"; "required": false; "isSignal": true; }; "downBtnDisabled": { "alias": "downBtnDisabled"; "required": false; "isSignal": true; }; "boxValue": { "alias": "boxValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "inputDebounce": { "alias": "inputDebounce"; "required": false; "isSignal": true; }; "inputLabel": { "alias": "inputLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "inputChange": "inputChange"; }, never, never, true, never>;
 }
 
 declare class OwlHourInputComponent implements ControlValueAccessor {
@@ -2276,6 +2378,7 @@ declare class UnixTimestampDateTimeAdapter extends DateTimeAdapter<number> {
     isEqual(dateLeft: number, dateRight: number): boolean;
     isSameDay(dateLeft: number, dateRight: number): boolean;
     isValid(date: number): boolean;
+    isValidFormat(value: string, parseFormat: any): boolean;
     now(): number;
     parse(value: any, parseFormat: any): number | null;
     setHours(date: number, amount: number): number;
@@ -2324,6 +2427,7 @@ declare class NativeDateTimeAdapter extends DateTimeAdapter<Date> {
     isEqual(dateLeft: Date, dateRight: Date): boolean;
     isSameDay(dateLeft: Date, dateRight: Date): boolean;
     isValid(date: Date): boolean;
+    isValidFormat(value: string, parseFormat: any): boolean;
     invalid(): Date;
     isDateInstance(obj: any): boolean;
     addCalendarYears(date: Date, amount: number): Date;