@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,255 lines • 148 kB
JavaScript
import { __decorate, __metadata, __param } from "tslib";
import { CommonModule, formatDate } from '@angular/common';
import { Component, ContentChild, EventEmitter, HostBinding, Input, NgModule, OnDestroy, Output, ViewChild, ElementRef, TemplateRef, Inject, ChangeDetectorRef, HostListener, NgModuleRef, OnInit, AfterViewInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarSubheaderTemplateDirective, WEEKDAYS, isDateInRanges } from '../calendar/index';
import { IgxIconModule } from '../icon/index';
import { IgxInputGroupModule, IgxInputDirective, IgxInputGroupComponent } from '../input-group/index';
import { Subject, fromEvent, animationFrameScheduler, interval } from 'rxjs';
import { filter, takeUntil, throttle } from 'rxjs/operators';
import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
import { OverlaySettings, IgxOverlayService, PositionSettings, AbsoluteScrollStrategy, AutoPositionStrategy, OverlayCancelableEventArgs } from '../services/index';
import { IgxButtonModule } from '../directives/button/button.directive';
import { IgxRippleModule } from '../directives/ripple/ripple.directive';
import { IgxMaskModule } from '../directives/mask/mask.directive';
import { DatePickerUtil } from './date-picker.utils';
import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes';
import { isIE, isEqual } from '../core/utils';
import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives';
import { IgxCalendarContainerComponent } from './calendar-container.component';
import { InteractionMode } from '../core/enums';
import { fadeIn, fadeOut } from '../animations/fade';
import { DeprecateProperty } from '../core/deprecateDecorators';
var NEXT_ID = 0;
/**
* This enumeration is used to configure the date picker to operate with pre-defined format option used in Angular DatePipe.
* 'https://angular.io/api/common/DatePipe'
* 'shortDate': equivalent to 'M/d/yy' (6/15/15).
* 'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
* 'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
* 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
*/
export var PredefinedFormatOptions;
(function (PredefinedFormatOptions) {
PredefinedFormatOptions["ShortDate"] = "shortDate";
PredefinedFormatOptions["MediumDate"] = "mediumDate";
PredefinedFormatOptions["LongDate"] = "longDate";
PredefinedFormatOptions["FullDate"] = "fullDate";
})(PredefinedFormatOptions || (PredefinedFormatOptions = {}));
/**
* **Ignite UI for Angular Date Picker** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html)
*
* The Ignite UI Date Picker displays a popup calendar that lets users select a single date.
*
* Example:
* ```html
* <igx-date-picker [(ngModel)]="selectedDate"></igx-date-picker>
* ```
*/
var IgxDatePickerComponent = /** @class */ (function () {
function IgxDatePickerComponent(_overlayService, element, _cdr, _moduleRef) {
this._overlayService = _overlayService;
this.element = element;
this._cdr = _cdr;
this._moduleRef = _moduleRef;
/**
* An @Input property that sets the `IgxDatePickerComponent` label.
* The default label is 'Date'.
* ```html
* <igx-date-picker [label]="Calendar"></igx-date-picker>
* ```
*/
this.label = 'Date';
/**
* An @Input property that sets the `IgxDatePickerComponent` label visibility.
* By default the visibility is set to true.
* <igx-date-picker [labelVisibility]="false"></igx-date-picker>
*/
this.labelVisibility = true;
/**
*An @Input property that sets on which day the week starts.
*```html
*<igx-date-picker [weekStart]="WEEKDAYS.FRIDAY" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
*```
*/
this.weekStart = WEEKDAYS.SUNDAY;
/**
* Sets/gets the number of month views displayed.
* Default value is `1`.
* ```html
* <igx-date-picker [monthsViewNumber]="2"></igx-date-picker>
* ```
* ```typescript
* let monthViewsDisplayed = this.datePicker.monthsViewNumber;
* ```
*/
this.monthsViewNumber = 1;
/**
*An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
*```html
*<igx-date-picker [id]="'igx-date-picker-3'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
*```
*/
this.id = "igx-date-picker-" + NEXT_ID++;
/**
*An @Input property that sets the orientation of the `IgxDatePickerComponent` header.
*```html
*<igx-date-picker [vertical]="'true'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
*```
*/
this.vertical = false;
/**
*An @Input property that sets whether `IgxDatePickerComponent` is in dialog or drop down mode.
*```html
*<igx-date-picker mode="dropdown"></igx-date-picker>
*```
*/
this.mode = InteractionMode.Dialog;
/**
*An @Input property that sets whether the `IgxDatePickerComponent` date parts would spin continuously or stop when min/max is reached.
*```html
*<igx-date-picker [isSpinLoop]="false"></igx-date-picker>
*```
*/
this.isSpinLoop = true;
/**
*An event that is emitted when the `IgxDatePickerComponent` calendar is opened.
*/
this.onOpened = new EventEmitter();
/**
*An event that is emitted after the `IgxDatePickerComponent` is closed.
*/
this.onClosed = new EventEmitter();
/**
* An event that is emitted when the `IgxDatePickerComponent` is being closed.
*/
this.onClosing = new EventEmitter();
/**
*An @Output property that is fired when selection is made in the calendar.
*```typescript
*public selection(event){
* alert("A date has been selected!");
*}
*```
*```html
*<igx-date-picker (onSelection)="selection($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
*```
*/
this.onSelection = new EventEmitter();
/**
*An @Output property that is fired when date picker value is changed.
*```typescript
*public valueChanged(event){
* alert("Date picker value is changed");
*}
*```
*```html
*<igx-date-picker (valueChange)="valueChanged($event)" mode="dropdown"></igx-date-picker>
*```
*/
this.valueChange = new EventEmitter();
/**
*An @Output property that fires when the user types/spins to a disabled date in the date-picker editor.
*```typescript
*public onDisabledDate(event){
* alert("This date is disabled!");
*}
*```
*```html
*<igx-date-picker (onDisabledDate)="onDisabledDate($event)"></igx-date-picker>
*```
*/
this.onDisabledDate = new EventEmitter();
/**
*An @Output property that fires when the user types/spins invalid date in the date-picker editor.
*```typescript
*public onValidationFailed(event){
* alert("This date is not valid!");
*}
*```
*```html
*<igx-date-picker (onValidationFailed)="onValidationFailed($event)"></igx-date-picker>
*```
*/
this.onValidationFailed = new EventEmitter();
this.hasHeader = true;
this.collapsed = true;
this.displayValuePipe = new DatePickerDisplayValuePipe(this);
this.inputValuePipe = new DatePickerInputValuePipe(this);
this.dateFormatParts = [];
this.isEmpty = true;
this.invalidDate = '';
this.spinDelta = 1;
this.defaultLocale = 'en';
this._formatOptions = {
day: 'numeric',
month: 'short',
weekday: 'short',
year: 'numeric'
};
this._formatViews = {
day: false,
month: true,
year: false
};
this._destroy$ = new Subject();
this._disabledDates = null;
this._specialDates = null;
this._onOpen = new EventEmitter();
this._onClose = new EventEmitter();
this._onTouchedCallback = function () { };
this._onChangeCallback = function () { };
}
IgxDatePickerComponent_1 = IgxDatePickerComponent;
Object.defineProperty(IgxDatePickerComponent.prototype, "formatOptions", {
/**
*Returns the format options of the `IgxDatePickerComponent`.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* let formatOptions = this.datePicker.formatOptions;
*}
*```
*/
get: function () {
return this._formatOptions;
},
/**
*Sets the format options of the `IgxDatePickerComponent`.
*```typescript
*public Options;
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* this.Options = {
* day: "numeric",
* month: "long",
* weekday: "long",
* year: "numeric"
* }
*this.datePicker.formatOptions = this.Options;
*}
*```
*/
set: function (formatOptions) {
this._formatOptions = Object.assign(this._formatOptions, formatOptions);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "format", {
/**
*Returns the date display format of the `IgxDatePickerComponent` in dropdown mode.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* let format = this.datePicker.format;
*}
*```
*/
get: function () {
return (this._format === undefined) ? PredefinedFormatOptions.ShortDate : this._format;
},
/**
*Sets the date format of the `IgxDatePickerComponent` when in editable dropdown mode.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*this.datePicker.format = 'yyyy-M-d';
*}
*```
*/
set: function (format) {
this._format = format;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "formatViews", {
/**
*Returns the format views of the `IgxDatePickerComponent`.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* let formatViews = this.datePicker.formatViews;
*}
*```
*/
get: function () {
return this._formatViews;
},
/**
*Sets the format views of the `IgxDatePickerComponent`.
*```typescript
*public Views;
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* this.Views = {day:false, month: false, year:false};
* this.datePicker.formatViews = this.Views;
*}
*```
*/
set: function (formatViews) {
this._formatViews = Object.assign(this._formatViews, formatViews);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "disabledDates", {
/**
* Gets the disabled dates descriptors.
* ```typescript
* let disabledDates = this.datepicker.disabledDates;
* ```
*/
get: function () {
return this._disabledDates;
},
/**
* Sets the disabled dates' descriptors.
* ```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* this.datePicker.disabledDates = [
* {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
* {type: DateRangeType.Weekends}];
*}
*```
*/
set: function (value) {
this._disabledDates = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "specialDates", {
/**
* Gets the special dates descriptors.
* ```typescript
* let specialDates = this.datepicker.specialDates;
* ```
*/
get: function () {
return this._specialDates;
},
/**
* Sets the special dates' descriptors.
* ```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* this.datePicker.specialDates = [
* {type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
* {type: DateRangeType.Weekends}];
*}
*```
*/
set: function (value) {
this._specialDates = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "modalOverlaySettings", {
get: function () {
return this._modalOverlay;
},
set: function (value) {
this._modalOverlay = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "dropDownOverlaySettings", {
get: function () {
return this._dropDownOverlaySettings || this._defaultDropDownOverlaySettings;
},
set: function (value) {
this._dropDownOverlaySettings = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "displayData", {
/**
*Returns the formatted date when `IgxDatePickerComponent` is in dialog mode.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*public selection(event){
* let selectedDate = this.datePicker.displayData;
* alert(selectedDate);
*}
*```
*```html
*<igx-date-picker #MyDatePicker (onSelection)="selection()" todayButtonLabel="today"></igx-date-picker>
*```
*/
get: function () {
if (this.value) {
return this._customFormatChecker(this.formatter, this.value);
}
return '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "transformedDate", {
/**
hidden
*/
get: function () {
if (this._value) {
this._transformedDate = (this._isInEditMode) ? this._getEditorDate(this._value) : this._getDisplayDate(this._value);
this.isEmpty = false;
}
else {
this._transformedDate = (this._isInEditMode) ? DatePickerUtil.maskToPromptChars(this.inputMask) : '';
}
return this._transformedDate;
},
set: function (value) {
this._transformedDate = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "template", {
/**
* Gets the input group template.
* ```typescript
* let template = this.template();
* ```
* @memberof IgxDatePickerComponent
*/
get: function () {
if (this.datePickerTemplateDirective) {
return this.datePickerTemplateDirective.template;
}
return (this.mode === InteractionMode.Dialog) ? this.readOnlyDatePickerTemplate : this.editableDatePickerTemplate;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "context", {
/**
* Gets the context passed to the input group template.
* @memberof IgxDatePickerComponent
*/
get: function () {
var _this = this;
return {
disabled: this.disabled,
disabledDates: this.disabledDates,
displayData: this.displayData,
format: this.format,
isSpinLoop: this.isSpinLoop,
label: this.label,
labelVisibility: this.labelVisibility,
locale: this.locale,
mask: this.mask,
mode: this.mode,
specialDates: this.specialDates,
value: this.value,
openDialog: function (target) { return _this.openDialog(target); }
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "value", {
/**
*An @Input property that gets/sets the selected date.
*```typescript
*public date: Date = new Date();
*```
*```html
*<igx-date-picker [value]="date"></igx-date-picker>
*```
*/
get: function () {
return this._value;
},
set: function (date) {
this._value = date;
this._onChangeCallback(date);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "onOpen", {
/**
* @deprecated Use 'onOpened' instead.
*An event that is emitted when the `IgxDatePickerComponent` calendar is opened.
*```typescript
*public open(event){
* alert("The date-picker calendar has been opened!");
*}
*```
*```html
*<igx-date-picker (onOpen)="open($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
*```
*/
get: function () {
return this._onOpen;
},
set: function (val) {
this._onOpen = val;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxDatePickerComponent.prototype, "onClose", {
/**
* @deprecated Use 'onClosed' instead.
*"An event that is emitted when the `IgxDatePickerComponent` is closed.
*```typescript
*public close(event){
* alert("The date-picker has been closed!");
*}
*```
*```html
*<igx-date-picker (onClose)="close($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
*```
*/
get: function () {
return this._onClose;
},
set: function (val) {
this._onClose = val;
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxDatePickerComponent.prototype.onSpaceClick = function (event) {
this.openDialog(this.getInputGroupElement());
event.preventDefault();
};
/**
*Method that sets the selected date.
*```typescript
*public date = new Date();
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
* this.datePicker.writeValue(this.date);
*}
*```
*@param value The date you want to select.
*@memberOf {@link IgxDatePickerComponent}
*/
IgxDatePickerComponent.prototype.writeValue = function (value) {
this.value = value;
this._cdr.markForCheck();
};
/**
*@hidden
*/
IgxDatePickerComponent.prototype.registerOnChange = function (fn) { this._onChangeCallback = fn; };
/**
*@hidden
*/
IgxDatePickerComponent.prototype.registerOnTouched = function (fn) { this._onTouchedCallback = fn; };
/**
*@hidden
*/
IgxDatePickerComponent.prototype.setDisabledState = function (isDisabled) { this.disabled = isDisabled; };
/** @hidden */
IgxDatePickerComponent.prototype.getEditElement = function () {
var inputElement = this.editableInput || this.readonlyInput || this.input;
return (inputElement) ? inputElement.nativeElement : null;
};
/** @hidden */
IgxDatePickerComponent.prototype.getInputGroupElement = function () {
return this.inputGroup ? this.inputGroup.element.nativeElement : null;
};
/**
*@hidden
*/
IgxDatePickerComponent.prototype.ngOnInit = function () {
var _this = this;
this._positionSettings = {
openAnimation: fadeIn,
closeAnimation: fadeOut
};
this._defaultDropDownOverlaySettings = {
closeOnOutsideClick: true,
modal: false,
scrollStrategy: new AbsoluteScrollStrategy(),
positionStrategy: new AutoPositionStrategy(this._positionSettings),
outlet: this.outlet
};
this._modalOverlaySettings = {
closeOnOutsideClick: true,
modal: true,
outlet: this.outlet
};
this._overlayService.onOpening.pipe(filter(function (overlay) { return overlay.id === _this._componentID; }), takeUntil(this._destroy$)).subscribe(function (eventArgs) {
_this._onOpening(eventArgs);
});
this._overlayService.onOpened.pipe(filter(function (overlay) { return overlay.id === _this._componentID; }), takeUntil(this._destroy$)).subscribe(function () {
_this._onOpened();
});
this._overlayService.onClosed.pipe(filter(function (overlay) { return overlay.id === _this._componentID; }), takeUntil(this._destroy$)).subscribe(function () {
_this._onClosed();
});
this._overlayService.onClosing.pipe(filter(function (overlay) { return overlay.id === _this._componentID; }), takeUntil(this._destroy$)).subscribe(function (event) {
_this.onClosing.emit(event);
// If canceled in a user onClosing handler
if (event.cancel) {
return;
}
// Do not focus the input if clicking outside in dropdown mode
var input = _this.getEditElement();
if (input && !(event.event && _this.mode === InteractionMode.DropDown)) {
input.focus();
}
});
if (this.mode === InteractionMode.DropDown) {
this.dateFormatParts = DatePickerUtil.parseDateFormat(this.mask, this.locale);
if (this.mask === undefined) {
this.mask = DatePickerUtil.getMask(this.dateFormatParts);
}
this.inputMask = DatePickerUtil.getInputMask(this.dateFormatParts);
}
};
IgxDatePickerComponent.prototype.ngAfterViewInit = function () {
var _this = this;
if (this.mode === InteractionMode.DropDown && this.editableInput) {
fromEvent(this.editableInput.nativeElement, 'keydown').pipe(throttle(function () { return interval(0, animationFrameScheduler); }), takeUntil(this._destroy$)).subscribe(function (res) { return _this.onKeyDown(res); });
}
};
/**
*@hidden
*/
IgxDatePickerComponent.prototype.ngOnDestroy = function () {
if (this._componentID) {
this._overlayService.hide(this._componentID);
}
this._destroy$.next(true);
this._destroy$.complete();
};
/**
*Selects today's date from calendar and change the input field value, @calendar.viewDate and @calendar.value.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
*this.datePicker.triggerTodaySelection();
*}
*```
*@memberOf {@link IgxDatePickerComponent}
*/
IgxDatePickerComponent.prototype.triggerTodaySelection = function () {
var today = new Date(Date.now());
this.handleSelection(today);
};
/**
* Change the calendar selection and calling this method will emit the @calendar.onSelection event,
* which will fire @handleSelection method.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
*this.datePicker.selectDate(this.date);
*}
* ```
* @param date passed date that has to be set to the calendar.
* @memberOf {@link IgxDatePickerComponent}
*/
IgxDatePickerComponent.prototype.selectDate = function (date) {
var oldValue = this.value;
this.value = date;
this.emitValueChangeEvent(oldValue, this.value);
this.onSelection.emit(date);
};
/**
* Deselects the calendar date.
*```typescript
*@ViewChild("MyDatePicker")
*public datePicker: IgxDatePickerComponent;
*ngAfterViewInit(){
*this.datePicker.deselectDate();
*}
* ```
* @memberOf {@link IgxDatePickerComponent}
*/
IgxDatePickerComponent.prototype.deselectDate = function () {
var oldValue = this.value;
this.value = null;
this.emitValueChangeEvent(oldValue, this.value);
if (this.calendar) {
this.calendar.deselectDate();
}
};
/**
* Opens the date picker drop down or dialog.
* @param target HTMLElement - the target element to use for positioning the drop down container according to
* ```html
* <igx-date-picker [value]="date" mode="dropdown" #retemplated>
* <ng-template igxDatePickerTemplate let-openDialog="openDialog"
* let-displayData="displayData">
* <igx-input-group>
* <input #dropDownTarget igxInput [value]="displayData" />
* <igx-suffix (click)="openDialog(dropDownTarget)">
* <igx-icon>alarm</igx-icon>
* </igx-suffix>
* </igx-input-group>
* </ng-template>
* </igx-date-picker>
* ```
*/
IgxDatePickerComponent.prototype.openDialog = function (target) {
if (!this.collapsed) {
return;
}
switch (this.mode) {
case InteractionMode.Dialog: {
this.hasHeader = true;
var modalOverlay = (this.modalOverlaySettings !== undefined) ? this._modalOverlay : this._modalOverlaySettings;
this._componentID = this._overlayService.attach(IgxCalendarContainerComponent, modalOverlay, this._moduleRef);
this._overlayService.show(this._componentID);
break;
}
case InteractionMode.DropDown: {
this.hasHeader = false;
if (target) {
this.dropDownOverlaySettings.positionStrategy.settings.target = target;
}
this._componentID = this._overlayService.attach(IgxCalendarContainerComponent, this.dropDownOverlaySettings, this._moduleRef);
this._overlayService.show(this._componentID);
break;
}
}
};
/**
* Close the calendar.
*
* @hidden
*/
IgxDatePickerComponent.prototype.closeCalendar = function () {
this._overlayService.hide(this._componentID);
};
/**
* Clear the input field, date picker value and calendar selection.
*
* @hidden
*/
IgxDatePickerComponent.prototype.clear = function () {
this.isEmpty = true;
this.invalidDate = '';
this.deselectDate();
this._setCursorPosition(0);
};
/**
* Evaluates when @calendar.onSelection event was fired
* and update the input value.
*
* @param event selected value from calendar.
*
* @hidden
*/
IgxDatePickerComponent.prototype.handleSelection = function (date) {
if (this.value) {
date.setHours(this.value.getHours());
date.setMinutes(this.value.getMinutes());
date.setSeconds(this.value.getSeconds());
date.setMilliseconds(this.value.getMilliseconds());
}
var oldValue = this.value;
this.value = date;
this.emitValueChangeEvent(oldValue, this.value);
this.calendar.viewDate = date;
this.closeCalendar();
this.onSelection.emit(date);
};
/**
* Evaluates when the input blur event was fired
* and re-calculate the date picker value.
*
* @param event
*
* @hidden
*/
IgxDatePickerComponent.prototype.onBlur = function (event) {
this._isInEditMode = false;
this.calculateDate(event.target.value, event.type);
};
/**
* Evaluates when the input focus event was fired
* and re-calculate the editor text.
*
* @param event
* @hidden
*/
IgxDatePickerComponent.prototype.onFocus = function () {
this._isInEditMode = true;
if (this.value && this.invalidDate === '') {
this._transformedDate = this._getEditorDate(this.value);
}
};
/**
* Evaluates when the keydown event was fired for up/down keys
* to provide spinning of date parts.
*
* @param event
*
* @hidden
*/
IgxDatePickerComponent.prototype.onKeyDown = function (event) {
switch (event.key) {
case "ArrowUp" /* UP_ARROW */:
case "Up" /* UP_ARROW_IE */:
event.preventDefault();
event.stopPropagation();
this.spinValue(event.target.value, 1, event.type);
break;
case "ArrowDown" /* DOWN_ARROW */:
case "Down" /* DOWN_ARROW_IE */:
if (event.altKey) {
this.openDialog(this.getInputGroupElement());
}
else {
event.preventDefault();
event.stopPropagation();
this.spinValue(event.target.value, -1, event.type);
}
break;
default:
break;
}
};
/**
* Evaluates when the mouse wheel event was fired
* to provide spinning of date parts.
*
* @param event
*
* @hidden
*/
IgxDatePickerComponent.prototype.onWheel = function (event) {
if (this._isInEditMode) {
event.preventDefault();
event.stopPropagation();
var sign = (event.deltaY > 0) ? -1 : 1;
this.spinValue(event.target.value, sign, event.type);
}
};
/**
* Evaluates when input event was fired in editor.
*
* @param event
*
* @hidden
*/
IgxDatePickerComponent.prototype.onInput = function (event) {
var _this = this;
var targetValue = event.target.value;
var cursorPosition = this._getCursorPosition();
var checkInput = DatePickerUtil.checkForCompleteDateInput(this.dateFormatParts, targetValue);
this._isInEditMode = true;
if (targetValue !== DatePickerUtil.maskToPromptChars(this.inputMask)) {
this.isEmpty = false;
}
// If all date parts are completed, change the date-picker value, stay in edit mode
if (checkInput === 'complete' && event.inputType !== 'deleteContentBackward') {
this._transformedDate = targetValue;
this.calculateDate(targetValue, event.type);
this._setCursorPosition(cursorPosition);
}
else if (checkInput === 'partial') {
// While editing, if one date part is deleted, date-picker value is set to null, the remaining input stays intact.
this.deselectDate();
requestAnimationFrame(function () {
_this.getEditElement().value = targetValue;
_this._setCursorPosition(cursorPosition);
});
}
else if (checkInput === 'empty') {
// Total clean-up as input is deleted.
this.isEmpty = true;
this.deselectDate();
}
};
IgxDatePickerComponent.prototype.emitValueChangeEvent = function (oldValue, newValue) {
if (!isEqual(oldValue, newValue)) {
this.valueChange.emit(newValue);
}
};
IgxDatePickerComponent.prototype.calculateDate = function (dateString, invokedByEvent) {
if (dateString !== '') {
var prevDateValue = this.value;
var inputValue = (invokedByEvent === 'blur') ? this.rawDateString : dateString;
var newDateArray = DatePickerUtil.parseDateArray(this.dateFormatParts, prevDateValue, inputValue);
if (newDateArray.state === "valid" /* Valid */) {
var newValue = newDateArray.date;
// Restore the time part if any
if (prevDateValue) {
newValue.setHours(prevDateValue.getHours());
newValue.setMinutes(prevDateValue.getMinutes());
newValue.setSeconds(prevDateValue.getSeconds());
newValue.setMilliseconds(prevDateValue.getMilliseconds());
}
if (this.disabledDates === null
|| (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) {
var oldValue = this.value;
this.value = newValue;
this.emitValueChangeEvent(oldValue, this.value);
this.invalidDate = '';
}
else {
var args = {
datePicker: this,
currentValue: newValue,
};
this.onDisabledDate.emit(args);
}
}
else {
var args = {
datePicker: this,
prevValue: prevDateValue
};
this.invalidDate = dateString;
this.onValidationFailed.emit(args);
}
}
};
IgxDatePickerComponent.prototype.spinValue = function (inputValue, sign, eventType) {
this._isInEditMode = true;
this.isEmpty = false;
var cursorPosition = this._getCursorPosition();
var modifiedInputValue = DatePickerUtil.getModifiedDateInput(this.dateFormatParts, inputValue, cursorPosition, this.spinDelta * sign, this.isSpinLoop);
this.getEditElement().value = modifiedInputValue;
this._setCursorPosition(cursorPosition);
var checkInput = DatePickerUtil.checkForCompleteDateInput(this.dateFormatParts, modifiedInputValue);
if (checkInput === 'complete') {
this._isInEditMode = true;
this.calculateDate(modifiedInputValue, eventType);
this._setCursorPosition(cursorPosition);
}
};
IgxDatePickerComponent.prototype._onOpening = function (event) {
this._initializeCalendarContainer(event.componentRef.instance);
this.collapsed = false;
};
IgxDatePickerComponent.prototype._onOpened = function () {
this._onTouchedCallback();
this.onOpened.emit(this);
// TODO: remove this line after deprecating 'onOpen'
this._onOpen.emit(this);
if (this.calendar) {
this._focusCalendarDate();
}
};
IgxDatePickerComponent.prototype._onClosed = function () {
this.collapsed = true;
this._componentID = null;
this.onClosed.emit(this);
// TODO: remove this line after deprecating 'onClose'
this.onClose.emit(this);
};
IgxDatePickerComponent.prototype._initializeCalendarContainer = function (componentInstance) {
var _this = this;
this.calendar = componentInstance.calendar;
var isVertical = (this.vertical && this.mode === InteractionMode.Dialog);
this.calendar.hasHeader = this.hasHeader;
this.calendar.formatOptions = this.formatOptions;
this.calendar.formatViews = this.formatViews;
this.calendar.locale = this.locale;
this.calendar.vertical = isVertical;
this.calendar.weekStart = this.weekStart;
this.calendar.specialDates = this.specialDates;
this.calendar.disabledDates = this.disabledDates;
this.calendar.headerTemplate = this.headerTemplate;
this.calendar.subheaderTemplate = this.subheaderTemplate;
this.calendar.hideOutsideDays = this.hideOutsideDays;
this.calendar.monthsViewNumber = this.monthsViewNumber;
this.calendar.onSelection.pipe(takeUntil(this._destroy$)).subscribe(function (ev) { return _this.handleSelection(ev); });
if (this.value) {
this.calendar.value = this.value;
this.calendar.viewDate = this.value;
}
componentInstance.mode = this.mode;
componentInstance.vertical = isVertical;
componentInstance.cancelButtonLabel = this.cancelButtonLabel;
componentInstance.todayButtonLabel = this.todayButtonLabel;
componentInstance.datePickerActions = this.datePickerActionsDirective;
componentInstance.onClose.pipe(takeUntil(this._destroy$)).subscribe(function () { return _this.closeCalendar(); });
componentInstance.onTodaySelection.pipe(takeUntil(this._destroy$)).subscribe(function () { return _this.triggerTodaySelection(); });
};
// Focus a date, after the calendar appearance into DOM.
IgxDatePickerComponent.prototype._focusCalendarDate = function () {
var _this = this;
requestAnimationFrame(function () {
_this.calendar.daysView.focusActiveDate();
});
};
IgxDatePickerComponent.prototype._setLocaleToDate = function (value) {
if (isIE()) {
// this is a workaround fixing the following IE11 issue:
// IE11 has added character code 8206 (mark for RTL) to the output of toLocaleDateString() that
// precedes each portion that comprises the total date... For more information read this article:
// tslint:disable-next-line: max-line-length
// https://www.csgpro.com/blog/2016/08/a-bad-date-with-internet-explorer-11-trouble-with-new-unicode-characters-in-javascript-date-strings/
var localeDateStrIE = new Date(value.getFullYear(), value.getMonth(), value.getDate(), value.getHours(), value.getMinutes(), value.getSeconds(), value.getMilliseconds());
return localeDateStrIE.toLocaleDateString(this.locale);
}
return value.toLocaleDateString(this.locale);
};
IgxDatePickerComponent.prototype._getCursorPosition = function () {
return this.getEditElement().selectionStart;
};
IgxDatePickerComponent.prototype._setCursorPosition = function (start, end) {
var _this = this;
if (end === void 0) { end = start; }
requestAnimationFrame(function () {
_this.getEditElement().setSelectionRange(start, end);
});
};
/**
* Apply custom user formatter upon date.
* @param formatter custom formatter function.
* @param date passed date
*/
IgxDatePickerComponent.prototype._customFormatChecker = function (formatter, date) {
return this.formatter ? this.formatter(date) : this._setLocaleToDate(date);
};
/*
* Transforms the date according to the specified format when `IgxDatePickerComponent` is in edit mode
* using @angular/common formatDate method: https://angular.io/api/common/formatDate
* @param value: string | number | Date
* @returns formatted string
*/
IgxDatePickerComponent.prototype._getDisplayDate = function (value) {
if (this.format && !this.formatter) {
var locale = this.locale || this.defaultLocale;
return formatDate(value, this.format, locale);
}
else {
return this._customFormatChecker(this.formatter, value);
}
};
IgxDatePickerComponent.prototype._getEditorDate = function (value) {
var locale = this.locale || this.defaultLocale;
var changedValue = (value) ? formatDate(value, this.mask, locale) : '';
return DatePickerUtil.addPromptCharsEditMode(this.dateFormatParts, this.value, changedValue);
};
var IgxDatePickerComponent_1;
IgxDatePickerComponent.ctorParameters = function () { return [
{ type: IgxOverlayService, decorators: [{ type: Inject, args: [IgxOverlayService,] }] },
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: NgModuleRef }
]; };
__decorate([
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "label", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "labelVisibility", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], IgxDatePickerComponent.prototype, "locale", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], IgxDatePickerComponent.prototype, "weekStart", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], IgxDatePickerComponent.prototype, "formatOptions", null);
__decorate([
Input(),
__metadata("design:type", Boolean)
], IgxDatePickerComponent.prototype, "hideOutsideDays", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "monthsViewNumber", void 0);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], IgxDatePickerComponent.prototype, "format", null);
__decorate([
Input(),
__metadata("design:type", String)
], IgxDatePickerComponent.prototype, "mask", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], IgxDatePickerComponent.prototype, "formatViews", null);
__decorate([
Input(),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], IgxDatePickerComponent.prototype, "disabledDates", null);
__decorate([
Input(),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], IgxDatePickerComponent.prototype, "specialDates", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], IgxDatePickerComponent.prototype, "modalOverlaySettings", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], IgxDatePickerComponent.prototype, "dropDownOverlaySettings", null);
__decorate([
Input(),
__metadata("design:type", Date),
__metadata("design:paramtypes", [Date])
], IgxDatePickerComponent.prototype, "value", null);
__decorate([
HostBinding('attr.id'),
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "id", void 0);
__decorate([
Input(),
__metadata("design:type", Function)
], IgxDatePickerComponent.prototype, "formatter", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], IgxDatePickerComponent.prototype, "disabled", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "vertical", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], IgxDatePickerComponent.prototype, "todayButtonLabel", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], IgxDatePickerComponent.prototype, "cancelButtonLabel", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "mode", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "isSpinLoop", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "outlet", void 0);
__decorate([
DeprecateProperty("'onOpen' @Output property is deprecated. Use 'onOpened' instead."),
Output(),
__metadata("design:type", EventEmitter),
__metadata("design:paramtypes", [EventEmitter])
], IgxDatePickerComponent.prototype, "onOpen", null);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "onOpened", void 0);
__decorate([
DeprecateProperty("'onClose' @Output property is deprecated. Use 'onClosed' instead."),
Output(),
__metadata("design:type", EventEmitter),
__metadata("design:paramtypes", [EventEmitter])
], IgxDatePickerComponent.prototype, "onClose", null);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "onClosed", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "onClosing", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "onSelection", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "valueChange", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "onDisabledDate", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxDatePickerComponent.prototype, "onValidationFailed", void 0);
__decorate([
ViewChild('readOnlyDatePickerTemplate', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxDatePickerComponent.prototype, "readOnlyDatePickerTemplate", void 0);
__decorate([
ViewChild('editableDatePickerTemplate', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxDatePickerComponent.prototype, "editableDatePickerTemplate", void 0);
__decorate([
ViewChild(IgxInputGroupComponent),
__metadata("design:type", IgxInputGroupComponent)
], IgxDatePickerComponent.prototype, "inputGroup", void 0);
__decorate([
ViewChild('editableInput', { read: ElementRef }),
__metadata("design:type", ElementRef)
], IgxDatePickerComponent.prototype, "editableInput", void 0);
__decorate([
ViewChild('readonlyInput', { read: ElementRef }),
__metadata("design:type", ElementRef)
], IgxDatePickerComponent.prototype, "readonlyInput", void 0);
__decorate([
ContentChild(IgxInputDirective),
__metadata("design:type", IgxInputDirective)
], IgxDatePickerComponent.prototype, "input", void 0);
__decorate([
ContentChild(IgxDatePickerTemplateDirective, { read: IgxDatePickerTemplateDirective }),
__metadata("design:type", IgxDatePickerTemplateDirective)
], IgxDatePickerComponent.prototype, "datePickerTemplateDirective", void 0);
__decorate([
ContentChild(IgxCalendarHeaderTemplateDirective, { read: IgxCalendarHeaderTemplateDirective }),
__metadata("design:type", IgxCalendarHeaderTemplateDirective)
], IgxDatePickerComponent.prototype, "headerTemplate", void 0);
__decorate([
ContentChild(IgxCalendarSubheaderTemplateDirective, { read: IgxCalendarSubheaderTemplateDirective }),
__metadata("design:type", IgxCalendarSubheaderTemplateDirective)
], IgxDatePickerComponent.prototype, "subheaderTemplate", void 0);
__decorate([
ContentChild(IgxDatePickerActionsDirective, { read: IgxDatePickerActionsDirective }),
__metadata("design:type", IgxDatePickerActionsDirective)
], IgxDatePickerComponent.prototype, "datePickerActionsDirective", void 0);
__decorate([
HostListener('keydown.spacebar', ['$event']),
HostListener('keydown.space', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [KeyboardEvent]),
__metadata("design:returntype", void 0)
], IgxDatePickerComponent.prototype, "onSpaceClick", null);
IgxDatePickerComponent = IgxDatePickerComponent_1 = __decorate([
Component({
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: IgxDatePickerComponent_1,
multi: true
}],
// tslint:disable-next-line:component-selector
selector: 'igx-date-picker',
template: "<ng-template #readOnlyDatePickerTemplate>\n <igx-input-group (click)=\"openDialog()\">\n <igx-prefix>\n <igx-icon>today</igx-icon>\n </igx-prefix>\n <label *ngIf=\"la