ngx-material-timepicker
Version:
Handy material design timepicker for angular
847 lines (828 loc) • 202 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('luxon'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define('ngx-material-timepicker', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/animations', 'luxon', '@angular/forms'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ngx-material-timepicker"] = {}, global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators, global.ng.animations, global.luxon, global.ng.forms));
})(this, (function (exports, i0, i1, rxjs, operators, animations, luxon, i4) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
var TimeUnit;
(function (TimeUnit) {
TimeUnit[TimeUnit["HOUR"] = 0] = "HOUR";
TimeUnit[TimeUnit["MINUTE"] = 1] = "MINUTE";
})(TimeUnit || (TimeUnit = {}));
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, opts) {
var _a = TimeAdapter.getLocaleOptionsByTime(time, opts), numberingSystem = _a.numberingSystem, locale = _a.locale;
var isPeriodExist = time.split(' ').length === 2;
var timeMask = isPeriodExist ? TimeFormat.TWELVE_SHORT : TimeFormat.TWENTY_FOUR_SHORT;
return luxon.DateTime.fromFormat(time, timeMask, { numberingSystem: numberingSystem, locale: locale });
};
TimeAdapter.formatTime = function (time, opts) {
if (!time) {
return 'Invalid Time';
}
var format = opts.format;
var parsedTime = TimeAdapter.parseTime(time, opts).setLocale(TimeAdapter.DEFAULT_LOCALE);
if (!parsedTime.isValid) {
return null;
}
if (format !== 24) {
return parsedTime.toLocaleString(Object.assign(Object.assign({}, luxon.DateTime.TIME_SIMPLE), { hour12: format !== 24, numberingSystem: TimeAdapter.DEFAULT_NUMBERING_SYSTEM })).replace(/\u200E/g, '').replace(/\u202F/g, ' ');
}
return parsedTime.toISOTime({
includeOffset: false,
suppressMilliseconds: true,
suppressSeconds: true
}).replace(/\u200E/g, '').replace(/\u202F/g, ' ');
};
TimeAdapter.toLocaleTimeString = function (time, opts) {
if (opts === void 0) { opts = {}; }
var _a = opts.format, format = _a === void 0 ? TimeAdapter.DEFAULT_FORMAT : _a, _b = opts.locale, locale = _b === void 0 ? TimeAdapter.DEFAULT_LOCALE : _b;
var hourCycle = format === 24 ? 'h23' : 'h12';
var timeFormat = Object.assign(Object.assign({}, luxon.DateTime.TIME_SIMPLE), { hourCycle: hourCycle });
var timeMask = (format === 24) ? TimeFormat.TWENTY_FOUR_SHORT : TimeFormat.TWELVE_SHORT;
var localOpts = Object.assign({ locale: opts.locale, numberingSystem: opts.numberingSystem }, timeFormat);
return luxon.DateTime.fromFormat(time, timeMask).setLocale(locale).toLocaleString(localOpts).replace(/\u202F/g, ' ');
};
TimeAdapter.isTimeAvailable = function (time, min, max, granularity, minutesGap, format) {
if (!time) {
return;
}
var convertedTime = this.parseTime(time, { format: format });
var minutes = convertedTime.minute;
if (minutesGap && minutes === minutes && 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;
};
TimeAdapter.fromDateTimeToString = function (time, format) {
var timeFormat = format === 24 ? TimeFormat.TWENTY_FOUR : TimeFormat.TWELVE;
return time.reconfigure({
numberingSystem: TimeAdapter.DEFAULT_NUMBERING_SYSTEM,
locale: TimeAdapter.DEFAULT_LOCALE
}).toFormat(timeFormat).replace(/\u202F/g, ' ');
};
TimeAdapter.getLocaleOptionsByTime = function (time, opts) {
var localeConfig = { numberingSystem: opts.numberingSystem, locale: opts.locale };
var defaultConfig = { numberingSystem: TimeAdapter.DEFAULT_NUMBERING_SYSTEM, locale: TimeAdapter.DEFAULT_LOCALE };
return isNaN(parseInt(time, 10)) ? localeConfig : defaultConfig;
};
return TimeAdapter;
}());
TimeAdapter.DEFAULT_FORMAT = 12;
TimeAdapter.DEFAULT_LOCALE = 'en-US';
TimeAdapter.DEFAULT_NUMBERING_SYSTEM = 'latn';
var DEFAULT_HOUR = {
time: 12,
angle: 360
};
var DEFAULT_MINUTE = {
time: 0,
angle: 360
};
var NgxMaterialTimepickerService = /** @class */ (function () {
function NgxMaterialTimepickerService() {
this.hourSubject = new rxjs.BehaviorSubject(DEFAULT_HOUR);
this.minuteSubject = new rxjs.BehaviorSubject(DEFAULT_MINUTE);
this.periodSubject = new rxjs.BehaviorSubject(TimePeriod.AM);
}
Object.defineProperty(NgxMaterialTimepickerService.prototype, "hour", {
set: function (hour) {
this.hourSubject.next(hour);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedHour", {
get: function () {
return this.hourSubject.asObservable();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "minute", {
set: function (minute) {
this.minuteSubject.next(minute);
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedMinute", {
get: function () {
return this.minuteSubject.asObservable();
},
enumerable: false,
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: false,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerService.prototype, "selectedPeriod", {
get: function () {
return this.periodSubject.asObservable();
},
enumerable: false,
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(time, format);
}
}
catch (e) {
console.error(e);
}
};
NgxMaterialTimepickerService.prototype.getFullTime = function (format) {
var selectedHour = this.hourSubject.getValue().time;
var selectedMinute = this.minuteSubject.getValue().time;
var hour = selectedHour != null ? selectedHour : DEFAULT_HOUR.time;
var minute = selectedMinute != null ? selectedMinute : DEFAULT_MINUTE.time;
var period = format === 12 ? this.periodSubject.getValue() : '';
var time = (hour + ":" + minute + " " + period).trim();
return TimeAdapter.formatTime(time, { format: format });
};
NgxMaterialTimepickerService.prototype.setDefaultTime = function (time, format) {
var defaultTime = TimeAdapter.parseTime(time, { format: format }).toJSDate();
if (luxon.DateTime.fromJSDate(defaultTime).isValid) {
var period = time.substr(time.length - 2).toUpperCase();
var hour = defaultTime.getHours();
this.hour = Object.assign(Object.assign({}, DEFAULT_HOUR), { time: formatHourByPeriod(hour, period) });
this.minute = Object.assign(Object.assign({}, DEFAULT_MINUTE), { time: defaultTime.getMinutes() });
this.period = period;
}
else {
this.resetTime();
}
};
NgxMaterialTimepickerService.prototype.resetTime = function () {
this.hour = Object.assign({}, DEFAULT_HOUR);
this.minute = Object.assign({}, DEFAULT_MINUTE);
this.period = TimePeriod.AM;
};
return NgxMaterialTimepickerService;
}());
NgxMaterialTimepickerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
NgxMaterialTimepickerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerService, providedIn: 'root' });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerService, decorators: [{
type: i0.Injectable,
args: [{
providedIn: 'root'
}]
}] });
/***
* 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 TIME_LOCALE = new i0.InjectionToken('TimeLocale', {
providedIn: 'root',
factory: function () { return TimeAdapter.DEFAULT_LOCALE; }
});
var NUMBERING_SYSTEM = new i0.InjectionToken('NumberingSystem', {
providedIn: 'root',
factory: function () { return TimeAdapter.DEFAULT_NUMBERING_SYSTEM; }
});
var NgxMaterialTimepickerEventService = /** @class */ (function () {
function NgxMaterialTimepickerEventService() {
this.backdropClickSubject = new rxjs.Subject();
this.keydownEventSubject = new rxjs.Subject();
}
Object.defineProperty(NgxMaterialTimepickerEventService.prototype, "backdropClick", {
get: function () {
return this.backdropClickSubject.asObservable().pipe(operators.shareReplay({ bufferSize: 1, refCount: true }));
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxMaterialTimepickerEventService.prototype, "keydownEvent", {
get: function () {
return this.keydownEventSubject.asObservable().pipe(operators.shareReplay({ bufferSize: 1, refCount: true }));
},
enumerable: false,
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');
}
};
return NgxMaterialTimepickerEventService;
}());
NgxMaterialTimepickerEventService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerEventService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
NgxMaterialTimepickerEventService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerEventService, providedIn: 'root' });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerEventService, decorators: [{
type: i0.Injectable,
args: [{
providedIn: 'root'
}]
}] });
var AppendToInputDirective = /** @class */ (function () {
function AppendToInputDirective(elementRef, renderer) {
this.renderer = renderer;
this.element = elementRef.nativeElement;
}
Object.defineProperty(AppendToInputDirective.prototype, "inputCords", {
get: function () {
return this.inputElement.getBoundingClientRect();
},
enumerable: false,
configurable: true
});
Object.defineProperty(AppendToInputDirective.prototype, "direction", {
get: function () {
var height = this.element.offsetHeight;
var _a = this._inputCords, bottom = _a.bottom, top = _a.top;
var isElementFit = (window && window.innerHeight) - bottom < height;
var isTop = isElementFit && top > height;
var isCenter = isElementFit && top < height;
if (isTop) {
return 'top';
}
else if (isCenter) {
return 'center';
}
return 'bottom';
},
enumerable: false,
configurable: true
});
AppendToInputDirective.prototype.ngAfterViewInit = function () {
this._inputCords = this.inputCords;
this._direction = this.direction;
this.append();
};
AppendToInputDirective.prototype.changePosition = function () {
var _a = this.inputCords, bottom = _a.bottom, top = _a.top;
var y = this.defineElementYByDirection(top, bottom);
this.setStyle('top', y + "px");
};
AppendToInputDirective.prototype.append = function () {
var _a = this._inputCords, left = _a.left, bottom = _a.bottom, top = _a.top;
var y = this.defineElementYByDirection(top, bottom);
this.setStyle('position', 'fixed');
this.setStyle('left', left + "px");
this.setStyle('top', y + "px");
};
AppendToInputDirective.prototype.setStyle = function (style, value) {
this.renderer.setStyle(this.element, style, value);
};
AppendToInputDirective.prototype.defineElementYByDirection = function (inputTop, inputBottom) {
if (this._direction === 'top') {
return inputTop - this.element.offsetHeight;
}
else if (this._direction === 'center') {
return inputTop - (this.element.offsetHeight / 2);
}
return inputBottom;
};
return AppendToInputDirective;
}());
AppendToInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AppendToInputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
AppendToInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AppendToInputDirective, selector: "[ngxAppendToInput]", inputs: { inputElement: ["ngxAppendToInput", "inputElement"] }, host: { listeners: { "window:scroll": "changePosition()" } }, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AppendToInputDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ngxAppendToInput]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { inputElement: [{
type: i0.Input,
args: ['ngxAppendToInput']
}], changePosition: [{
type: i0.HostListener,
args: ['window:scroll']
}] } });
var NgxMaterialTimepickerContentComponent = /** @class */ (function () {
function NgxMaterialTimepickerContentComponent() {
}
return NgxMaterialTimepickerContentComponent;
}());
NgxMaterialTimepickerContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
NgxMaterialTimepickerContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NgxMaterialTimepickerContentComponent, selector: "ngx-material-timepicker-content", inputs: { appendToInput: "appendToInput", inputElement: "inputElement" }, ngImport: i0__namespace, template: "<div [ngxAppendToInput]=\"inputElement\" *ngIf=\"appendToInput;else timepickerModal\">\n <!--suppress HtmlUnknownAttribute -->\n <ng-container *ngTemplateOutlet=\"timepickerOutlet\"></ng-container>\n</div>\n\n<ng-template #timepickerModal>\n <!--suppress HtmlUnknownAttribute -->\n <ng-container *ngTemplateOutlet=\"timepickerOutlet\"></ng-container>\n</ng-template>\n\n<ng-template #timepickerOutlet>\n <ng-content></ng-content>\n</ng-template>\n", directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: AppendToInputDirective, selector: "[ngxAppendToInput]", inputs: ["ngxAppendToInput"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerContentComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'ngx-material-timepicker-content',
templateUrl: './ngx-material-timepicker-content.component.html',
}]
}], propDecorators: { appendToInput: [{
type: i0.Input
}], inputElement: [{
type: i0.Input
}] } });
// @dynamic
var TimepickerTimeUtils = /** @class */ (function () {
function TimepickerTimeUtils() {
}
TimepickerTimeUtils.getHours = function (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 };
});
};
TimepickerTimeUtils.disableHours = function (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 = luxon.DateTime.fromObject({ hour: hour }).toFormat(TimeFormat.TWELVE);
return Object.assign(Object.assign({}, value), { disabled: !TimeAdapter.isTimeAvailable(currentTime, config.min, config.max, 'hours') });
});
}
return hours;
};
TimepickerTimeUtils.getMinutes = function (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;
};
TimepickerTimeUtils.disableMinutes = function (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 = luxon.DateTime.fromObject({ hour: hour_1, minute: value.time }).toFormat(TimeFormat.TWELVE);
return Object.assign(Object.assign({}, value), { disabled: !TimeAdapter.isTimeAvailable(currentTime, config.min, config.max, 'minutes') });
});
}
return minutes;
};
return TimepickerTimeUtils;
}());
var TimeLocalizerPipe = /** @class */ (function () {
function TimeLocalizerPipe(locale) {
this.locale = locale;
}
TimeLocalizerPipe.prototype.transform = function (time, timeUnit, isKeyboardEnabled) {
if (isKeyboardEnabled === void 0) { isKeyboardEnabled = false; }
if (time == null || time === '') {
return '';
}
switch (timeUnit) {
case TimeUnit.HOUR: {
var format = (time === 0 || isKeyboardEnabled) ? 'HH' : 'H';
return this.formatTime('hour', time, format);
}
case TimeUnit.MINUTE:
return this.formatTime('minute', time, 'mm');
default:
throw new Error("There is no Time Unit with type " + timeUnit);
}
};
TimeLocalizerPipe.prototype.formatTime = function (timeMeasure, time, format) {
var _b;
try {
return luxon.DateTime.fromObject((_b = {}, _b[timeMeasure] = +time, _b)).setLocale(this.locale).toFormat(format);
}
catch (_a) {
throw new Error("Cannot format provided time - " + time + " to locale - " + this.locale);
}
};
return TimeLocalizerPipe;
}());
TimeLocalizerPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeLocalizerPipe, deps: [{ token: TIME_LOCALE }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
TimeLocalizerPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeLocalizerPipe, name: "timeLocalizer" });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeLocalizerPipe, decorators: [{
type: i0.Pipe,
args: [{
name: 'timeLocalizer'
}]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: i0.Inject,
args: [TIME_LOCALE]
}] }];
} });
var TimeParserPipe = /** @class */ (function () {
function TimeParserPipe(locale, numberingSystem) {
this.locale = locale;
this.numberingSystem = numberingSystem;
}
TimeParserPipe.prototype.transform = function (time, timeUnit) {
if (timeUnit === void 0) { timeUnit = TimeUnit.HOUR; }
if (time == null || time === '') {
return '';
}
if (!isNaN(+time)) {
return time;
}
if (timeUnit === TimeUnit.MINUTE) {
return this.parseTime(time, 'm', 'minute');
}
return this.parseTime(time, 'H', 'hour');
};
TimeParserPipe.prototype.parseTime = function (time, format, timeMeasure) {
var parsedTime = luxon.DateTime.fromFormat(String(time), format, {
numberingSystem: this.numberingSystem,
locale: this.locale
})[timeMeasure];
if (!isNaN(parsedTime)) {
return parsedTime;
}
throw new Error("Cannot parse time - " + time);
};
return TimeParserPipe;
}());
TimeParserPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeParserPipe, deps: [{ token: TIME_LOCALE }, { token: NUMBERING_SYSTEM }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
TimeParserPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeParserPipe, name: "timeParser" });
TimeParserPipe.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeParserPipe });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeParserPipe, decorators: [{
type: i0.Pipe,
args: [{
name: 'timeParser'
}]
}, {
type: i0.Injectable
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: i0.Inject,
args: [TIME_LOCALE]
}] }, { type: undefined, decorators: [{
type: i0.Inject,
args: [NUMBERING_SYSTEM]
}] }];
} });
var AutofocusDirective = /** @class */ (function () {
function AutofocusDirective(element, document) {
this.element = element;
this.document = document;
this.activeElement = this.document.activeElement;
}
AutofocusDirective.prototype.ngOnChanges = function () {
var _this = this;
if (this.isFocusActive) {
// To avoid ExpressionChangedAfterItHasBeenCheckedError;
setTimeout(function () { return _this.element.nativeElement.focus({ preventScroll: true }); });
}
};
AutofocusDirective.prototype.ngOnDestroy = function () {
var _this = this;
// To avoid ExpressionChangedAfterItHasBeenCheckedError;
setTimeout(function () { return _this.activeElement.focus({ preventScroll: true }); });
};
return AutofocusDirective;
}());
AutofocusDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AutofocusDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i1.DOCUMENT, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
AutofocusDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AutofocusDirective, selector: "[timepickerAutofocus]", inputs: { isFocusActive: ["timepickerAutofocus", "isFocusActive"] }, usesOnChanges: true, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AutofocusDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[timepickerAutofocus]'
}]
}], ctorParameters: function () {
return [{ type: i0__namespace.ElementRef }, { type: undefined, decorators: [{
type: i0.Optional
}, {
type: i0.Inject,
args: [i1.DOCUMENT]
}] }];
}, propDecorators: { isFocusActive: [{
type: i0.Input,
args: ['timepickerAutofocus']
}] } });
/* tslint:disable:triple-equals */
var NgxMaterialTimepickerDialControlComponent = /** @class */ (function () {
function NgxMaterialTimepickerDialControlComponent(timeParserPipe, timeLocalizerPipe) {
this.timeParserPipe = timeParserPipe;
this.timeLocalizerPipe = timeLocalizerPipe;
this.timeUnitChanged = new i0.EventEmitter();
this.timeChanged = new i0.EventEmitter();
this.focused = new i0.EventEmitter();
this.unfocused = new i0.EventEmitter();
}
Object.defineProperty(NgxMaterialTimepickerDialControlComponent.prototype, "selectedTime", {
get: function () {
var _this = this;
if (!!this.time) {
return this.timeList.find(function (t) { return t.time === +_this.time; });
}
},
enumerable: false,
configurable: true
});
NgxMaterialTimepickerDialControlComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.isEditable) {
this.timeControl = new i4.FormControl({ value: this.formatTimeForUI(this.time), disabled: this.disabled });
this.timeControl.valueChanges.pipe(operators.tap(function (value) {
if (value.length > 2) {
_this.updateInputValue(value.slice(-1));
}
}), operators.debounceTime(500), operators.distinctUntilChanged(), operators.filter(function (value) { return !isTimeDisabledToChange(_this.time, value, _this.timeList); }), operators.tap(function (value) { return _this.time = _this.timeParserPipe.transform(value, _this.timeUnit).toString(); })).subscribe(function () { return _this.updateTime(); });
}
};
NgxMaterialTimepickerDialControlComponent.prototype.saveTimeAndChangeTimeUnit = function (event, unit) {
event.preventDefault();
this.previousTime = this.time;
this.timeUnitChanged.next(unit);
this.focused.next();
};
NgxMaterialTimepickerDialControlComponent.prototype.updateTime = function () {
var time = this.selectedTime;
if (time) {
this.timeChanged.next(time);
this.previousTime = time.time;
if (this.isEditable) {
this.updateInputValue(this.formatTimeForUI(time.time));
}
}
};
NgxMaterialTimepickerDialControlComponent.prototype.onKeydown = function (e) {
if (!isDigit(e)) {
e.preventDefault();
}
else {
this.changeTimeByArrow(e.keyCode);
}
};
NgxMaterialTimepickerDialControlComponent.prototype.changeTimeByArrow = function (keyCode) {
var ARROW_UP = 38;
var ARROW_DOWN = 40;
var time;
if (keyCode === ARROW_UP) {
time = String(+this.time + (this.minutesGap || 1));
}
else if (keyCode === ARROW_DOWN) {
time = String(+this.time - (this.minutesGap || 1));
}
if (!isTimeUnavailable(time, this.timeList)) {
this.time = time;
this.updateTime();
}
};
NgxMaterialTimepickerDialControlComponent.prototype.formatTimeForUI = function (value) {
var parsedTime = this.timeParserPipe.transform(value, this.timeUnit).toString();
return this.timeLocalizerPipe.transform(parsedTime, this.timeUnit, true);
};
NgxMaterialTimepickerDialControlComponent.prototype.updateInputValue = function (value) {
this.editableTimeTmpl.nativeElement.value = value;
};
return NgxMaterialTimepickerDialControlComponent;
}());
NgxMaterialTimepickerDialControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerDialControlComponent, deps: [{ token: TimeParserPipe }, { token: TimeLocalizerPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
NgxMaterialTimepickerDialControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NgxMaterialTimepickerDialControlComponent, selector: "ngx-material-timepicker-dial-control", inputs: { timeList: "timeList", timeUnit: "timeUnit", time: "time", isActive: "isActive", isEditable: "isEditable", minutesGap: "minutesGap", disabled: "disabled" }, outputs: { timeUnitChanged: "timeUnitChanged", timeChanged: "timeChanged", focused: "focused", unfocused: "unfocused" }, providers: [TimeParserPipe, TimeLocalizerPipe], viewQueries: [{ propertyName: "editableTimeTmpl", first: true, predicate: ["editableTimeTmpl"], descendants: true }], ngImport: i0__namespace, template: "<!--suppress HtmlFormInputWithoutLabel, HtmlUnknownAttribute -->\n<input class=\"timepicker-dial__control timepicker-dial__item\"\n [ngClass]=\"{'timepicker-dial__item_active': isActive}\"\n [ngModel]=\"time | timeLocalizer: timeUnit\"\n (ngModelChange)=\"time = $event\"\n [disabled]=\"disabled\"\n (input)=\"updateTime()\" (focus)=\"saveTimeAndChangeTimeUnit($event, timeUnit)\"\n readonly [timepickerAutofocus]=\"isActive\"\n *ngIf=\"!isEditable;else editableTemplate\">\n\n<ng-template #editableTemplate>\n <!--suppress HtmlFormInputWithoutLabel, HtmlUnknownAttribute -->\n <input class=\"timepicker-dial__control timepicker-dial__item timepicker-dial__control_editable\"\n #editableTimeTmpl\n [formControl]=\"timeControl\"\n [ngClass]=\"{'timepicker-dial__item_active': isActive}\"\n [timepickerAutofocus]=\"isActive\"\n (focus)=\"saveTimeAndChangeTimeUnit($event, timeUnit)\"\n (keydown)=\"onKeydown($event)\">\n</ng-template>\n", styles: [".timepicker-dial__item{cursor:pointer;color:#ffffff80;font-family:\"Roboto\",sans-serif}@supports (font-family: var(--primary-font-family)){.timepicker-dial__item{font-family:var(--primary-font-family);color:var(--dial-inactive-color)}}.timepicker-dial__item_active{color:#fff}@supports (color: var(--dial-active-color)){.timepicker-dial__item_active{color:var(--dial-active-color)}}.timepicker-dial__control{border:none;background-color:transparent;font-size:50px;width:60px;padding:0;border-radius:3px;text-align:right}.timepicker-dial__control_editable:focus{color:#00bfff;background-color:#fff;outline:deepskyblue}@supports (color: var(--dial-editable-active-color)){.timepicker-dial__control_editable:focus{color:var(--dial-editable-active-color)}}@supports (background-color: var(--dial-editable-background-color)){.timepicker-dial__control_editable:focus{background-color:var(--dial-editable-background-color)}}@supports (outline: var(--dial-editable-active-color)){.timepicker-dial__control_editable:focus{outline:var(--dial-editable-active-color)}}.timepicker-dial__control:disabled{cursor:default}.timepicker-dial__control:focus-visible{outline:none}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: AutofocusDirective, selector: "[timepickerAutofocus]", inputs: ["timepickerAutofocus"] }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "timeLocalizer": TimeLocalizerPipe } });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerDialControlComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'ngx-material-timepicker-dial-control',
templateUrl: 'ngx-material-timepicker-dial-control.component.html',
styleUrls: ['ngx-material-timepicker-dial-control.component.scss'],
providers: [TimeParserPipe, TimeLocalizerPipe],
}]
}], ctorParameters: function () { return [{ type: TimeParserPipe }, { type: TimeLocalizerPipe }]; }, propDecorators: { timeList: [{
type: i0.Input
}], timeUnit: [{
type: i0.Input
}], time: [{
type: i0.Input
}], isActive: [{
type: i0.Input
}], isEditable: [{
type: i0.Input
}], minutesGap: [{
type: i0.Input
}], disabled: [{
type: i0.Input
}], editableTimeTmpl: [{
type: i0.ViewChild,
args: ['editableTimeTmpl']
}], timeUnitChanged: [{
type: i0.Output
}], timeChanged: [{
type: i0.Output
}], focused: [{
type: i0.Output
}], unfocused: [{
type: i0.Output
}] } });
function isTimeDisabledToChange(currentTime, nextTime, timeList) {
var isNumber = /\d/.test(nextTime);
if (isNumber) {
return isTimeUnavailable(nextTime, timeList);
}
}
function isTimeUnavailable(time, timeList) {
var selectedTime = timeList.find(function (value) { return value.time === +time; });
return !selectedTime || (selectedTime && selectedTime.disabled);
}
var NgxMaterialTimepickerPeriodComponent = /** @class */ (function () {
function NgxMaterialTimepickerPeriodComponent() {
this.timePeriod = TimePeriod;
this.isPeriodAvailable = true;
this.periodChanged = new i0.EventEmitter();
}
NgxMaterialTimepickerPeriodComponent.prototype.changePeriod = function (period) {
this.isPeriodAvailable = this.isSwitchPeriodAvailable(period);
if (this.isPeriodAvailable) {
this.periodChanged.next(period);
}
};
NgxMaterialTimepickerPeriodComponent.prototype.animationDone = function () {
this.isPeriodAvailable = true;
};
NgxMaterialTimepickerPeriodComponent.prototype.isSwitchPeriodAvailable = function (period) {
var time = this.getDisabledTimeByPeriod(period);
return !time.every(function (t) { return t.disabled; });
};
NgxMaterialTimepickerPeriodComponent.prototype.getDisabledTimeByPeriod = function (period) {
switch (this.activeTimeUnit) {
case TimeUnit.HOUR:
return TimepickerTimeUtils.disableHours(this.hours, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period: period
});
case TimeUnit.MINUTE:
return TimepickerTimeUtils.disableMinutes(this.minutes, +this.selectedHour, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period: period
});
default:
throw new Error('no such TimeUnit');
}
};
return NgxMaterialTimepickerPeriodComponent;
}());
NgxMaterialTimepickerPeriodComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerPeriodComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
NgxMaterialTimepickerPeriodComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NgxMaterialTimepickerPeriodComponent, selector: "ngx-material-timepicker-period", inputs: { selectedPeriod: "selectedPeriod", format: "format", activeTimeUnit: "activeTimeUnit", hours: "hours", minutes: "minutes", minTime: "minTime", maxTime: "maxTime", selectedHour: "selectedHour", meridiems: "meridiems" }, outputs: { periodChanged: "periodChanged" }, ngImport: i0__namespace, template: "<div class=\"timepicker-period\">\n\t\t\t<button class=\"timepicker-dial__item timepicker-period__btn\"\n [ngClass]=\"{'timepicker-dial__item_active': selectedPeriod === timePeriod.AM}\"\n (click)=\"changePeriod(timePeriod.AM)\"\n type=\"button\">{{meridiems[0]}}</button>\n <button class=\"timepicker-dial__item timepicker-period__btn\"\n [ngClass]=\"{'timepicker-dial__item_active': selectedPeriod === timePeriod.PM}\"\n (click)=\"changePeriod(timePeriod.PM)\"\n type=\"button\">{{meridiems[1]}}</button>\n <div class=\"timepicker-period__warning\" [@scaleInOut] (@scaleInOut.done)=\"animationDone()\" *ngIf=\"!isPeriodAvailable\">\n <p>Current time would be invalid in this period.</p>\n </div>\n</div>\n", styles: [".timepicker-dial__item{cursor:pointer;color:#ffffff80;font-family:\"Roboto\",sans-serif}@supports (font-family: var(--primary-font-family)){.timepicker-dial__item{font-family:var(--primary-font-family);color:var(--dial-inactive-color)}}.timepicker-dial__item_active{color:#fff}@supports (color: var(--dial-active-color)){.timepicker-dial__item_active{color:var(--dial-active-color)}}.timepicker-period{display:flex;flex-direction:column;position:relative}.timepicker-period__btn{padding:1px 3px;border:0;background-color:transparent;font-size:18px;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;border-radius:3px;transition:background-color .5s;font-family:\"Roboto\",sans-serif}@supports (font-family: var(--primary-font-family)){.timepicker-period__btn{font-family:var(--primary-font-family)}}.timepicker-period__btn:focus{background-color:#00000012}.timepicker-period__warning{padding:5px 10px;border-radius:3px;background-color:#0000008c;color:#fff;position:absolute;width:200px;left:-20px;top:40px}.timepicker-period__warning>p{margin:0;font-size:12px;font-family:\"Roboto\",sans-serif}@supports (font-family: var(--primary-font-family)){.timepicker-period__warning>p{font-family:var(--primary-font-family)}}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
animations.trigger('scaleInOut', [
animations.transition(':enter', [
animations.style({ transform: 'scale(0)' }),
animations.animate('.2s', animations.style({ transform: 'scale(1)' })),
animations.sequence([
animations.animate('3s', animations.style({ opacity: 1 })),
animations.animate('.3s', animations.style({ opacity: 0 }))
])
])
])
] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxMaterialTimepickerPeriodComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'ngx-material-timepicker-period',
templateUrl: 'ngx-material-timepicker-period.component.html',
styleUrls: ['ngx-material-timepicker-period.component.scss'],
animations: [
animations.trigger('scaleInOut', [
animations.transition(':enter', [
animations.style({ transform: 'scale(0)' }),
animations.animate('.2s', animations.style({ transform: 'scale(1)' })),
animations.sequence([
animations.animate('3s', animations.style({ opacity: 1 })),
animations.animate('.3s', animations.style({ opacity: 0 }))
])
])
])
]
}]
}], propDecorators: { selectedPeriod: [{
type: i0.Input
}], format: [{
type: i0.Input
}], activeTimeUnit: [{
type: i0.Input
}], hours: [{
type: i0.Input
}], minutes: [{
type: i0.Input
}], minTime: [{
type: i0.Input
}], maxTime: [{
type: i0.Input
}], selectedHour: [{
type: i0.Input
}], meridiems: [{
type: i0.Input