@clr/angular 17.6.0 → 17.7.1

package/forms/checkbox/checkbox-wrapper.d.ts

@@ -1,6 +1,5 @@
 import { InjectionToken, OnDestroy, OnInit } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { DynamicWrapper } from '../../utils/host-wrapping/dynamic-wrapper';
 import { ClrLabel } from '../common/label';
 import * as i0 from "@angular/core";
 export declare const IS_TOGGLE: InjectionToken<BehaviorSubject<boolean>>;
@@ -9,8 +8,7 @@ export declare const IS_TOGGLE_PROVIDER: {
     provide: InjectionToken<BehaviorSubject<boolean>>;
     useFactory: typeof isToggleFactory;
 };
-export declare class ClrCheckboxWrapper implements DynamicWrapper, OnInit, OnDestroy {
-    _dynamic: boolean;
+export declare class ClrCheckboxWrapper implements OnInit, OnDestroy {
     label: ClrLabel;
     toggle: boolean;
     private subscriptions;

package/forms/common/abstract-container.d.ts

@@ -1,7 +1,6 @@
 import { AfterContentInit, OnDestroy } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
-import { DynamicWrapper } from '../../utils/host-wrapping/dynamic-wrapper';
 import { ClrControlError } from './error';
 import { ClrControlHelper } from './helper';
 import { IfControlStateService } from './if-control-state/if-control-state.service';
@@ -11,7 +10,7 @@ import { LayoutService } from './providers/layout.service';
 import { NgControlService } from './providers/ng-control.service';
 import { ClrControlSuccess } from './success';
 import * as i0 from "@angular/core";
-export declare abstract class ClrAbstractContainer implements DynamicWrapper, OnDestroy, AfterContentInit {
+export declare abstract class ClrAbstractContainer implements OnDestroy, AfterContentInit {
     protected ifControlStateService: IfControlStateService;
     protected layoutService: LayoutService;
     protected controlClassService: ControlClassService;
@@ -21,7 +20,7 @@ export declare abstract class ClrAbstractContainer implements DynamicWrapper, On
     controlErrorComponent: ClrControlError;
     controlHelperComponent: ClrControlHelper;
     control: NgControl;
-    _dynamic: boolean;
+    additionalControls: NgControl[];
     protected subscriptions: Subscription[];
     private state;
     constructor(ifControlStateService: IfControlStateService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService);

package/forms/common/if-control-state/abstract-if-state.d.ts

@@ -9,6 +9,7 @@ export declare abstract class AbstractIfState {
     protected subscriptions: Subscription[];
     protected displayedContent: boolean;
     protected control: NgControl;
+    protected additionalControls: NgControl[];
     constructor(ifControlStateService: IfControlStateService, ngControlService: NgControlService);
     ngOnDestroy(): void;
     protected handleState(_state: CONTROL_STATE): void;

package/forms/common/providers/ng-control.service.d.ts

@@ -9,12 +9,18 @@ export interface Helpers {
 }
 export declare class NgControlService {
     private _control;
+    private _additionalControls;
     private _controlChanges;
+    private _additionalControlsChanges;
     private _helpers;
     get control(): NgControl;
     get controlChanges(): Observable<NgControl>;
+    get additionalControls(): NgControl[];
+    get additionalControlsChanges(): Observable<NgControl[]>;
+    get hasAdditionalControls(): boolean;
     get helpersChange(): Observable<Helpers>;
     setControl(control: NgControl): void;
+    addAdditionalControl(control: NgControl): void;
     setHelpers(state: Helpers): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgControlService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NgControlService>;

package/forms/common/wrapped-control.d.ts

@@ -1,7 +1,6 @@
 import { DoCheck, ElementRef, InjectionToken, Injector, OnDestroy, OnInit, Renderer2, Type, ViewContainerRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
-import { DynamicWrapper } from '../../utils/host-wrapping/dynamic-wrapper';
 import { ControlIdService } from './providers/control-id.service';
 import { NgControlService } from './providers/ng-control.service';
 import * as i0 from "@angular/core";
@@ -9,10 +8,10 @@ export declare enum CHANGE_KEYS {
     FORM = "form",
     MODEL = "model"
 }
-export declare class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoCheck, OnDestroy {
+export declare class WrappedFormControl<W> implements OnInit, DoCheck, OnDestroy {
     protected vcr: ViewContainerRef;
     protected wrapperType: Type<W>;
-    private ngControl;
+    private _ngControl;
     protected renderer: Renderer2;
     protected el: ElementRef<HTMLElement>;
     _id: string;
@@ -27,14 +26,18 @@ export declare class WrappedFormControl<W extends DynamicWrapper> implements OnI
     private _containerInjector;
     private differs;
     private differ;
-    constructor(vcr: ViewContainerRef, wrapperType: Type<W>, injector: Injector, ngControl: NgControl | null, renderer: Renderer2, el: ElementRef<HTMLElement>);
+    private additionalDiffer;
+    private ngControl;
+    constructor(vcr: ViewContainerRef, wrapperType: Type<W>, injector: Injector, _ngControl: NgControl | null, renderer: Renderer2, el: ElementRef<HTMLElement>);
     get id(): string;
     set id(value: string);
+    private get hasAdditionalControls();
     ngOnInit(): void;
     ngDoCheck(): void;
     ngOnDestroy(): void;
     triggerValidation(): void;
     protected getProviderFromContainer<T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T): T;
+    private triggerDoCheck;
     private markAsTouched;
     private setAriaDescribedBy;
     private getAriaDescribedById;

package/forms/datepicker/calendar.d.ts

@@ -30,6 +30,7 @@ export declare class ClrCalendar implements OnDestroy {
     get localeDays(): ReadonlyArray<ClrDayOfWeek>;
     get calendar(): CalendarModel;
     get selectedDay(): DayModel;
+    get selectedEndDay(): DayModel;
     get focusedDay(): DayModel;
     get today(): DayModel;
     /**
@@ -52,6 +53,9 @@ export declare class ClrCalendar implements OnDestroy {
      * 3. focus on the focusable day in the calendar.
      */
     private initializeSubscriptions;
+    private validateAndCloseDatePicker;
+    private updateCalendarViewModal;
+    private refreshCalendarViewModal;
     /**
      * Generates the Calendar View based on the calendar retrieved from the DateNavigationService.
      */

package/forms/datepicker/date-container.d.ts

@@ -17,6 +17,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../utils/popover/popover-host.directive";
 export declare class ClrDateContainer extends ClrAbstractContainer implements AfterViewInit {
     protected renderer: Renderer2;
+    protected elem: ElementRef;
     private toggleService;
     private dateNavigationService;
     private datepickerEnabledService;
@@ -29,10 +30,19 @@ export declare class ClrDateContainer extends ClrAbstractContainer implements Af
     protected ngControlService: NgControlService;
     protected ifControlStateService: IfControlStateService;
     focus: boolean;
+    private readonly clrDateInput;
+    private readonly clrStartDateInput;
+    private readonly clrEndDateInput;
     private toggleButton;
-    constructor(renderer: Renderer2, toggleService: ClrPopoverToggleService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, dateIOService: DateIOService, commonStrings: ClrCommonStringsService, focusService: FocusService, viewManagerService: ViewManagerService, controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
+    constructor(renderer: Renderer2, elem: ElementRef, toggleService: ClrPopoverToggleService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, dateIOService: DateIOService, commonStrings: ClrCommonStringsService, focusService: FocusService, viewManagerService: ViewManagerService, controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
+    /**
+     * For date range picker actions buttons are shown by default
+     */
     set showActionButtons(flag: boolean);
     set clrPosition(position: string);
+    set rangeOptions(rangeOptions: any);
+    set min(dateString: string);
+    set max(dateString: string);
     set actionButton(button: ElementRef<HTMLButtonElement>);
     get popoverPosition(): ClrPopoverPosition;
     get open(): boolean;
@@ -44,6 +54,7 @@ export declare class ClrDateContainer extends ClrAbstractContainer implements Af
      * Return if Datepicker is diabled or not as Form Control
      */
     get isInputDateDisabled(): boolean;
+    protected get isRangePicker(): boolean;
     ngAfterViewInit(): void;
     /**
      * Return the label for the toggle button.
@@ -55,6 +66,7 @@ export declare class ClrDateContainer extends ClrAbstractContainer implements Af
      * Processes the user input and Initializes the Calendar everytime the datepicker popover is open.
      */
     private initializeCalendar;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateContainer, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDateContainer, "clr-date-container", never, { "showActionButtons": "showActionButtons"; "clrPosition": "clrPosition"; }, {}, never, ["label", "[clrDate]", "clr-control-helper", "clr-control-error", "clr-control-success"], false, [{ directive: typeof i1.ClrPopoverHostDirective; inputs: {}; outputs: {}; }]>;
+    private dateRangeStructuralChecks;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateContainer, [null, null, null, null, null, null, null, null, null, null, null, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDateContainer, "clr-date-container, clr-date-range-container", never, { "showActionButtons": "showActionButtons"; "clrPosition": "clrPosition"; "rangeOptions": "rangeOptions"; "min": "min"; "max": "max"; }, {}, ["clrDateInput", "clrStartDateInput", "clrEndDateInput"], ["label", "[clrStartDate]", "[clrEndDate]", "[clrDate]", "clr-control-helper", "clr-control-error", "clr-control-success"], false, [{ directive: typeof i1.ClrPopoverHostDirective; inputs: {}; outputs: {}; }]>;
 }

package/forms/datepicker/date-end-input.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { ClrDateInputBase } from './date-input';
+import { DayModel } from './model/day.model';
+import * as i0 from "@angular/core";
+export declare class ClrEndDateInput extends ClrDateInputBase {
+    dateChange: EventEmitter<Date>;
+    inputWidth: number;
+    set date(date: Date | string);
+    get inputSize(): number;
+    protected get userSelectedDayChange(): import("rxjs").Observable<DayModel>;
+    triggerControlInputValidation(): void;
+    protected updateDayModel(dayModel: DayModel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrEndDateInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrEndDateInput, "[clrEndDate]", never, { "inputWidth": "inputWidth"; "date": "clrEndDate"; }, { "dateChange": "clrEndDateChange"; }, never, never, false, never>;
+}

package/forms/datepicker/date-input.d.ts

@@ -1,61 +1,67 @@
 import { AfterViewInit, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
+import { Observable } from 'rxjs';
 import { FocusService } from '../common/providers/focus.service';
 import { WrappedFormControl } from '../common/wrapped-control';
 import { ClrDateContainer } from './date-container';
+import { DayModel } from './model/day.model';
 import { DateFormControlService } from './providers/date-form-control.service';
 import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerEnabledService } from './providers/datepicker-enabled.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
 import * as i0 from "@angular/core";
-export declare class ClrDateInput extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
+export declare abstract class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
     protected el: ElementRef<HTMLInputElement>;
     protected renderer: Renderer2;
     protected control: NgControl;
     private container;
-    private dateIOService;
-    private dateNavigationService;
+    protected dateIOService: DateIOService;
+    protected dateNavigationService: DateNavigationService;
     private datepickerEnabledService;
     private dateFormControlService;
     private platformId;
     private focusService;
-    private datepickerFocusService;
+    protected datepickerFocusService: DatepickerFocusService;
     static ngAcceptInputType_date: Date | null | string;
     placeholder: string;
-    dateChange: EventEmitter<Date>;
     protected index: number;
     private initialClrDateInputValue;
     private previousDateChange;
+    protected abstract dateChange: EventEmitter<Date>;
     constructor(viewContainerRef: ViewContainerRef, injector: Injector, el: ElementRef<HTMLInputElement>, renderer: Renderer2, control: NgControl, container: ClrDateContainer, dateIOService: DateIOService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, platformId: any, focusService: FocusService, datepickerFocusService: DatepickerFocusService);
-    set date(date: Date | string);
-    set min(dateString: string);
-    set max(dateString: string);
     get disabled(): boolean | string;
     set disabled(value: boolean | string);
     get placeholderText(): string;
     get inputType(): string;
+    protected abstract get userSelectedDayChange(): Observable<DayModel>;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     setFocusStates(): void;
     triggerValidation(): void;
     onValueChange(target: HTMLInputElement): void;
+    protected datepickerHasFormControl(): boolean;
+    protected setDate(date: Date | string): void;
     private usingClarityDatepicker;
     private usingNativeDatepicker;
     private setFocus;
-    private triggerControlValidation;
     private populateServicesFromContainerComponent;
     private processInitialInputs;
     private updateDate;
     private updateInput;
     private getValidDateValueFromDate;
     private emitDateOutput;
-    private datepickerHasFormControl;
     private listenForControlValueChanges;
     private listenForUserSelectedDayChanges;
     private listenForTouchChanges;
     private listenForDirtyChanges;
     private listenForInputRefocus;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInput, [null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInput, "[clrDate]", never, { "placeholder": "placeholder"; "date": "clrDate"; "min": "min"; "max": "max"; "disabled": "disabled"; }, { "dateChange": "clrDateChange"; }, never, never, false, never>;
+    /**
+     * In case of date range error, both start & end date field validation has to be triggered
+     * if either of the field gets updated
+     */
+    private validateDateRange;
+    protected abstract updateDayModel(dayModel: DayModel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInputBase, [null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInputBase, never, never, { "placeholder": "placeholder"; "disabled": "disabled"; }, {}, never, never, false, never>;
 }

package/forms/datepicker/date-input.validator.d.ts

@@ -1,10 +1,27 @@
 import { AbstractControl, ValidationErrors, Validator } from '@angular/forms';
 import { DateIOService } from './providers/date-io.service';
+import { DateNavigationService } from './providers/date-navigation.service';
 import * as i0 from "@angular/core";
 export declare class ClrDateInputValidator implements Validator {
     private dateIOService;
     constructor(dateIOService: DateIOService);
     validate(control: AbstractControl): ValidationErrors;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInputValidator, [{ optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInputValidator, "[clrDate]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInputValidator, "[clrDate], [clrStartDate], [clrEndDate]", never, {}, {}, never, never, false, never>;
+}
+export declare class ClrStartDateInputValidator implements Validator {
+    private dateIOService;
+    private dateNavigationService;
+    constructor(dateIOService: DateIOService, dateNavigationService: DateNavigationService);
+    validate(control: AbstractControl): ValidationErrors;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrStartDateInputValidator, [{ optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrStartDateInputValidator, "[clrStartDate]", never, {}, {}, never, never, false, never>;
+}
+export declare class ClrEndDateInputValidator implements Validator {
+    private dateIOService;
+    private dateNavigationService;
+    constructor(dateIOService: DateIOService, dateNavigationService: DateNavigationService);
+    validate(control: AbstractControl): ValidationErrors;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrEndDateInputValidator, [{ optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrEndDateInputValidator, "[clrEndDate]", never, {}, {}, never, never, false, never>;
 }

package/forms/datepicker/date-single-input.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { ClrDateInputBase } from './date-input';
+import { DayModel } from './model/day.model';
+import * as i0 from "@angular/core";
+export declare class ClrDateInput extends ClrDateInputBase {
+    dateChange: EventEmitter<Date>;
+    set date(date: Date | string);
+    set min(dateString: string);
+    set max(dateString: string);
+    protected get userSelectedDayChange(): import("rxjs").Observable<DayModel>;
+    protected updateDayModel(dayModel: DayModel): void;
+    private triggerControlValidation;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInput, "[clrDate]", never, { "date": "clrDate"; "min": "min"; "max": "max"; }, { "dateChange": "clrDateChange"; }, never, never, false, never>;
+}

package/forms/datepicker/date-start-input.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { ClrDateInputBase } from './date-input';
+import { DayModel } from './model/day.model';
+import * as i0 from "@angular/core";
+export declare class ClrStartDateInput extends ClrDateInputBase {
+    dateChange: EventEmitter<Date>;
+    inputWidth: number;
+    set date(date: Date | string);
+    get inputSize(): number;
+    protected get userSelectedDayChange(): import("rxjs").Observable<DayModel>;
+    triggerControlInputValidation(): void;
+    protected updateDayModel(dayModel: DayModel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrStartDateInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrStartDateInput, "[clrStartDate]", never, { "inputWidth": "inputWidth"; "date": "clrStartDate"; }, { "dateChange": "clrStartDateChange"; }, never, never, false, never>;
+}

package/forms/datepicker/datepicker-view-manager.d.ts

@@ -1,4 +1,5 @@
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
+import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { ViewManagerService } from './providers/view-manager.service';
 import * as i0 from "@angular/core";
@@ -6,7 +7,8 @@ export declare class ClrDatepickerViewManager {
     commonStrings: ClrCommonStringsService;
     private viewManagerService;
     private dateNavigationService;
-    constructor(commonStrings: ClrCommonStringsService, viewManagerService: ViewManagerService, dateNavigationService: DateNavigationService);
+    private dateIOService;
+    constructor(commonStrings: ClrCommonStringsService, viewManagerService: ViewManagerService, dateNavigationService: DateNavigationService, dateIOService: DateIOService);
     /**
      * Returns if the current view is the monthpicker.
      */
@@ -19,7 +21,10 @@ export declare class ClrDatepickerViewManager {
      * Returns if the current view is the daypicker.
      */
     get isDayView(): boolean;
+    get hasRangeOptions(): boolean;
     protected get hasActionButtons(): boolean;
+    protected get dateRangeOptions(): any;
+    onRangeOptionSelect(selectedRange: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatepickerViewManager, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatepickerViewManager, "clr-datepicker-view-manager", never, {}, {}, never, never, false, never>;
 }

package/forms/datepicker/datepicker.module.d.ts

@@ -2,25 +2,28 @@ import { Type } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./day";
 import * as i2 from "./date-container";
-import * as i3 from "./date-input";
+import * as i3 from "./date-single-input";
 import * as i4 from "./date-input.validator";
-import * as i5 from "./datepicker-view-manager";
-import * as i6 from "./monthpicker";
-import * as i7 from "./yearpicker";
-import * as i8 from "./daypicker";
-import * as i9 from "./calendar";
-import * as i10 from "./datepicker-action-buttons";
-import * as i11 from "@angular/common";
-import * as i12 from "../../utils/cdk/cdk-trap-focus.module";
-import * as i13 from "../../utils/host-wrapping/host-wrapping.module";
-import * as i14 from "../../utils/conditional/conditional.module";
-import * as i15 from "../../utils/popover/popover.module";
-import * as i16 from "../../icon/icon.module";
-import * as i17 from "../common/common.module";
+import * as i5 from "./date-start-input";
+import * as i6 from "./date-end-input";
+import * as i7 from "./datepicker-view-manager";
+import * as i8 from "./monthpicker";
+import * as i9 from "./yearpicker";
+import * as i10 from "./daypicker";
+import * as i11 from "./calendar";
+import * as i12 from "./datepicker-action-buttons";
+import * as i13 from "@angular/common";
+import * as i14 from "../../utils/cdk/cdk-trap-focus.module";
+import * as i15 from "../../utils/host-wrapping/host-wrapping.module";
+import * as i16 from "../../utils/conditional/conditional.module";
+import * as i17 from "../../utils/popover/popover.module";
+import * as i18 from "../../icon/icon.module";
+import * as i19 from "../common/common.module";
+import * as i20 from "../../layout/vertical-nav/vertical-nav.module";
 export declare const CLR_DATEPICKER_DIRECTIVES: Type<any>[];
 export declare class ClrDatepickerModule {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrDatepickerModule, [typeof i1.ClrDay, typeof i2.ClrDateContainer, typeof i3.ClrDateInput, typeof i4.ClrDateInputValidator, typeof i5.ClrDatepickerViewManager, typeof i6.ClrMonthpicker, typeof i7.ClrYearpicker, typeof i8.ClrDaypicker, typeof i9.ClrCalendar, typeof i10.ClrDatepickerActions], [typeof i11.CommonModule, typeof i12.CdkTrapFocusModule, typeof i13.ClrHostWrappingModule, typeof i14.ClrConditionalModule, typeof i15.ClrPopoverModuleNext, typeof i16.ClrIconModule, typeof i17.ClrCommonFormsModule], [typeof i1.ClrDay, typeof i2.ClrDateContainer, typeof i3.ClrDateInput, typeof i4.ClrDateInputValidator, typeof i5.ClrDatepickerViewManager, typeof i6.ClrMonthpicker, typeof i7.ClrYearpicker, typeof i8.ClrDaypicker, typeof i9.ClrCalendar, typeof i10.ClrDatepickerActions]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrDatepickerModule, [typeof i1.ClrDay, typeof i2.ClrDateContainer, typeof i3.ClrDateInput, typeof i4.ClrDateInputValidator, typeof i5.ClrStartDateInput, typeof i6.ClrEndDateInput, typeof i4.ClrStartDateInputValidator, typeof i4.ClrEndDateInputValidator, typeof i7.ClrDatepickerViewManager, typeof i8.ClrMonthpicker, typeof i9.ClrYearpicker, typeof i10.ClrDaypicker, typeof i11.ClrCalendar, typeof i12.ClrDatepickerActions], [typeof i13.CommonModule, typeof i14.CdkTrapFocusModule, typeof i15.ClrHostWrappingModule, typeof i16.ClrConditionalModule, typeof i17.ClrPopoverModuleNext, typeof i18.ClrIconModule, typeof i19.ClrCommonFormsModule, typeof i20.ClrVerticalNavModule], [typeof i1.ClrDay, typeof i2.ClrDateContainer, typeof i3.ClrDateInput, typeof i4.ClrDateInputValidator, typeof i5.ClrStartDateInput, typeof i6.ClrEndDateInput, typeof i4.ClrStartDateInputValidator, typeof i4.ClrEndDateInputValidator, typeof i7.ClrDatepickerViewManager, typeof i8.ClrMonthpicker, typeof i9.ClrYearpicker, typeof i10.ClrDaypicker, typeof i11.ClrCalendar, typeof i12.ClrDatepickerActions]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ClrDatepickerModule>;
 }

package/forms/datepicker/day.d.ts

@@ -16,6 +16,12 @@ export declare class ClrDay {
     get dayView(): DayViewModel;
     set dayView(day: DayViewModel);
     get dayString(): string;
+    get isRangeStartDay(): boolean;
+    get isRangeEndDay(): boolean;
+    /**
+     * Calls the DateNavigationService to update the hovered day value of the calendar
+     */
+    hoverListener(): void;
     /**
      * Updates the focusedDay in the DateNavigationService when the ClrDay is focused.
      */
@@ -24,6 +30,11 @@ export declare class ClrDay {
      * Updates the selectedDay when the ClrDay is selected and closes the datepicker popover.
      */
     selectDay(): void;
+    /**
+     * Applicable only to date range picker
+     * Compares whether the day is in between the start and end date range
+     */
+    isInRange(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDay, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDay, "clr-day", never, { "dayView": "clrDayView"; }, { "onSelectDay": "selectDay"; }, never, never, false, never>;
 }

package/forms/datepicker/index.d.ts

@@ -1,5 +1,8 @@
 export * from './date-container';
 export * from './date-input';
+export * from './date-single-input';
+export * from './date-start-input';
+export * from './date-end-input';
 export * from './date-input.validator';
 export * from './datepicker-view-manager';
 export * from './daypicker';

package/forms/datepicker/interfaces/date-range.interface.d.ts

@@ -3,3 +3,11 @@ export interface DateRange {
     minDate?: DayModel;
     maxDate?: DayModel;
 }
+export interface DateRangeInput {
+    startDate: DayModel;
+    endDate?: DayModel;
+}
+export interface DateRangeOption {
+    label: string;
+    value: Date[];
+}

package/forms/datepicker/model/calendar-view.model.d.ts

@@ -4,14 +4,15 @@ import { DayViewModel } from './day-view.model';
 import { DayModel } from './day.model';
 export declare class CalendarViewModel {
     calendar: CalendarModel;
-    private selectedDay;
+    selectedDay: DayModel;
+    selectedEndDay: DayModel;
     private focusableDay;
     private today;
     firstDayOfWeek: number;
     private excludedDates;
     private currMonthDayViews;
     private _calendarView;
-    constructor(calendar: CalendarModel, selectedDay: DayModel, focusableDay: DayModel, today: DayModel, firstDayOfWeek: number, excludedDates: DateRange);
+    constructor(calendar: CalendarModel, selectedDay: DayModel, selectedEndDay: DayModel, focusableDay: DayModel, today: DayModel, firstDayOfWeek: number, excludedDates: DateRange);
     /**
      * DayViewModel matrix. Size 6x7
      */
@@ -24,6 +25,10 @@ export declare class CalendarViewModel {
      * Updates the selected day in the calendar
      */
     updateSelectedDay(day: DayModel | undefined): void;
+    /**
+     * Updates the selected end day in the calendar
+     */
+    updateSelectedEndDay(day: DayModel | undefined): void;
     /**
      * Generates a 6x7 matrix of DayViewModel based on the Calendar.
      * The 6x7 matrix is structured according to the first day of the week.

package/forms/datepicker/model/calendar.model.d.ts

@@ -20,6 +20,14 @@ export declare class CalendarModel {
      * Returns CalendarModel of the next month.
      */
     nextMonth(): CalendarModel;
+    /**
+     * Returns CalendarModel of the previous year.
+     */
+    previousYear(): CalendarModel;
+    /**
+     * Returns CalendarModel of the next year.
+     */
+    nextYear(): CalendarModel;
     /**
      * Populates the days array with the DayModels in the current Calendar.
      */

package/forms/datepicker/model/day-view.model.d.ts

@@ -6,7 +6,9 @@ export declare class DayViewModel {
     isDisabled: boolean;
     isSelected: boolean;
     isFocusable: boolean;
-    constructor(dayModel: DayModel, isTodaysDate?: boolean, isExcluded?: boolean, isDisabled?: boolean, isSelected?: boolean, isFocusable?: boolean);
+    isRangeStartDay: boolean;
+    isRangeEndDay: boolean;
+    constructor(dayModel: DayModel, isTodaysDate?: boolean, isExcluded?: boolean, isDisabled?: boolean, isSelected?: boolean, isFocusable?: boolean, isRangeStartDay?: boolean, isRangeEndDay?: boolean);
     /**
      * Gets the tab index based on the isFocusable flag.
      */

package/forms/datepicker/model/day.model.d.ts

@@ -18,5 +18,13 @@ export declare class DayModel {
     clone(): DayModel;
     toComparisonString(): string;
     toDateString(): string;
+    /**
+     * Compares the dates and returns boolean value based on the value passed
+     */
+    isBefore(day: DayModel, dayInclusive?: boolean): boolean;
+    /**
+     * Compares the dates and returns boolean value based on the value passed
+     */
+    isAfter(day: DayModel, dayInclusive?: boolean): boolean;
     private pad;
 }

package/forms/datepicker/monthpicker.d.ts

@@ -1,20 +1,22 @@
 import { AfterViewInit, ElementRef } from '@angular/core';
+import { ClrCommonStringsService } from '../../utils';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 import * as i0 from "@angular/core";
 export declare class ClrMonthpicker implements AfterViewInit {
-    private _viewManagerService;
     private _localeHelperService;
     private _dateNavigationService;
     private _datepickerFocusService;
     private _elRef;
+    private _viewManagerService;
+    commonStrings: ClrCommonStringsService;
     /**
      * Keeps track of the current focused month.
      */
     private _focusedMonthIndex;
-    constructor(_viewManagerService: ViewManagerService, _localeHelperService: LocaleHelperService, _dateNavigationService: DateNavigationService, _datepickerFocusService: DatepickerFocusService, _elRef: ElementRef<HTMLElement>);
+    constructor(_localeHelperService: LocaleHelperService, _dateNavigationService: DateNavigationService, _datepickerFocusService: DatepickerFocusService, _elRef: ElementRef, _viewManagerService: ViewManagerService, commonStrings: ClrCommonStringsService);
     /**
      * Gets the months array which is used to rendered the monthpicker view.
      * Months are in the TranslationWidth.Wide format.
@@ -24,6 +26,23 @@ export declare class ClrMonthpicker implements AfterViewInit {
      * Gets the month value of the Calendar.
      */
     get calendarMonthIndex(): number;
+    /**
+     * Gets the year which the user is currently on.
+     */
+    get calendarEndMonthIndex(): number;
+    get yearAttrString(): string;
+    /**
+     * Returns the year value of the calendar.
+     */
+    get calendarYear(): number;
+    get currentCalendarYear(): number;
+    get currentCalendarMonth(): number;
+    getIsRangeStartMonth(monthIndex: number): boolean;
+    getIsRangeEndMonth(monthIndex: number): boolean;
+    /**
+     * Calls the ViewManagerService to change to the yearpicker view.
+     */
+    changeToYearView(): void;
     /**
      * Focuses on the current calendar month when the View is initialized.
      */
@@ -32,6 +51,11 @@ export declare class ClrMonthpicker implements AfterViewInit {
      * Handles the Keyboard arrow navigation for the monthpicker.
      */
     onKeyDown(event: KeyboardEvent): void;
+    isSelected(monthIndex: number): boolean;
+    /**
+     * Calls the DateNavigationService to update the hovered month value of the calendar
+     */
+    onHover(monthIndex: number): void;
     /**
      * Calls the DateNavigationService to update the month value of the calendar.
      * Also changes the view to the daypicker.
@@ -41,6 +65,23 @@ export declare class ClrMonthpicker implements AfterViewInit {
      * Compares the month passed to the focused month and returns the tab index.
      */
     getTabIndex(monthIndex: number): number;
+    /**
+     * Calls the DateNavigationService to move to the next month.
+     */
+    nextYear(): void;
+    /**
+     * Calls the DateNavigationService to move to the previous month.
+     */
+    previousYear(): void;
+    /**
+     * Calls the DateNavigationService to move to the current month.
+     */
+    currentYear(): void;
+    /**
+     * Applicable only to date range picker
+     * Compares the month passed is in between the start and end date range
+     */
+    isInRange(monthIndex: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrMonthpicker, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrMonthpicker, "clr-monthpicker", never, {}, {}, never, never, false, never>;
 }