ngx-material-timepicker
Version:
Handy material design timepicker for angular
1,065 lines (1,047 loc) • 110 kB
JavaScript
import { __read, __assign, __decorate, __metadata, __extends, __param } from 'tslib';
import { ɵɵdefineInjectable, Injectable, Input, TemplateRef, Output, HostListener, Component, EventEmitter, Directive, ContentChild, forwardRef, ElementRef, ViewChild, ChangeDetectionStrategy, Pipe, Optional, Inject, NgModule } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
import { BehaviorSubject, Subject, merge } from 'rxjs';
import { DateTime } from 'luxon';
import { trigger, transition, style, animate, sequence } from '@angular/animations';
import { filter, takeUntil } from 'rxjs/operators';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
var TimePeriod;
(function (TimePeriod) {
TimePeriod["AM"] = "AM";
TimePeriod["PM"] = "PM";
})(TimePeriod || (TimePeriod = {}));
var TimeFormat;
(function (TimeFormat) {
TimeFormat["TWELVE"] = "hh:mm a";
TimeFormat["TWELVE_SHORT"] = "h:m a";
TimeFormat["TWENTY_FOUR"] = "HH:mm";
TimeFormat["TWENTY_FOUR_SHORT"] = "H:m";
})(TimeFormat || (TimeFormat = {}));
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();
}
}
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();
}
}
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);
}
}
function isDigit(e) {
// Allow: backspace, delete, tab, escape, enter
if ([46, 8, 9, 27, 13].some(function (n) { return n === e.keyCode; }) ||
// Allow: Ctrl/cmd+A
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+C
(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+X
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, up, down
(e.keyCode >= 35 && e.keyCode <= 40)) {
return true;
}
return !((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105));
}
// @dynamic
var TimeAdapter = /** @class */ (function () {
function TimeAdapter() {
}
TimeAdapter.parseTime = function (time, format) {
if (format === void 0) { format = 12; }
if (time.indexOf(':') === -1) {
return 'Invalid time';
}
var period = time.trim().substr(time.length - 2).toUpperCase();
var isPeriodValid = period === TimePeriod.AM || period === TimePeriod.PM;
var _a = __read(time.split(':'), 2), h = _a[0], m = _a[1];
if (format === 24) {
var formattedHours = isPeriodValid ? this.formatHour(+h, 12, period) : +h;
return formattedHours + ":" + parseInt(m, 10);
}
var isPM = +h > 12;
var hours = isPM ? +h - 12 : +h;
period = isPeriodValid ? period : isPM ? TimePeriod.PM : TimePeriod.AM;
return hours + ":" + parseInt(m, 10) + " " + period;
};
TimeAdapter.formatTime = function (time, format) {
if (format === void 0) { format = 12; }
var timeFormat = (format === 24) ? TimeFormat.TWENTY_FOUR : TimeFormat.TWELVE;
var timeMask = (format === 24) ? TimeFormat.TWENTY_FOUR_SHORT : TimeFormat.TWELVE_SHORT;
return DateTime.fromFormat(this.parseTime(time, format), timeMask).toFormat(timeFormat).toLowerCase();
};
TimeAdapter.convertTimeToDateTime = function (time, format) {
if (format === void 0) { format = 12; }
var timeMask = (format === 24) ? TimeFormat.TWENTY_FOUR_SHORT : TimeFormat.TWELVE_SHORT;
return DateTime.fromFormat(this.parseTime(time, format), timeMask);
};
TimeAdapter.isTimeAvailable = function (time, min, max, granularity, minutesGap, format) {
if (!time) {
return;
}
var convertedTime = this.convertTimeToDateTime(time, format);
var minutes = convertedTime.minute;
if (minutesGap && (minutes % minutesGap !== 0)) {
throw new Error("Your minutes - " + minutes + " doesn't match your minutesGap - " + minutesGap);
}
var isAfter = (min && !max)
&& isSameOrAfter(convertedTime, min, granularity);
var isBefore = (max && !min)
&& isSameOrBefore(convertedTime, max, granularity);
var between = (min && max)
&& isBetween(convertedTime, min, max, granularity);
var isAvailable = !min && !max;
return isAfter || isBefore || between || isAvailable;
};
/***
* Format hour according to time format (12 or 24)
*/
TimeAdapter.formatHour = function (currentHour, format, period) {
if (format === 24) {
return currentHour;
}
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;
}());
var DEFAULT_HOUR = {
time: 12,
angle: 360
};
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);
}
Object.defineProperty(NgxMaterialTimepickerService.prototype, "hour", {
set: function (hour) {
this.hourSubject.next(hour);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedHour", {
get: function () {
return this.hourSubject.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "minute", {
set: function (minute) {
this.minuteSubject.next(minute);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedMinute", {
get: function () {
return this.minuteSubject.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "period", {
set: function (period) {
var isPeriodValid = (period === TimePeriod.AM) || (period === TimePeriod.PM);
if (isPeriodValid) {
this.periodSubject.next(period);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedPeriod", {
get: function () {
return this.periodSubject.asObservable();
},
enumerable: true,
configurable: true
});
NgxMaterialTimepickerService.prototype.setDefaultTimeIfAvailable = 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);
}
};
NgxMaterialTimepickerService.prototype.getFullTime = function (format) {
var hour = this.hourSubject.getValue().time;
var minute = this.minuteSubject.getValue().time;
var period = format === 12 ? this.periodSubject.getValue() : '';
return TimeAdapter.formatTime(hour + ":" + minute + " " + period, format);
};
NgxMaterialTimepickerService.prototype.setDefaultTime = function (time, format) {
var defaultTime = TimeAdapter.convertTimeToDateTime(time, format).toJSDate();
if (DateTime.fromJSDate(defaultTime).isValid) {
var period = time.substr(time.length - 2).toUpperCase();
var hour = defaultTime.getHours();
this.hour = __assign({}, DEFAULT_HOUR, { time: formatHourByPeriod(hour, period) });
this.minute = __assign({}, DEFAULT_MINUTE, { time: defaultTime.getMinutes() });
this.period = period;
}
else {
this.resetTime();
}
};
NgxMaterialTimepickerService.prototype.resetTime = function () {
this.hour = __assign({}, DEFAULT_HOUR);
this.minute = __assign({}, DEFAULT_MINUTE);
this.period = TimePeriod.AM;
};
NgxMaterialTimepickerService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxMaterialTimepickerService_Factory() { return new NgxMaterialTimepickerService(); }, token: NgxMaterialTimepickerService, providedIn: "root" });
NgxMaterialTimepickerService = __decorate([
Injectable({
providedIn: 'root'
})
], NgxMaterialTimepickerService);
return NgxMaterialTimepickerService;
}());
/***
* Format hour in 24hours format to meridian (AM or PM) format
*/
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;
}
}
var TimeUnit;
(function (TimeUnit) {
TimeUnit[TimeUnit["HOUR"] = 0] = "HOUR";
TimeUnit[TimeUnit["MINUTE"] = 1] = "MINUTE";
})(TimeUnit || (TimeUnit = {}));
var NgxMaterialTimepickerEventService = /** @class */ (function () {
function NgxMaterialTimepickerEventService() {
this.backdropClickSubject = new Subject();
this.keydownEventSubject = new Subject();
}
Object.defineProperty(NgxMaterialTimepickerEventService.prototype, "backdropClick", {
get: function () {
return this.backdropClickSubject.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerEventService.prototype, "keydownEvent", {
get: function () {
return this.keydownEventSubject.asObservable();
},
enumerable: true,
configurable: true
});
NgxMaterialTimepickerEventService.prototype.dispatchEvent = function (event) {
switch (event.type) {
case 'click':
this.backdropClickSubject.next(event);
break;
case 'keydown':
this.keydownEventSubject.next(event);
break;
default:
throw new Error('no such event type');
}
};
NgxMaterialTimepickerEventService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxMaterialTimepickerEventService_Factory() { return new NgxMaterialTimepickerEventService(); }, token: NgxMaterialTimepickerEventService, providedIn: "root" });
NgxMaterialTimepickerEventService = __decorate([
Injectable({
providedIn: 'root'
})
], NgxMaterialTimepickerEventService);
return NgxMaterialTimepickerEventService;
}());
var AnimationState;
(function (AnimationState) {
AnimationState["ENTER"] = "enter";
AnimationState["LEAVE"] = "leave";
})(AnimationState || (AnimationState = {}));
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.isEsc = true;
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, "format", {
get: function () {
return this.timepickerInput ? this.timepickerInput.format : this._format;
},
set: function (value) {
this._format = value === 24 ? 24 : 12;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "minutesGap", {
get: function () {
return this._minutesGap;
},
set: 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: function (time) {
this.setDefaultTime(time);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "minTime", {
get: function () {
return this.timepickerInput && this.timepickerInput.min;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "maxTime", {
get: function () {
return this.timepickerInput && this.timepickerInput.max;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerComponent.prototype, "disabled", {
get: function () {
return this.timepickerInput && this.timepickerInput.disabled;
},
enumerable: true,
configurable: true
});
NgxMaterialTimepickerComponent.prototype.ngOnInit = 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; }));
};
/***
* Register an input with this timepicker.
* input - The timepicker input to register with this timepicker
*/
NgxMaterialTimepickerComponent.prototype.registerInput = function (input) {
if (this.timepickerInput) {
throw Error('A Timepicker can only be associated with a single input.');
}
this.timepickerInput = input;
};
NgxMaterialTimepickerComponent.prototype.onHourChange = function (hour) {
this.timepickerService.hour = hour;
};
NgxMaterialTimepickerComponent.prototype.onHourSelected = function (hour) {
this.changeTimeUnit(TimeUnit.MINUTE);
this.hourSelected.next(hour);
};
NgxMaterialTimepickerComponent.prototype.onMinuteChange = function (minute) {
this.timepickerService.minute = minute;
};
NgxMaterialTimepickerComponent.prototype.changePeriod = function (period) {
this.timepickerService.period = period;
};
NgxMaterialTimepickerComponent.prototype.changeTimeUnit = function (unit) {
this.activeTimeUnit = unit;
};
NgxMaterialTimepickerComponent.prototype.setTime = function () {
this.timeSet.next(this.timepickerService.getFullTime(this.format));
this.close();
};
NgxMaterialTimepickerComponent.prototype.setDefaultTime = function (time) {
this.timepickerService.setDefaultTimeIfAvailable(time, this.minTime, this.maxTime, this.format, this.minutesGap);
};
NgxMaterialTimepickerComponent.prototype.open = function () {
this.isOpened = true;
if (!this.disableAnimation) {
this.animationState = AnimationState.ENTER;
}
this.opened.next();
};
NgxMaterialTimepickerComponent.prototype.close = function () {
if (this.disableAnimation) {
this.closeTimepicker();
return;
}
this.animationState = AnimationState.LEAVE;
};
NgxMaterialTimepickerComponent.prototype.animationDone = function (event) {
if (event.phaseName === 'done' && event.toState === AnimationState.LEAVE) {
this.closeTimepicker();
}
};
NgxMaterialTimepickerComponent.prototype.onKeydown = function (e) {
this.eventService.dispatchEvent(e);
e.stopPropagation();
};
NgxMaterialTimepickerComponent.prototype.ngOnDestroy = function () {
this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
};
NgxMaterialTimepickerComponent.prototype.closeTimepicker = function () {
this.isOpened = false;
this.activeTimeUnit = TimeUnit.HOUR;
this.closed.next();
};
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], NgxMaterialTimepickerComponent.prototype, "cancelBtnTmpl", void 0);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], NgxMaterialTimepickerComponent.prototype, "editableHintTmpl", void 0);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], NgxMaterialTimepickerComponent.prototype, "confirmBtnTmpl", void 0);
__decorate([
Input('ESC'),
__metadata("design:type", Object)
], NgxMaterialTimepickerComponent.prototype, "isEsc", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], NgxMaterialTimepickerComponent.prototype, "enableKeyboardInput", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], NgxMaterialTimepickerComponent.prototype, "preventOverlayClick", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], NgxMaterialTimepickerComponent.prototype, "disableAnimation", void 0);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], NgxMaterialTimepickerComponent.prototype, "format", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], NgxMaterialTimepickerComponent.prototype, "minutesGap", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NgxMaterialTimepickerComponent.prototype, "defaultTime", null);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxMaterialTimepickerComponent.prototype, "timeSet", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxMaterialTimepickerComponent.prototype, "opened", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxMaterialTimepickerComponent.prototype, "closed", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxMaterialTimepickerComponent.prototype, "hourSelected", void 0);
__decorate([
HostListener('keydown', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [KeyboardEvent]),
__metadata("design:returntype", void 0)
], NgxMaterialTimepickerComponent.prototype, "onKeydown", null);
NgxMaterialTimepickerComponent = __decorate([
Component({
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 <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 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 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}.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{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}}"]
}),
__metadata("design:paramtypes", [NgxMaterialTimepickerService,
NgxMaterialTimepickerEventService])
], NgxMaterialTimepickerComponent);
return NgxMaterialTimepickerComponent;
}());
/* To override a default toggle icon */
var NgxMaterialTimepickerToggleIconDirective = /** @class */ (function () {
function NgxMaterialTimepickerToggleIconDirective() {
}
NgxMaterialTimepickerToggleIconDirective = __decorate([
Directive({ selector: '[ngxMaterialTimepickerToggleIcon]' })
], NgxMaterialTimepickerToggleIconDirective);
return NgxMaterialTimepickerToggleIconDirective;
}());
var NgxMaterialTimepickerToggleComponent = /** @class */ (function () {
function NgxMaterialTimepickerToggleComponent() {
}
Object.defineProperty(NgxMaterialTimepickerToggleComponent.prototype, "disabled", {
get: function () {
return this._disabled === undefined ? this.timepicker.disabled : this._disabled;
},
set: function (value) {
this._disabled = value;
},
enumerable: true,
configurable: true
});
NgxMaterialTimepickerToggleComponent.prototype.open = function (event) {
if (this.timepicker) {
this.timepicker.open();
event.stopPropagation();
}
};
__decorate([
Input('for'),
__metadata("design:type", NgxMaterialTimepickerComponent)
], NgxMaterialTimepickerToggleComponent.prototype, "timepicker", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgxMaterialTimepickerToggleComponent.prototype, "disabled", null);
__decorate([
ContentChild(NgxMaterialTimepickerToggleIconDirective, { static: true }),
__metadata("design:type", NgxMaterialTimepickerToggleIconDirective)
], NgxMaterialTimepickerToggleComponent.prototype, "customIcon", void 0);
NgxMaterialTimepickerToggleComponent = __decorate([
Component({
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);
return NgxMaterialTimepickerToggleComponent;
}());
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: function () {
return this._format;
},
set: function (value) {
this._format = value === 24 ? 24 : 12;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerDirective.prototype, "min", {
get: function () {
return this._min;
},
set: 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: function () {
return this._max;
},
set: 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: function (picker) {
this.registerTimepicker(picker);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerDirective.prototype, "value", {
get: function () {
return this._value;
},
set: function (value) {
if (!value) {
this._value = '';
this.updateInputValue();
return;
}
var time = TimeAdapter.formatTime(value, this._format);
var isAvailable = TimeAdapter.isTimeAvailable(time, this._min, 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: function (time) {
this._timepicker.setDefaultTime(time);
},
enumerable: true,
configurable: true
});
TimepickerDirective.prototype.onInput = function (value) {
this.value = value;
this.onChange(value);
};
TimepickerDirective.prototype.ngOnChanges = function (changes) {
if (changes['value'] && changes['value'].currentValue) {
this.defaultTime = changes['value'].currentValue;
}
};
TimepickerDirective.prototype.onClick = function (event) {
if (!this.disableClick) {
this._timepicker.open();
event.stopPropagation();
}
};
TimepickerDirective.prototype.writeValue = function (value) {
this.value = value;
this.defaultTime = value;
};
TimepickerDirective.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
TimepickerDirective.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
TimepickerDirective.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
TimepickerDirective.prototype.ngOnDestroy = function () {
this.timepickerSubscriptions.forEach(function (s) { return s.unsubscribe(); });
};
TimepickerDirective.prototype.registerTimepicker = 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');
}
};
TimepickerDirective.prototype.updateInputValue = function () {
this.elementRef.nativeElement.value = this.value;
};
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], TimepickerDirective.prototype, "format", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], TimepickerDirective.prototype, "min", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], TimepickerDirective.prototype, "max", null);
__decorate([
Input('ngxTimepicker'),
__metadata("design:type", NgxMaterialTimepickerComponent),
__metadata("design:paramtypes", [NgxMaterialTimepickerComponent])
], TimepickerDirective.prototype, "timepicker", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], TimepickerDirective.prototype, "value", null);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TimepickerDirective.prototype, "disabled", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], TimepickerDirective.prototype, "disableClick", void 0);
__decorate([
HostListener('click', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TimepickerDirective.prototype, "onClick", null);
TimepickerDirective = __decorate([
Directive({
selector: '[ngxTimepicker]',
providers: [VALUE_ACCESSOR],
host: {
'[disabled]': 'disabled',
'(input)': 'onInput($event.target.value)',
'(blur)': 'onTouched()',
},
}),
__metadata("design:paramtypes", [ElementRef])
], TimepickerDirective);
return TimepickerDirective;
}());
var NgxMaterialTimepickerThemeDirective = /** @class */ (function () {
function NgxMaterialTimepickerThemeDirective(elementRef) {
this.element = elementRef.nativeElement;
}
NgxMaterialTimepickerThemeDirective.prototype.ngAfterViewInit = function () {
if (this.theme) {
this.setTheme(this.theme);
}
};
NgxMaterialTimepickerThemeDirective.prototype.setTheme = function (theme) {
for (var val in theme) {
if (theme.hasOwnProperty(val)) {
if (typeof theme[val] === 'string') {
for (var prop in theme) {
if (theme.hasOwnProperty(prop)) {
this.element.style.setProperty("--" + camelCaseToDash(prop), theme[prop]);
}
}
return;
}
this.setTheme(theme[val]);
}
}
};
__decorate([
Input('ngxMaterialTimepickerTheme'),
__metadata("design:type", Object)
], NgxMaterialTimepickerThemeDirective.prototype, "theme", void 0);
NgxMaterialTimepickerThemeDirective = __decorate([
Directive({ selector: '[ngxMaterialTimepickerTheme]' }),
__metadata("design:paramtypes", [ElementRef])
], NgxMaterialTimepickerThemeDirective);
return NgxMaterialTimepickerThemeDirective;
}());
function camelCaseToDash(myStr) {
return myStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
function getHours(format) {
return Array(format).fill(1).map(function (v, i) {
var angleStep = 30;
var time = v + i;
var angle = angleStep * time;
return { time: time === 24 ? 0 : time, angle: angle };
});
}
function disableHours(hours, config) {
if (config.min || config.max) {
return hours.map(function (value) {
var hour = config.format === 24 ? value.time : TimeAdapter.formatHour(value.time, config.format, config.period);
var currentTime = DateTime.fromObject({ hour: hour }).toFormat(TimeFormat.TWELVE);
return __assign({}, value, { disabled: !TimeAdapter.isTimeAvailable(currentTime, config.min, config.max, 'hours') });
});
}
return hours;
}
function getMinutes(gap) {
if (gap === void 0) { gap = 1; }
var minutesCount = 60;
var angleStep = 360 / minutesCount;
var minutes = [];
for (var i = 0; i < minutesCount; i++) {
var angle = angleStep * i;
if (i % gap === 0) {
minutes.push({ time: i, angle: angle !== 0 ? angle : 360 });
}
}
return minutes;
}
function disableMinutes(minutes, selectedHour, config) {
if (config.min || config.max) {
var hour_1 = TimeAdapter.formatHour(selectedHour, config.format, config.period);
return minutes.map(function (value) {
var currentTime = DateTime.fromObject({ hour: hour_1, minute: value.time }).toFormat(TimeFormat.TWELVE);
return __assign({}, value, { disabled: !TimeAdapter.isTimeAvailable(currentTime, config.min, config.max, 'minutes') });
});
}
return minutes;
}
var NgxMaterialTimepickerHoursFace = /** @class */ (function () {
function NgxMaterialTimepickerHoursFace(format) {
this.hourChange = new EventEmitter();
this.hourSelected = new EventEmitter();
this.hoursList = [];
this.hoursList = getHours(format);
}
NgxMaterialTimepickerHoursFace.prototype.onTimeSelected = function (time) {
this.hourSelected.next(time);
};
__decorate([
Input(),
__metadata("design:type", Object)
], NgxMaterialTimepickerHoursFace.prototype, "selectedHour", void 0);
__decorate([
Input(),
__metadata("design:type", DateTime)
], NgxMaterialTimepickerHoursFace.prototype, "minTime", void 0);
__decorate([
Input(),
__metadata("design:type", DateTime)
], NgxMaterialTimepickerHoursFace.prototype, "maxTime", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], NgxMaterialTimepickerHoursFace.prototype, "format", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxMaterialTimepickerHoursFace.prototype, "hourChange", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxMaterialTimepickerHoursFace.prototype, "hourSelected", void 0);
return NgxMaterialTimepickerHoursFace;
}());
var NgxMaterialTimepicker24HoursFaceComponent = /** @class */ (function (_super) {
__extends(NgxMaterialTimepicker24HoursFaceComponent, _super);
function NgxMaterialTimepicker24HoursFaceComponent() {
return _super.call(this, 24) || this;
}
NgxMaterialTimepicker24HoursFaceComponent.prototype.ngAfterContentInit = function () {
this.hoursList = disableHours(this.hoursList, {
min: this.minTime,
max: this.maxTime,
format: this.format
});
};
NgxMaterialTimepicker24HoursFaceComponent = __decorate([
Component({
selector: 'ngx-material-timepicker-24-hours-face',
template: "<ngx-material-timepicker-face [selectedTime]=\"selectedHour\" [faceTime]=\"hoursList\" [format]=\"format\"\n (timeChange)=\"hourChange.next($event)\"\n (timeSelected)=\"onTimeSelected($event)\"></ngx-material-timepicker-face>\n"
}),
__metadata("design:paramtypes", [])
], NgxMaterialTimepicker24HoursFaceComponent);
return NgxMaterialTimepicker24HoursFaceComponent;
}(NgxMaterialTimepickerHoursFace));
var NgxMaterialTimepicker12HoursFaceComponent = /** @class */ (function (_super) {
__extends(NgxMaterialTimepicker12HoursFaceComponent, _super);
function NgxMaterialTimepicker12HoursFaceComponent() {
return _super.call(this, 12) || this;
}
NgxMaterialTimepicker12HoursFaceComponent.prototype.ngOnChanges = function (changes) {
if (changes['period'] && changes['period'].currentValue) {
this.hoursList = disableHours(this.hoursList, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period: this.period
});
}
};
__decorate([
Input(),
__metadata("design:type", String)
], NgxMaterialTimepicker12HoursFaceComponent.prototype, "period", void 0);
NgxMaterialTimepicker12HoursFaceComponent = __decorate([
Component({
selector: 'ngx-material-timepicker-12-hours-face',
template: "<ngx-material-timepicker-face [selectedTime]=\"selectedHour\" [faceTime]=\"hoursList\"\n (timeChange)=\"hourChange.next($event)\" (timeSelected)=\"onTimeSelected($event)\"></ngx-material-timepicker-face>\n"
}),
__metadata("design:paramtypes", [])
], NgxMaterialTimepicker12HoursFaceComponent);
return NgxMaterialTimepicker12HoursFaceComponent;
}(NgxMaterialTimepickerHoursFace));
var NgxMaterialTimepickerMinutesFaceComponent = /** @class */ (function () {
function NgxMaterialTimepickerMinutesFaceComponent() {
this.minutesList = [];
this.timeUnit = TimeUnit;
this.minuteChange = new EventEmitter();
}
NgxMaterialTimepickerMinutesFaceComponent.prototype.ngOnChanges = function (changes) {
if (changes['period'] && changes['period'].currentValue) {
var minutes = getMinutes(this.minutesGap);
this.minutesList = disableMinutes(minutes, this.selectedHour, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period: this.period
});
}
};
__decorate([
Input(),
__metadata("design:type", Object)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "selectedMinute", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "selectedHour", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "period", void 0);
__decorate([
Input(),
__metadata("design:type", DateTime)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "minTime", void 0);
__decorate([
Input(),
__metadata("design:type", DateTime)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "maxTime", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "format", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "minutesGap", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxMaterialTimepickerMinutesFaceComponent.prototype, "minuteChange", void 0);
NgxMaterialTimepickerMinutesFaceComponent = __decorate([
Component({
selector: 'ngx-material-timepicker-minutes-face',
template: "<ngx-material-timepicker-face [faceTime]=\"minutesList\" [selectedTime]=\"selectedMinute\"\n [minutesGap]=\"minutesGap\"\n (timeChange)=\"minuteChange.next($event)\" [unit]=\"timeUnit.MINUTE\"></ngx-material-timepicker-face>\n"
})
], NgxMaterialTimepickerMinutesFaceComponent);
return NgxMaterialTimepickerMinutesFaceComponent;
}());
var CLOCK_HAND_STYLES = {
small: {
height: '75px',
top: 'calc(50% - 75px)'
},
large: {
height: '103px',
top: 'calc(50% - 103px)'
}
};
var NgxMaterialTimepickerFaceComponent = /** @class */ (function () {
function NgxMaterialTimepickerFaceComponent() {
this.timeUnit = TimeUnit;
this.innerClockFaceSize = 85;
this.timeChange = new EventEmitter();
this.timeSelected = new EventEmitter();
}
NgxMaterialTimepickerFaceComponent.prototype.ngAfterViewInit = function () {
this.setClockHandPosition();
this.addTouchEvents();
};
NgxMaterialTimepickerFaceComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
var faceTimeChanges = changes['faceTime'];
var selectedTimeChanges = changes['selectedTime'];
if ((faceTimeChanges && faceTimeChanges.currentValue)
&& (selectedTimeChanges && selectedTimeChanges.currentValue)) {
/* Set time according to passed an input value */
this.selectedTime = this.faceTime.find(function (time) { return time.time === _this.selectedTime.time; });
}
if (selectedTimeChanges && selectedTimeChanges.currentValue) {
this.setClockHandPosition();
}
if (faceTimeChanges && faceTimeChanges.currentValue) {
// To avoid an error ExpressionChangedAfterItHasBeenCheckedError
setTimeout(function () { return _this.selectAvailableTime(); });
}
};
NgxMaterialTimepickerFaceComponent.prototype.trackByTime = function (_, time) {
return time.time;
};
NgxMaterialTimepickerFaceComponent.prototype.onMousedown = function (e) {
e.preventDefault();
this.isStarted = true;
};
NgxMaterialTimepickerFaceComponent.prototype.selectTime = function (e) {
if (!this.isStarted && (e instanceof MouseEvent && e.type !== 'click')) {
return;
}
var clockFaceCords = this.clockFace.nativeElement.getBoundingClientRect();
/* Get x0 and y0 of the circle */
var centerX = clockFaceCords.left + clockFaceCords.width / 2;
var centerY = clockFaceCords.top + clockFaceCords.height / 2;
/* Counting the arctangent and convert it to from radian to deg */
var arctangent = Math.atan(Math.abs(e.cl