igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
456 lines (455 loc) • 12.5 kB
TypeScript
import { EventEmitter, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core';
import { WEEKDAYS, IFormattingOptions, IFormattingViews, IViewDateChangeEventArgs, ScrollDirection, IgxCalendarView } from './calendar';
import { ControlValueAccessor } from '@angular/forms';
import { DateRangeDescriptor } from '../core/dates';
import { Subject } from 'rxjs';
import { PlatformUtil } from '../core/utils';
import { ICalendarResourceStrings } from '../core/i18n/calendar-resources';
import { KeyboardNavigationService } from './calendar.services';
import * as i0 from "@angular/core";
/** @hidden @internal */
export 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$: import("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(platform: PlatformUtil, _localeId: string, keyboardNavigation?: KeyboardNavigationService, cdr?: ChangeDetectorRef);
/**
* 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;
}