igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,561 lines (1,560 loc) • 208 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { CommonModule } from '@angular/common';
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, TemplateRef, ViewChild, ContentChild, Injectable } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
import { IgxIconModule } from '../icon/index';
import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component';
import { IgxInputDirective } from '../directives/input/input.directive';
import { IgxAmPmItemDirective, IgxHourItemDirective, IgxItemListDirective, IgxMinuteItemDirective, IgxTimePickerTemplateDirective } from './time-picker.directives';
import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs';
import { IGX_TIME_PICKER_COMPONENT } from './time-picker.common';
import { AbsoluteScrollStrategy } from '../services/overlay/scroll';
import { AutoPositionStrategy } from '../services/overlay/position';
import { takeUntil, throttle } from 'rxjs/operators';
import { IgxButtonModule } from '../directives/button/button.directive';
import { IgxMaskModule } from '../directives/mask/mask.directive';
import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive';
import { TimeDisplayFormatPipe, TimeInputFormatPipe } from './time-picker.pipes';
import { CurrentResourceStrings } from '../core/i18n/resources';
import { InteractionMode } from '../core/enums';
/** @type {?} */
var NEXT_ID = 0;
/** @type {?} */
var HOURS_POS = [0, 1, 2];
/** @type {?} */
var MINUTES_POS = [3, 4, 5];
/** @type {?} */
var AMPM_POS = [6, 7, 8];
/** @type {?} */
var ITEMS_COUNT = 7;
var TimePickerHammerConfig = /** @class */ (function (_super) {
tslib_1.__extends(TimePickerHammerConfig, _super);
function TimePickerHammerConfig() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.overrides = {
pan: { direction: Hammer.DIRECTION_VERTICAL, threshold: 1 }
};
return _this;
}
TimePickerHammerConfig.decorators = [
{ type: Injectable }
];
return TimePickerHammerConfig;
}(HammerGestureConfig));
export { TimePickerHammerConfig };
if (false) {
/** @type {?} */
TimePickerHammerConfig.prototype.overrides;
}
/**
* @record
*/
export function IgxTimePickerValueChangedEventArgs() { }
if (false) {
/** @type {?} */
IgxTimePickerValueChangedEventArgs.prototype.oldValue;
/** @type {?} */
IgxTimePickerValueChangedEventArgs.prototype.newValue;
}
/**
* @record
*/
export function IgxTimePickerValidationFailedEventArgs() { }
if (false) {
/** @type {?} */
IgxTimePickerValidationFailedEventArgs.prototype.timePicker;
/** @type {?} */
IgxTimePickerValidationFailedEventArgs.prototype.currentValue;
/** @type {?} */
IgxTimePickerValidationFailedEventArgs.prototype.setThroughUI;
}
var IgxTimePickerComponent = /** @class */ (function () {
function IgxTimePickerComponent() {
/**
* An \@Input property that sets the value of the `id` attribute.
* ```html
* <igx-time-picker [id]="'igx-time-picker-5'" format="h:mm tt" ></igx-time-picker>
* ```
*/
this.id = "igx-time-picker-" + NEXT_ID++;
/**
* An \@Input property that allows you to disable the `igx-time-picker` component. By default `disabled` is set to false.
* ```html
* <igx-time-picker [disabled]="'true'" [vertical]="true" format="h:mm tt" ></igx-time-picker>
* ```
*/
this.disabled = false;
/**
* An \@Input property that gets/sets the delta by which hour and minute items would be changed <br>
* when the user presses the Up/Down keys.
* By default `itemsDelta` is set to `{hours: 1, minutes:1}`
* ```html
* <igx-time-picker [itemsDelta]="{hours:3, minutes:5}" id="time-picker"></igx-time-picker>
* ```
*/
this.itemsDelta = { hours: 1, minutes: 1 };
/**
* An \@Input property that determines the spin behavior. By default `isSpinLoop` is set to true.
* The minutes and hour spinning will wrap around by default.
* ```html
* <igx-time-picker [isSpinLoop]="false" id="time-picker"></igx-time-picker>
* ```
*/
this.isSpinLoop = true;
/**
* An \@Input property that Gets/Sets the orientation of the `igxTimePicker`. By default `vertical` is set to false.
* ```html
* <igx-time-picker [vertical]="true" id="time-picker"></igx-time-picker>
* ```
*/
this.vertical = false;
/**
* Sets the character used to prompt the user for input.
* Default value is "'-'".
* ```html
* <igx-time-picker [promptChar] = "'_'">
* ```
* \@memberof IgxTimePickerComponent
*/
this.promptChar = '-';
/**
* An \@Input property that allows you to switch the interaction mode between
* a dialog picker or dropdown with editable masked input.
* Deafult is dialog picker.
* ```html
* public mode = InteractionMode.DROPDOWN;
* //..
* <igx-time-picker [mode]="mode"></igx-time-picker>
* ```
* \@memberof IgxTimePickerComponent
*/
this.mode = InteractionMode.Dialog;
/**
* Emitted when selection is made. The event contains the selected value. Returns {`oldValue`: `Date`, `newValue`: `Date`}.
* ```typescript
* \@ViewChild("toast")
* private toast: IgxToastComponent;
* public onValueChanged(timepicker){
* this.toast.show()
* }
* //...
* ```
* ```html
* <igx-time-picker (onValueChanged)="onValueChanged($event)"></igx-time-picker>
* <igx-toast #toast message="The value has been changed!"></igx-toast>
* ```
*/
this.onValueChanged = new EventEmitter();
/**
* Emitted when an invalid value is being set. Returns {`timePicker`: `any`, `currentValue`: `Date`, `setThroughUI`: `boolean`}
* ```typescript
* public min: string = "09:00";
* public max: string = "18:00";
* \@ViewChild("toast")
* private toast: IgxToastComponent;
* public onValidationFailed(timepicker){
* this.toast.show();
* }
* //...
* ```
* ```html
* <igx-time-picker [minValue]="min" [maxValue]="max" (onValidationFailed)="onValidationFailed($event)"></igx-time-picker>
* <igx-toast #toast message="Value must be between 09:00 and 18:00!"></igx-toast>
* ```
*/
this.onValidationFailed = new EventEmitter();
/**
* Emitted when a timePicker is being opened.
* ```html
* \@ViewChild("toast")
* private toast: IgxToastComponent;
* public onOpen(timepicker){
* this.toast.show();
* }
* //...
* ```
* ```html
* <igx-time-picker [minValue]="min" [maxValue]="max" (onOpen)="onOpen($event)"></igx-time-picker>
* <igx-toast #toast message="The time picker has been opened!"></igx-toast>
* ```
*/
this.onOpen = new EventEmitter();
/**
* Emitted when a timePicker is being closed.
*/
this.onClose = new EventEmitter();
/**
* @hidden
*/
this._hourItems = [];
/**
* @hidden
*/
this._minuteItems = [];
/**
* @hidden
*/
this._ampmItems = [];
/**
* @hidden
*/
this.cleared = false;
/**
* @hidden
*/
this.isNotEmpty = false;
/**
* @hidden
*/
this.displayFormat = new TimeDisplayFormatPipe(this);
/**
* @hidden
*/
this.inputFormat = new TimeInputFormatPipe(this);
this._resourceStrings = CurrentResourceStrings.TimePickerResStrings;
this._okButtonLabel = null;
this._cancelButtonLabel = null;
this._isHourListLoop = this.isSpinLoop;
this._isMinuteListLoop = this.isSpinLoop;
this._hourView = [];
this._minuteView = [];
this._ampmView = [];
this._destroy$ = new Subject();
this._onTouchedCallback = function () { };
this._onChangeCallback = function () { };
}
Object.defineProperty(IgxTimePickerComponent.prototype, "value", {
/**
* An accessor that returns the value of `igx-time-picker` component.
* ```html
*@ViewChild("MyPick")
*public pick: IgxTimePickerComponent;
*ngAfterViewInit(){
* let pickSelect = this.pick.value;
* }
* ```
*/
get: /**
* An accessor that returns the value of `igx-time-picker` component.
* ```html
* \@ViewChild("MyPick")
* public pick: IgxTimePickerComponent;
* ngAfterViewInit(){
* let pickSelect = this.pick.value;
* }
* ```
* @return {?}
*/
function () {
return this._value;
},
/**
* An accessor that allows you to set a time using the `value` input.
* ```html
*public date: Date = new Date(Date.now());
* //...
*<igx-time-picker [value]="date" format="h:mm tt"></igx-time-picker>
* ```
*/
set: /**
* An accessor that allows you to set a time using the `value` input.
* ```html
* public date: Date = new Date(Date.now());
* //...
* <igx-time-picker [value]="date" format="h:mm tt"></igx-time-picker>
* ```
* @param {?} value
* @return {?}
*/
function (value) {
if (this._isValueValid(value)) {
/** @type {?} */
var oldVal = this._value;
this._value = value;
this._onChangeCallback(value);
/** @type {?} */
var dispVal = this._formatTime(this.value, this.format);
if (this.mode === InteractionMode.DropDown && this._displayValue !== dispVal) {
this.displayValue = dispVal;
}
/** @type {?} */
var args = {
oldValue: oldVal,
newValue: value
};
this.onValueChanged.emit(args);
}
else {
/** @type {?} */
var args = {
timePicker: this,
currentValue: value,
setThroughUI: false
};
this.onValidationFailed.emit(args);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "resourceStrings", {
/**
* An accessor that returns the resource strings.
*/
get: /**
* An accessor that returns the resource strings.
* @return {?}
*/
function () {
return this._resourceStrings;
},
/**
* An accessor that sets the resource strings.
* By default it uses EN resources.
*/
set: /**
* An accessor that sets the resource strings.
* By default it uses EN resources.
* @param {?} value
* @return {?}
*/
function (value) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "okButtonLabel", {
/**
* An accessor that returns the label of ok button.
*/
get: /**
* An accessor that returns the label of ok button.
* @return {?}
*/
function () {
return this._okButtonLabel || this.resourceStrings.igx_time_picker_ok;
},
/**
* An @Input property that renders OK button with custom text. By default `okButtonLabel` is set to OK.
* ```html
* <igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker>
* ```
*/
set: /**
* An \@Input property that renders OK button with custom text. By default `okButtonLabel` is set to OK.
* ```html
* <igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker>
* ```
* @param {?} value
* @return {?}
*/
function (value) {
this._okButtonLabel = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "cancelButtonLabel", {
/**
* An accessor that returns the label of cancel button.
*/
get: /**
* An accessor that returns the label of cancel button.
* @return {?}
*/
function () {
return this._cancelButtonLabel || this.resourceStrings.igx_time_picker_cancel;
},
/**
* An @Input property that renders cancel button with custom text.
* By default `cancelButtonLabel` is set to Cancel.
* ```html
* <igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker>
* ```
*/
set: /**
* An \@Input property that renders cancel button with custom text.
* By default `cancelButtonLabel` is set to Cancel.
* ```html
* <igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker>
* ```
* @param {?} value
* @return {?}
*/
function (value) {
this._cancelButtonLabel = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "format", {
/**
* An @Input property that Gets/Sets format of time while `igxTimePicker` does not have focus. <br>
* By default `format` is set to hh:mm tt. <br>
* List of time-flags: <br>
* `h` : hours field in 12-hours format without leading zero <br>
* `hh` : hours field in 12-hours format with leading zero <br>
* `H` : hours field in 24-hours format without leading zero <br>
* `HH` : hours field in 24-hours format with leading zero <br>
* `m` : minutes field without leading zero <br>
* `mm` : minutes field with leading zero <br>
* `tt` : 2 character string which represents AM/PM field <br>
* ```html
*<igx-time-picker format="HH:m" id="time-picker"></igx-time-picker>
* ```
*/
get: /**
* An \@Input property that Gets/Sets format of time while `igxTimePicker` does not have focus. <br>
* By default `format` is set to hh:mm tt. <br>
* List of time-flags: <br>
* `h` : hours field in 12-hours format without leading zero <br>
* `hh` : hours field in 12-hours format with leading zero <br>
* `H` : hours field in 24-hours format without leading zero <br>
* `HH` : hours field in 24-hours format with leading zero <br>
* `m` : minutes field without leading zero <br>
* `mm` : minutes field with leading zero <br>
* `tt` : 2 character string which represents AM/PM field <br>
* ```html
* <igx-time-picker format="HH:m" id="time-picker"></igx-time-picker>
* ```
* @return {?}
*/
function () {
return this._format || 'hh:mm tt';
},
set: /**
* @param {?} formatValue
* @return {?}
*/
function (formatValue) {
this._format = formatValue;
this.mask = this._format.indexOf('tt') !== -1 ? '00:00 LL' : '00:00';
if (this.displayValue) {
this.displayValue = this._formatTime(this.value, this._format);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "displayValue", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
if (this._displayValue === undefined) {
return this._formatTime(this.value, this.format);
}
return this._displayValue;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._displayValue = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "displayTime", {
/**
* Returns the current time formatted as string using the `format` option.
* If there is no set time the return is an empty string.
*```typescript
*@ViewChild("MyChild")
*private picker: IgxTimePickerComponent;
*ngAfterViewInit(){
* let time = this.picker.displayTime;
*}
*```
*/
get: /**
* Returns the current time formatted as string using the `format` option.
* If there is no set time the return is an empty string.
* ```typescript
* \@ViewChild("MyChild")
* private picker: IgxTimePickerComponent;
* ngAfterViewInit(){
* let time = this.picker.displayTime;
* }
* ```
* @return {?}
*/
function () {
if (this.value) {
return this._formatTime(this.value, this.format);
}
return '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "hourView", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._hourView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "minuteView", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._minuteView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "ampmView", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._ampmView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "showClearButton", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return (this.displayValue && this.displayValue !== this.parseMask(false)) || this.isNotEmpty;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "validMinuteEntries", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
/** @type {?} */
var minuteEntries = [];
for (var i = 0; i < 60; i++) {
minuteEntries.push(i);
}
return minuteEntries;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "validHourEntries", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
/** @type {?} */
var hourEntries = [];
/** @type {?} */
var index = this.format.indexOf('h') !== -1 ? 13 : 24;
for (var i = 0; i < index; i++) {
hourEntries.push(i);
}
return hourEntries;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "template", {
/**
* Gets the input group template.
* ```typescript
* let template = this.template();
* ```
* @memberof IgxTimePickerComponent
*/
get: /**
* Gets the input group template.
* ```typescript
* let template = this.template();
* ```
* \@memberof IgxTimePickerComponent
* @return {?}
*/
function () {
if (this.timePickerTemplateDirective) {
return this.timePickerTemplateDirective.template;
}
return this.mode === InteractionMode.Dialog ? this.defaultTimePickerTemplate : this.dropdownInputTemplate;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "context", {
/**
* Gets the context passed to the input group template.
* @memberof IgxTimePickerComponent
*/
get: /**
* Gets the context passed to the input group template.
* \@memberof IgxTimePickerComponent
* @return {?}
*/
function () {
var _this = this;
return {
value: this.value,
displayTime: this.displayTime,
displayValue: this.displayValue,
openDialog: function () { _this.openDialog(); }
};
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
/**
* @hidden
* @return {?}
*/
IgxTimePickerComponent.prototype.ngOnInit = /**
* @hidden
* @return {?}
*/
function () {
this._generateHours();
this._generateMinutes();
if (this.format.indexOf('tt') !== -1) {
this._generateAmPm();
}
this._dropDownOverlaySettings = {
modal: false,
closeOnOutsideClick: true,
scrollStrategy: new AbsoluteScrollStrategy(),
positionStrategy: new AutoPositionStrategy()
};
};
/**
* @hidden
*/
/**
* @hidden
* @return {?}
*/
IgxTimePickerComponent.prototype.ngAfterViewInit = /**
* @hidden
* @return {?}
*/
function () {
var _this = this;
if (this.mode === InteractionMode.DropDown && this.input) {
fromEvent(this.input.nativeElement, 'keydown').pipe(throttle(function () { return interval(0, animationFrameScheduler); }), takeUntil(this._destroy$)).subscribe(function (event) {
if (event.key === "ArrowUp" /* UP_ARROW */ || event.key === "Up" /* UP_ARROW_IE */ ||
event.key === "ArrowDown" /* DOWN_ARROW */ || event.key === "Down" /* DOWN_ARROW_IE */) {
_this.spinOnEdit(event);
}
});
}
if (this.container && this.group) {
this.container.nativeElement.style.width = this.group.element.nativeElement.getBoundingClientRect().width + 'px';
}
if (this.toggleRef) {
this.toggleRef.onClosed.pipe(takeUntil(this._destroy$)).subscribe(function () {
if (_this._input) {
_this._input.nativeElement.focus();
}
if (_this.mode === InteractionMode.DropDown) {
_this._onDropDownClosed();
}
_this.onClose.emit(_this);
});
this.toggleRef.onOpened.pipe(takeUntil(this._destroy$)).subscribe(function () {
_this.onOpen.emit(_this);
});
}
};
/**
* @hidden
*/
/**
* @hidden
* @return {?}
*/
IgxTimePickerComponent.prototype.ngOnDestroy = /**
* @hidden
* @return {?}
*/
function () {
this._destroy$.next(true);
this._destroy$.complete();
};
/**
* @hidden
*/
/**
* @hidden
* @param {?} event
* @return {?}
*/
IgxTimePickerComponent.prototype.onKeydownSpace = /**
* @hidden
* @param {?} event
* @return {?}
*/
function (event) {
this.openDialog();
event.preventDefault();
};
/**
* @hidden
*/
/**
* @hidden
* @return {?}
*/
IgxTimePickerComponent.prototype.onAltArrowDown = /**
* @hidden
* @return {?}
*/
function () {
this.openDialog();
};
/**
* @private
* @param {?} item
* @param {?} items
* @param {?} selectedItem
* @param {?} isListLoop
* @param {?} viewType
* @return {?}
*/
IgxTimePickerComponent.prototype._scrollItemIntoView = /**
* @private
* @param {?} item
* @param {?} items
* @param {?} selectedItem
* @param {?} isListLoop
* @param {?} viewType
* @return {?}
*/
function (item, items, selectedItem, isListLoop, viewType) {
/** @type {?} */
var itemIntoView;
if (items) {
/** @type {?} */
var index = (item === 'AM' || item === 'PM') ? items.indexOf(item) : items.indexOf(parseInt(item, 10));
/** @type {?} */
var view = void 0;
if (index !== -1) {
if (isListLoop) {
if (index > 0) {
selectedItem = this._itemToString(items[index - 1], viewType);
itemIntoView = this._nextItem(items, selectedItem, isListLoop, viewType);
}
else {
selectedItem = this._itemToString(items[1], viewType);
itemIntoView = this._prevItem(items, selectedItem, isListLoop, viewType);
}
}
else {
view = items.slice(index - 3, index + 4);
selectedItem = this._itemToString(items[index], viewType);
itemIntoView = { selectedItem: selectedItem, view: view };
}
itemIntoView.view = this._viewToString(itemIntoView.view, viewType);
}
}
return itemIntoView;
};
/**
* @private
* @param {?} view
* @param {?} viewType
* @return {?}
*/
IgxTimePickerComponent.prototype._viewToString = /**
* @private
* @param {?} view
* @param {?} viewType
* @return {?}
*/
function (view, viewType) {
for (var i = 0; i < view.length; i++) {
if (typeof (view[i]) !== 'string') {
view[i] = this._itemToString(view[i], viewType);
}
}
return view;
};
/**
* @private
* @param {?} item
* @param {?} viewType
* @return {?}
*/
IgxTimePickerComponent.prototype._itemToString = /**
* @private
* @param {?} item
* @param {?} viewType
* @return {?}
*/
function (item, viewType) {
if (item === null) {
item = '';
}
else if (viewType && typeof (item) !== 'string') {
/** @type {?} */
var leadZeroHour = (item < 10 && (this.format.indexOf('hh') !== -1 || this.format.indexOf('HH') !== -1));
/** @type {?} */
var leadZeroMinute = (item < 10 && this.format.indexOf('mm') !== -1);
/** @type {?} */
var leadZero = (viewType === 'hour') ? leadZeroHour : leadZeroMinute;
item = (leadZero) ? '0' + item : "" + item;
}
return item;
};
/**
* @private
* @param {?} items
* @param {?} selectedItem
* @param {?} isListLoop
* @param {?} viewType
* @return {?}
*/
IgxTimePickerComponent.prototype._prevItem = /**
* @private
* @param {?} items
* @param {?} selectedItem
* @param {?} isListLoop
* @param {?} viewType
* @return {?}
*/
function (items, selectedItem, isListLoop, viewType) {
/** @type {?} */
var selectedIndex = items.indexOf(parseInt(selectedItem, 10));
/** @type {?} */
var itemsCount = items.length;
/** @type {?} */
var view;
if (selectedIndex === -1) {
view = items.slice(0, 7);
selectedItem = items[3];
}
else if (isListLoop) {
if (selectedIndex - 4 < 0) {
view = items.slice(itemsCount - (4 - selectedIndex), itemsCount);
view = view.concat(items.slice(0, selectedIndex + 3));
}
else if (selectedIndex + 4 > itemsCount) {
view = items.slice(selectedIndex - 4, itemsCount);
view = view.concat(items.slice(0, selectedIndex + 3 - itemsCount));
}
else {
view = items.slice(selectedIndex - 4, selectedIndex + 3);
}
selectedItem = (selectedIndex === 0) ? items[itemsCount - 1] : items[selectedIndex - 1];
}
else if (selectedIndex > 3) {
view = items.slice(selectedIndex - 4, selectedIndex + 3);
selectedItem = items[selectedIndex - 1];
}
else if (selectedIndex === 3) {
view = items.slice(0, 7);
}
view = this._viewToString(view, viewType);
selectedItem = this._itemToString(selectedItem, viewType);
return {
selectedItem: selectedItem,
view: view
};
};
/**
* @private
* @param {?} items
* @param {?} selectedItem
* @param {?} isListLoop
* @param {?} viewType
* @return {?}
*/
IgxTimePickerComponent.prototype._nextItem = /**
* @private
* @param {?} items
* @param {?} selectedItem
* @param {?} isListLoop
* @param {?} viewType
* @return {?}
*/
function (items, selectedItem, isListLoop, viewType) {
/** @type {?} */
var selectedIndex = items.indexOf(parseInt(selectedItem, 10));
/** @type {?} */
var itemsCount = items.length;
/** @type {?} */
var view;
if (selectedIndex === -1) {
view = items.slice(0, 7);
selectedItem = items[3];
}
else if (isListLoop) {
if (selectedIndex < 2) {
view = items.slice(itemsCount - (2 - selectedIndex), itemsCount);
view = view.concat(items.slice(0, selectedIndex + 5));
}
else if (selectedIndex + 4 >= itemsCount) {
view = items.slice(selectedIndex - 2, itemsCount);
view = view.concat(items.slice(0, selectedIndex + 5 - itemsCount));
}
else {
view = items.slice(selectedIndex - 2, selectedIndex + 5);
}
selectedItem = (selectedIndex === itemsCount - 1) ? items[0] : items[selectedIndex + 1];
}
else if (selectedIndex + 1 < itemsCount - 3) {
view = items.slice(selectedIndex - 2, selectedIndex + 5);
selectedItem = items[selectedIndex + 1];
}
else if (selectedIndex === itemsCount - 4) {
view = items.slice(selectedIndex - 3, itemsCount);
}
view = this._viewToString(view, viewType);
selectedItem = this._itemToString(selectedItem, viewType);
return {
selectedItem: selectedItem,
view: view
};
};
/**
* @private
* @param {?} value
* @param {?} format
* @return {?}
*/
IgxTimePickerComponent.prototype._formatTime = /**
* @private
* @param {?} value
* @param {?} format
* @return {?}
*/
function (value, format) {
if (!value) {
return '';
}
else {
/** @type {?} */
var hour = value.getHours();
/** @type {?} */
var minute = value.getMinutes();
/** @type {?} */
var formattedMinute = void 0;
/** @type {?} */
var formattedHour = void 0;
/** @type {?} */
var amPM = void 0;
if (format.indexOf('h') !== -1) {
amPM = (hour > 11) ? 'PM' : 'AM';
if (hour > 12) {
hour -= 12;
formattedHour = hour < 10 && format.indexOf('hh') !== -1 ? '0' + hour : "" + hour;
}
else if (hour === 0) {
formattedHour = '12';
}
else if (hour < 10 && format.indexOf('hh') !== -1) {
formattedHour = '0' + hour;
}
else {
formattedHour = "" + hour;
}
}
else {
if (hour < 10 && format.indexOf('HH') !== -1) {
formattedHour = '0' + hour;
}
else {
formattedHour = "" + hour;
}
}
formattedMinute = minute < 10 && format.indexOf('mm') !== -1 ? '0' + minute : "" + minute;
return format.replace('hh', formattedHour).replace('h', formattedHour)
.replace('HH', formattedHour).replace('H', formattedHour)
.replace('mm', formattedMinute).replace('m', formattedMinute)
.replace('tt', amPM);
}
};
/**
* @private
* @param {?} start
* @param {?} end
* @return {?}
*/
IgxTimePickerComponent.prototype._updateHourView = /**
* @private
* @param {?} start
* @param {?} end
* @return {?}
*/
function (start, end) {
this._hourView = this._viewToString(this._hourItems.slice(start, end), 'hour');
};
/**
* @private
* @param {?} start
* @param {?} end
* @return {?}
*/
IgxTimePickerComponent.prototype._updateMinuteView = /**
* @private
* @param {?} start
* @param {?} end
* @return {?}
*/
function (start, end) {
this._minuteView = this._viewToString(this._minuteItems.slice(start, end), 'minute');
};
/**
* @private
* @param {?} start
* @param {?} end
* @return {?}
*/
IgxTimePickerComponent.prototype._updateAmPmView = /**
* @private
* @param {?} start
* @param {?} end
* @return {?}
*/
function (start, end) {
this._ampmView = this._ampmItems.slice(start, end);
};
/**
* @private
* @param {?} items
* @return {?}
*/
IgxTimePickerComponent.prototype._addEmptyItems = /**
* @private
* @param {?} items
* @return {?}
*/
function (items) {
for (var i = 0; i < 3; i++) {
items.push(null);
}
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._generateHours = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var hourItemsCount = 24;
if (this.format.indexOf('h') !== -1) {
hourItemsCount = 13;
}
hourItemsCount /= this.itemsDelta.hours;
/** @type {?} */
var i = this.format.indexOf('H') !== -1 ? 0 : 1;
if (hourItemsCount < 7 || !this.isSpinLoop) {
this._addEmptyItems(this._hourItems);
this._isHourListLoop = false;
}
if (hourItemsCount > 1) {
for (i; i < hourItemsCount; i++) {
this._hourItems.push(i * this.itemsDelta.hours);
}
}
else {
this._hourItems.push(0);
}
if (hourItemsCount < 7 || !this.isSpinLoop) {
this._addEmptyItems(this._hourItems);
}
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._generateMinutes = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var minuteItemsCount = 60 / this.itemsDelta.minutes;
if (minuteItemsCount < 7 || !this.isSpinLoop) {
this._addEmptyItems(this._minuteItems);
this._isMinuteListLoop = false;
}
for (var i = 0; i < minuteItemsCount; i++) {
this._minuteItems.push(i * this.itemsDelta.minutes);
}
if (minuteItemsCount < 7 || !this.isSpinLoop) {
this._addEmptyItems(this._minuteItems);
}
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._generateAmPm = /**
* @private
* @return {?}
*/
function () {
this._addEmptyItems(this._ampmItems);
this._ampmItems.push('AM');
this._ampmItems.push('PM');
this._addEmptyItems(this._ampmItems);
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._getSelectedTime = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var date = this.value ? new Date(this.value) : new Date();
date.setHours(parseInt(this.selectedHour, 10));
date.setMinutes(parseInt(this.selectedMinute, 10));
date.setSeconds(0);
if (this.selectedAmPm === 'PM' && this.selectedHour !== '12') {
date.setHours(date.getHours() + 12);
}
if (this.selectedAmPm === 'AM' && this.selectedHour === '12') {
date.setHours(0);
}
return date;
};
/**
* @private
* @param {?} value
* @return {?}
*/
IgxTimePickerComponent.prototype._convertMinMaxValue = /**
* @private
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();
/** @type {?} */
var sections = value.split(/[\s:]+/);
date.setHours(parseInt(sections[0], 10));
date.setMinutes(parseInt(sections[1], 10));
date.setSeconds(0);
if (sections[2] && sections[2] === 'PM' && sections[0] !== '12') {
date.setHours(date.getHours() + 12);
}
if (sections[0] === '12' && sections[2] && sections[2] === 'AM') {
date.setHours(0);
}
return date;
};
/**
* @private
* @param {?} value
* @return {?}
*/
IgxTimePickerComponent.prototype._isValueValid = /**
* @private
* @param {?} value
* @return {?}
*/
function (value) {
if (this.maxValue && value > this._convertMinMaxValue(this.maxValue)) {
return false;
}
else if (this.minValue && value < this._convertMinMaxValue(this.minValue)) {
return false;
}
else {
return true;
}
};
/**
* @private
* @param {?} val
* @return {?}
*/
IgxTimePickerComponent.prototype._isEntryValid = /**
* @private
* @param {?} val
* @return {?}
*/
function (val) {
/** @type {?} */
var sections = val.split(/[\s:]+/);
/** @type {?} */
var re = new RegExp(this.promptChar, 'g');
/** @type {?} */
var hour = parseInt(sections[0].replace(re, ''), 10);
/** @type {?} */
var minutes = parseInt(sections[1].replace(re, ''), 10);
return this.validHourEntries.indexOf(hour) !== -1 && this.validMinuteEntries.indexOf(minutes) !== -1;
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._getCursorPosition = /**
* @private
* @return {?}
*/
function () {
return this.input.nativeElement.selectionStart;
};
/**
* @private
* @param {?} start
* @param {?=} end
* @return {?}
*/
IgxTimePickerComponent.prototype._setCursorPosition = /**
* @private
* @param {?} start
* @param {?=} end
* @return {?}
*/
function (start, end) {
if (end === void 0) { end = start; }
this.input.nativeElement.setSelectionRange(start, end);
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._updateEditableInput = /**
* @private
* @return {?}
*/
function () {
if (this.mode === InteractionMode.DropDown) {
this.displayValue = this._formatTime(this._getSelectedTime(), this.format);
}
};
/**
* @private
* @param {?} currentVal
* @param {?} minVal
* @param {?} maxVal
* @param {?} hDelta
* @param {?} sign
* @return {?}
*/
IgxTimePickerComponent.prototype._spinHours = /**
* @private
* @param {?} currentVal
* @param {?} minVal
* @param {?} maxVal
* @param {?} hDelta
* @param {?} sign
* @return {?}
*/
function (currentVal, minVal, maxVal, hDelta, sign) {
/** @type {?} */
var oldVal = new Date(currentVal);
currentVal.setMinutes(sign * hDelta);
if (currentVal.getDate() !== oldVal.getDate() && this.isSpinLoop) {
currentVal.setDate(oldVal.getDate());
}
/** @type {?} */
var minutes = currentVal.getMinutes();
if (currentVal.getTime() > maxVal.getTime()) {
if (this.isSpinLoop) {
minutes = minutes < minVal.getMinutes() ? 60 + minutes : minutes;
minVal.setMinutes(sign * minutes);
return minVal;
}
else {
return oldVal;
}
}
else if (currentVal.getTime() < minVal.getTime()) {
if (this.isSpinLoop) {
minutes = minutes <= maxVal.getMinutes() ? minutes : minutes - 60;
maxVal.setMinutes(minutes);
return maxVal;
}
else {
return oldVal;
}
}
else {
return currentVal;
}
};
/**
* @private
* @param {?} currentVal
* @param {?} mDelta
* @param {?} sign
* @return {?}
*/
IgxTimePickerComponent.prototype._spinMinutes = /**
* @private
* @param {?} currentVal
* @param {?} mDelta
* @param {?} sign
* @return {?}
*/
function (currentVal, mDelta, sign) {
/** @type {?} */
var minutes = currentVal.getMinutes() + (sign * mDelta);
if (minutes < 0 || minutes >= 60) {
minutes = this.isSpinLoop ? minutes - (sign * 60) : currentVal.getMinutes();
}
currentVal.setMinutes(minutes);
return currentVal;
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._initializeContainer = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (this.value) {
/** @type {?} */
var formttedTime = this._formatTime(this.value, this.format);
/** @type {?} */
var sections = formttedTime.split(/[\s:]+/);
this.selectedHour = sections[0];
this.selectedMinute = sections[1];
if (this._ampmItems !== null) {
this.selectedAmPm = sections[2];
}
}
if (this.selectedHour === undefined) {
this.selectedHour = "" + this._hourItems[3];
}
if (this.selectedMinute === undefined) {
this.selectedMinute = '0';
}
if (this.selectedAmPm === undefined && this._ampmItems !== null) {
this.selectedAmPm = this._ampmItems[3];
}
this._prevSelectedHour = this.selectedHour;
this._prevSelectedMinute = this.selectedMinute;
this._prevSelectedAmPm = this.selectedAmPm;
this._onTouchedCallback();
this._updateHourView(0, ITEMS_COUNT);
this._updateMinuteView(0, ITEMS_COUNT);
this._updateAmPmView(0, ITEMS_COUNT);
if (this.selectedHour) {
this.scrollHourIntoView(this.selectedHour);
}
if (this.selectedMinute) {
this.scrollMinuteIntoView(this.selectedMinute);
}
if (this.selectedAmPm) {
this.scrollAmPmIntoView(this.selectedAmPm);
}
requestAnimationFrame(function () {
_this.hourList.nativeElement.focus();
});
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._closeDropDown = /**
* @private
* @return {?}
*/
function () {
this.toggleRef.close();
this._onDropDownClosed();
};
/**
* @private
* @return {?}
*/
IgxTimePickerComponent.prototype._onDropDownClosed = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var oldValue = this.value;
/** @type {?} */
var newVal = this._convertMinMaxValue(this.displayValue);
if (this._isValueValid(newVal)) {
if (!this.value || oldValue.getTime() !== newVal.getTime()) {
this.value = newVal;
}
}
else {
this.displayValue = this.inputFormat.transform(this._formatTime(oldValue, this.format));
/** @type {?} */
var args = {
timePicker: this,
currentValue: newVal,
setThroughUI: true
};
this.onValidationFailed.emit(args);
}
};
/**
* @hidden
*/
/**
* @hidden
* @return {?}
*/
IgxTimePickerComponent.prototype.getEditElement = /**
* @hidden
* @return {?}
*/
function () {
return this._input.nativeElement;
};
/**
* @hidden
*/
/**
* @hidden
* @param {?} value
* @return {?}
*/
IgxTimePickerComponent.prototype.writeValue = /**
* @hidden
* @param {?} value
* @return {?}
*/
function (value) {
// use this flag to make sure that min/maxValue are checked (in _convertMinMaxValue() method)
// against the real value when initializing the component and value is bound via ngModel
this._dateFromModel = value;
this.value = value;
if (this.mode === InteractionMode.DropDown) {
this.displayValue = this._formatTime(this.value, this.format);
}
};
/**
* @hidden
*/
/**
* @hidden
* @param {?} fn
* @return {?}
*/
IgxTimePickerComponent.prototype.registerOnChange = /**
* @hidden
* @param {?} fn
* @return {?}
*/
function (fn) { this._onChangeCallback = fn; };
/**
* @hidden
*/
/**
* @hidden
* @param {?} fn
* @return {?}
*/
IgxTimePickerComponent.prototype.registerOnTouched = /**
* @hidden
* @param {?} fn
* @return {?}
*/
function (fn) { this._onTouchedCallback = fn; };
/**
* opens the dialog.
* ```html
*<igx-time-picker #timePicker></igx-time-picker>
* ```
* ```typescript
* @ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
* picker.openDialog();
* ```
*/
/**
* opens the dialog.
* ```html
* <igx-time-picker #timePicker></igx-time-picker>
* ```
* ```typescript
* \@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
* picker.openDialog();
* ```
* @param {?=} timePicker
* @return {?}
*/
IgxTimePickerComponent.prototype.openDialog = /**
* opens the dialog.
* ```html
* <igx-time-picker #timePicker></igx-time-picker>
* ```
* ```typescript
* \@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
* picker.openDialog();
* ```
* @param {?=} timePicker
* @return {?}
*/
function (timePicker) {
if (timePicker === void 0) { timePicker = this; }
if (this.toggleRef.collapsed) {
/** @type {?} */
var settings = void 0;
if (this.mode === InteractionMode.Dialog && this.overlaySettings) {
settings = this.overlaySettings;
}
if (this.mode === InteractionMode.DropDown) {
settings = this.overlaySettings || this._dropDownOverlaySettings;
/** @type {?} */
var posStrategy = settings.positionStrategy;
if (this.group && posStrategy) {
posStrategy.settings.target = this.group.element.nativeElement;
}
else if (this.templateDropDownTarget && posStrategy) {
posStrategy.settings.target = this.templateDropDownTarget.nativeElement;
}
else if (!posStrategy || (posStrategy && !posStrategy.settings.target)) {
throw new Error('There is no target element for the dropdown to attach.' +
'Mark a DOM element with #dropDownTarget ref variable or provide correct overlay positionStrategy.');
}
}