@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,285 lines • 237 kB
JavaScript
import { __assign, __decorate, __extends, __metadata, __values } 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, IgxMinuteItemDirective, IgxSecondsItemDirective, IgxItemListDirective, IgxTimePickerTemplateDirective, IgxTimePickerActionsDirective } 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';
import { DeprecateProperty } from '../core/deprecateDecorators';
var NEXT_ID = 0;
var ITEMS_COUNT = 7;
var TimePickerHammerConfig = /** @class */ (function (_super) {
__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 = __decorate([
Injectable()
], TimePickerHammerConfig);
return TimePickerHammerConfig;
}(HammerGestureConfig));
export { TimePickerHammerConfig };
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 determines the spin behavior. By default `isSpinLoop` is set to true.
* The seconds, 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 opened.
*/
this.onOpened = new EventEmitter();
/**
* Emitted when a timePicker is closed.
*/
this.onClosed = new EventEmitter();
/**
* Emitted when a timePicker is being closed.
*/
this.onClosing = new EventEmitter();
/**
* @hidden
*/
this._hourItems = [];
/**
* @hidden
*/
this._minuteItems = [];
/**
* @hidden
*/
this._secondsItems = [];
/**
* @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._itemsDelta = { hours: 1, minutes: 1, seconds: 1 };
this._isHourListLoop = this.isSpinLoop;
this._isMinuteListLoop = this.isSpinLoop;
this._isSecondsListLoop = this.isSpinLoop;
this._hourView = [];
this._minuteView = [];
this._secondsView = [];
this._ampmView = [];
this._destroy$ = new Subject();
this._onOpen = new EventEmitter();
this._onClose = new EventEmitter();
this._hoursPos = new Set();
this._minutesPos = new Set();
this._secondsPos = new Set();
this._amPmPos = new Set();
this._onTouchedCallback = function () { };
this._onChangeCallback = function () { };
}
IgxTimePickerComponent_1 = IgxTimePickerComponent;
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: 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: function (value) {
if (this._isValueValid(value)) {
var oldVal = this._value;
this._value = value;
this._onChangeCallback(value);
var dispVal = this._formatTime(this.value, this.format);
if (this.mode === InteractionMode.DropDown && this._displayValue !== dispVal) {
this.displayValue = dispVal;
}
var args = {
oldValue: oldVal,
newValue: value
};
this.onValueChanged.emit(args);
}
else {
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: function () {
return this._resourceStrings;
},
/**
* An accessor that sets the resource strings.
* By default it uses EN resources.
*/
set: 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: function () {
if (this._okButtonLabel === null) {
return this.resourceStrings.igx_time_picker_ok;
}
return this._okButtonLabel;
},
/**
* 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: function (value) {
this._okButtonLabel = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "cancelButtonLabel", {
/**
* An accessor that returns the label of cancel button.
*/
get: function () {
if (this._cancelButtonLabel === null) {
return this.resourceStrings.igx_time_picker_cancel;
}
return this._cancelButtonLabel;
},
/**
* 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: function (value) {
this._cancelButtonLabel = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "itemsDelta", {
get: function () {
return this._itemsDelta;
},
/**
* 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, seconds: 1}`
* ```html
*<igx-time-picker [itemsDelta]="{hours:3, minutes:5, seconds:10}" id="time-picker"></igx-time-picker>
*```
*/
set: function (value) {
this._itemsDelta = __assign({ hours: 1, minutes: 1, seconds: 1 }, 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>
* `s` : seconds field without leading zero <br>
* `ss` : seconds 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: function () {
return this._format || 'hh:mm tt';
},
set: function (formatValue) {
this._format = formatValue;
this.mask = this._format.indexOf('tt') !== -1 ? '00:00:00 LL' : '00:00:00';
if (!this.showHoursList || !this.showMinutesList) {
this.trimMask();
}
if (!this.showSecondsList) {
this.trimMask();
}
if (this.displayValue) {
this.displayValue = this._formatTime(this.value, this._format);
}
this.determineCursorPos();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "overlaySettings", {
get: function () {
return this._overlaySettings ? this._overlaySettings :
(this.mode === InteractionMode.Dialog ? this._dialogOverlaySettings : this._dropDownOverlaySettings);
},
/**
* An @Input property that allows you to modify overlay positioning, interaction and scroll behavior.
* ```typescript
* const settings: OverlaySettings = {
* closeOnOutsideClick: true,
* modal: false
* }
* ```
* ---
* ```html
* <igx-time-picker [overlaySettings]="settings"></igx-time-picker>
* ```
* @memberof IgxTimePickerComponent
*/
set: function (value) {
this._overlaySettings = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "onOpen", {
/**
* @deprecated Use 'onOpened' instead.
* 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>
* ```
*/
get: function () {
return this._onOpen;
},
set: function (val) {
this._onOpen = val;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "onClose", {
/**
* @deprecated Use 'onClosed' instead.
* Emitted when a timePicker is being closed.
*/
get: function () {
return this._onClose;
},
set: function (val) {
this._onClose = val;
},
enumerable: true,
configurable: true
});
IgxTimePickerComponent.prototype.trimMask = function () {
this.mask = this.mask.slice(this.mask.indexOf(':') + 1, this.mask.length);
};
Object.defineProperty(IgxTimePickerComponent.prototype, "mask", {
/**
* @hidden
*/
get: function () {
return this._mask || '00:00 LL';
},
set: function (val) {
this._mask = val;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "displayValue", {
/**
* @hidden
*/
get: function () {
if (this._displayValue === undefined) {
return this._formatTime(this.value, this.format);
}
return this._displayValue;
},
set: 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: function () {
if (this.value) {
return this._formatTime(this.value, this.format);
}
return '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "hourView", {
/**
* @hidden
*/
get: function () {
return this._hourView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "minuteView", {
/**
* @hidden
*/
get: function () {
return this._minuteView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "secondsView", {
/**
* @hidden
*/
get: function () {
return this._secondsView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "ampmView", {
/**
* @hidden
*/
get: function () {
return this._ampmView;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "showClearButton", {
/**
* @hidden
*/
get: function () {
return (this.displayValue && this.displayValue !== this.parseMask(false)) || this.isNotEmpty;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "showHoursList", {
/**
* @hidden
*/
get: function () {
return this.format.indexOf('h') !== -1 || this.format.indexOf('H') !== -1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "showMinutesList", {
/**
* @hidden
*/
get: function () {
return this.format.indexOf('m') !== -1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "showSecondsList", {
/**
* @hidden
*/
get: function () {
return this.format.indexOf('s') !== -1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "showAmPmList", {
/**
* @hidden
*/
get: function () {
return this.format.indexOf('t') !== -1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "validSecondsEntries", {
/**
* @hidden
*/
get: function () {
var secondsEntries = [];
for (var i = 0; i < 60; i++) {
secondsEntries.push(i);
}
return secondsEntries;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxTimePickerComponent.prototype, "validMinuteEntries", {
/**
* @hidden
*/
get: function () {
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: function () {
var hourEntries = [];
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: 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: function () {
var _this = this;
return {
value: this.value,
displayTime: this.displayTime,
displayValue: this.displayValue,
openDialog: function (target) { return _this.openDialog(target); }
};
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxTimePickerComponent.prototype.ngOnInit = function () {
this._generateHours();
this._generateMinutes();
this._generateSeconds();
if (this.format.indexOf('tt') !== -1) {
this._generateAmPm();
}
this._dropDownOverlaySettings = {
modal: false,
closeOnOutsideClick: true,
scrollStrategy: new AbsoluteScrollStrategy(),
positionStrategy: new AutoPositionStrategy()
};
this._dialogOverlaySettings = {};
};
/**
* @hidden
*/
IgxTimePickerComponent.prototype.ngAfterViewInit = 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.toggleRef && this.group) {
this.toggleRef.element.style.width = this.group.element.nativeElement.getBoundingClientRect().width + 'px';
}
if (this.toggleRef) {
this.toggleRef.onClosed.pipe(takeUntil(this._destroy$)).subscribe(function () {
if (_this.mode === InteractionMode.DropDown) {
_this._onDropDownClosed();
}
_this.onClosed.emit(_this);
// TODO: remove this line after deprecating 'onClose'
_this._onClose.emit(_this);
});
this.toggleRef.onOpened.pipe(takeUntil(this._destroy$)).subscribe(function () {
_this.onOpened.emit(_this);
// TODO: remove this line after deprecating 'onOpen'
_this._onOpen.emit(_this);
});
this.toggleRef.onClosing.pipe(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();
}
});
this.determineCursorPos();
}
};
/**
* @hidden
*/
IgxTimePickerComponent.prototype.ngOnDestroy = function () {
this._destroy$.next(true);
this._destroy$.complete();
};
/**
* @hidden
*/
IgxTimePickerComponent.prototype.onKeydownSpace = function (event) {
this.openDialog(this.getInputGroupElement());
event.preventDefault();
};
/**
* @hidden
*/
IgxTimePickerComponent.prototype.onAltArrowDown = function () {
this.openDialog(this.getInputGroupElement());
};
IgxTimePickerComponent.prototype.determineCursorPos = function () {
var e_1, _a;
this.clearCursorPos();
try {
for (var _b = __values(this.format), _c = _b.next(); !_c.done; _c = _b.next()) {
var char = _c.value;
switch (char) {
case 'H':
case 'h':
this._hoursPos.size === 0 ? this._hoursPos.add(this.format.indexOf(char)) :
this._hoursPos.add(this.format.lastIndexOf(char));
this._hoursPos.add(this.format.lastIndexOf(char) + 1);
break;
case 'M':
case 'm':
this._minutesPos.size === 0 ? this._minutesPos.add(this.format.indexOf(char)) :
this._minutesPos.add(this.format.lastIndexOf(char));
this._minutesPos.add(this.format.lastIndexOf(char) + 1);
break;
case 'S':
case 's':
this._secondsPos.size === 0 ? this._secondsPos.add(this.format.indexOf(char)) :
this._secondsPos.add(this.format.lastIndexOf(char));
this._secondsPos.add(this.format.lastIndexOf(char) + 1);
break;
case 'T':
case 't':
this._amPmPos.size === 0 ? this._amPmPos.add(this.format.indexOf(char)) :
this._amPmPos.add(this.format.lastIndexOf(char));
this._amPmPos.add(this.format.lastIndexOf(char) + 1);
break;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
};
IgxTimePickerComponent.prototype.clearCursorPos = function () {
var _this = this;
this._hoursPos.forEach(function (v) { return _this._hoursPos.delete(v); });
this._minutesPos.forEach(function (v) { return _this._minutesPos.delete(v); });
this._secondsPos.forEach(function (v) { return _this._secondsPos.delete(v); });
this._amPmPos.forEach(function (v) { return _this._amPmPos.delete(v); });
};
IgxTimePickerComponent.prototype._scrollItemIntoView = function (item, items, selectedItem, isListLoop, viewType) {
var itemIntoView;
if (items) {
var index = (item === 'AM' || item === 'PM') ? items.indexOf(item) : items.indexOf(parseInt(item, 10));
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;
};
IgxTimePickerComponent.prototype._viewToString = 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;
};
IgxTimePickerComponent.prototype._itemToString = function (item, viewType) {
if (item === null) {
item = '';
}
else if (viewType && typeof (item) !== 'string') {
var leadZeroHour = (item < 10 && (this.format.indexOf('hh') !== -1 || this.format.indexOf('HH') !== -1));
var leadZeroMinute = (item < 10 && this.format.indexOf('mm') !== -1);
var leadZeroSeconds = (item < 10 && this.format.indexOf('ss') !== -1);
var leadZero = {
hour: leadZeroHour,
minute: leadZeroMinute,
seconds: leadZeroSeconds
}[viewType];
item = (leadZero) ? '0' + item : "" + item;
}
return item;
};
IgxTimePickerComponent.prototype._prevItem = function (items, selectedItem, isListLoop, viewType) {
var selectedIndex = items.indexOf(parseInt(selectedItem, 10));
var itemsCount = items.length;
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
};
};
IgxTimePickerComponent.prototype._nextItem = function (items, selectedItem, isListLoop, viewType) {
var selectedIndex = items.indexOf(parseInt(selectedItem, 10));
var itemsCount = items.length;
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
};
};
IgxTimePickerComponent.prototype._formatTime = function (value, format) {
if (!value) {
return '';
}
else {
var hour = value.getHours();
var formattedSeconds = void 0, formattedMinute = void 0, formattedHour = void 0;
var minute = value.getMinutes();
var seconds = value.getSeconds();
var amPM = (hour > 11) ? 'PM' : 'AM';
if (format.indexOf('h') !== -1) {
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;
formattedSeconds = seconds < 10 && format.indexOf('ss') !== -1 ? '0' + seconds : "" + seconds;
return format.replace('hh', formattedHour).replace('h', formattedHour)
.replace('HH', formattedHour).replace('H', formattedHour)
.replace('mm', formattedMinute).replace('m', formattedMinute)
.replace('ss', formattedSeconds).replace('s', formattedSeconds)
.replace('tt', amPM);
}
};
IgxTimePickerComponent.prototype._updateHourView = function (start, end) {
this._hourView = this._viewToString(this._hourItems.slice(start, end), 'hour');
};
IgxTimePickerComponent.prototype._updateMinuteView = function (start, end) {
this._minuteView = this._viewToString(this._minuteItems.slice(start, end), 'minute');
};
IgxTimePickerComponent.prototype._updateSecondsView = function (start, end) {
this._secondsView = this._viewToString(this._secondsItems.slice(start, end), 'seconds');
};
IgxTimePickerComponent.prototype._updateAmPmView = function (start, end) {
this._ampmView = this._ampmItems.slice(start, end);
};
IgxTimePickerComponent.prototype._addEmptyItems = function (items) {
for (var i = 0; i < 3; i++) {
items.push(null);
}
};
IgxTimePickerComponent.prototype._generateHours = function () {
var hourItemsCount = 24;
if (this.format.indexOf('h') !== -1) {
hourItemsCount = 13;
}
hourItemsCount /= this.itemsDelta.hours;
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);
}
};
IgxTimePickerComponent.prototype._generateMinutes = function () {
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);
}
};
IgxTimePickerComponent.prototype._generateSeconds = function () {
var secondsItemsCount = 60 / this.itemsDelta.seconds;
if (secondsItemsCount < 7 || !this.isSpinLoop) {
this._addEmptyItems(this._secondsItems);
this._isSecondsListLoop = false;
}
for (var i = 0; i < secondsItemsCount; i++) {
this._secondsItems.push(i * this.itemsDelta.seconds);
}
if (secondsItemsCount < 7 || !this.isSpinLoop) {
this._addEmptyItems(this._secondsItems);
}
};
IgxTimePickerComponent.prototype._generateAmPm = function () {
this._addEmptyItems(this._ampmItems);
this._ampmItems.push('AM');
this._ampmItems.push('PM');
this._addEmptyItems(this._ampmItems);
};
IgxTimePickerComponent.prototype._getSelectedTime = function () {
var date = this.value ? new Date(this.value) : new Date();
if (this.selectedHour) {
date.setHours(parseInt(this.selectedHour, 10));
}
if (this.selectedMinute) {
date.setMinutes(parseInt(this.selectedMinute, 10));
}
if (this.selectedSeconds) {
date.setSeconds(parseInt(this.selectedSeconds, 10));
}
if (((this.showHoursList && this.selectedHour !== '12') || (!this.showHoursList && this.selectedHour <= '11')) &&
this.selectedAmPm === 'PM') {
date.setHours(date.getHours() + 12);
}
if (!this.showHoursList && this.selectedAmPm === 'AM' && this.selectedHour > '11') {
date.setHours(date.getHours() - 12);
}
if (this.selectedAmPm === 'AM' && this.selectedHour === '12') {
date.setHours(0);
}
return date;
};
IgxTimePickerComponent.prototype._convertMinMaxValue = function (value) {
var date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();
var sections = value.split(/[\s:]+/);
var hour, minutes, seconds, amPM;
date.setSeconds(0);
if (this.showHoursList) {
hour = sections[0];
date.setHours(parseInt(hour, 10));
}
if (this.showMinutesList) {
minutes = this.showHoursList ? sections[1] : sections[0];
date.setMinutes(parseInt(minutes, 10));
}
if (this.showSecondsList) {
seconds = sections[sections.length - (this.showAmPmList ? 2 : 1)];
date.setSeconds(parseInt(seconds, 10));
}
if (this.showAmPmList) {
amPM = sections[sections.length - 1];
if (((this.showHoursList && date.getHours().toString() !== '12') ||
(!this.showHoursList && date.getHours().toString() <= '11')) && amPM === 'PM') {
date.setHours(date.getHours() + 12);
}
if (!this.showHoursList && amPM === 'AM' && date.getHours().toString() > '11') {
date.setHours(date.getHours() - 12);
}
if (this.showHoursList && date.getHours() === 12 && amPM === 'AM') {
date.setHours(0);
}
}
return date;
};
IgxTimePickerComponent.prototype._isValueValid = 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;
}
};
IgxTimePickerComponent.prototype._isEntryValid = function (val) {
var validH = true;
var validM = true;
var validS = true;
var sections = val.split(/[\s:]+/);
var re = new RegExp(this.promptChar, 'g');
if (this.showHoursList) {
validH = this.validHourEntries.indexOf(parseInt(sections[0].replace(re, ''), 10)) !== -1;
}
if (this.showMinutesList) {
var minutes = this.showHoursList ? sections[1] : sections[0];
validM = this.validMinuteEntries.indexOf(parseInt(minutes.replace(re, ''), 10)) !== -1;
}
if (this.showSecondsList) {
var seconds = sections[sections.length - (this.showAmPmList ? 2 : 1)];
validS = this.validSecondsEntries.indexOf(parseInt(seconds.replace(re, ''), 10)) !== -1;
}
return validH && validM && validS;
};
IgxTimePickerComponent.prototype._getCursorPosition = function () {
return this.input.nativeElement.selectionStart;
};
IgxTimePickerComponent.prototype._setCursorPosition = function (start, end) {
if (end === void 0) { end = start; }
this.input.nativeElement.setSelectionRange(start, end);
};
IgxTimePickerComponent.prototype._updateEditableInput = function () {
if (this.mode === InteractionMode.DropDown) {
this.displayValue = this._formatTime(this._getSelectedTime(), this.format);
}
};
IgxTimePickerComponent.prototype._spinHours = function (currentVal, minVal, maxVal, hDelta, sign) {
var oldVal = new Date(currentVal);
currentVal.setMinutes(sign * hDelta);
if (currentVal.getDate() !== oldVal.getDate() && this.isSpinLoop) {
currentVal.setDate(oldVal.getDate());
}
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;
}
};
IgxTimePickerComponent.prototype._spinMinutes = function (currentVal, mDelta, sign) {
var minutes = currentVal.getMinutes() + (sign * mDelta);
if (minutes < 0 || minutes >= 60) {
minutes = this.isSpinLoop ? minutes - (sign * 60) : currentVal.getMinutes();
}
currentVal.setMinutes(minutes);
return currentVal;
};
IgxTimePickerComponent.prototype._spinSeconds = function (currentVal, sDelta, sign) {
var seconds = currentVal.getSeconds() + (sign * sDelta);
if (seconds < 0 || seconds >= 60) {
seconds = this.isSpinLoop ? seconds - (sign * 60) : currentVal.getSeconds();
}
currentVal.setSeconds(seconds);
return currentVal;
};
IgxTimePickerComponent.prototype._initializeContainer = function () {
var _this = this;
if (this.value) {
var formttedTime = this._formatTime(this.value, this.format);
var sections = formttedTime.split(/[\s:]+/);
if (this.showHoursList) {
this.selectedHour = sections[0];
}
if (this.showMinutesList) {
this.selectedMinute = this.showHoursList ? sections[1] : sections[0];
}
if (this.showSecondsList) {
this.selectedSeconds = sections[sections.length - (this.showAmPmList ? 2 : 1)];
}
if (this.showAmPmList && this._ampmItems !== null) {
this.selectedAmPm = sections[sections.length - 1];
}
}
if (this.selectedHour === undefined) {
this.selectedHour = !this.showHoursList && this.value ? this.value.getHours().toString() :
this.showHoursList ? "" + this._hourItems[3] : '0';
}
if (this.selectedMinute === undefined) {
this.selectedMinute = !this.showMinutesList && this.value ? this.value.getMinutes().toString() : '0';
}
if (this.selectedSeconds === undefined) {
this.selectedSeconds = !this.showSecondsList && this.value ? this.value.getSeconds().toString() : '0';
}
if (this.selectedAmPm === undefined && this._ampmItems !== null) {
this.selectedAmPm = this._ampmItems[3];
}
this._prevSelectedHour = this.selectedHour;
this._prevSelectedMinute = this.selectedMinute;
this._prevSelectedSeconds = this.selectedSeconds;
this._prevSelectedAmPm = this.selectedAmPm;
this._onTouchedCallback();
this._updateHourView(0, ITEMS_COUNT);
this._updateMinuteView(0, ITEMS_COUNT);
this._updateSecondsView(0, ITEMS_COUNT);
this._updateAmPmView(0, ITEMS_COUNT);
if (this.selectedHour) {
this.scrollHourIntoView(this.selectedHour);
}
if (this.selectedMinute) {
this.scrollMinuteIntoView(this.selectedMinute);
}
if (this.selectedSeconds) {
this.scrollSecondsIntoView(this.selectedSeconds);
}
if (this.selectedAmPm) {
this.scrollAmPmIntoView(this.selectedAmPm);
}
requestAnimationFrame(function () {
if (_this.hourList) {
_this.hourList.nativeElement.focus();
}
else if (_this.minuteList) {
_this.minuteList.nativeElement.focus();
}
else if (_this.secondsList) {
_this.secondsList.nativeElement.focus();
}
});
};
IgxTimePickerComponent.prototype._onDropDownClosed = function () {
var oldValue = this.value;
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));
var args = {
timePicker: this,
currentValue: newVal,
setThroughUI: true
};
this.onValidationFailed.emit(args);
}
};
/**
* @hidden
*/
IgxTimePickerComponent.prototype.getEditElement = function () {
return this._input ? this._input.nativeElement : null;
};
/**
* @hidden
*/
IgxTimePickerComponent.prototype.getInputGroupElement = function () {
return this.group ? this.group.element.nativeElement : null;
};
/**
* @hidden
*/
IgxTimePickerComponent.prototype.writeValue = 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
*/
IgxTimePickerComponent.prototype.registerOnChange = function (fn) { this._onChangeCallback = fn; };
/**
*@hidden
*/
IgxTimePickerComponent.prototype.setDisabledState = function (isDisabled) { this.disabled = isDisabled; };
/**
* @hidden
*/
IgxTimePickerComponent.prototype.registerOnTouched = function (fn) { this._onTouchedCallback = fn; };
/**
* opens the dialog.
* @param target HTMLElement - the target element to use for positioning the drop down container according to
* ```html
* <igx-time-picker [value]="date" mode="dropdown" #retemplated>
* <ng-template igxTimePickerTemplate let-openDialog="openDialog"
* let-displayTime="displayTime">
* <igx-input-group>
* <input #dropDownTarget igxInput [value]="displayTime" />
* <igx-suffix (click)="openDialog(dropDownTarget)">
* <igx-icon>alarm</igx-icon>
* </igx-suffix>