ngx-material-timepicker
Version:
Handy material design timepicker for angular
1 lines • 67 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("rxjs"),require("luxon"),require("@angular/animations"),require("rxjs/operators"),require("@angular/forms"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ngx-material-timepicker",["exports","@angular/core","@angular/common","rxjs","luxon","@angular/animations","rxjs/operators","@angular/forms","@angular/platform-browser"],t):t((e=e||self)["ngx-material-timepicker"]={},e.ng.core,e.ng.common,e.rxjs,e.luxon,e.ng.animations,e.rxjs.operators,e.ng.forms,e.ng.platformBrowser)}(this,function(e,t,i,n,o,r,a,c,s){"use strict";var p=function(e,t){return(p=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(e,t)};function l(e,t){function i(){this.constructor=e}p(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}var u,m,d=function(){return(d=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var o in t=arguments[i])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function f(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a}function h(e,t){return function(i,n){t(i,n,e)}}function g(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,i){return void 0===i&&(i="minutes"),"hours"===i?e.hour>=t.hour:"minutes"===i?e.hasSame(t,i)||e.valueOf()>t.valueOf():void 0}function b(e,t,i){return void 0===i&&(i="minutes"),"hours"===i?e.hour<=t.hour:"minutes"===i?e.hasSame(t,i)||e.valueOf()<=t.valueOf():void 0}function v(e){return!!([46,8,9,27,13].some(function(t){return t===e.keyCode})||65==e.keyCode&&(!0===e.ctrlKey||!0===e.metaKey)||67==e.keyCode&&(!0===e.ctrlKey||!0===e.metaKey)||88==e.keyCode&&(!0===e.ctrlKey||!0===e.metaKey)||e.keyCode>=35&&e.keyCode<=40)||!((e.keyCode<48||e.keyCode>57)&&(e.keyCode<96||e.keyCode>105))}!function(e){e.AM="AM",e.PM="PM"}(u||(u={})),function(e){e.TWELVE="hh:mm a",e.TWELVE_SHORT="h:m a",e.TWENTY_FOUR="HH:mm",e.TWENTY_FOUR_SHORT="H:m"}(m||(m={}));var k,x=function(){function e(){}return e.parseTime=function(e,t){if(void 0===t&&(t=12),-1===e.indexOf(":"))return"Invalid time";var i=e.trim().substr(e.length-2).toUpperCase(),n=i===u.AM||i===u.PM,o=function(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var n,o,r=i.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=r.next()).done;)a.push(n.value)}catch(c){o={error:c}}finally{try{n&&!n.done&&(i=r["return"])&&i.call(r)}finally{if(o)throw o.error}}return a}(e.split(":"),2),r=o[0],a=o[1];if(24===t)return(n?this.formatHour(+r,12,i):+r)+":"+parseInt(a,10);var c=+r>12,s=c?+r-12:+r;return i=n?i:c?u.PM:u.AM,s+":"+parseInt(a,10)+" "+i},e.formatTime=function(e,t){void 0===t&&(t=12);var i=24===t?m.TWENTY_FOUR:m.TWELVE,n=24===t?m.TWENTY_FOUR_SHORT:m.TWELVE_SHORT;return o.DateTime.fromFormat(this.parseTime(e,t),n).toFormat(i).toLowerCase()},e.convertTimeToDateTime=function(e,t){void 0===t&&(t=12);var i=24===t?m.TWENTY_FOUR_SHORT:m.TWELVE_SHORT;return o.DateTime.fromFormat(this.parseTime(e,t),i)},e.isTimeAvailable=function(e,t,i,n,o,r){if(e){var a=this.convertTimeToDateTime(e,r),c=a.minute;if(o&&c%o!=0)throw new Error("Your minutes - "+c+" doesn't match your minutesGap - "+o);var s=t&&!i&&y(a,t,n),p=i&&!t&&b(a,i,n),l=t&&i&&function(e,t,i,n){return void 0===n&&(n="minutes"),"hours"===n?b(e,i,n)&&y(e,t,n):"minutes"===n?b(e,i)&&y(e,t):void 0}(a,t,i,n);return s||p||l||!t&&!i}},e.formatHour=function(e,t,i){if(24===t)return e;var n=i===u.AM?e:e+12;return i===u.AM&&12===n?0:i===u.PM&&24===n?12:n},e}(),_={time:12,angle:360},T={time:0,angle:360},C=function(){function e(){this.hourSubject=new n.BehaviorSubject(_),this.minuteSubject=new n.BehaviorSubject(T),this.periodSubject=new n.BehaviorSubject(u.AM)}return Object.defineProperty(e.prototype,"hour",{set:function(e){this.hourSubject.next(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"selectedHour",{get:function(){return this.hourSubject.asObservable()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"minute",{set:function(e){this.minuteSubject.next(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"selectedMinute",{get:function(){return this.minuteSubject.asObservable()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"period",{set:function(e){(e===u.AM||e===u.PM)&&this.periodSubject.next(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"selectedPeriod",{get:function(){return this.periodSubject.asObservable()},enumerable:!0,configurable:!0}),e.prototype.setDefaultTimeIfAvailable=function(e,t,i,n,o){try{x.isTimeAvailable(e,t,i,"minutes",o)&&this.setDefaultTime(x.formatTime(e,n),n)}catch(r){console.error(r)}},e.prototype.getFullTime=function(e){var t=this.hourSubject.getValue().time,i=this.minuteSubject.getValue().time,n=12===e?this.periodSubject.getValue():"";return x.formatTime(t+":"+i+" "+n,e)},e.prototype.setDefaultTime=function(e,t){var i=x.convertTimeToDateTime(e,t).toJSDate();if(o.DateTime.fromJSDate(i).isValid){var n=e.substr(e.length-2).toUpperCase(),r=i.getHours();this.hour=d({},_,{time:O(r,n)}),this.minute=d({},T,{time:i.getMinutes()}),this.period=n}else this.resetTime()},e.prototype.resetTime=function(){this.hour=d({},_),this.minute=d({},T),this.period=u.AM},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e=f([t.Injectable({providedIn:"root"})],e)}();function O(e,t){switch(t){case u.AM:return 0===e?12:e;case u.PM:return 12===e?12:e-12;default:return e}}!function(e){e[e.HOUR=0]="HOUR",e[e.MINUTE=1]="MINUTE"}(k||(k={}));var w,S=function(){function e(){this.backdropClickSubject=new n.Subject,this.keydownEventSubject=new n.Subject}return Object.defineProperty(e.prototype,"backdropClick",{get:function(){return this.backdropClickSubject.asObservable()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"keydownEvent",{get:function(){return this.keydownEventSubject.asObservable()},enumerable:!0,configurable:!0}),e.prototype.dispatchEvent=function(e){switch(e.type){case"click":this.backdropClickSubject.next(e);break;case"keydown":this.keydownEventSubject.next(e);break;default:throw new Error("no such event type")}},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e=f([t.Injectable({providedIn:"root"})],e)}();(w=e.AnimationState||(e.AnimationState={})).ENTER="enter",w.LEAVE="leave";var I=27,E=function(){function i(e,i){var o=this;this.timepickerService=e,this.eventService=i,this.timeUnit=k,this.activeTimeUnit=k.HOUR,this.isOpened=!1,this.isEsc=!0,this.timeSet=new t.EventEmitter,this.opened=new t.EventEmitter,this.closed=new t.EventEmitter,this.hourSelected=new t.EventEmitter,this.subscriptions=[],this.subscriptions.push(n.merge(this.eventService.backdropClick,this.eventService.keydownEvent.pipe(a.filter(function(e){return e.keyCode===I&&o.isEsc}))).subscribe(function(){return o.close()}))}return Object.defineProperty(i.prototype,"format",{get:function(){return this.timepickerInput?this.timepickerInput.format:this._format},set:function(e){this._format=24===e?24:12},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"minutesGap",{get:function(){return this._minutesGap},set:function(e){null!=e&&(e=Math.floor(e),this._minutesGap=e<=59?e:1)},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"defaultTime",{set:function(e){this.setDefaultTime(e)},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"minTime",{get:function(){return this.timepickerInput&&this.timepickerInput.min},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"maxTime",{get:function(){return this.timepickerInput&&this.timepickerInput.max},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"disabled",{get:function(){return this.timepickerInput&&this.timepickerInput.disabled},enumerable:!0,configurable:!0}),i.prototype.ngOnInit=function(){var e=this;this.subscriptions.push(this.timepickerService.selectedHour.subscribe(function(t){return e.selectedHour=t})),this.subscriptions.push(this.timepickerService.selectedMinute.subscribe(function(t){return e.selectedMinute=t})),this.subscriptions.push(this.timepickerService.selectedPeriod.subscribe(function(t){return e.selectedPeriod=t}))},i.prototype.registerInput=function(e){if(this.timepickerInput)throw Error("A Timepicker can only be associated with a single input.");this.timepickerInput=e},i.prototype.onHourChange=function(e){this.timepickerService.hour=e},i.prototype.onHourSelected=function(e){this.changeTimeUnit(k.MINUTE),this.hourSelected.next(e)},i.prototype.onMinuteChange=function(e){this.timepickerService.minute=e},i.prototype.changePeriod=function(e){this.timepickerService.period=e},i.prototype.changeTimeUnit=function(e){this.activeTimeUnit=e},i.prototype.setTime=function(){this.timeSet.next(this.timepickerService.getFullTime(this.format)),this.close()},i.prototype.setDefaultTime=function(e){this.timepickerService.setDefaultTimeIfAvailable(e,this.minTime,this.maxTime,this.format,this.minutesGap)},i.prototype.open=function(){this.isOpened=!0,this.disableAnimation||(this.animationState=e.AnimationState.ENTER),this.opened.next()},i.prototype.close=function(){this.disableAnimation?this.closeTimepicker():this.animationState=e.AnimationState.LEAVE},i.prototype.animationDone=function(t){"done"===t.phaseName&&t.toState===e.AnimationState.LEAVE&&this.closeTimepicker()},i.prototype.onKeydown=function(e){this.eventService.dispatchEvent(e),e.stopPropagation()},i.prototype.ngOnDestroy=function(){this.subscriptions.forEach(function(e){return e.unsubscribe()})},i.prototype.closeTimepicker=function(){this.isOpened=!1,this.activeTimeUnit=k.HOUR,this.closed.next()},f([t.Input(),g("design:type",t.TemplateRef)],i.prototype,"cancelBtnTmpl",void 0),f([t.Input(),g("design:type",t.TemplateRef)],i.prototype,"editableHintTmpl",void 0),f([t.Input(),g("design:type",t.TemplateRef)],i.prototype,"confirmBtnTmpl",void 0),f([t.Input("ESC"),g("design:type",Object)],i.prototype,"isEsc",void 0),f([t.Input(),g("design:type",Boolean)],i.prototype,"enableKeyboardInput",void 0),f([t.Input(),g("design:type",Boolean)],i.prototype,"preventOverlayClick",void 0),f([t.Input(),g("design:type",Boolean)],i.prototype,"disableAnimation",void 0),f([t.Input(),g("design:type",Number),g("design:paramtypes",[Number])],i.prototype,"format",null),f([t.Input(),g("design:type",Number),g("design:paramtypes",[Number])],i.prototype,"minutesGap",null),f([t.Input(),g("design:type",String),g("design:paramtypes",[String])],i.prototype,"defaultTime",null),f([t.Output(),g("design:type",Object)],i.prototype,"timeSet",void 0),f([t.Output(),g("design:type",Object)],i.prototype,"opened",void 0),f([t.Output(),g("design:type",Object)],i.prototype,"closed",void 0),f([t.Output(),g("design:type",Object)],i.prototype,"hourSelected",void 0),f([t.HostListener("keydown",["$event"]),g("design:type",Function),g("design:paramtypes",[KeyboardEvent]),g("design:returntype",void 0)],i.prototype,"onKeydown",null),i=f([t.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 \x3c!--suppress HtmlUnknownAttribute --\x3e\n <ng-container *ngTemplateOutlet="cancelBtnTmpl ? cancelBtnTmpl : cancelBtnDefault"></ng-container>\n </div>\n <div (click)="setTime()">\n \x3c!--suppress HtmlUnknownAttribute --\x3e\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:[r.trigger("timepicker",[r.transition("* => "+e.AnimationState.ENTER,[r.style({transform:"translateY(-30%)"}),r.animate("0.2s ease-out",r.style({transform:"translateY(0)"}))]),r.transition(e.AnimationState.ENTER+" => "+e.AnimationState.LEAVE,[r.style({transform:"translateY(0)",opacity:1}),r.animate("0.2s ease-out",r.style({transform:"translateY(-30%)",opacity:0}))])])],providers:[C],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}}"]}),g("design:paramtypes",[C,S])],i)}(),H=function(){function e(){}return e=f([t.Directive({selector:"[ngxMaterialTimepickerToggleIcon]"})],e)}(),j=function(){function e(){}return Object.defineProperty(e.prototype,"disabled",{get:function(){return this._disabled===undefined?this.timepicker.disabled:this._disabled},set:function(e){this._disabled=e},enumerable:!0,configurable:!0}),e.prototype.open=function(e){this.timepicker&&(this.timepicker.open(),e.stopPropagation())},f([t.Input("for"),g("design:type",E)],e.prototype,"timepicker",void 0),f([t.Input(),g("design:type",Boolean),g("design:paramtypes",[Boolean])],e.prototype,"disabled",null),f([t.ContentChild(H,{"static":!0}),g("design:type",H)],e.prototype,"customIcon",void 0),e=f([t.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)}"]})],e)}(),M={provide:c.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return P}),multi:!0},P=function(){function e(e){this.elementRef=e,this._format=12,this._value="",this.timepickerSubscriptions=[],this.onTouched=function(){},this.onChange=function(){}}return Object.defineProperty(e.prototype,"format",{get:function(){return this._format},set:function(e){this._format=24===e?24:12},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"min",{get:function(){return this._min},set:function(e){this._min="string"!=typeof e?e:x.convertTimeToDateTime(e,this._format)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"max",{get:function(){return this._max},set:function(e){this._max="string"!=typeof e?e:x.convertTimeToDateTime(e,this._format)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"timepicker",{set:function(e){this.registerTimepicker(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"value",{get:function(){return this._value},set:function(e){if(!e)return this._value="",void this.updateInputValue();var t=x.formatTime(e,this._format);if(x.isTimeAvailable(t,this._min,this._max,"minutes",this._timepicker.minutesGap,this._format))return this._value=t,void this.updateInputValue();console.warn("Selected time doesn't match min or max value")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"defaultTime",{set:function(e){this._timepicker.setDefaultTime(e)},enumerable:!0,configurable:!0}),e.prototype.onInput=function(e){this.value=e,this.onChange(e)},e.prototype.ngOnChanges=function(e){e.value&&e.value.currentValue&&(this.defaultTime=e.value.currentValue)},e.prototype.onClick=function(e){this.disableClick||(this._timepicker.open(),e.stopPropagation())},e.prototype.writeValue=function(e){this.value=e,this.defaultTime=e},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.ngOnDestroy=function(){this.timepickerSubscriptions.forEach(function(e){return e.unsubscribe()})},e.prototype.registerTimepicker=function(e){var t=this;if(!e)throw new Error("NgxMaterialTimepickerComponent is not defined. Please make sure you passed the timepicker to ngxTimepicker directive");this._timepicker=e,this._timepicker.registerInput(this),this.timepickerSubscriptions.push(this._timepicker.timeSet.subscribe(function(e){t.value=e,t.onChange(t._value),t.onTouched()})),this.timepickerSubscriptions.push(this._timepicker.closed.subscribe(function(){return t.defaultTime=t._value}))},e.prototype.updateInputValue=function(){this.elementRef.nativeElement.value=this.value},f([t.Input(),g("design:type",Number),g("design:paramtypes",[Number])],e.prototype,"format",null),f([t.Input(),g("design:type",Object),g("design:paramtypes",[Object])],e.prototype,"min",null),f([t.Input(),g("design:type",Object),g("design:paramtypes",[Object])],e.prototype,"max",null),f([t.Input("ngxTimepicker"),g("design:type",E),g("design:paramtypes",[E])],e.prototype,"timepicker",null),f([t.Input(),g("design:type",String),g("design:paramtypes",[String])],e.prototype,"value",null),f([t.Input(),g("design:type",Boolean)],e.prototype,"disabled",void 0),f([t.Input(),g("design:type",Boolean)],e.prototype,"disableClick",void 0),f([t.HostListener("click",["$event"]),g("design:type",Function),g("design:paramtypes",[Object]),g("design:returntype",void 0)],e.prototype,"onClick",null),e=f([t.Directive({selector:"[ngxTimepicker]",providers:[M],host:{"[disabled]":"disabled","(input)":"onInput($event.target.value)","(blur)":"onTouched()"}}),g("design:paramtypes",[t.ElementRef])],e)}(),U=function(){function e(e){this.element=e.nativeElement}return e.prototype.ngAfterViewInit=function(){this.theme&&this.setTheme(this.theme)},e.prototype.setTheme=function(e){for(var t in e)if(e.hasOwnProperty(t)){if("string"==typeof e[t]){for(var i in e)e.hasOwnProperty(i)&&this.element.style.setProperty("--"+i.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),e[i]);return}this.setTheme(e[t])}},f([t.Input("ngxMaterialTimepickerTheme"),g("design:type",Object)],e.prototype,"theme",void 0),e=f([t.Directive({selector:"[ngxMaterialTimepickerTheme]"}),g("design:paramtypes",[t.ElementRef])],e)}();function D(e){return Array(e).fill(1).map(function(e,t){var i=e+t;return{time:24===i?0:i,angle:30*i}})}function A(e,t){return t.min||t.max?e.map(function(e){var i=24===t.format?e.time:x.formatHour(e.time,t.format,t.period),n=o.DateTime.fromObject({hour:i}).toFormat(m.TWELVE);return d({},e,{disabled:!x.isTimeAvailable(n,t.min,t.max,"hours")})}):e}function L(e){void 0===e&&(e=1);for(var t=[],i=0;i<60;i++){var n=6*i;i%e==0&&t.push({time:i,angle:0!==n?n:360})}return t}function N(e,t,i){if(i.min||i.max){var n=x.formatHour(t,i.format,i.period);return e.map(function(e){var t=o.DateTime.fromObject({hour:n,minute:e.time}).toFormat(m.TWELVE);return d({},e,{disabled:!x.isTimeAvailable(t,i.min,i.max,"minutes")})})}return e}var F=function(){function e(e){this.hourChange=new t.EventEmitter,this.hourSelected=new t.EventEmitter,this.hoursList=[],this.hoursList=D(e)}return e.prototype.onTimeSelected=function(e){this.hourSelected.next(e)},f([t.Input(),g("design:type",Object)],e.prototype,"selectedHour",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"minTime",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"maxTime",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"format",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"hourChange",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"hourSelected",void 0),e}(),R=function(e){function i(){return e.call(this,24)||this}return l(i,e),i.prototype.ngAfterContentInit=function(){this.hoursList=A(this.hoursList,{min:this.minTime,max:this.maxTime,format:this.format})},i=f([t.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'}),g("design:paramtypes",[])],i)}(F),z=function(e){function i(){return e.call(this,12)||this}return l(i,e),i.prototype.ngOnChanges=function(e){e.period&&e.period.currentValue&&(this.hoursList=A(this.hoursList,{min:this.minTime,max:this.maxTime,format:this.format,period:this.period}))},f([t.Input(),g("design:type",String)],i.prototype,"period",void 0),i=f([t.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'}),g("design:paramtypes",[])],i)}(F),B=function(){function e(){this.minutesList=[],this.timeUnit=k,this.minuteChange=new t.EventEmitter}return e.prototype.ngOnChanges=function(e){if(e.period&&e.period.currentValue){var t=L(this.minutesGap);this.minutesList=N(t,this.selectedHour,{min:this.minTime,max:this.maxTime,format:this.format,period:this.period})}},f([t.Input(),g("design:type",Object)],e.prototype,"selectedMinute",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"selectedHour",void 0),f([t.Input(),g("design:type",String)],e.prototype,"period",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"minTime",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"maxTime",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"format",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"minutesGap",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"minuteChange",void 0),e=f([t.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'})],e)}(),$={height:"75px",top:"calc(50% - 75px)"},V={height:"103px",top:"calc(50% - 103px)"},G=function(){function e(){this.timeUnit=k,this.innerClockFaceSize=85,this.timeChange=new t.EventEmitter,this.timeSelected=new t.EventEmitter}return e.prototype.ngAfterViewInit=function(){this.setClockHandPosition(),this.addTouchEvents()},e.prototype.ngOnChanges=function(e){var t=this,i=e.faceTime,n=e.selectedTime;i&&i.currentValue&&n&&n.currentValue&&(this.selectedTime=this.faceTime.find(function(e){return e.time===t.selectedTime.time})),n&&n.currentValue&&this.setClockHandPosition(),i&&i.currentValue&&setTimeout(function(){return t.selectAvailableTime()})},e.prototype.trackByTime=function(e,t){return t.time},e.prototype.onMousedown=function(e){e.preventDefault(),this.isStarted=!0},e.prototype.selectTime=function(e){if(this.isStarted||!(e instanceof MouseEvent)||"click"===e.type){var t,i,n,o,r,a=this.clockFace.nativeElement.getBoundingClientRect(),c=a.left+a.width/2,s=a.top+a.height/2,p=180*Math.atan(Math.abs(e.clientX-c)/Math.abs(e.clientY-s))/Math.PI,l=(t=c,i=s,n=e.clientX,o=e.clientY,r=p,o>i&&n>=t?180-r:o>i&&n<t?180+r:o<i&&n<t?360-r:r),u=this.format&&this.isInnerClockFace(c,s,e.clientX,e.clientY),m=this.unit===k.MINUTE?6*(this.minutesGap||1):30,d=u?K(l,m)+360:K(l,m),f=0===d?360:d,h=this.faceTime.find(function(e){return e.angle===f});h&&!h.disabled&&(this.timeChange.next(h),this.isStarted||this.timeSelected.next(h.time))}},e.prototype.onMouseup=function(e){e.preventDefault(),this.isStarted=!1},e.prototype.isHourSelected=function(e){return e===this.selectedTime.time&&!this.isClockFaceDisabled},e.prototype.isMinuteSelected=function(e){return this.selectedTime.time===e&&e%(this.minutesGap||5)==0&&!this.isClockFaceDisabled},e.prototype.ngOnDestroy=function(){this.removeTouchEvents()},e.prototype.addTouchEvents=function(){this.touchStartHandler=this.onMousedown.bind(this),this.touchEndHandler=this.onMouseup.bind(this),this.clockFace.nativeElement.addEventListener("touchstart",this.touchStartHandler),this.clockFace.nativeElement.addEventListener("touchend",this.touchEndHandler)},e.prototype.removeTouchEvents=function(){this.clockFace.nativeElement.removeEventListener("touchstart",this.touchStartHandler),this.clockFace.nativeElement.removeEventListener("touchend",this.touchEndHandler)},e.prototype.setClockHandPosition=function(){24===this.format&&(this.selectedTime.time>12||0===this.selectedTime.time?this.decreaseClockHand():this.increaseClockHand()),this.clockHand.nativeElement.style.transform="rotate("+this.selectedTime.angle+"deg)"},e.prototype.selectAvailableTime=function(){var e=this,t=this.faceTime.find(function(t){return e.selectedTime.time===t.time});if(this.isClockFaceDisabled=this.faceTime.every(function(e){return e.disabled}),t&&t.disabled&&!this.isClockFaceDisabled){var i=this.faceTime.find(function(e){return!e.disabled});this.timeChange.next(i)}},e.prototype.isInnerClockFace=function(e,t,i,n){return Math.sqrt(Math.pow(i-e,2)+Math.pow(n-t,2))<this.innerClockFaceSize},e.prototype.decreaseClockHand=function(){this.clockHand.nativeElement.style.height=$.height,this.clockHand.nativeElement.style.top=$.top},e.prototype.increaseClockHand=function(){this.clockHand.nativeElement.style.height=V.height,this.clockHand.nativeElement.style.top=V.top},f([t.Input(),g("design:type",Array)],e.prototype,"faceTime",void 0),f([t.Input(),g("design:type",Object)],e.prototype,"selectedTime",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"unit",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"format",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"minutesGap",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"timeChange",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"timeSelected",void 0),f([t.ViewChild("clockFace",{"static":!0}),g("design:type",t.ElementRef)],e.prototype,"clockFace",void 0),f([t.ViewChild("clockHand",{"static":!0}),g("design:type",t.ElementRef)],e.prototype,"clockHand",void 0),f([t.HostListener("mousedown",["$event"]),g("design:type",Function),g("design:paramtypes",[Object]),g("design:returntype",void 0)],e.prototype,"onMousedown",null),f([t.HostListener("click",["$event"]),t.HostListener("touchmove",["$event.changedTouches[0]"]),t.HostListener("touchend",["$event.changedTouches[0]"]),t.HostListener("mousemove",["$event"]),g("design:type",Function),g("design:paramtypes",[Object]),g("design:returntype",void 0)],e.prototype,"selectTime",null),f([t.HostListener("mouseup",["$event"]),g("design:type",Function),g("design:paramtypes",[Object]),g("design:returntype",void 0)],e.prototype,"onMouseup",null),e=f([t.Component({selector:"ngx-material-timepicker-face",template:'<div class="clock-face" #clockFace>\n <div *ngIf="unit !== timeUnit.MINUTE;else minutesFace" class="clock-face__container">\n <div class="clock-face__number clock-face__number--outer"\n [style.transform]="\'rotateZ(\'+ time.angle +\'deg) translateX(-50%)\' | styleSanitizer"\n *ngFor="let time of faceTime.slice(0, 12); trackBy: trackByTime">\n\t\t\t<span [style.transform]="\'rotateZ(-\'+ time.angle +\'deg)\' | styleSanitizer"\n [ngClass]="{\'active\': isHourSelected(time.time), \'disabled\': time.disabled}">{{time.time}}</span>\n </div>\n <div class="clock-face__inner" *ngIf="faceTime.length > 12"\n [style.top]="\'calc(50% - \' + innerClockFaceSize + \'px)\'">\n <div class="clock-face__number clock-face__number--inner"\n [style.transform]="\'rotateZ(\'+ time.angle +\'deg) translateX(-50%)\' | styleSanitizer"\n [style.height.px]="innerClockFaceSize"\n *ngFor="let time of faceTime.slice(12, 24); trackBy: trackByTime">\n\t\t\t<span [style.transform]="\'rotateZ(-\'+ time.angle +\'deg)\' | styleSanitizer"\n [ngClass]="{\'active\': isHourSelected(time.time), \'disabled\': time.disabled}">\n {{time.time === 0 ? \'00\' : time.time}}</span>\n </div>\n </div>\n </div>\n\n <span class="clock-face__clock-hand" [ngClass]="{\'clock-face__clock-hand_minute\': unit === timeUnit.MINUTE}"\n #clockHand [hidden]="isClockFaceDisabled"></span>\n</div>\n<ng-template #minutesFace>\n <div class="clock-face__container">\n <div class="clock-face__number clock-face__number--outer"\n [style.transform]="\'rotateZ(\'+ time.angle +\'deg) translateX(-50%)\' | styleSanitizer"\n *ngFor="let time of faceTime; trackBy: trackByTime">\n\t<span [style.transform]="\'rotateZ(-\'+ time.angle +\'deg)\' | styleSanitizer"\n [ngClass]="{\'active\': isMinuteSelected(time.time), \'disabled\': time.disabled}">\n\t{{time.time === 0 ? \'00\' : time.time | minutesFormatter: minutesGap}}</span>\n </div>\n </div>\n</ng-template>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".clock-face{width:290px;height:290px;border-radius:50%;position:relative;display:flex;justify-content:center;padding:20px;box-sizing:border-box;background-color:#f0f0f0}@supports (background-color:var(--clock-face-background-color)){.clock-face{background-color:var(--clock-face-background-color)}}.clock-face__inner{position:absolute}.clock-face__container{margin-left:-2px}.clock-face__number{position:absolute;-webkit-transform-origin:0 100%;transform-origin:0 100%;width:50px;text-align:center;z-index:2}.clock-face__number--outer{height:calc(290px / 2 - 20px)}.clock-face__number--outer>span{font-size:16px;color:#6c6c6c}@supports (color:var(--clock-face-time-inactive-color)){.clock-face__number--outer>span{color:var(--clock-face-time-inactive-color)}}.clock-face__number--inner>span{font-size:14px;color:#929292}@supports (color:var(--clock-face-inner-time-inactive-color)){.clock-face__number--inner>span{color:var(--clock-face-inner-time-inactive-color)}}.clock-face__number>span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:30px;height:30px;display:flex;justify-content:center;align-items:center;margin:auto;border-radius:50%;font-weight:500;font-family:Roboto,sans-serif}@supports (font-family:var(--primary-font-family)){.clock-face__number>span{font-family:var(--primary-font-family)}}.clock-face__number>span.active{background-color:#00bfff;color:#fff}@supports (background-color:var(--clock-hand-color)){.clock-face__number>span.active{background-color:var(--clock-hand-color);color:var(--clock-face-time-active-color)}}.clock-face__number>span.disabled{color:#c5c5c5}@supports (color:var(--clock-face-time-disabled-color)){.clock-face__number>span.disabled{color:var(--clock-face-time-disabled-color)}}.clock-face__clock-hand{height:103px;width:2px;-webkit-transform-origin:0 100%;transform-origin:0 100%;position:absolute;top:calc(50% - 103px);z-index:1;background-color:#00bfff}@supports (background-color:var(--clock-hand-color)){.clock-face__clock-hand{background-color:var(--clock-hand-color)}}.clock-face__clock-hand:after{content:'';width:7px;height:7px;border-radius:50%;background-color:inherit;position:absolute;bottom:-3px;left:-3.5px}.clock-face__clock-hand_minute:before{content:'';width:7px;height:7px;background-color:#fff;border-radius:50%;position:absolute;top:-8px;left:calc(50% - 8px);box-sizing:content-box;border:4px solid #00bfff}@supports (border-color:var(--clock-hand-color)){.clock-face__clock-hand_minute:before{border-color:var(--clock-hand-color)}}@media (max-device-width:1023px) and (orientation:landscape){.clock-face{width:225px;height:225px;padding:5px}.clock-face__number--outer{height:calc(225px / 2 - 5px)}.clock-face__clock-hand_minute:before{top:0}}"]})],e)}();function K(e,t){return Math.round(e/t)*t}var W=function(){function e(){}return e=f([t.Component({selector:"ngx-material-timepicker-button",template:'<button class="timepicker-button" type="button">\n <span><ng-content></ng-content></span>\n</button>\n',styles:[".timepicker-button{display:inline-block;height:36px;min-width:88px;line-height:36px;border:12px;border-radius:2px;background-color:transparent;text-align:center;transition:450ms cubic-bezier(.23,1,.32,1);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:pointer;outline:0;color:#00bfff}@supports (color:var(--button-color)){.timepicker-button{color:var(--button-color)}}.timepicker-button:focus,.timepicker-button:hover{background-color:rgba(153,153,153,.2)}.timepicker-button>span{font-size:14px;text-transform:uppercase;font-weight:600;padding-left:16px;padding-right:16px;font-family:Roboto,sans-serif}@supports (font-family:var(--primary-font-family)){.timepicker-button>span{font-family:var(--primary-font-family)}}"]})],e)}(),Y=function(){function e(){this.timeUnit=k,this.periodChanged=new t.EventEmitter,this.timeUnitChanged=new t.EventEmitter,this.hourChanged=new t.EventEmitter,this.minuteChanged=new t.EventEmitter}return e.prototype.ngOnChanges=function(e){if(e.period&&e.period.currentValue||e.format&&e.format.currentValue){var t=D(this.format);this.hours=A(t,{min:this.minTime,max:this.maxTime,format:this.format,period:this.period})}if(e.period&&e.period.currentValue||e.hour&&e.hour.currentValue){var i=L(this.minutesGap);this.minutes=N(i,+this.hour,{min:this.minTime,max:this.maxTime,format:this.format,period:this.period})}},e.prototype.changeTimeUnit=function(e){this.timeUnitChanged.next(e)},e.prototype.changePeriod=function(e){this.periodChanged.next(e)},e.prototype.changeHour=function(e){this.hourChanged.next(e)},e.prototype.changeMinute=function(e){this.minuteChanged.next(e)},e.prototype.showHint=function(){this.isHintVisible=!0},e.prototype.hideHint=function(){this.isHintVisible=!1},f([t.Input(),g("design:type",t.TemplateRef)],e.prototype,"editableHintTmpl",void 0),f([t.Input(),g("design:type",Object)],e.prototype,"hour",void 0),f([t.Input(),g("design:type",Object)],e.prototype,"minute",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"format",void 0),f([t.Input(),g("design:type",String)],e.prototype,"period",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"activeTimeUnit",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"minTime",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"maxTime",void 0),f([t.Input(),g("design:type",Boolean)],e.prototype,"isEditable",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"minutesGap",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"periodChanged",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"timeUnitChanged",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"hourChanged",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"minuteChanged",void 0),e=f([t.Component({selector:"ngx-material-timepicker-dial",template:'<div class="timepicker-dial">\n <div class="timepicker-dial__container">\n <div class="timepicker-dial__time">\n <ngx-material-timepicker-dial-control [timeList]="hours" [time]="hour" [timeUnit]="timeUnit.HOUR"\n [isActive]="activeTimeUnit === timeUnit.HOUR"\n [isEditable]="isEditable"\n (timeUnitChanged)="changeTimeUnit($event)"\n (timeChanged)="changeHour($event)"\n (focused)="showHint()"\n (unfocused)="hideHint()">\n\n </ngx-material-timepicker-dial-control>\n <span>:</span>\n <ngx-material-timepicker-dial-control [timeList]="minutes" [time]="minute" [timeUnit]="timeUnit.MINUTE"\n [isActive]="activeTimeUnit === timeUnit.MINUTE"\n [isEditable]="isEditable"\n [minutesGap]="minutesGap"\n (timeUnitChanged)="changeTimeUnit($event)"\n (timeChanged)="changeMinute($event)"\n (focused)="showHint()"\n (unfocused)="hideHint()">\n\n </ngx-material-timepicker-dial-control>\n </div>\n <ngx-material-timepicker-period class="timepicker-dial__period"\n [ngClass]="{\'timepicker-dial__period--hidden\': format === 24}"\n [selectedPeriod]="period" [activeTimeUnit]="activeTimeUnit"\n [maxTime]="maxTime" [minTime]="minTime" [format]="format"\n [hours]="hours" [minutes]="minutes" [selectedHour]="hour"\n (periodChanged)="changePeriod($event)"></ngx-material-timepicker-period>\n </div>\n <div *ngIf="isEditable" [ngClass]="{\'timepicker-dial__hint-container--hidden\': !isHintVisible}">\n \x3c!--suppress HtmlUnknownAttribute --\x3e\n <ng-container *ngTemplateOutlet="editableHintTmpl ? editableHintTmpl : editableHintDefault"></ng-container>\n <ng-template #editableHintDefault>\n <small class="timepicker-dial__hint"> * use arrows (<span>⇅</span>) to change the time</small>\n </ng-template>\n </div>\n</div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".timepicker-dial{text-align:right}.timepicker-dial__container{display:flex;align-items:center;justify-content:flex-end;-webkit-tap-highlight-color:transparent}.timepicker-dial__time{display:flex;align-items:baseline;line-height:normal;font-size:50px;color:rgba(255,255,255,.5);font-family:Roboto,sans-serif}@supports (font-family:var(--primary-font-family)){.timepicker-dial__time{font-family:var(--primary-font-family);color:var(--dial-inactive-color)}}.timepicker-dial__period{display:block;margin-left:10px}.timepicker-dial__hint-container--hidden,.timepicker-dial__period--hidden{visibility:hidden}.timepicker-dial__hint{display:inline-block;font-size:10px;color:#fff}@supports (color:var(--dial-active-color)){.timepicker-dial__hint{color:var(--dial-active-color)}}.timepicker-dial__hint span{font-size:14px}@media (max-device-width:1023px) and (orientation:landscape){.timepicker-dial__container{flex-direction:column}.timepicker-dial__period{margin-left:0}}"]})],e)}(),q=function(){function e(){}return e.prototype.transform=function(e,t){if(null==e||""===e)return e;switch(t){case k.HOUR:return o.DateTime.fromObject({hour:+e}).toFormat("HH");case k.MINUTE:return o.DateTime.fromObject({minute:+e}).toFormat("mm");default:throw new Error("no such time unit")}},e=f([t.Pipe({name:"timeFormatter"})],e)}(),Z=function(){function e(){this.timeUnitChanged=new t.EventEmitter,this.timeChanged=new t.EventEmitter,this.focused=new t.EventEmitter,this.unfocused=new t.EventEmitter}return Object.defineProperty(e.prototype,"selectedTime",{get:function(){var e=this;if(this.time)return this.timeList.find(function(t){return t.time===+e.time})},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){if(e.time&&e.time.currentValue!==undefined){if(this.isEditable&&!e.time.firstChange)return;this.time=(new q).transform(+e.time.currentValue,this.timeUnit)}},e.prototype.saveTimeAndChangeTimeUnit=function(e,t){e.preventDefault(),this.previousTime=this.time,this.timeUnitChanged.next(t),this.focused.next()},e.prototype.updateTime=function(){var e=this.selectedTime;e&&(this.timeChanged.next(e),this.previousTime=e.time)},e.prototype.formatTime=function(){if(this.isEditable){var e=this.time||this.previousTime;this.time=(new q).transform(+e,this.timeUnit),this.unfocused.next()}},e.prototype.onKeyDown=function(e){var t=String.fromCharCode(e.keyCode);v(e)&&!function(e,t,i){if(/\d/.test(t)){var n=e+t;return X(n,i)}}(this.time,t,this.timeList)||e.preventDefault(),v(e)&&this.changeTimeByArrow(e.keyCode)},e.prototype.changeTimeByArrow=function(e){var t;38===e?t=String(+this.time+(this.minutesGap||1)):40===e&&(t=String(+this.time-(this.minutesGap||1))),X(t,this.timeList)||(this.time=t,this.updateTime())},f([t.Input(),g("design:type",Array)],e.prototype,"timeList",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"timeUnit",void 0),f([t.Input(),g("design:type",String)],e.prototype,"time",void 0),f([t.Input(),g("design:type",Boolean)],e.prototype,"isActive",void 0),f([t.Input(),g("design:type",Boolean)],e.prototype,"isEditable",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"minutesGap",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"timeUnitChanged",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"timeChanged",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"focused",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"unfocused",void 0),e=f([t.Component({selector:"ngx-material-timepicker-dial-control",template:'\x3c!--suppress HtmlFormInputWithoutLabel --\x3e\n<input class="timepicker-dial__control timepicker-dial__item"\n [ngClass]="{\'timepicker-dial__item_active\': isActive, \'timepicker-dial__control_editable\': isEditable}"\n [(ngModel)]="time" (input)="updateTime()" (focus)="saveTimeAndChangeTimeUnit($event, timeUnit)"\n (blur)="formatTime()" [readonly]="!isEditable" [timepickerAutofocus]="isActive" (keydown)="onKeyDown($event)">\n',styles:[".timepicker-dial__item{cursor:pointer;color:rgba(255,255,255,.5);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}.timepicker-dial__control_editable:focus{color:#00bfff;background-color:#fff;outline:#00bfff}"]})],e)}();function X(e,t){var i=t.find(function(t){return t.time===+e});return!i||i&&i.disabled}var J=function(){function e(){this.timePeriod=u,this.isPeriodAvailable=!0,this.periodChanged=new t.EventEmitter}return e.prototype.changePeriod=function(e){this.isPeriodAvailable=this.isSwitchPeriodAvailable(e),this.isPeriodAvailable&&this.periodChanged.next(e)},e.prototype.animationDone=function(){this.isPeriodAvailable=!0},e.prototype.isSwitchPeriodAvailable=function(e){return!this.getDisabledTimeByPeriod(e).every(function(e){return e.disabled})},e.prototype.getDisabledTimeByPeriod=function(e){switch(this.activeTimeUnit){case k.HOUR:return A(this.hours,{min:this.minTime,max:this.maxTime,format:this.format,period:e});case k.MINUTE:return N(this.minutes,+this.selectedHour,{min:this.minTime,max:this.maxTime,format:this.format,period:e});default:throw new Error("no such TimeUnit")}},f([t.Input(),g("design:type",String)],e.prototype,"selectedPeriod",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"format",void 0),f([t.Input(),g("design:type",Number)],e.prototype,"activeTimeUnit",void 0),f([t.Input(),g("design:type",Array)],e.prototype,"hours",void 0),f([t.Input(),g("design:type",Array)],e.prototype,"minutes",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"minTime",void 0),f([t.Input(),g("design:type",o.DateTime)],e.prototype,"maxTime",void 0),f([t.Input(),g("design:type",Object)],e.prototype,"selectedHour",void 0),f([t.Output(),g("design:type",Object)],e.prototype,"periodChanged",void 0),e=f([t.Component({selector:"ngx-material-timepicker-period",template:'<div class="timepicker-period">\n\t\t