@coreui/angular-pro 4.0.0 → 4.1.0-next.0

package/lib/date-range-picker/date-range-picker/date-range-picker.component.d.ts

@@ -0,0 +1,233 @@
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormGroup } from '@angular/forms';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Colors } from '../../coreui.types';
+import { CalendarComponent } from '../../calendar';
+import { DateFilterType, DayFormatType, WeekdayFormatType } from '../../calendar/calendar.service';
+import { StartDateDirective } from '../start-date.directive';
+import { EndDateDirective } from '../end-date.directive';
+import * as i0 from "@angular/core";
+export interface ICalendarRange {
+    [key: string]: Date[];
+}
+export declare type TCustomRange = [string, Date[]];
+/** Must be a valid date string */
+export declare class DateRangePickerComponent implements OnInit, OnDestroy, ControlValueAccessor {
+    private breakpointObserver;
+    static ngAcceptInputType_disabled: BooleanInput;
+    static ngAcceptInputType_navYearFirst: BooleanInput;
+    constructor(breakpointObserver: BreakpointObserver);
+    /**
+     * Set the format of day name.
+     * @default 'numeric'
+     * @type DayFormatType
+     */
+    dayFormat: DayFormatType;
+    /**
+     * The number of calendars that render on desktop devices.
+     * @type number
+     * @default 2
+     */
+    set calendars(value: number);
+    get calendars(): number;
+    private _calendars;
+    /**
+     * Toggle visibility or set the content of the cleaner button.
+     * @type boolean
+     * @default true
+     */
+    set cleaner(value: boolean);
+    get cleaner(): boolean;
+    private _cleaner;
+    /**
+     * Set date format.
+     * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
+     */
+    format?: string;
+    /**
+     * Toggle visibility or set the content of the input indicator.
+     * @type boolean
+     * @default true
+     */
+    set indicator(value: boolean);
+    get indicator(): boolean;
+    private _indicator;
+    /**
+     * Toggle the readonly state for the component.
+     * @type boolean
+     * @default false
+     */
+    set inputReadOnly(value: boolean);
+    get inputReadOnly(): boolean;
+    private _inputReadOnly;
+    /**
+     * Reorder year-month navigation, and render year first.
+     * @type boolean
+     * @default false
+     */
+    set navYearFirst(value: boolean);
+    get navYearFirst(): boolean;
+    private _navYearFirst;
+    /**
+     * Specifies short hints that are visible in start date and end date inputs.
+     * type string
+     */
+    placeholder: string | string[];
+    /**
+     * Predefined date ranges the user can select from.
+     * @type ICalendarRange
+     */
+    ranges?: object;
+    /**
+     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+     * @default 'secondary'
+     */
+    rangesButtonsColor?: Colors;
+    /**
+     * Size the ranges button small or large.
+     * @type 'sm' | 'lg' | undefined
+     */
+    rangesButtonsSize?: 'sm' | 'lg';
+    /**
+     * Set the ranges button variant to an outlined button or a ghost button.
+     * @type 'outline' | 'ghost' | undefined
+     */
+    rangesButtonsVariant?: 'outline' | 'ghost';
+    /**
+     * Default icon or character that separates two dates.
+     * @type boolean
+     * @default true
+     */
+    set separator(value: boolean);
+    get separator(): boolean;
+    private _separator;
+    /**
+     * Size the component small or large.
+     * @type 'sm' | 'lg' | undefined
+     * @default undefined
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * Provide an additional time selection by adding select boxes to choose time.
+     * @type boolean
+     * @default false
+     */
+    set timepicker(value: boolean);
+    get timepicker(): boolean;
+    private _timepicker;
+    /**
+     * Toggle visibility or set the content of today button.
+     * @type string
+     * @default 'Today'
+     */
+    todayButton: string;
+    /**
+     * Sets the color context of the today button to one of CoreUI’s themed colors.
+     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+     * @default 'primary'
+     */
+    todayButtonColor: Colors;
+    /**
+     * Size the today button small or large.
+     * @type 'sm' | 'lg'
+     * @default 'sm'
+     */
+    todayButtonSize: 'sm' | 'lg';
+    /**
+     * Set the today button variant to an outlined button or a ghost button.
+     * @type 'outline' | 'ghost' | undefined
+     */
+    todayButtonVariant?: 'outline' | 'ghost';
+    /**
+     * Toggle the visibility of the component.
+     * @type boolean
+     * @default false
+     */
+    set visible(value: boolean);
+    get visible(): boolean;
+    private _visible;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    calendarDate?: Date;
+    disabledDates: Date[] | Date[][];
+    set firstDayOfWeek(value: number);
+    get firstDayOfWeek(): number;
+    private _firstDayOfWeek;
+    locale: string;
+    maxDate: Date | null;
+    minDate: Date | null;
+    set navigation(value: boolean);
+    get navigation(): boolean;
+    private _navigation;
+    /**
+     * Allow range selection.
+     * @type boolean
+     * @default false
+     */
+    set range(value: boolean);
+    get range(): boolean;
+    private _range;
+    dateFilter?: DateFilterType;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    private _disabled;
+    set value(value: Date[]);
+    get value(): Date[];
+    private _value;
+    /**
+     * Set length or format of day name.
+     * @type WeekdayFormatType
+     * @default 'short'
+     */
+    weekdayFormat: WeekdayFormatType;
+    readonly valueChange: EventEmitter<Date | Date[] | undefined>;
+    calendarCellHover: EventEmitter<Date | null>;
+    calendarDateChange: EventEmitter<Date>;
+    endDateChange: EventEmitter<Date | null>;
+    startDateChange: EventEmitter<Date | null>;
+    calendarComponent: CalendarComponent;
+    startDateDirective: StartDateDirective;
+    endDateDirective: EndDateDirective;
+    isMobile: boolean;
+    customRanges: TCustomRange[];
+    set startDateValue(value: string);
+    get startDateValue(): string;
+    private _startDateValue;
+    set endDateValue(value: string);
+    get endDateValue(): string;
+    _endDateValue: string;
+    startDatePlaceholder: string;
+    endDatePlaceholder: string;
+    private layoutChanges;
+    startDateInput: FormControl;
+    endDateInput: FormControl;
+    dateRangeGroup: FormGroup;
+    set inputStartHoverValue(value: Date | null);
+    get inputStartHoverValue(): Date | null;
+    private _inputStartHoverValue;
+    set inputEndHoverValue(value: Date | null);
+    get inputEndHoverValue(): Date | null;
+    private _inputEndHoverValue;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getCustomRangeKey(customRange: any): any;
+    setCustomRange(customRange: any): void;
+    handleCalendarCellHover($event: Date | null): void;
+    handleCalendarDateChange($event: Date): void;
+    handleStartDateChange(date: Date | null): void;
+    handleEndDateChange(date: Date | null): void;
+    handleClear($event: MouseEvent): void;
+    handleStartDateInputChange($event: any): void;
+    handleEndDateInputChange($event: any): void;
+    forbiddenDate(date: Date): boolean | undefined;
+    setInputValue: (elementRef: ElementRef, date: Date | null) => void;
+    onChange: any;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: (Date[])): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePickerComponent, "c-date-range-picker", ["cDateRangePicker"], { "dayFormat": "dayFormat"; "calendars": "calendars"; "cleaner": "cleaner"; "format": "format"; "indicator": "indicator"; "inputReadOnly": "inputReadOnly"; "navYearFirst": "navYearFirst"; "placeholder": "placeholder"; "ranges": "ranges"; "rangesButtonsColor": "rangesButtonsColor"; "rangesButtonsSize": "rangesButtonsSize"; "rangesButtonsVariant": "rangesButtonsVariant"; "separator": "separator"; "size": "size"; "timepicker": "timepicker"; "todayButton": "todayButton"; "todayButtonColor": "todayButtonColor"; "todayButtonSize": "todayButtonSize"; "todayButtonVariant": "todayButtonVariant"; "visible": "visible"; "startDate": "startDate"; "endDate": "endDate"; "calendarDate": "calendarDate"; "disabledDates": "disabledDates"; "firstDayOfWeek": "firstDayOfWeek"; "locale": "locale"; "maxDate": "maxDate"; "minDate": "minDate"; "navigation": "navigation"; "range": "range"; "dateFilter": "dateFilter"; "disabled": "disabled"; "value": "value"; "weekdayFormat": "weekdayFormat"; }, { "valueChange": "valueChange"; "calendarCellHover": "calendarCellHover"; "calendarDateChange": "calendarDateChange"; "endDateChange": "endDateChange"; "startDateChange": "startDateChange"; }, never, ["*"]>;
+}

package/lib/date-range-picker/date-range-picker.module.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./date-range-picker/date-range-picker.component";
+import * as i2 from "./start-date.directive";
+import * as i3 from "./end-date.directive";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
+import * as i6 from "../button/button.module";
+import * as i7 from "../calendar/calendar.module";
+import * as i8 from "../shared/shared.module";
+import * as i9 from "../form/form.module";
+import * as i10 from "../dropdown/dropdown.module";
+export declare class DateRangePickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DateRangePickerModule, [typeof i1.DateRangePickerComponent, typeof i2.StartDateDirective, typeof i3.EndDateDirective], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.ButtonModule, typeof i7.CalendarModule, typeof i8.SharedModule, typeof i9.FormModule, typeof i10.DropdownModule], [typeof i1.DateRangePickerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DateRangePickerModule>;
+}

package/lib/date-range-picker/end-date.directive.d.ts

@@ -0,0 +1,8 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class EndDateDirective {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<EndDateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EndDateDirective, "[cEndDate]", ["cEndDate"], {}, {}, never>;
+}

package/lib/date-range-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/lib/date-range-picker/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DateRangePickerComponent, ICalendarRange } from './date-range-picker/date-range-picker.component';
+export { DateRangePickerModule } from './date-range-picker.module';

package/lib/date-range-picker/start-date.directive.d.ts

@@ -0,0 +1,8 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class StartDateDirective {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<StartDateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StartDateDirective, "[cStartDate]", ["cStartDate"], {}, {}, never>;
+}

package/lib/dropdown/dropdown/dropdown.component.d.ts

@@ -1,15 +1,28 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Options, Placement } from '@popperjs/core';
 import { DropdownService } from '../dropdown.service';
 import { DropdownMenuDirective } from '../dropdown-menu/dropdown-menu.directive';
 import * as i0 from "@angular/core";
-export declare class DropdownToggleDirective {
+export declare class DropdownToggleDirective implements AfterViewInit {
     elementRef: ElementRef;
     private dropdownService;
     dropdown?: DropdownComponent | undefined;
     static ngAcceptInputType_split: BooleanInput;
     static ngAcceptInputType_popper: BooleanInput;
+    constructor(elementRef: ElementRef, dropdownService: DropdownService, dropdown?: DropdownComponent | undefined);
+    /**
+     * Toggle the disabled state for the toggler.
+     * @type DropdownComponent | undefined
+     * @default undefined
+     */
+    dropdownComponent?: DropdownComponent;
+    /**
+     * Disables the toggler.
+     * @type boolean
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Enables pseudo element caret on toggler.
      * @type boolean
@@ -22,11 +35,11 @@ export declare class DropdownToggleDirective {
     set split(value: boolean);
     get split(): boolean;
     private _split;
-    constructor(elementRef: ElementRef, dropdownService: DropdownService, dropdown?: DropdownComponent | undefined);
     get hostClasses(): any;
     onClick($event: MouseEvent): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownToggleDirective, [null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownToggleDirective, "[cDropdownToggle]", ["cDropdownToggle"], { "caret": "caret"; "split": "split"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownToggleDirective, "[cDropdownToggle]", ["cDropdownToggle"], { "dropdownComponent": "dropdownComponent"; "disabled": "disabled"; "caret": "caret"; "split": "split"; }, {}, never>;
 }
 export declare class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
     private document;
@@ -34,7 +47,7 @@ export declare class DropdownComponent implements AfterContentInit, OnDestroy, O
     private renderer;
     private ngZone;
     private changeDetectorRef;
-    private dropdownService;
+    dropdownService: DropdownService;
     static ngAcceptInputType_dark: BooleanInput;
     static ngAcceptInputType_visible: BooleanInput;
     /**

package/lib/dropdown/dropdown-close/dropdown-close.directive.d.ts

@@ -1,16 +1,19 @@
+import { AfterViewInit } from '@angular/core';
 import { DropdownService } from '../dropdown.service';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 import * as i0 from "@angular/core";
-export declare class DropdownCloseDirective {
+export declare class DropdownCloseDirective implements AfterViewInit {
     private dropdownService;
     dropdown?: DropdownComponent | undefined;
+    constructor(dropdownService: DropdownService, dropdown?: DropdownComponent | undefined);
     /**
      * Disables a dropdown-close directive.
      * @type boolean
      * @default undefined
      */
     disabled?: boolean;
-    constructor(dropdownService: DropdownService, dropdown?: DropdownComponent | undefined);
+    dropdownComponent?: DropdownComponent;
+    ngAfterViewInit(): void;
     get hostClasses(): any;
     set tabIndex(value: string | number | null);
     get tabIndex(): string | number | null;
@@ -19,5 +22,5 @@ export declare class DropdownCloseDirective {
     private onClick;
     private onKeyUp;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownCloseDirective, [null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownCloseDirective, "[cDropdownClose]", ["cDropdownClose"], { "disabled": "disabled"; "tabIndex": "tabIndex"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownCloseDirective, "[cDropdownClose]", ["cDropdownClose"], { "disabled": "disabled"; "dropdownComponent": "dropdownComponent"; "tabIndex": "tabIndex"; }, {}, never>;
 }

package/lib/sidebar/sidebar-nav/sidebar-nav.d.ts

@@ -1,3 +1,4 @@
+import { IsActiveMatchOptions } from '@angular/router';
 export interface INavAttributes {
     [propName: string]: any;
 }
@@ -20,7 +21,7 @@ export interface INavLinkProps {
         [k: string]: any;
     };
     fragment?: string;
-    queryParamsHandling?: 'merge' | 'preserve' | '';
+    queryParamsHandling?: 'merge' | 'preserve' | '' | null;
     preserveFragment?: boolean;
     skipLocationChange?: boolean;
     replaceUrl?: boolean;
@@ -29,8 +30,9 @@ export interface INavLinkProps {
     };
     routerLinkActiveOptions?: {
         exact: boolean;
-    };
+    } | IsActiveMatchOptions;
     routerLinkActive?: string | string[];
+    ariaCurrentWhenActive?: 'page' | 'step' | 'location' | 'date' | 'time' | true | false;
 }
 export interface INavData {
     name?: string;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@coreui/angular-pro",
-  "version": "4.0.0",
+  "version": "4.1.0-next.0",
   "description": "CoreUI Pro Components Library for Angular",
-  "homepage": "https://coreui.io/pro/angular",
+  "homepage": "https://coreui.io/angular",
   "author": {
     "name": "creativeLabs Łukasz Holeczek",
     "url": "https://coreui.io",
@@ -16,14 +16,15 @@
     }
   ],
   "dependencies": {
-    "@popperjs/core": "~2.10.0",
+    "@popperjs/core": "~2.11.5",
+    "date-fns": "^2.28.0",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/cdk": "^13.0.0",
-    "@angular/common": "^13.0.0",
-    "@angular/core": "^13.0.0",
-    "@angular/router": "^13.0.0"
+    "@angular/cdk": "^13.0.0 || ^14.0.0",
+    "@angular/common": "^13.0.0 || ^14.0.0",
+    "@angular/core": "^13.0.0 || ^14.0.0",
+    "@angular/router": "^13.0.0 || ^14.0.0"
   },
   "repository": {
     "type": "git",

package/public-api.d.ts

@@ -7,10 +7,12 @@ export * from './lib/badge';
 export * from './lib/breadcrumb';
 export * from './lib/button';
 export * from './lib/button-group';
+export * from './lib/calendar';
 export * from './lib/callout';
 export * from './lib/card';
 export * from './lib/carousel';
 export * from './lib/collapse';
+export * from './lib/date-range-picker';
 export * from './lib/dropdown';
 export * from './lib/element-cover';
 export * from './lib/footer';