ngx-material-timepicker-decon
Version:
Handy material design timepicker for angular DECONied
1,272 lines (1,260 loc) • 110 kB
JavaScript
import { BehaviorSubject, Subject, merge } from 'rxjs';
import { filter } from 'rxjs/operators';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { __extends, __assign, __read } from 'tslib';
import { animate, style, transition, trigger, sequence } from '@angular/animations';
import { DateTime } from 'luxon';
import { DomSanitizer } from '@angular/platform-browser';
import { DOCUMENT, CommonModule } from '@angular/common';
import { EventEmitter, Injectable, Directive, ElementRef, Inject, Input, Optional, HostListener, Pipe, Component, Output, ViewEncapsulation, ContentChild, ChangeDetectionStrategy, ViewChild, NgModule, forwardRef, defineInjectable } from '@angular/core';
import Keyboard from 'simple-keyboard';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var TimePeriod = {
AM: 'AM',
PM: 'PM',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var TimeFormat = {
TWELVE: 'hh:mm a',
TWELVE_SHORT: 'h:m a',
TWENTY_FOUR: 'HH:mm',
TWENTY_FOUR_SHORT: 'H:m',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} time
* @param {?} compareWith
* @param {?=} unit
* @return {?}
*/
function isSameOrAfter(time, compareWith, unit) {
if (unit === void 0) { unit = 'minutes'; }
if (unit === 'hours') {
return time.hour >= compareWith.hour;
}
if (unit === 'minutes') {
return time.hasSame(compareWith, unit) || time.valueOf() > compareWith.valueOf();
}
}
/**
* @param {?} time
* @param {?} compareWith
* @param {?=} unit
* @return {?}
*/
function isSameOrBefore(time, compareWith, unit) {
if (unit === void 0) { unit = 'minutes'; }
if (unit === 'hours') {
return time.hour <= compareWith.hour;
}
if (unit === 'minutes') {
return time.hasSame(compareWith, unit) || time.valueOf() <= compareWith.valueOf();
}
}
/**
* @param {?} time
* @param {?} before
* @param {?} after
* @param {?=} unit
* @return {?}
*/
function isBetween(time, before, after, unit) {
if (unit === void 0) { unit = 'minutes'; }
if (unit === 'hours') {
return isSameOrBefore(time, after, unit) && isSameOrAfter(time, before, unit);
}
if (unit === 'minutes') {
return isSameOrBefore(time, after) && isSameOrAfter(time, before);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// @dynamic
var
// @dynamic
TimeAdapter = /** @class */ (function () {
function TimeAdapter() {
}
/**
* @param {?} time
* @param {?=} format
* @return {?}
*/
TimeAdapter.parseTime = /**
* @param {?} time
* @param {?=} format
* @return {?}
*/
function (time, format) {
if (format === void 0) { format = 12; }
if (time.indexOf(':') === -1) {
return 'Invalid time';
}
/** @type {?} */
var period = time.trim().substr(time.length - 2).toUpperCase();
/** @type {?} */
var isPeriodValid = period === TimePeriod.AM || period === TimePeriod.PM;
var _a = __read(time.split(':'), 2), h = _a[0], m = _a[1];
if (format === 24) {
/** @type {?} */
var formattedHours = isPeriodValid ? this.formatHour(+h, 12, (/** @type {?} */ (period))) : +h;
return formattedHours + ":" + parseInt(m, 10);
}
/** @type {?} */
var isPM = +h > 12;
/** @type {?} */
var hours = isPM ? +h - 12 : +h;
period = isPeriodValid ? period : isPM ? TimePeriod.PM : TimePeriod.AM;
return hours + ":" + parseInt(m, 10) + " " + period;
};
/**
* @param {?} time
* @param {?=} format
* @return {?}
*/
TimeAdapter.formatTime = /**
* @param {?} time
* @param {?=} format
* @return {?}
*/
function (time, format) {
if (format === void 0) { format = 12; }
/** @type {?} */
var timeFormat = (format === 24) ? TimeFormat.TWENTY_FOUR : TimeFormat.TWELVE;
/** @type {?} */
var timeMask = (format === 24) ? TimeFormat.TWENTY_FOUR_SHORT : TimeFormat.TWELVE_SHORT;
return DateTime.fromFormat(this.parseTime(time, format), timeMask).toFormat(timeFormat).toLowerCase();
};
/**
* @param {?} time
* @param {?=} format
* @return {?}
*/
TimeAdapter.convertTimeToDateTime = /**
* @param {?} time
* @param {?=} format
* @return {?}
*/
function (time, format) {
if (format === void 0) { format = 12; }
/** @type {?} */
var timeMask = (format === 24) ? TimeFormat.TWENTY_FOUR_SHORT : TimeFormat.TWELVE_SHORT;
return DateTime.fromFormat(this.parseTime(time, format), timeMask);
};
/**
* @param {?} time
* @param {?=} min
* @param {?=} max
* @param {?=} granularity
* @param {?=} minutesGap
* @param {?=} format
* @return {?}
*/
TimeAdapter.isTimeAvailable = /**
* @param {?} time
* @param {?=} min
* @param {?=} max
* @param {?=} granularity
* @param {?=} minutesGap
* @param {?=} format
* @return {?}
*/
function (time, min, max, granularity, minutesGap, format) {
if (!time) {
return;
}
/** @type {?} */
var convertedTime = this.convertTimeToDateTime(time, format);
/** @type {?} */
var minutes = convertedTime.minute;
if (minutesGap && (minutes % minutesGap !== 0)) {
throw new Error("Your minutes - " + minutes + " doesn't match your minutesGap - " + minutesGap);
}
/** @type {?} */
var isAfter = (min && !max)
&& isSameOrAfter(convertedTime, min, granularity);
/** @type {?} */
var isBefore = (max && !min)
&& isSameOrBefore(convertedTime, max, granularity);
/** @type {?} */
var between = (min && max)
&& isBetween(convertedTime, min, max, granularity);
/** @type {?} */
var isAvailable = !min && !max;
return isAfter || isBefore || between || isAvailable;
};
/***
* Format hour according to time format (12 or 24)
*/
/**
*
* Format hour according to time format (12 or 24)
* @param {?} currentHour
* @param {?} format
* @param {?} period
* @return {?}
*/
TimeAdapter.formatHour = /**
*
* Format hour according to time format (12 or 24)
* @param {?} currentHour
* @param {?} format
* @param {?} period
* @return {?}
*/
function (currentHour, format, period) {
if (format === 24) {
return currentHour;
}
/** @type {?} */
var hour = period === TimePeriod.AM ? currentHour : currentHour + 12;
if (period === TimePeriod.AM && hour === 12) {
return 0;
}
else if (period === TimePeriod.PM && hour === 24) {
return 12;
}
return hour;
};
return TimeAdapter;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DEFAULT_HOUR = {
time: 12,
angle: 360
};
/** @type {?} */
var DEFAULT_MINUTE = {
time: 0,
angle: 360
};
var NgxMaterialTimepickerService = /** @class */ (function () {
function NgxMaterialTimepickerService() {
this.hourSubject = new BehaviorSubject(DEFAULT_HOUR);
this.minuteSubject = new BehaviorSubject(DEFAULT_MINUTE);
this.periodSubject = new BehaviorSubject(TimePeriod.AM);
this.keyboardClick = new EventEmitter();
}
Object.defineProperty(NgxMaterialTimepickerService.prototype, "hour", {
set: /**
* @param {?} hour
* @return {?}
*/
function (hour) {
this.hourSubject.next(hour);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedHour", {
get: /**
* @return {?}
*/
function () {
return this.hourSubject.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "minute", {
set: /**
* @param {?} minute
* @return {?}
*/
function (minute) {
this.minuteSubject.next(minute);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedMinute", {
get: /**
* @return {?}
*/
function () {
return this.minuteSubject.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "period", {
set: /**
* @param {?} period
* @return {?}
*/
function (period) {
/** @type {?} */
var isPeriodValid = (period === TimePeriod.AM) || (period === TimePeriod.PM);
if (isPeriodValid) {
this.periodSubject.next(period);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedPeriod", {
get: /**
* @return {?}
*/
function () {
return this.periodSubject.asObservable();
},
enumerable: true,
configurable: true
});
/**
* @param {?} time
* @param {?} min
* @param {?} max
* @param {?} format
* @param {?=} minutesGap
* @return {?}
*/
NgxMaterialTimepickerService.prototype.setDefaultTimeIfAvailable = /**
* @param {?} time
* @param {?} min
* @param {?} max
* @param {?} format
* @param {?=} minutesGap
* @return {?}
*/
function (time, min, max, format, minutesGap) {
/* Workaround to double error message*/
try {
if (TimeAdapter.isTimeAvailable(time, min, max, 'minutes', minutesGap)) {
this.setDefaultTime(TimeAdapter.formatTime(time, format), format);
}
}
catch (e) {
console.error(e);
}
};
/**
* @param {?} format
* @return {?}
*/
NgxMaterialTimepickerService.prototype.getFullTime = /**
* @param {?} format
* @return {?}
*/
function (format) {
/** @type {?} */
var hour = this.hourSubject.getValue().time;
/** @type {?} */
var minute = this.minuteSubject.getValue().time;
/** @type {?} */
var period = format === 12 ? this.periodSubject.getValue() : '';
return TimeAdapter.formatTime(hour + ":" + minute + " " + period, format);
};
/**
* @private
* @param {?} time
* @param {?} format
* @return {?}
*/
NgxMaterialTimepickerService.prototype.setDefaultTime = /**
* @private
* @param {?} time
* @param {?} format
* @return {?}
*/
function (time, format) {
/** @type {?} */
var defaultTime = TimeAdapter.convertTimeToDateTime(time, format).toJSDate();
if (DateTime.fromJSDate(defaultTime).isValid) {
/** @type {?} */
var period = time.substr(time.length - 2).toUpperCase();
/** @type {?} */
var hour = defaultTime.getHours();
this.hour = __assign({}, DEFAULT_HOUR, { time: formatHourByPeriod(hour, (/** @type {?} */ (period))) });
this.minute = __assign({}, DEFAULT_MINUTE, { time: defaultTime.getMinutes() });
this.period = (/** @type {?} */ (period));
}
else {
this.resetTime();
}
};
/**
* @private
* @return {?}
*/
NgxMaterialTimepickerService.prototype.resetTime = /**
* @private
* @return {?}
*/
function () {
this.hour = __assign({}, DEFAULT_HOUR);
this.minute = __assign({}, DEFAULT_MINUTE);
this.period = TimePeriod.AM;
};
NgxMaterialTimepickerService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */ NgxMaterialTimepickerService.ngInjectableDef = defineInjectable({ factory: function NgxMaterialTimepickerService_Factory() { return new NgxMaterialTimepickerService(); }, token: NgxMaterialTimepickerService, providedIn: "root" });
return NgxMaterialTimepickerService;
}());
/**
*
* Format hour in 24hours format to meridian (AM or PM) format
* @param {?} hour
* @param {?} period
* @return {?}
*/
function formatHourByPeriod(hour, period) {
switch (period) {
case TimePeriod.AM:
return hour === 0 ? 12 : hour;
case TimePeriod.PM:
return hour === 12 ? 12 : hour - 12;
default:
return hour;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
var TimeUnit = {
HOUR: 0,
MINUTE: 1,
};
TimeUnit[TimeUnit.HOUR] = 'HOUR';
TimeUnit[TimeUnit.MINUTE] = 'MINUTE';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxMaterialTimepickerEventService = /** @class */ (function () {
function NgxMaterialTimepickerEventService() {
this.backdropClickSubject = new Subject();
this.keydownEventSubject = new Subject();
}
Object.defineProperty(NgxMaterialTimepickerEventService.prototype, "backdropClick", {
get: /**
* @return {?}
*/
function () {
return this.backdropClickSubject.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerEventService.prototype, "keydownEvent", {
get: /**
* @return {?}
*/
function () {
return this.keydownEventSubject.asObservable();
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
NgxMaterialTimepickerEventService.prototype.dispatchEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
switch (event.type) {
case 'click':
this.backdropClickSubject.next((/** @type {?} */ (event)));
break;
case 'keydown':
this.keydownEventSubject.next((/** @type {?} */ (event)));
break;
default:
throw new Error('no such event type');
}
};
NgxMaterialTimepickerEventService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */ NgxMaterialTimepickerEventService.ngInjectableDef = defineInjectable({ factory: function NgxMaterialTimepickerEventService_Factory() { return new NgxMaterialTimepickerEventService(); }, token: NgxMaterialTimepickerEventService, providedIn: "root" });
return NgxMaterialTimepickerEventService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var AnimationState = {
ENTER: 'enter',
LEAVE: 'leave',
};
/** @enum {number} */
var KeyboardTypes = {
'NUMPAD': 0,
'CLOCK': 1,
};
KeyboardTypes[KeyboardTypes['NUMPAD']] = 'NUMPAD';
KeyboardTypes[KeyboardTypes['CLOCK']] = 'CLOCK';
/** @type {?} */
var ESCAPE = 27;
var NgxMaterialTimepickerComponent = /** @class */ (function () {
function NgxMaterialTimepickerComponent(timepickerService, eventService) {
var _this = this;
this.timepickerService = timepickerService;
this.eventService = eventService;
this.timeUnit = TimeUnit;
this.activeTimeUnit = TimeUnit.HOUR;
this.isOpened = false;
this.keyboardTypes = KeyboardTypes;
this.isEsc = true;
this.keyboardType = KeyboardTypes.NUMPAD;
this.keyboardTypeChanged = new EventEmitter();
this.timeSet = new EventEmitter();
this.opened = new EventEmitter();
this.closed = new EventEmitter();
this.hourSelected = new EventEmitter();
this.subscriptions = [];
this.subscriptions.push(merge(this.eventService.backdropClick, this.eventService.keydownEvent.pipe(filter(function (e) { return e.keyCode === ESCAPE && _this.isEsc; })))
.subscribe(function () { return _this.close(); }));
}
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "minutesGap", {
get: /**
* @return {?}
*/
function () {
return this._minutesGap;
},
set: /**
* @param {?} gap
* @return {?}
*/
function (gap) {
if (gap == null) {
return;
}
gap = Math.floor(gap);
this._minutesGap = gap <= 59 ? gap : 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "defaultTime", {
set: /**
* @param {?} time
* @return {?}
*/
function (time) {
this.setDefaultTime(time);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgxMaterialTimepickerComponent.blurAll = /**
* @return {?}
*/
function () {
// const tmp = document.createElement('input');
// document.body.appendChild(tmp);
// tmp.focus();
// document.body.removeChild(tmp);
/** @type {?} */
var btn = document.querySelector('.hidden-button');
if (btn) {
btn.focus();
}
};
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "minTime", {
get: /**
* @return {?}
*/
function () {
return this.timepickerInput && this.timepickerInput.min;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "maxTime", {
get: /**
* @return {?}
*/
function () {
return this.timepickerInput && this.timepickerInput.max;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this.timepickerInput && this.timepickerInput.disabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "format", {
get: /**
* @return {?}
*/
function () {
return this.timepickerInput && this.timepickerInput.format;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.subscriptions.push(this.timepickerService.selectedHour
.subscribe(function (hour) { return _this.selectedHour = hour; }));
this.subscriptions.push(this.timepickerService.selectedMinute
.subscribe(function (minute) { return _this.selectedMinute = minute; }));
this.subscriptions.push(this.timepickerService.selectedPeriod
.subscribe(function (period) { return _this.selectedPeriod = period; }));
};
/**
* @param {?} type
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.changeKeyboardType = /**
* @param {?} type
* @return {?}
*/
function (type) {
this.keyboardType = type;
this.keyboardTypeChanged.emit(type);
};
/***
* Register an input with this timepicker.
* input - The timepicker input to register with this timepicker
*/
/**
*
* Register an input with this timepicker.
* input - The timepicker input to register with this timepicker
* @param {?} input
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.registerInput = /**
*
* Register an input with this timepicker.
* input - The timepicker input to register with this timepicker
* @param {?} input
* @return {?}
*/
function (input) {
if (this.timepickerInput) {
throw Error('A Timepicker can only be associated with a single input.');
}
this.timepickerInput = input;
};
/**
* @param {?} hour
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.onHourChange = /**
* @param {?} hour
* @return {?}
*/
function (hour) {
this.timepickerService.hour = hour;
};
/**
* @param {?} hour
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.onHourSelected = /**
* @param {?} hour
* @return {?}
*/
function (hour) {
this.changeTimeUnit(TimeUnit.MINUTE);
this.hourSelected.next(hour);
};
/**
* @param {?} minute
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.onMinuteChange = /**
* @param {?} minute
* @return {?}
*/
function (minute) {
this.timepickerService.minute = minute;
};
/**
* @param {?} period
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.changePeriod = /**
* @param {?} period
* @return {?}
*/
function (period) {
this.timepickerService.period = period;
};
/**
* @param {?} unit
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.changeTimeUnit = /**
* @param {?} unit
* @return {?}
*/
function (unit) {
this.activeTimeUnit = unit;
};
/**
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.setTime = /**
* @return {?}
*/
function () {
this.timeSet.next(this.timepickerService.getFullTime(this.format));
this.close();
};
/**
* @param {?} time
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.setDefaultTime = /**
* @param {?} time
* @return {?}
*/
function (time) {
this.timepickerService.setDefaultTimeIfAvailable(time, (/** @type {?} */ (this.minTime)), (/** @type {?} */ (this.maxTime)), this.format, this.minutesGap);
};
/**
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.open = /**
* @return {?}
*/
function () {
this.isOpened = true;
if (!this.disableAnimation) {
this.animationState = AnimationState.ENTER;
}
this.opened.next();
};
/**
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.close = /**
* @return {?}
*/
function () {
if (this.disableAnimation) {
this.closeTimepicker();
return;
}
this.animationState = AnimationState.LEAVE;
};
/**
* @param {?} event
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.animationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.phaseName === 'done' && event.toState === AnimationState.LEAVE) {
this.closeTimepicker();
}
};
/**
* @param {?} e
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.onKeydown = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.eventService.dispatchEvent(e);
e.stopPropagation();
};
/**
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
};
/**
* @private
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.closeTimepicker = /**
* @private
* @return {?}
*/
function () {
this.isOpened = false;
this.activeTimeUnit = TimeUnit.HOUR;
this.closed.next();
};
/**
* @param {?} k
* @return {?}
*/
NgxMaterialTimepickerComponent.prototype.numPadPressed = /**
* @param {?} k
* @return {?}
*/
function (k) {
NgxMaterialTimepickerComponent.blurAll();
this.timepickerService.keyboardClick.emit(new KeyboardEvent('keypress', (/** @type {?} */ ({
ctrlKey: true,
key: k,
charCode: k === 'Backspace' ? 46 : k.charCodeAt(0),
keyCode: k === 'Backspace' ? 46 : k.charCodeAt(0)
}))));
};
NgxMaterialTimepickerComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-material-timepicker',
template: "<div class=\"timepicker-backdrop-overlay\" *ngIf=\"isOpened\" [overlay]=\"preventOverlayClick\"></div>\n<div class=\"timepicker-overlay\" *ngIf=\"isOpened\">\n <div class=\"timepicker\" [@timepicker]=\"animationState\" (@timepicker.done)=\"animationDone($event)\">\n <header class=\"timepicker__header\">\n <button class=\"hidden-button\"></button>\n <button class=\"change-type-button\" *ngIf=\"keyboardType === keyboardTypes.NUMPAD\" (click)=\"changeKeyboardType(keyboardTypes.CLOCK)\">\n <i class=\"decontimepicker-clock\"></i>\n </button>\n <button class=\"change-type-button\" *ngIf=\"keyboardType === keyboardTypes.CLOCK\" (click)=\"changeKeyboardType(keyboardTypes.NUMPAD)\">\n <i class=\"decontimepicker-keypad\"></i>\n </button>\n <ngx-material-timepicker-dial [format]=\"format\" [hour]=\"selectedHour?.time\"\n [minute]=\"selectedMinute?.time\"\n [period]=\"selectedPeriod\" [activeTimeUnit]=\"activeTimeUnit\"\n [minTime]=\"minTime\" [maxTime]=\"maxTime\"\n [isEditable]=\"enableKeyboardInput\"\n [editableHintTmpl]=\"editableHintTmpl\"\n [minutesGap]=\"minutesGap\"\n (periodChanged)=\"changePeriod($event)\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (hourChanged)=\"onHourChange($event)\"\n (minuteChanged)=\"onMinuteChange($event)\"\n ></ngx-material-timepicker-dial>\n </header>\n <div class=\"timepicker__main-content\">\n <div *ngIf=\"keyboardType === keyboardTypes.CLOCK\">\n <div class=\"timepicker__body\" [ngSwitch]=\"activeTimeUnit\">\n <div *ngSwitchCase=\"timeUnit.HOUR\">\n <ngx-material-timepicker-24-hours-face *ngIf=\"format === 24;else ampmHours\"\n (hourChange)=\"onHourChange($event)\"\n [selectedHour]=\"selectedHour\"\n [minTime]=\"minTime\"\n [maxTime]=\"maxTime\"\n [format]=\"format\"\n (hourSelected)=\"onHourSelected($event)\"></ngx-material-timepicker-24-hours-face>\n <ng-template #ampmHours>\n <ngx-material-timepicker-12-hours-face\n (hourChange)=\"onHourChange($event)\"\n [selectedHour]=\"selectedHour\"\n [period]=\"selectedPeriod\"\n [minTime]=\"minTime\"\n [maxTime]=\"maxTime\"\n (hourSelected)=\"onHourSelected($event)\"></ngx-material-timepicker-12-hours-face>\n </ng-template>\n </div>\n <ngx-material-timepicker-minutes-face *ngSwitchCase=\"timeUnit.MINUTE\"\n [selectedMinute]=\"selectedMinute\"\n [selectedHour]=\"selectedHour?.time\"\n [minTime]=\"minTime\"\n [maxTime]=\"maxTime\"\n [format]=\"format\"\n [period]=\"selectedPeriod\"\n [minutesGap]=\"minutesGap\"\n (minuteChange)=\"onMinuteChange($event)\"></ngx-material-timepicker-minutes-face>\n </div>\n </div>\n <div *ngIf=\"keyboardType === keyboardTypes.NUMPAD\">\n <timepicker-numpad (keyPressed)=\"numPadPressed($event)\"></timepicker-numpad>\n </div>\n <div class=\"timepicker__actions\">\n <div (click)=\"close()\">\n <!--suppress HtmlUnknownAttribute -->\n <ng-container *ngTemplateOutlet=\"cancelBtnTmpl ? cancelBtnTmpl : cancelBtnDefault\"></ng-container>\n </div>\n <div (click)=\"setTime()\">\n <!--suppress HtmlUnknownAttribute -->\n <ng-container\n *ngTemplateOutlet=\"confirmBtnTmpl ? confirmBtnTmpl : confirmBtnDefault\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #cancelBtnDefault>\n <ngx-material-timepicker-button>Cancel</ngx-material-timepicker-button>\n</ng-template>\n<ng-template #confirmBtnDefault>\n <ngx-material-timepicker-button>Ok</ngx-material-timepicker-button>\n</ng-template>\n",
animations: [
trigger('timepicker', [
transition("* => " + AnimationState.ENTER, [
style({ transform: 'translateY(-30%)' }),
animate('0.2s ease-out', style({ transform: 'translateY(0)' }))
]),
transition(AnimationState.ENTER + " => " + AnimationState.LEAVE, [
style({ transform: 'translateY(0)', opacity: 1 }),
animate('0.2s ease-out', style({ transform: 'translateY(-30%)', opacity: 0 }))
])
])
],
providers: [NgxMaterialTimepickerService],
styles: [":host{--body-background-color:#fff;--primary-font-family:'Roboto',sans-serif;--button-color:deepskyblue;--dial-active-color:#fff;--dial-inactive-color:rgba(255, 255, 255, .5);--dial-background-color:deepskyblue;--clock-face-time-active-color:#fff;--clock-face-time-inactive-color:#6c6c6c;--clock-face-inner-time-inactive-color:#929292;--clock-face-time-disabled-color:#c5c5c5;--clock-face-background-color:#f0f0f0;--clock-hand-color:deepskyblue}@font-face{font-family:decontimepicker;src:url(../assets/icons/decontimepicker.eot);src:url(../assets/icons/decontimepicker.eot?#iefix) format(\"embedded-opentype\"),url(../assets/icons/decontimepicker.woff) format(\"woff\"),url(../assets/icons/decontimepicker.ttf) format(\"truetype\"),url(../assets/icons/decontimepicker.svg#decontimepicker) format(\"svg\");font-weight:400;font-style:normal}[class*=decontimepicker-]:before{display:inline-block;font-family:decontimepicker;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.decontimepicker-backspace:before{content:'\\0041'}.decontimepicker-clock:before{content:'\\0042'}.decontimepicker-keypad:before{content:'\\0043'}.timepicker-overlay::ng-deep [class*=decontimepicker-]:before{display:inline-block;font-family:decontimepicker;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.timepicker-overlay::ng-deep .decontimepicker-backspace:before{content:'\\0041'}.timepicker-overlay::ng-deep .decontimepicker-clock:before{content:'\\0042'}.timepicker-overlay::ng-deep .decontimepicker-keypad:before{content:'\\0043'}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"]{max-width:60px}.hidden-button{display:block;visibility:hidden;height:1px;width:1px;overflow:hidden;border:0;position:fixed;top:-1px;left:-1px}.timepicker-backdrop-overlay{position:fixed;top:0;bottom:0;right:0;left:0;background-color:rgba(0,0,0,.3);z-index:999;pointer-events:auto}.timepicker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:999;pointer-events:none}.timepicker{width:300px;border-radius:2px;box-shadow:rgba(0,0,0,.25) 0 14px 45px,rgba(0,0,0,.22) 0 10px 18px;outline:0;position:static;z-index:999;pointer-events:auto}.timepicker__header{color:#fff;padding:15px 30px;background-color:#00bfff}@supports (background-color:var(--dial-background-color)){.timepicker__header{background-color:var(--dial-background-color)}}.timepicker__body{padding:15px 5px;display:flex;justify-content:center;align-items:center;background-color:#fff}@supports (background-color:var(--body-background-color)){.timepicker__body{background-color:var(--body-background-color)}}.timepicker__actions{display:flex;justify-content:flex-end;padding:15px;background-color:#fff}@supports (background-color:var(--body-background-color)){.timepicker__actions{background-color:var(--body-background-color)}}@media (max-device-width:1023px) and (orientation:landscape){.timepicker{display:flex;width:515px}.timepicker__header{display:flex;align-items:center}.timepicker__main-content{display:flex;flex-direction:column;width:100%}.timepicker__actions{padding:5px;margin-top:-1px}}"]
}] }
];
/** @nocollapse */
NgxMaterialTimepickerComponent.ctorParameters = function () { return [
{ type: NgxMaterialTimepickerService },
{ type: NgxMaterialTimepickerEventService }
]; };
NgxMaterialTimepickerComponent.propDecorators = {
cancelBtnTmpl: [{ type: Input }],
editableHintTmpl: [{ type: Input }],
confirmBtnTmpl: [{ type: Input }],
isEsc: [{ type: Input, args: ['ESC',] }],
enableKeyboardInput: [{ type: Input }],
preventOverlayClick: [{ type: Input }],
disableAnimation: [{ type: Input }],
keyboardType: [{ type: Input }],
keyboardTypeChanged: [{ type: Output }],
minutesGap: [{ type: Input }],
defaultTime: [{ type: Input }],
timeSet: [{ type: Output }],
opened: [{ type: Output }],
closed: [{ type: Output }],
hourSelected: [{ type: Output }],
timepickerComponent: [{ type: ViewChild, args: ['timepickerww',] }],
onKeydown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
};
return NgxMaterialTimepickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/* To override a default toggle icon */
var NgxMaterialTimepickerToggleIconDirective = /** @class */ (function () {
function NgxMaterialTimepickerToggleIconDirective() {
}
NgxMaterialTimepickerToggleIconDirective.decorators = [
{ type: Directive, args: [{ selector: '[ngxMaterialTimepickerToggleIcon]' },] }
];
return NgxMaterialTimepickerToggleIconDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxMaterialTimepickerToggleComponent = /** @class */ (function () {
function NgxMaterialTimepickerToggleComponent() {
}
Object.defineProperty(NgxMaterialTimepickerToggleComponent.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled === undefined ? this.timepicker.disabled : this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._disabled = value;
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
NgxMaterialTimepickerToggleComponent.prototype.open = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.timepicker) {
this.timepicker.open();
event.stopPropagation();
}
};
NgxMaterialTimepickerToggleComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-material-timepicker-toggle',
template: "<button class=\"ngx-material-timepicker-toggle\" (click)=\"open($event)\" [disabled]=\"disabled\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" *ngIf=\"!customIcon\">\n <path\n d=\"M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 6 L 11 12.414062 L 15.292969 16.707031 L 16.707031 15.292969 L 13 11.585938 L 13 6 L 11 6 z\"/>\n </svg>\n\n <ng-content select=\"[ngxMaterialTimepickerToggleIcon]\"></ng-content>\n</button>\n",
styles: [".ngx-material-timepicker-toggle{display:flex;justify-content:center;align-items:center;padding:4px;background-color:transparent;border-radius:50%;text-align:center;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:background-color .3s;cursor:pointer}.ngx-material-timepicker-toggle:focus{background-color:rgba(0,0,0,.07)}"]
}] }
];
NgxMaterialTimepickerToggleComponent.propDecorators = {
timepicker: [{ type: Input, args: ['for',] }],
disabled: [{ type: Input }],
customIcon: [{ type: ContentChild, args: [NgxMaterialTimepickerToggleIconDirective,] }]
};
return NgxMaterialTimepickerToggleComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
// tslint:disable-next-line
useExisting: forwardRef(function () { return TimepickerDirective; }),
multi: true
};
var TimepickerDirective = /** @class */ (function () {
function TimepickerDirective(elementRef) {
this.elementRef = elementRef;
this._format = 12;
this._value = '';
this.timepickerSubscriptions = [];
this.onTouched = function () {
};
this.onChange = function () {
};
}
Object.defineProperty(TimepickerDirective.prototype, "format", {
get: /**
* @return {?}
*/
function () {
return this._format;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._format = value === 24 ? 24 : 12;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerDirective.prototype, "min", {
get: /**
* @return {?}
*/
function () {
return this._min;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (typeof value === 'string') {
this._min = TimeAdapter.convertTimeToDateTime(value, this._format);
return;
}
this._min = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerDirective.prototype, "max", {
get: /**
* @return {?}
*/
function () {
return this._max;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (typeof value === 'string') {
this._max = TimeAdapter.convertTimeToDateTime(value, this._format);
return;
}
this._max = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerDirective.prototype, "timepicker", {
set: /**
* @param {?} picker
* @return {?}
*/
function (picker) {
this.registerTimepicker(picker);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerDirective.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (!value) {
this._value = '';
this.updateInputValue();
return;
}
/** @type {?} */
var time = TimeAdapter.formatTime(value, this._format);
/** @type {?} */
var isAvailable = TimeAdapter.isTimeAvailable(time, (/** @type {?} */ (this._min)), (/** @type {?} */ (this._max)), 'minutes', this._timepicker.minutesGap, this._format);
if (isAvailable) {
this._value = time;
this.updateInputValue();
return;
}
console.warn('Selected time doesn\'t match min or max value');
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerDirective.prototype, "defaultTime", {
set: /**
* @private
* @param {?} time
* @return {?}
*/
function (time) {
this._timepicker.setDefaultTime(time);
},
enumerable: true,
configurable: true
});
/**
* @param {?} value
* @return {?}
*/
TimepickerDirective.prototype.onInput = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this.onChange(value);
};
/**
* @param {?} changes
* @return {?}
*/
TimepickerDirective.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes['value'] && changes['value'].currentValue) {
this.defaultTime = changes['value'].currentValue;
}
};
/**
* @param {?} event
* @return {?}
*/
TimepickerDirective.prototype.onClick = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.disableClick) {
this._timepicker.open();
event.stopPropagation();
}
};
/**
* @param {?} value
* @return {?}
*/
TimepickerDirective.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this.defaultTime = value;
};
/**
* @param {?} fn
* @return {?}
*/
TimepickerDirective.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
TimepickerDirective.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} isDisabled
* @return {?}
*/
TimepickerDirective.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* @return {?}
*/
TimepickerDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.timepickerSubscriptions.forEach(function (s) { return s.unsubscribe(); });
};
/**
* @private
* @param {?} picker
* @return {?}
*/
TimepickerDirective.prototype.registerTimepicker = /**
* @private
* @param {?} picker
* @return {?}
*/
function (picker) {
var _this = this;
if (picker) {
this._timepicker = picker;
this._timepicker.registerInput(this);
this.timepickerSubscriptions.push(this._timepicker.timeSet.subscribe(function (time) {
_this.value = time;
_this.onChange(_this._value);
_this.onTouched();
}));
this.timepickerSubscriptions.push(this._timepicker.closed.subscribe(function () { return _this.defaultTime = _this._value; }));
}
else {
throw new Error('NgxMaterialTimepickerComponent is not defined.' +
' Please make sure you passed the timepicker to ngxTimepicker directive');
}
};
/**
* @private
* @return {?}
*/
TimepickerDirective.prototype.updateInputValue = /**
* @private
* @return {?}
*/
function () {
this.elementRef.nativeElement.value = this.value;
};
TimepickerDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxTimepicker]',
providers: [VALUE_ACCESSOR],
host: {
'[disabled]': 'disabled',
'(input)': 'onInput($event.target.value)',
'(blur)': 'onTouched()',
},
},] }
];
/** @nocollapse */
TimepickerDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
TimepickerDirective.propDecorators = {
format: [{ type: Input }],
min: [{ type: Input }],
max: [{ type: Input }],
timepicker: [{ type: Input, args: ['ngxTimepicker',] }],
value: [{ type: Input }],
disabled: [{ type: Input }],
disableClick: [{ type: Input }],
onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
return TimepickerDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxMaterialTimepickerThemeDirective = /** @class */ (function () {
function NgxMaterialTimepickerThemeDirective(elementRef) {
this.element = elementRef.nativeElement;
}
/**
* @return {?}
*/
NgxMaterialTi