igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,814 lines (1,801 loc) • 54.5 kB
TypeScript
import * as i0 from '@angular/core';
import { EventEmitter, ElementRef, InjectionToken, TemplateRef, AfterViewInit, OnDestroy, QueryList, ChangeDetectorRef, AfterContentChecked, OnInit } from '@angular/core';
import { CalendarDay, DateRangeDescriptor, PlatformUtil, DayInterval, ICalendarResourceStrings, WEEKDAYS } from 'igniteui-angular/core';
import { ControlValueAccessor } from '@angular/forms';
import * as rxjs from 'rxjs';
import { Subject } from 'rxjs';
/**
* @hidden
*/
declare class IgxDayItemComponent {
private elementRef;
date: CalendarDay;
viewDate: Date;
selection: string;
/**
* Returns boolean indicating if the day is selected
*
*/
get selected(): any;
/**
* Selects the day
*/
set selected(value: any);
disabledDates: DateRangeDescriptor[];
specialDates: DateRangeDescriptor[];
hideOutsideDays: boolean;
isLastInRange: boolean;
isFirstInRange: boolean;
isWithinRange: boolean;
isWithinPreviewRange: boolean;
hideLeadingDays: boolean;
hideTrailingDays: boolean;
private get hideLeading();
private get hideTrailing();
dateSelection: EventEmitter<CalendarDay>;
mouseEnter: EventEmitter<void>;
mouseLeave: EventEmitter<void>;
mouseDown: EventEmitter<void>;
get isCurrentMonth(): boolean;
get isPreviousMonth(): boolean;
get isNextMonth(): boolean;
get nativeElement(): any;
isActive: boolean;
get isSelectedCSS(): boolean;
get isInactive(): boolean;
get isHidden(): boolean;
get isToday(): boolean;
get isWeekend(): boolean;
get isDisabled(): boolean;
get isFocusable(): boolean;
protected onMouseEnter(): void;
protected onMouseLeave(): void;
protected onMouseDown(event: MouseEvent): void;
get isWithinRangeCSS(): boolean;
get isWithinPreviewRangeCSS(): boolean;
get isSpecial(): boolean;
get isDisabledCSS(): boolean;
get isSingleSelection(): boolean;
private _selected;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxDayItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxDayItemComponent, "igx-day-item", never, { "date": { "alias": "date"; "required": false; }; "viewDate": { "alias": "viewDate"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "specialDates": { "alias": "specialDates"; "required": false; }; "hideOutsideDays": { "alias": "hideOutsideDays"; "required": false; }; "isLastInRange": { "alias": "isLastInRange"; "required": false; }; "isFirstInRange": { "alias": "isFirstInRange"; "required": false; }; "isWithinRange": { "alias": "isWithinRange"; "required": false; }; "isWithinPreviewRange": { "alias": "isWithinPreviewRange"; "required": false; }; "hideLeadingDays": { "alias": "hideLeadingDays"; "required": false; }; "hideTrailingDays": { "alias": "hideTrailingDays"; "required": false; }; "isActive": { "alias": "isActive"; "required": false; }; }, { "dateSelection": "dateSelection"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "mouseDown": "mouseDown"; }, never, ["*"], true, never>;
static ngAcceptInputType_hideOutsideDays: unknown;
static ngAcceptInputType_isLastInRange: unknown;
static ngAcceptInputType_isFirstInRange: unknown;
static ngAcceptInputType_isWithinRange: unknown;
static ngAcceptInputType_isWithinPreviewRange: unknown;
static ngAcceptInputType_hideLeadingDays: unknown;
static ngAcceptInputType_hideTrailingDays: unknown;
static ngAcceptInputType_isActive: unknown;
}
/**
* Sets the selection type - single, multi or range.
*/
declare const CalendarSelection: {
readonly SINGLE: "single";
readonly MULTI: "multi";
readonly RANGE: "range";
};
type CalendarSelection = (typeof CalendarSelection)[keyof typeof CalendarSelection];
declare const enum ScrollDirection {
PREV = "prev",
NEXT = "next",
NONE = "none"
}
interface IViewDateChangeEventArgs {
previousValue: Date;
currentValue: Date;
}
declare const IgxCalendarView: {
readonly Month: "month";
readonly Year: "year";
readonly Decade: "decade";
};
/**
* Determines the Calendar active view - days, months or years.
*/
type IgxCalendarView = (typeof IgxCalendarView)[keyof typeof IgxCalendarView];
declare const range: (start: number, stop: number, step?: number) => any[];
/**
* Returns true for leap years, false for non-leap years.
*
* @export
* @param year
* @returns
*/
declare const isLeap: (year: number) => boolean;
declare const weekDay: (year: number, month: number, day: number) => number;
/**
* Return weekday and number of days for year, month.
*
* @export
* @param year
* @param month
* @returns
*/
declare const monthRange: (year: number, month: number) => number[];
interface IFormattedParts {
value: string;
literal?: string;
combined: string;
}
interface IFormattingOptions {
day?: 'numeric' | '2-digit';
month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
weekday?: 'long' | 'short' | 'narrow';
year?: 'numeric' | '2-digit';
}
interface IFormattingViews {
day?: boolean;
month?: boolean;
year?: boolean;
}
declare class Calendar {
timedelta(date: Date, interval: string, units: number): Date;
}
/**
* This file contains all the directives used by the @link IgxCalendarComponent.
* Except for the directives which are used for templating the calendar itself
* you should generally not use them directly.
*
* @preferred
*/
declare const IGX_CALENDAR_VIEW_ITEM: InjectionToken<IgxCalendarMonthDirective | IgxCalendarYearDirective>;
declare abstract class IgxCalendarViewBaseDirective {
elementRef: ElementRef<any>;
value: Date;
date: Date;
showActive: boolean;
itemSelection: EventEmitter<Date>;
get nativeElement(): any;
onMouseDown(event: MouseEvent): void;
abstract get isCurrent(): boolean;
abstract get isSelected(): boolean;
abstract get isActive(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarViewBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarViewBaseDirective, never, never, { "value": { "alias": "value"; "required": false; }; "date": { "alias": "date"; "required": false; }; "showActive": { "alias": "showActive"; "required": false; }; }, { "itemSelection": "itemSelection"; }, never, never, true, never>;
}
/**
* @hidden
*/
declare class IgxCalendarYearDirective extends IgxCalendarViewBaseDirective {
get isCurrent(): boolean;
get isSelected(): boolean;
get isActive(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarYearDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarYearDirective, "[igxCalendarYear]", ["igxCalendarYear"], {}, {}, never, never, true, never>;
}
declare class IgxCalendarMonthDirective extends IgxCalendarViewBaseDirective {
get isCurrent(): boolean;
get isSelected(): boolean;
get isActive(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarMonthDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarMonthDirective, "[igxCalendarMonth]", ["igxCalendarMonth"], {}, {}, never, never, true, never>;
}
/**
* @hidden
*/
declare class IgxCalendarHeaderTitleTemplateDirective {
template: TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarHeaderTitleTemplateDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarHeaderTitleTemplateDirective, "[igxCalendarHeaderTitle]", never, {}, {}, never, never, true, never>;
}
/**
* @hidden
*/
declare class IgxCalendarHeaderTemplateDirective {
template: TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarHeaderTemplateDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarHeaderTemplateDirective, "[igxCalendarHeader]", never, {}, {}, never, never, true, never>;
}
/**
* @hidden
*/
declare class IgxCalendarSubheaderTemplateDirective {
template: TemplateRef<any>;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarSubheaderTemplateDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarSubheaderTemplateDirective, "[igxCalendarSubheader]", never, {}, {}, never, never, true, never>;
}
/**
* @hidden
*/
declare class IgxCalendarScrollPageDirective implements AfterViewInit, OnDestroy {
private element;
private zone;
protected platform: PlatformUtil;
/**
* A callback function to be invoked when increment/decrement page is triggered.
*
* @hidden
*/
startScroll: (keydown?: boolean) => void;
/**
* A callback function to be invoked when increment/decrement page stops.
*
* @hidden
*/
stopScroll: (event: any) => void;
/**
* @hidden
*/
private destroy$;
/**
* @hidden
*/
onMouseDown(event: MouseEvent): void;
/**
* @hidden
*/
onMouseUp(event: MouseEvent): void;
/**
* @hidden
*/
ngAfterViewInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarScrollPageDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarScrollPageDirective, "[igxCalendarScrollPage]", never, { "startScroll": { "alias": "startScroll"; "required": false; }; "stopScroll": { "alias": "stopScroll"; "required": false; }; }, {}, never, never, true, never>;
}
declare enum IgxCalendarNavDirection {
NEXT = 1,
PREV = -1
}
declare abstract class IgxCalendarViewDirective implements ControlValueAccessor {
protected dayInterval: DayInterval;
role: string;
tabIndex: number;
protected get activeDescendant(): number;
/**
* Gets/sets whether the view should be rendered
* according to the locale and format, if any.
*/
formatView: boolean;
/**
* Applies styles to the active item on view focus.
*/
showActive: boolean;
/**
* Emits an event when a selection is made in the view.
* Provides reference the `date` property in the component.
* @memberof IgxCalendarViewDirective
*/
selected: EventEmitter<Date>;
/**
* Emits an event when a page changes in the view.
* Provides reference the `date` property in the component.
* @memberof IgxCalendarViewDirective
* @hidden @internal
*/
pageChanged: EventEmitter<Date>;
/**
* Emits an event when the active date has changed.
* @memberof IgxCalendarViewDirective
* @hidden @internal
*/
activeDateChanged: EventEmitter<Date>;
/**
* @hidden
* @internal
*/
viewItems: QueryList<IgxCalendarMonthDirective | IgxCalendarYearDirective>;
/**
* @hidden
*/
protected _formatter: Intl.DateTimeFormat;
/**
* @hidden
*/
protected _locale: string;
/**
* @hidden
* @internal
*/
private _date;
/**
* @hidden
*/
protected _onTouchedCallback: () => void;
/**
* @hidden
*/
protected _onChangeCallback: (_: Date) => void;
/**
* Gets/sets the selected date of the view.
* By default it's the current date.
* ```typescript
* let date = this.view.date;
* ```
*
* @memberof IgxYearsViewComponent
*/
set date(value: Date);
get date(): Date;
/**
* Gets the `locale` of the view.
* Default value is `"en"`.
* ```typescript
* let locale = this.view.locale;
* ```
*
* @memberof IgxCalendarViewDirective
*/
get locale(): string;
/**
* Sets the `locale` of the view.
* Expects a valid BCP 47 language tag.
* Default value is `"en"`.
*
* @memberof IgxCalendarViewDirective
*/
set locale(value: string);
constructor();
/**
* @hidden
*/
onKeydownArrowDown(event: KeyboardEvent): void;
/**
* @hidden
*/
onKeydownArrowUp(event: KeyboardEvent): void;
/**
* @hidden
*/
onKeydownArrowRight(event: KeyboardEvent): void;
/**
* @hidden
*/
onKeydownArrowLeft(event: KeyboardEvent): void;
/**
* @hidden
*/
onKeydownHome(event: KeyboardEvent): void;
/**
* @hidden
*/
onKeydownEnd(event: KeyboardEvent): void;
/**
* @hidden
*/
onKeydownEnter(event: KeyboardEvent): void;
/**
* @hidden
*/
protected handleFocus(): void;
/**
* @hidden
*/
protected handleBlur(): void;
/**
* @hidden
*/
selectDate(value: Date): void;
/**
* @hidden
*/
registerOnChange(fn: (v: Date) => void): void;
/**
* @hidden
*/
registerOnTouched(fn: () => void): void;
/**
* @hidden
*/
writeValue(value: Date): void;
/**
* @hidden
*/
protected navigateTo(event: KeyboardEvent, direction: IgxCalendarNavDirection, delta: number): void;
/**
* @hidden
*/
protected abstract initFormatter(): void;
/**
* @hidden
*/
protected abstract get range(): Date[];
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarViewDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarViewDirective, never, never, { "role": { "alias": "role"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "formatView": { "alias": "formatView"; "required": false; }; "showActive": { "alias": "showActive"; "required": false; }; "date": { "alias": "date"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; }, { "selected": "selected"; "pageChanged": "pageChanged"; "activeDateChanged": "activeDateChanged"; }, never, never, true, never>;
static ngAcceptInputType_formatView: unknown;
static ngAcceptInputType_showActive: unknown;
}
declare class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
#private;
el: ElementRef<any>;
private platform;
/**
* Sets/gets the `id` of the months view.
* If not set, the `id` will have value `"igx-months-view-0"`.
* ```html
* <igx-months-view id="my-months-view"></igx-months-view>
* ```
* ```typescript
* let monthsViewId = this.monthsView.id;
* ```
*
* @memberof IgxMonthsViewComponent
*/
id: string;
/**
* The default css class applied to the component.
*
* @hidden
*/
readonly viewClass = true;
/**
* @hidden @internal
*/
get standalone(): boolean;
set standalone(value: boolean);
/**
* Gets the month format option of the months view.
* ```typescript
* let monthFormat = this.monthsView.monthFormat.
* ```
*/
get monthFormat(): any;
/**
* Sets the month format option of the months view.
* ```html
* <igx-months-view> [monthFormat]="short'"</igx-months-view>
* ```
*
* @memberof IgxMonthsViewComponent
*/
set monthFormat(value: any);
/**
* Gets/sets whether the view should be rendered
* according to the locale and format, if any.
*/
formatView: boolean;
/**
* Returns an array of date objects which are then used to
* properly render the month names.
*
* Used in the template of the component
*
* @hidden @internal
*/
get range(): Date[];
/**
* @hidden
*/
private _monthFormat;
/**
* @hidden
*/
protected onMouseDown(): void;
/**
* Returns the locale representation of the month in the months view.
*
* @hidden
*/
formattedMonth(value: Date): {
long: string;
formatted: string;
};
/**
* @hidden
*/
monthTracker(_: number, item: Date): string;
/**
* @hidden
*/
protected initFormatter(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxMonthsViewComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxMonthsViewComponent, "igx-months-view", never, { "id": { "alias": "id"; "required": false; }; "standalone": { "alias": "standalone"; "required": false; }; "monthFormat": { "alias": "monthFormat"; "required": false; }; "formatView": { "alias": "formatView"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_formatView: unknown;
}
declare class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
#private;
el: ElementRef<any>;
private platform;
/**
* The default css class applied to the component.
*
* @hidden
*/
readonly viewClass = true;
/**
* @hidden @internal
*/
get standalone(): boolean;
set standalone(value: boolean);
/**
* @hidden
*/
private _yearFormat;
/**
* @hidden
*/
private _yearsPerPage;
/**
* Gets the year format option of the years view.
* ```typescript
* let yearFormat = this.yearsView.yearFormat.
* ```
*/
get yearFormat(): any;
/**
* Sets the year format option of the years view.
* ```html
* <igx-years-view [yearFormat]="numeric"></igx-years-view>
* ```
*
* @memberof IgxYearsViewComponent
*/
set yearFormat(value: any);
/**
* Returns an array of date objects which are then used to properly
* render the years.
*
* Used in the template of the component.
*
* @hidden @internal
*/
get range(): Date[];
/**
* Returns the locale representation of the year in the years view.
*
* @hidden
*/
formattedYear(value: Date): {
long: string;
formatted: string;
};
/**
* @hidden
*/
yearTracker(_: number, item: Date): string;
/**
* @hidden
*/
protected initFormatter(): void;
/**
* @hidden
*/
protected onMouseDown(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxYearsViewComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxYearsViewComponent, "igx-years-view", never, { "standalone": { "alias": "standalone"; "required": false; }; "yearFormat": { "alias": "yearFormat"; "required": false; }; }, {}, never, never, true, never>;
}
declare class KeyboardNavigationService {
private eventManager;
private ngZone;
private keyHandlers;
private eventUnsubscribeFn;
private platform;
attachKeyboardHandlers(elementRef: ElementRef, context: any): this;
detachKeyboardHandlers(): void;
set(key: string, handler: (event: KeyboardEvent) => void): this;
unset(key: string): this;
static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardNavigationService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<KeyboardNavigationService>;
}
/** @hidden @internal */
declare class IgxCalendarBaseDirective implements ControlValueAccessor {
protected platform: PlatformUtil;
protected _localeId: string;
protected keyboardNavigation?: KeyboardNavigationService;
protected cdr?: ChangeDetectorRef;
/**
* Holds month view index we are operating on.
*/
protected activeViewIdx: number;
/**
* @hidden
*/
private _activeView;
/**
* @hidden
*/
private activeViewSubject;
/**
* @hidden
*/
protected activeView$: rxjs.Observable<IgxCalendarView>;
/**
* Sets/gets whether the outside dates (dates that are out of the current month) will be hidden.
* Default value is `false`.
* ```html
* <igx-calendar [hideOutsideDays]="true"></igx-calendar>
* ```
* ```typescript
* let hideOutsideDays = this.calendar.hideOutsideDays;
* ```
*/
hideOutsideDays: boolean;
/**
* Emits an event when a date is selected.
* Provides reference the `selectedDates` property.
*/
selected: EventEmitter<Date | Date[]>;
/**
* Emits an event when the month in view is changed.
* ```html
* <igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>
* ```
* ```typescript
* public viewDateChanged(event: IViewDateChangeEventArgs) {
* let viewDate = event.currentValue;
* }
* ```
*/
viewDateChanged: EventEmitter<IViewDateChangeEventArgs>;
/**
* Emits an event when the active view is changed.
* ```html
* <igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
* ```
* ```typescript
* public activeViewChanged(event: CalendarView) {
* let activeView = event;
* }
* ```
*/
activeViewChanged: EventEmitter<IgxCalendarView>;
/**
* @hidden
*/
rangeStarted: boolean;
/**
* @hidden
*/
pageScrollDirection: ScrollDirection;
/**
* @hidden
*/
scrollPage$: Subject<void>;
/**
* @hidden
*/
stopPageScroll$: Subject<boolean>;
/**
* @hidden
*/
startPageScroll$: Subject<void>;
/**
* @hidden
*/
selectedDates: Date[];
/**
* @hidden
*/
shiftKey: boolean;
/**
* @hidden
*/
lastSelectedDate: Date;
/**
* @hidden
*/
protected formatterWeekday: Intl.DateTimeFormat;
/**
* @hidden
*/
protected formatterDay: Intl.DateTimeFormat;
/**
* @hidden
*/
protected formatterMonth: Intl.DateTimeFormat;
/**
* @hidden
*/
protected formatterYear: Intl.DateTimeFormat;
/**
* @hidden
*/
protected formatterMonthday: Intl.DateTimeFormat;
/**
* @hidden
*/
protected formatterRangeday: Intl.DateTimeFormat;
/**
* @hidden
*/
protected _onTouchedCallback: () => void;
/**
* @hidden
*/
protected _onChangeCallback: (_: Date | Date[]) => void;
/**
* @hidden
*/
protected _deselectDate: boolean;
/**
* @hidden
*/
private initialSelection;
/**
* @hidden
*/
private _locale;
/**
* @hidden
*/
private _weekStart;
/**
* @hidden
*/
private _viewDate;
/**
* @hidden
*/
private _startDate;
/**
* @hidden
*/
private _endDate;
/**
* @hidden
*/
private _disabledDates;
/**
* @hidden
*/
private _specialDates;
/**
* @hidden
*/
private _selection;
/** @hidden @internal */
private _resourceStrings;
/**
* @hidden
*/
private _formatOptions;
/**
* @hidden
*/
private _formatViews;
/**
* An accessor that sets the resource strings.
* By default it uses EN resources.
*/
set resourceStrings(value: ICalendarResourceStrings);
/**
* An accessor that returns the resource strings.
*/
get resourceStrings(): ICalendarResourceStrings;
/**
* Gets the start day of the week.
* Can return a numeric or an enum representation of the week day.
* If not set, defaults to the first day of the week for the application locale.
*/
get weekStart(): WEEKDAYS | number;
/**
* Sets the start day of the week.
* Can be assigned to a numeric value or to `WEEKDAYS` enum value.
*/
set weekStart(value: WEEKDAYS | number);
/**
* Gets the `locale` of the calendar.
* If not set, defaults to application's locale.
*/
get locale(): string;
/**
* Sets the `locale` of the calendar.
* Expects a valid BCP 47 language tag.
*/
set locale(value: string);
/**
* Gets the date format options of the views.
*/
get formatOptions(): IFormattingOptions;
/**
* Sets the date format options of the views.
* Default is { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' }
*/
set formatOptions(formatOptions: IFormattingOptions);
/**
* Gets whether the `day`, `month` and `year` should be rendered
* according to the locale and formatOptions, if any.
*/
get formatViews(): IFormattingViews;
/**
* Sets whether the `day`, `month` and `year` should be rendered
* according to the locale and formatOptions, if any.
*/
set formatViews(formatViews: IFormattingViews);
/**
* Gets the current active view.
* ```typescript
* this.activeView = calendar.activeView;
* ```
*/
get activeView(): IgxCalendarView;
/**
* Sets the current active view.
* ```html
* <igx-calendar [activeView]="year" #calendar></igx-calendar>
* ```
* ```typescript
* calendar.activeView = IgxCalendarView.YEAR;
* ```
*/
set activeView(val: IgxCalendarView);
/**
* @hidden
*/
get isDefaultView(): boolean;
/**
* @hidden
*/
get isDecadeView(): boolean;
/**
* @hidden
*/
activeViewDecade(activeViewIdx?: number): void;
/**
* @hidden
*/
activeViewDecadeKB(event: KeyboardEvent, activeViewIdx?: number): void;
/**
* @hidden
*/
yearsBtns: QueryList<ElementRef>;
/**
* @hidden @internal
*/
previousViewDate: Date;
/**
* @hidden
*/
changeYear(date: Date): void;
/**
* Returns the locale representation of the year in the year view if enabled,
* otherwise returns the default `Date.getFullYear()` value.
*
* @hidden
*/
formattedYear(value: Date | Date[]): string;
formattedYears(value: Date): string;
protected prevNavLabel(detail?: string): string;
protected nextNavLabel(detail?: string): string;
protected getDecadeRange(): {
start: string;
end: string;
};
/**
*
* Gets the selection type.
* Default value is `"single"`.
* Changing the type of selection resets the currently
* selected values if any.
*/
get selection(): string;
/**
* Sets the selection.
*/
set selection(value: string);
/**
* Gets the date that is presented. By default it is the current date.
*/
get viewDate(): Date;
/**
* Sets the date that will be presented in the default view when the component renders.
*/
set viewDate(value: Date | string);
/**
* Gets the disabled dates descriptors.
*/
get disabledDates(): DateRangeDescriptor[];
/**
* Sets the disabled dates' descriptors.
* ```typescript
* @ViewChild("MyCalendar")
* public calendar: IgxCalendarComponent;
* ngOnInit(){
* this.calendar.disabledDates = [
* {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
* {type: DateRangeType.Weekends}];
* }
* ```
*/
set disabledDates(value: DateRangeDescriptor[]);
/**
* Checks whether a date is disabled.
*
* @hidden
*/
isDateDisabled(date: Date | string): boolean;
/**
* Gets the special dates descriptors.
*/
get specialDates(): DateRangeDescriptor[];
/**
* Sets the special dates' descriptors.
* ```typescript
* @ViewChild("MyCalendar")
* public calendar: IgxCalendarComponent;
* ngOnInit(){
* this.calendar.specialDates = [
* {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
* {type: DateRangeType.Weekends}];
* }
* ```
*/
set specialDates(value: DateRangeDescriptor[]);
/**
* Gets the selected date(s).
*
* When selection is set to `single`, it returns
* a single `Date` object.
* Otherwise it is an array of `Date` objects.
*/
get value(): Date | Date[];
/**
* Sets the selected date(s).
*
* When selection is set to `single`, it accepts
* a single `Date` object.
* Otherwise it is an array of `Date` objects.
*/
set value(value: Date | Date[] | string);
/**
* @hidden
*/
constructor();
/**
* Multi/Range selection with shift key
*
* @hidden
* @internal
*/
onPointerdown(event: MouseEvent): void;
/**
* @hidden
*/
registerOnChange(fn: (v: Date | Date[]) => void): void;
/**
* @hidden
*/
registerOnTouched(fn: () => void): void;
/**
* @hidden
*/
writeValue(value: Date | Date[]): void;
/**
* Selects date(s) (based on the selection type).
*/
selectDate(value: Date | Date[] | string): void;
/**
* Deselects date(s) (based on the selection type).
*/
deselectDate(value?: Date | Date[] | string): void;
/**
* Performs a single selection.
*
* @hidden
*/
private selectSingle;
/**
* Performs a single deselection.
*
* @hidden
*/
private deselectSingle;
/**
* Performs a multiple selection
*
* @hidden
*/
private selectMultiple;
/**
* Performs a multiple deselection.
*
* @hidden
*/
private deselectMultiple;
/**
* @hidden
*/
private selectRange;
/**
* Performs a range deselection.
*
* @hidden
*/
private deselectRange;
/**
* @hidden
*/
protected initFormatters(): void;
/**
* @hidden
*/
protected getDateOnly(date: Date): Date;
/**
* @hidden
*/
private getDateOnlyInMs;
/**
* @hidden
*/
private generateDateRange;
private validateDate;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCalendarBaseDirective, "[igxCalendarBase]", never, { "hideOutsideDays": { "alias": "hideOutsideDays"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "weekStart": { "alias": "weekStart"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; "formatViews": { "alias": "formatViews"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "viewDate": { "alias": "viewDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "specialDates": { "alias": "specialDates"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "selected": "selected"; "viewDateChanged": "viewDateChanged"; "activeViewChanged": "activeViewChanged"; }, never, never, true, never>;
static ngAcceptInputType_hideOutsideDays: unknown;
}
interface IViewChangingEventArgs {
monthAction: string;
key: string;
nextDate: Date;
}
declare class IgxDaysViewComponent extends IgxCalendarBaseDirective implements AfterContentChecked {
#private;
protected el: ElementRef<any>;
cdr: ChangeDetectorRef;
private themeToken;
/**
* Sets/gets the `id` of the days view.
* If not set, the `id` will have value `"igx-days-view-0"`.
* ```html
* <igx-days-view id="my-days-view"></igx-days-view>
* ```
* ```typescript
* let daysViewId = this.daysView.id;
* ```
*/
id: string;
tabIndex: number;
role: string;
readonly viewClass = true;
get standalone(): boolean;
set standalone(value: boolean);
protected get activeDescendant(): number;
/**
* Show/hide week numbers
*
* @example
* ```html
* <igx-days-view [showWeekNumbers]="true"></igx-days-view>
* ``
*/
showWeekNumbers: boolean;
/**
* @hidden
* @internal
*/
set activeDate(value: Date);
get activeDate(): Date;
/**
* @hidden
* @internal
*/
set previewRangeDate(value: Date);
get previewRangeDate(): Date;
set hideLeadingDays(value: boolean);
get hideLeadingDays(): boolean;
set hideTrailingDays(value: boolean);
get hideTrailingDays(): boolean;
set showActiveDay(value: boolean);
get showActiveDay(): boolean;
/**
* @hidden
*/
dateSelected: EventEmitter<Date>;
/**
* @hidden
*/
pageChanged: EventEmitter<IViewChangingEventArgs>;
/**
* @hidden
*/
activeDateChange: EventEmitter<Date>;
/**
* @hidden
*/
previewRangeDateChange: EventEmitter<any>;
/**
* @hidden
*/
dates: QueryList<IgxDayItemComponent>;
private _activeDate;
private _previewRangeDate;
private _hideLeadingDays;
private _hideTrailingDays;
private _showActiveDay;
private _destroyRef;
private _theme;
defaultClass: boolean;
protected get isMaterial(): boolean;
protected get isFluent(): boolean;
protected get isBootstrap(): boolean;
protected get isIndigo(): boolean;
/**
* @hidden
*/
constructor();
private setComponentTheme;
ngAfterContentChecked(): void;
/**
* @hidden
*/
private handleArrowKeydown;
/**
* @hidden
*/
protected onArrowRight(event: KeyboardEvent): void;
/**
* @hidden
*/
protected onArrowLeft(event: KeyboardEvent): void;
/**
* @hidden
*/
protected onArrowUp(event: KeyboardEvent): void;
/**
* @hidden
*/
protected onArrowDown(event: KeyboardEvent): void;
/**
* @hidden
*/
protected onKeydownEnter(event: KeyboardEvent): void;
/**
* @hidden
*/
protected onKeydownHome(event: KeyboardEvent): void;
/**
* @hidden
*/
protected onKeydownEnd(event: KeyboardEvent): void;
/**
* @hidden
*/
protected handleFocus(): void;
/**
* @hidden
*/
protected handleBlur(): void;
/**
* @hidden
*/
protected handleDateClick(item: IgxDayItemComponent): void;
private selectActiveDate;
protected get calendarMonth(): CalendarDay[];
protected get monthWeeks(): CalendarDay[][];
/**
* Returns the week number by date
*
* @hidden
*/
getWeekNumber(date: CalendarDay): number;
/**
* Returns the locale representation of the date in the days view.
*
* @hidden
*/
formattedDate(value: Date): string;
/**
* @hidden
*/
get weekHeaderLabels(): {
long: string;
formatted: string;
}[];
protected get weekNumberHeader(): {
short: string;
long: string;
};
/**
* @hidden
*/
rowTracker(_: number, item: CalendarDay[]): string;
/**
* @hidden
*/
dateTracker(_: number, item: CalendarDay): string;
/**
* @hidden
*/
isSelected(date: CalendarDay): boolean;
/**
* @hidden
*/
protected isFirstInRange(date: CalendarDay): boolean;
/**
* @hidden
*/
protected isLastInRange(date: CalendarDay): boolean;
/**
* @hidden
*/
protected isActiveDate(day: CalendarDay): boolean;
/**
* @hidden
*/
protected isWithinRange(date: Date, checkForRange: boolean, min?: Date, max?: Date): boolean;
protected isWithinPreviewRange(date: Date): boolean;
/**
* @hidden
*/
private get isSingleSelection();
/**
* @hidden @internal
*/
changePreviewRange(date: Date): void;
/**
* @hidden @internal
*/
clearPreviewRange(): void;
private setPreviewRangeDate;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxDaysViewComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxDaysViewComponent, "igx-days-view", never, { "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "role": { "alias": "role"; "required": false; }; "standalone": { "alias": "standalone"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "previewRangeDate": { "alias": "previewRangeDate"; "required": false; }; "hideLeadingDays": { "alias": "hideLeadingDays"; "required": false; }; "hideTrailingDays": { "alias": "hideTrailingDays"; "required": false; }; "showActiveDay": { "alias": "showActiveDay"; "required": false; }; }, { "dateSelected": "dateSelected"; "pageChanged": "pageChanged"; "activeDateChange": "activeDateChange"; "previewRangeDateChange": "previewRangeDateChange"; }, never, never, true, never>;
static ngAcceptInputType_showWeekNumbers: unknown;
static ngAcceptInputType_hideLeadingDays: unknown;
static ngAcceptInputType_hideTrailingDays: unknown;
static ngAcceptInputType_showActiveDay: unknown;
}
/**
* Calendar provides a way to display date information.
*
* @igxModule IgxCalendarModule
*
* @igxTheme igx-calendar-theme, igx-icon-theme
*
* @igxKeywords calendar, datepicker, schedule, date
*
* @igxGroup Scheduling
*
* @remarks
* The Ignite UI Calendar provides an easy way to display a calendar and allow users to select dates using single, multiple
* or range selection.
*
* @example:
* ```html
* <igx-calendar selection="range"></igx-calendar>
* ```
*/
declare class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy {
/**
* @hidden
* @internal
*/
private _activeDescendant;
/**
* @hidden
* @internal
*/
wrapper: ElementRef;
/**
* Sets/gets the `id` of the calendar.
*
* @remarks
* If not set, the `id` will have value `"igx-calendar-0"`.
*
* @example
* ```html
* <igx-calendar id="my-first-calendar"></igx-calendar>
* ```
* @memberof IgxCalendarComponent
*/
id: string;
/**
* Sets/gets whether the calendar has header.
* Default value is `true`.
*
* @example
* ```html
* <igx-calendar [hasHeader]="false"></igx-calendar>
* ```
*/
hasHeader: boolean;
/**
* Sets/gets whether the calendar header will be in vertical position.
* Default value is `false`.
*
* @example
* ```html
* <igx-calendar [vertical]="true"></igx-calendar>
* ```
*/
vertical: boolean;
orientation: 'horizontal' | 'vertical';
headerOrientation: 'horizontal' | 'vertical';
/**
* Sets/gets the number of month views displayed.
* Default value is `1`.
*
* @example
* ```html
* <igx-calendar [monthsViewNumber]="2"></igx-calendar>
* ```
*/
get monthsViewNumber(): number;
set monthsViewNumber(val: number);
/**
* Show/hide week numbers
*
* @example
* ```html
* <igx-calendar [showWeekNumbers]="true"></igx-calendar>
* ``
*/
showWeekNumbers: boolean;
/**
* The default css class applied to the component.
*
* @hidden
* @internal
*/
get styleVerticalClass(): boolean;
/**
* The default css class applied to the component.
*
* @hidden
* @internal
*/
styleClass: boolean;
/**
* Month button, that displays the months view.
*
* @hidden
* @internal
*/
monthsBtns: QueryList<ElementRef>;
/**
* ViewChild that represents the decade view.
*
* @hidden
* @internal
*/
dacadeView: IgxYearsViewComponent;
/**
* ViewChild that represents the months view.
*
* @hidden
* @internal
*/
monthsView: IgxMonthsViewComponent;
/**
* ViewChild that represents the days view.
*
* @hidden
* @internal
*/
daysView: IgxDaysViewComponent;
/**
* ViewChildrenden representing all of the rendered days views.
*
* @hidden
* @internal
*/
monthViews: QueryList<IgxDaysViewComponent>;
/**
* Button for previous month.
*
* @hidden
* @internal
*/
prevPageBtn: ElementRef;
/**
* Button for next month.
*
* @hidden
* @internal
*/
nextPageBtn: ElementRef;
/**
* Denote if the year view is active.
*
* @hidden
* @internal
*/
get isYearView(): boolean;
/**
* Gets the header template.
*
* @example
* ```typescript
* let headerTitleTemplate = this.calendar.headerTitleTeamplate;
* ```
* @memberof IgxCalendarComponent
*/
get headerTitleTemplate(): any;
/**
* Sets the header template.
*
* @example
* ```html
* <igx-calendar headerTitleTemplateDirective="igxCalendarHeaderTitle"></igx-calendar>
* ```
* @memberof IgxCalendarComponent
*/
set headerTitleTemplate(directive: any);
/**
* Gets the header template.
*
* @example
* ```typescript
* let headerTemplate = this.calendar.headerTeamplate;
* ```
* @memberof IgxCalendarComponent
*/
get headerTemplate(): any;
/**
* Sets the header template.
*
* @example
* ```html
* <igx-calendar headerTemplateDirective="igxCalendarHeader"></igx-calendar>
* ```
* @memberof IgxCalendarComponent
*/
set headerTemplate(directive: any);
/**
* Gets the subheader template.
*
* @example
* ```typescript
* let subheaderTemplate = this.calendar.subheaderTemplate;
* ```
*/
get subheaderTemplate(): any;
/**
* Sets the subheader template.
*
* @example
* ```html
* <igx-calendar subheaderTemplate="igxCalendarSubheader"></igx-calendar>
* ```
* @memberof IgxCalendarComponent
*/
set subheaderTemplate(directive: any);
/**
* Gets the context for the template marked with the `igxCalendarHeader` directive.
*
* @example
* ```typescript
* let headerContext = this.calendar.headerContext;
* ```
*/
get headerContext(): {
$implicit: {
index: number;
date: Date;
} | {
index: number;
date: Date;
}[];
};
/**
* Gets the context for the template marked with either `igxCalendarSubHeaderMonth`
* or `igxCalendarSubHeaderYear` directive.
*
* @example
* ```typescript
* let context = this.calendar.context;
* ```
*/
get context(): {
$implicit: {
index: number;
date: Date;
} | {
index: number;
date: Date;
}[];
};
/**
* Date displayed in header
*
* @hidden
* @internal
*/
get headerDate(): Date;
/**
* @hidden
* @internal
*/
private headerTemplateDirective;
/**
* @hidden
* @internal
*/
private headerTitleTemplateDirective;
/**
* @hidden
* @internal
*/
private subheaderTemplateDirective;
/**
* @hidden
* @internal
*/
activeDate: Date;
/**
* @hidden
* @internal
*/
protected previewRangeDate: Date;
/**
* Used to apply the active date when the calendar view is changed
*
* @hidden
* @internal
*/
nextDate: Date;
/**
* Denote if the calendar view was changed with the keyboard
*
* @hidden
* @internal
*/
isKeydownTrigger: boolean;
/**
* @hidden
* @internal
*/
private _monthsViewNumber;
protected onMouseDown(event: MouseEvent): void;
private _showActiveDay;
/**
* @hidden
* @internal
*/
protected set showActiveDay(value: boolean);
protected get showActiveDay(): boolean;
protected get activeDescendant(): number;
protected set activeDescendant(date: Date);
ngAfterViewInit(): void;
protected onWrapperFocus(_event: FocusEvent): void;
protected onWrapperBlur(_event: FocusEvent): void;
private handleArrowKeydown;
private handlePageUpDown;
private handlePageUp;
private handlePageDown;
private onArrowUp;
private onArrowDown;
private onArrowLeft;
private onArrowRight;
private onEnter;
private onHome;
private onEnd;
/**
* Returns the locale representation of the month in the month view if enabled,
* otherwise returns the default `Date.getMonth()` value.
*
* @hidden
* @internal
*/
formattedMonth(value: Date): string;
/**
* Change to previous page
*
* @hidden
* @internal
*/
previousPage(isKeydownTrigger?: boolean): void;
/**
* Change to next page
*
* @hidden
* @internal
*/
nextPage(isKeydownTrigger?: boolean): void;
/**
* Changes the current page
*
* @hidden
* @internal
*/
protected changePage(isKeydownTrigger: boolean, direction: ScrollDirection): void;
/**
* Continious navigation through the previous pages
*
* @hidden
* @internal
*/
startPrevPageScroll: (isKeydownTrigger?: boolean) => void;
/**
* Continious navigation through the next pages
*
* @hidden
* @internal
*/
startNextPageScroll: (isKeydownTrigger?: boolean) => void;
/**
* Stop continuous navigation
*
* @hidden
* @internal
*/
stopPageScroll: (event: KeyboardEvent) => void;
/**
* @hidden
* @internal
*/
onActiveViewDecade(event: MouseEvent, date: Date, activeViewIdx: number): void;
/**
* @hidden
* @internal
*/
onActiveViewDecadeKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void;
/**
* @hidden
* @internal
*/
onYearsViewClick(event: MouseEvent): void;
/**
* @hidden
* @internal
*/
onYearsViewKeydown(event: KeyboardEvent): void;
/**
* @hidden
* @internal
*/
protected getFormattedDate(): {
weekday: string;
monthday: string;
};
/**
* @hidden
* @internal
*/
protected getFormattedRange(): {
start: string;
end: string;
};
/**
* @hidden
* @internal
*/
protected get viewDates(): IgxDayItemComponent[];
/**
* Handles invoked on date selection
*
* @hidden
* @internal
*/
protected handleDateSelection(date: Date): void;
/**
* @hidden
* @intenal
*/
changeMonth(date: Date): void;
/**
* @hidden
* @intenal
*/
changeYear(date: Date): void;
/**
* @hidden
* @intenal
*/
updateYear(date: Date): void;
updateActiveDescendant(date: Date): void;
/**
* @hidden
* @internal
*/
onActiveViewYear(event: MouseEvent, date: Date, activeViewIdx: number): void;
/**
* @hidden
* @internal
*/
onActiveViewYearKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void;
/**
* Deselects date(s) (based on the selection type).
*
* @example
* ```typescript
* this.calendar.deselectDate(new Date(`2018-06-12`));
* ````
*/
deselectDate(value?: Date | Date[] | string): void;
/**
* Getter for the context object inside the calendar templates.
*
* @hidden
* @internal
*/
getContext(i: number): {
$implicit: {
index: number;
date: Date;
} | {
index: number;
date: Date;
}[];
};
/**
* @hidden
* @internal
*/
resetActiveDate(date: Date): void;
/**
* @hidden
* @internal
*/
ngOnDestroy(): void;
/**
* @hidden
* @internal
*/
getPrevMonth(date: Date): Date;
/**
* @hidden
* @internal
*/
getNextMonth(date: Date, viewIndex: number): Date;
/**
* Helper method building and returning the context object inside the calendar templates.
*
* @hidden
* @internal
*/
private generateContext;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCalendarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxCalendarComponent, "igx-calendar", never, { "id": { "alias": "id"; "required": false; }; "hasHeader": { "alias": "hasHeader"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "headerOrientation": { "alias": "headerOrientation"; "required": false; }; "monthsViewNumber": { "alias": "monthsViewNumber"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; }, {}, ["headerTemplateDirective", "headerTitleTemplateDirective", "subheaderTemplateDirective"], never, true, never>;
static ngAcceptInputType_hasHeader: unknown;
static ngAcceptInputType_vertical: unknown;
static ngAcceptInputType_showWeekNumbers: unknown;
}
declare class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements OnInit, AfterViewInit, OnDestroy {
/**
* Sets/gets the `id` of the month picker.
* If not set, the `id` will have value `"igx-month-picker-0"`.
*/
id: string;
/**
* @hidden
* @internal
*/
private _activeDescendant;
/**
* @hidden
* @internal
*/
wrapper: ElementRef;
/**
* The default css class applied to the component.
*
* @hidden
*/
styleClass: boolean;
/**
* @hidden
*/
monthsView: IgxMonthsViewComponent;
/**
* @hidden
*/
dacadeView: IgxYearsViewComponent;
/**
* @hidden
*/
daysView: IgxDaysViewComponent;
/**
* @hidden
*/
yearsBtn: ElementRef;
/**
* @hidden
*/
previousPage(event?: KeyboardEvent): void;
/**
* @hidden
*/
nextPage(event?: KeyboardEvent): void;
/**
* @hidden
* @internal
*/
onActiveViewDecadeKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void;
/**
* @hidden
* @internal
*/
onActiveViewDecade(event: MouseEvent, date: Date, activeViewIdx: number): void;
/**
* @hidden
*/
activeViewDecadeKB(event: KeyboardEvent): void;
/**
* @hidden
*/
activeViewD