ng-clock-picker-lib
Version:
[](https://circleci.com/gh/jedrzejiwanicki/ng-clockpicker/tree/master)
1,162 lines (1,137 loc) • 118 kB
JavaScript
import { Injectable, ComponentFactoryResolver, Component, ViewEncapsulation, ViewChild, Directive, Input, HostListener, ViewContainerRef, ElementRef, forwardRef, EventEmitter, Output, NgModule } from '@angular/core';
import { Subject, Observable, merge } from 'rxjs';
import { trigger, style, animate, transition, state } from '@angular/animations';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { filter, map } from 'rxjs/internal/operators';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class AbstractValueAccessor {
constructor() { }
/**
* @param {?} obj
* @return {?}
*/
onChange(obj) { }
/**
* @return {?}
*/
onTouched() { }
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
this._value = obj;
this.onChange(obj);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class DynamicComponentsService {
/**
* @param {?} componentFactoryResolver
*/
constructor(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
}
/**
* @template T
* @param {?} component
* @param {?} vcr
* @param {?} subscriber
* @param {?=} config
* @return {?}
*/
loadDynamicComponent(component, vcr, subscriber, config) {
/** @type {?} */
const factory = this.componentFactoryResolver.resolveComponentFactory(component);
/** @type {?} */
const componentRef = vcr.createComponent(factory);
for (const key in config) {
if (config.hasOwnProperty(key)) {
((/** @type {?} */ (componentRef.instance)))[key] = config[key];
}
}
((/** @type {?} */ (componentRef.instance))).close = (data) => {
componentRef.destroy();
subscriber.next(data);
};
}
}
DynamicComponentsService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
DynamicComponentsService.ctorParameters = () => [
{ type: ComponentFactoryResolver }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @abstract
*/
class DialogComponent {
constructor() { }
/**
* @param {?} data
* @return {?}
*/
close(data) { }
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
const ɵ0 = (_, i, a) => i === a.length - 1 ? 0 : i + 1;
/** @type {?} */
const fullHours = Array(24)
.fill(0, 0, 24)
.map(ɵ0);
/** @type {?} */
const hours = {
'24h': fullHours.slice(12, 24),
'12h': fullHours.slice(0, 12),
};
/** @type {?} */
const config = (hoursScope) => ({
hours: hours[hoursScope],
minutes: Array(60).fill(0, 0, 60).map((_, i) => i),
});
/** @type {?} */
const defaultConfig = {
buttonConfirm: 'Confirm',
buttonCancel: 'Cancel',
initialValue: '12:00',
closeOnOverlayClick: false,
is24: false,
};
/** @type {?} */
const MODE_MINUTES = 'minutes';
/** @type {?} */
const MODE_HOURS = 'hours';
/** @type {?} */
const HOURS_MODE_AM = 'AM';
/** @type {?} */
const HOURS_MODE_PM = 'PM';
/** @type {?} */
const HOURS_SCOPE_24 = '24h';
/** @type {?} */
const HOURS_SCOPE_12 = '12h';
/** @type {?} */
const defaults = {
hours: 12,
minutes: 0,
scope: HOURS_SCOPE_12,
is24: false,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @param {?} value
* @return {?}
*/
function convertToTimeFormat(value) {
return value < 10 ? `0${value}` : value.toString();
}
/**
* @param {?} time
* @return {?}
*/
function parseTimeString(time) {
if (!time) {
return defaults;
}
/** @type {?} */
const date = new Date(`11/11/11 ${time}`);
/** @type {?} */
const scope = determineScope(date.getHours());
return {
hours: date.getHours(),
minutes: date.getMinutes(),
scope,
};
}
/**
* @param {?} hour
* @return {?}
*/
function determineScope(hour) {
for (const key in hours) {
if (hours[key].indexOf(hour) >= 0) {
return key;
}
}
}
/**
* @param {?} hours
* @param {?} minutes
* @param {?} mode
* @param {?} is24
* @return {?}
*/
function getDisplayTime(hours$$1, minutes, mode, is24) {
/** @type {?} */
const date = new Date();
date.setHours((mode.isHoursModePM && !is24) ? hours$$1 + 12 : hours$$1);
date.setMinutes(minutes);
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class Mode {
constructor() {
this._mode = MODE_HOURS;
}
/**
* @return {?}
*/
get mode() {
return this._mode;
}
/**
* @return {?}
*/
get isModeMinutes() {
return this._mode === MODE_MINUTES;
}
/**
* @return {?}
*/
get isModeHours() {
return this._mode === MODE_HOURS;
}
/**
* @param {?} mode
* @return {?}
*/
set mode(mode) {
this._mode = mode;
}
/**
* @return {?}
*/
setModeToMinutes() {
this.mode = MODE_MINUTES;
}
/**
* @return {?}
*/
setModeToHours() {
this.mode = MODE_HOURS;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class HoursScope {
/**
* @param {?} is24
* @param {?} scope
*/
constructor(is24, scope) {
this._hoursScopeChangeEmitter = new Subject();
this._value = is24 ? scope : HOURS_SCOPE_12;
}
/**
* @param {?} scope
* @return {?}
*/
static isHoursScope24(scope) {
return scope === HOURS_SCOPE_24;
}
/**
* @return {?}
*/
get hoursScopeChanged() {
return this._hoursScopeChangeEmitter.asObservable();
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} scope
* @return {?}
*/
set value(scope) {
this._hoursScopeChangeEmitter.next({ current: this.value, next: scope });
this._value = scope;
}
/**
* @return {?}
*/
get isScope24() {
return this.value === HOURS_SCOPE_24;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class HoursMode {
/**
* @param {?} scope
*/
constructor(scope) {
this._value = HoursScope.isHoursScope24(scope) ? HOURS_MODE_PM : HOURS_MODE_AM;
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} mode
* @return {?}
*/
set value(mode) {
this._value = mode;
}
/**
* @return {?}
*/
get isHoursModePM() {
return this.value === HOURS_MODE_PM;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class Time {
/**
* @param {?=} initialConfig
*/
constructor(initialConfig = defaults) {
this._mode = new Mode();
this.init(initialConfig);
}
/**
* @param {?} hour
* @param {?} currentScope
* @param {?} nextScope
* @return {?}
*/
static getConcurrentScopeValue(hour, currentScope, nextScope) {
return hours[nextScope][hours[currentScope].indexOf(hour)];
}
/**
* @param {?} initialConfig
* @return {?}
*/
init(initialConfig) {
this._is24 = initialConfig.is24;
this._hoursScope = new HoursScope(initialConfig.is24, initialConfig.scope);
this._hoursMode = new HoursMode(initialConfig.scope);
this._selectedMinutes = initialConfig.minutes;
this._selectedHours = (initialConfig.is24 || initialConfig.scope === this._hoursScope.value)
? initialConfig.hours
: Time.getConcurrentScopeValue(initialConfig.hours, initialConfig.scope, this._hoursScope.value);
this._hoursScope.hoursScopeChanged.subscribe(({ current, next }) => {
this.hours = Time.getConcurrentScopeValue(this.selected.hours, current, next);
});
}
/**
* @return {?}
*/
get selected() {
return {
hours: this._selectedHours,
minutes: this._selectedMinutes,
};
}
/**
* @return {?}
*/
get is24() {
return this._is24;
}
/**
* @return {?}
*/
get Mode() {
return this._mode;
}
/**
* @return {?}
*/
get HoursScope() {
return this._hoursScope;
}
/**
* @return {?}
*/
get HoursMode() {
return this._hoursMode;
}
/**
* @param {?} minutes
* @return {?}
*/
set minutes(minutes) {
this._selectedMinutes = minutes;
}
/**
* @param {?} hour
* @return {?}
*/
set hours(hour) {
this._selectedHours = hour;
}
/**
* @return {?}
*/
get displayTime() {
return getDisplayTime(this.selected.hours, this.selected.minutes, this.HoursMode, this.is24);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ClockPickerService {
constructor() {
this._config = defaultConfig;
}
/**
* @return {?}
*/
init() {
const { initialValue, is24 } = this.config;
this._time = new Time((/** @type {?} */ (Object.assign({}, parseTimeString(initialValue), { is24 }))));
}
/**
* @return {?}
*/
get Time() {
return this._time;
}
/**
* @param {?} clockPickerConfig
* @return {?}
*/
set config(clockPickerConfig) {
this._config = clockPickerConfig;
}
/**
* @return {?}
*/
get config() {
return this._config;
}
/**
* @param {?} mode
* @return {?}
*/
clockValues(mode) {
return config(this.Time.HoursScope.value)[mode];
}
}
ClockPickerService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
ClockPickerService.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const enterLeave = trigger('enterLeave', [
transition('* => visible', [
style({ opacity: 0 }),
animate('0.2s', style({ opacity: 1 })),
]),
transition('visible => hidden', [
style({ opacity: 1 }),
animate('0.2s', style({ opacity: 0 }))
])
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const STATE_VISIBLE = 'visible';
/** @type {?} */
const STATE_HIDDEN = 'hidden';
class EnterLeaveComponent {
constructor() {
this.state = STATE_VISIBLE;
this.requestCloseEmitter = new Subject();
}
/**
* @return {?}
*/
requestClose() {
this.state = STATE_HIDDEN;
return this.requestCloseEmitter.asObservable();
}
/**
* @param {?} __0
* @return {?}
*/
onTransitionEnd({ toState }) {
if (toState === STATE_HIDDEN) {
this.requestCloseEmitter.next(true);
}
}
}
EnterLeaveComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-enter-leave',
template: "<div [@enterLeave]='state' (@enterLeave.done)=\"onTransitionEnd($event)\">\n <ng-content></ng-content>\n</div>\n",
animations: [enterLeave],
styles: [""]
}] }
];
/** @nocollapse */
EnterLeaveComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ClockPickerDialogComponent extends DialogComponent {
/**
* @param {?} clockPickerService
*/
constructor(clockPickerService) {
super();
this.clockPickerService = clockPickerService;
}
/**
* @return {?}
*/
get items() {
return this.clockPickerService.clockValues(this.clockPickerService.Time.Mode.mode);
}
/**
* @return {?}
*/
get fullTime() {
return this.clockPickerService.Time.displayTime;
}
/**
* @return {?}
*/
get config() {
return this.clockPickerService.config;
}
/**
* @return {?}
*/
handleClose() {
this.enterLeaveCmp.requestClose().subscribe(() => this.close(this.fullTime));
}
/**
* @return {?}
*/
cancel() {
this.enterLeaveCmp.requestClose().subscribe(() => this.close(null));
}
/**
* @param {?} event
* @return {?}
*/
handleOverlayClick(event) {
event.stopPropagation();
if (this.config.closeOnOverlayClick) {
this.cancel();
}
}
/**
* @param {?} item
* @return {?}
*/
handleItemChange(item) {
if (this.clockPickerService.Time.Mode.isModeHours) {
this.clockPickerService.Time.hours = item;
this.clockPickerService.Time.Mode.setModeToMinutes();
}
else {
this.clockPickerService.Time.minutes = item;
this.close(this.fullTime);
}
}
}
ClockPickerDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-clock-picker-dialog',
template: "<div [ngClass]=\"config.wrapperClassName\">\n <ng-enter-leave #enterLeave>\n <div class=\"clock-picker__overlay\" (click)=\"handleOverlayClick($event)\"></div>\n <div class=\"clock-picker__wrapper\">\n <nav class=\"clock-picker__nav\">\n <ng-time-display></ng-time-display>\n </nav>\n <ng-circle\n (itemChange)=\"handleItemChange($event)\"\n ></ng-circle>\n <footer class=\"clock-picker__footer\">\n <button\n class=\"clock-picker__footer__dialog-control-button\"\n (click)=\"cancel()\"\n >\n {{config.buttonCancel}}\n </button>\n <button\n class=\"clock-picker__footer__dialog-control-button\"\n (click)=\"handleClose()\"\n >\n {{config.buttonConfirm}}\n </button>\n </footer>\n </div>\n </ng-enter-leave>\n</div>\n",
encapsulation: ViewEncapsulation.None,
styles: [".clock-picker__wrapper{width:300px;height:auto;top:50%;right:auto;bottom:auto;left:50%;position:fixed;display:flex;flex-direction:column;align-items:center;background-color:#fff;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:1px 2px 30px rgba(0,0,0,.2)}.clock-picker__overlay{width:100vw;height:100vh;top:0;right:auto;bottom:auto;left:0;position:fixed;background-color:rgba(242,242,242,.6)}.clock-picker__footer,.clock-picker__nav{width:100%;height:70px;background-color:#f2f2f2}.clock-picker__nav{display:flex;justify-content:center;align-items:center;margin-bottom:10px}.clock-picker__footer{box-sizing:border-box;padding:0 5px;display:flex;align-items:center;justify-content:flex-end;margin-top:10px;background-color:#f2f2f2}.clock-picker__footer__dialog-control-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;outline:0;padding:5px;cursor:pointer;font:400 16px Arial,Helvetica,sans-serif;color:#495351}"]
}] }
];
/** @nocollapse */
ClockPickerDialogComponent.ctorParameters = () => [
{ type: ClockPickerService }
];
ClockPickerDialogComponent.propDecorators = {
enterLeaveCmp: [{ type: ViewChild, args: ['enterLeave',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ClockPickerDialogService {
/**
* @param {?} dynamicComponentsService
* @param {?} clockPickerService
*/
constructor(dynamicComponentsService, clockPickerService) {
this.dynamicComponentsService = dynamicComponentsService;
this.clockPickerService = clockPickerService;
}
/**
* @param {?} vcr
* @return {?}
*/
registerViewContainerRef(vcr) {
this.viewContainerRef = vcr;
}
/**
* @param {?=} config
* @return {?}
*/
showClockPickerDialog(config$$1) {
this.clockPickerService.config = Object.assign({}, defaultConfig, config$$1);
this.clockPickerService.init();
return new Observable((subscriber) => this.dynamicComponentsService.loadDynamicComponent(ClockPickerDialogComponent, this.viewContainerRef, subscriber));
}
}
ClockPickerDialogService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
ClockPickerDialogService.ctorParameters = () => [
{ type: DynamicComponentsService },
{ type: ClockPickerService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ClockPickerDirective extends AbstractValueAccessor {
/**
* @param {?} elementRef
* @param {?} viewContainerRef
* @param {?} clockPickerDialogService
*/
constructor(elementRef, viewContainerRef, clockPickerDialogService) {
super();
this.elementRef = elementRef;
this.viewContainerRef = viewContainerRef;
this.clockPickerDialogService = clockPickerDialogService;
this.ngClockPickerChange = new EventEmitter();
}
/**
* @param {?} event
* @return {?}
*/
onFocus(event) {
/** @type {?} */
const initialValue = this.elementRef.nativeElement.value;
event.preventDefault();
this.elementRef.nativeElement.blur();
this.clockPickerDialogService
.showClockPickerDialog(Object.assign({ initialValue }, this.ngClockPickerConfig))
.subscribe((data) => {
if (data) {
this.elementRef.nativeElement.value = data;
this.onChange(data);
this.ngClockPickerChange.emit(data);
}
});
}
/**
* @return {?}
*/
ngOnInit() {
this.clockPickerDialogService.registerViewContainerRef(this.viewContainerRef);
}
}
ClockPickerDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngClockPicker]',
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ClockPickerDirective), multi: true }],
},] }
];
/** @nocollapse */
ClockPickerDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: ViewContainerRef },
{ type: ClockPickerDialogService }
];
ClockPickerDirective.propDecorators = {
ngClockPickerConfig: [{ type: Input }],
ngClockPickerChange: [{ type: Output }],
onFocus: [{ type: HostListener, args: ['focus', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const scaleIn = trigger('scaleIn', [
transition('hours => minutes', [
style({ opacity: 0, transform: 'scale(0)' }),
animate('200ms ease', style({ opacity: 1, transform: 'scale(1)' }))
]),
transition('minutes => hours', [
style({ opacity: 0, transform: 'scale(0)' }),
animate('200ms ease', style({ opacity: 1, transform: 'scale(1)' }))
])
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CircleComponent {
/**
* @param {?} clockPickerService
*/
constructor(clockPickerService) {
this.clockPickerService = clockPickerService;
this.itemChange = new EventEmitter();
}
/**
* @return {?}
*/
get items() {
return this.clockPickerService.clockValues(this.mode);
}
/**
* @return {?}
*/
get mode() {
return this.clockPickerService.Time.Mode.mode;
}
/**
* @return {?}
*/
get selected() {
return this.clockPickerService.Time.selected;
}
/**
* @param {?} item
* @return {?}
*/
isSelected(item) {
return this.selected[this.mode] === item;
}
/**
* @param {?} item
* @return {?}
*/
handleClick(item) {
this.itemChange.emit(item);
}
}
CircleComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-circle',
template: "<div\n [@scaleIn]=\"mode\"\n class=\"clock-picker__circle\"\n [ngClass]=\"{\n 'clock-picker__circle--minutes': clockPickerService.Time.Mode.isModeMinutes,\n 'clock-picker__circle--hours': clockPickerService.Time.Mode.isModeHours\n }\">\n <ng-clock-face></ng-clock-face>\n <ng-circle-button\n [selected]=\"isSelected(item)\"\n (click)=\"handleClick(item)\"\n *ngFor=\"let item of items\">\n {{item}}\n </ng-circle-button>\n</div>\n",
animations: [scaleIn],
encapsulation: ViewEncapsulation.None,
styles: [".clock-picker__circle{border-radius:50%;border:30px solid #f2f2f2;background-color:#f2f2f2}.clock-picker__circle--minutes{position:relative;width:220px;height:220px;padding:0;border-radius:50%;list-style:none}.clock-picker__circle--minutes ng-circle-button{display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px}.clock-picker__circle--minutes ng-circle-button:nth-of-type(1){-webkit-transform:rotate(-90deg) translate(110px) rotate(90deg);transform:rotate(-90deg) translate(110px) rotate(90deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(2){-webkit-transform:rotate(-84deg) translate(110px) rotate(84deg);transform:rotate(-84deg) translate(110px) rotate(84deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(3){-webkit-transform:rotate(-78deg) translate(110px) rotate(78deg);transform:rotate(-78deg) translate(110px) rotate(78deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(4){-webkit-transform:rotate(-72deg) translate(110px) rotate(72deg);transform:rotate(-72deg) translate(110px) rotate(72deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(5){-webkit-transform:rotate(-66deg) translate(110px) rotate(66deg);transform:rotate(-66deg) translate(110px) rotate(66deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(6){-webkit-transform:rotate(-60deg) translate(110px) rotate(60deg);transform:rotate(-60deg) translate(110px) rotate(60deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(7){-webkit-transform:rotate(-54deg) translate(110px) rotate(54deg);transform:rotate(-54deg) translate(110px) rotate(54deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(8){-webkit-transform:rotate(-48deg) translate(110px) rotate(48deg);transform:rotate(-48deg) translate(110px) rotate(48deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(9){-webkit-transform:rotate(-42deg) translate(110px) rotate(42deg);transform:rotate(-42deg) translate(110px) rotate(42deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(10){-webkit-transform:rotate(-36deg) translate(110px) rotate(36deg);transform:rotate(-36deg) translate(110px) rotate(36deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(11){-webkit-transform:rotate(-30deg) translate(110px) rotate(30deg);transform:rotate(-30deg) translate(110px) rotate(30deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(12){-webkit-transform:rotate(-24deg) translate(110px) rotate(24deg);transform:rotate(-24deg) translate(110px) rotate(24deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(13){-webkit-transform:rotate(-18deg) translate(110px) rotate(18deg);transform:rotate(-18deg) translate(110px) rotate(18deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(14){-webkit-transform:rotate(-12deg) translate(110px) rotate(12deg);transform:rotate(-12deg) translate(110px) rotate(12deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(15){-webkit-transform:rotate(-6deg) translate(110px) rotate(6deg);transform:rotate(-6deg) translate(110px) rotate(6deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(16){-webkit-transform:rotate(0) translate(110px) rotate(0);transform:rotate(0) translate(110px) rotate(0)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(17){-webkit-transform:rotate(6deg) translate(110px) rotate(-6deg);transform:rotate(6deg) translate(110px) rotate(-6deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(18){-webkit-transform:rotate(12deg) translate(110px) rotate(-12deg);transform:rotate(12deg) translate(110px) rotate(-12deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(19){-webkit-transform:rotate(18deg) translate(110px) rotate(-18deg);transform:rotate(18deg) translate(110px) rotate(-18deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(20){-webkit-transform:rotate(24deg) translate(110px) rotate(-24deg);transform:rotate(24deg) translate(110px) rotate(-24deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(21){-webkit-transform:rotate(30deg) translate(110px) rotate(-30deg);transform:rotate(30deg) translate(110px) rotate(-30deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(22){-webkit-transform:rotate(36deg) translate(110px) rotate(-36deg);transform:rotate(36deg) translate(110px) rotate(-36deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(23){-webkit-transform:rotate(42deg) translate(110px) rotate(-42deg);transform:rotate(42deg) translate(110px) rotate(-42deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(24){-webkit-transform:rotate(48deg) translate(110px) rotate(-48deg);transform:rotate(48deg) translate(110px) rotate(-48deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(25){-webkit-transform:rotate(54deg) translate(110px) rotate(-54deg);transform:rotate(54deg) translate(110px) rotate(-54deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(26){-webkit-transform:rotate(60deg) translate(110px) rotate(-60deg);transform:rotate(60deg) translate(110px) rotate(-60deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(27){-webkit-transform:rotate(66deg) translate(110px) rotate(-66deg);transform:rotate(66deg) translate(110px) rotate(-66deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(28){-webkit-transform:rotate(72deg) translate(110px) rotate(-72deg);transform:rotate(72deg) translate(110px) rotate(-72deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(29){-webkit-transform:rotate(78deg) translate(110px) rotate(-78deg);transform:rotate(78deg) translate(110px) rotate(-78deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(30){-webkit-transform:rotate(84deg) translate(110px) rotate(-84deg);transform:rotate(84deg) translate(110px) rotate(-84deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(31){-webkit-transform:rotate(90deg) translate(110px) rotate(-90deg);transform:rotate(90deg) translate(110px) rotate(-90deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(32){-webkit-transform:rotate(96deg) translate(110px) rotate(-96deg);transform:rotate(96deg) translate(110px) rotate(-96deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(33){-webkit-transform:rotate(102deg) translate(110px) rotate(-102deg);transform:rotate(102deg) translate(110px) rotate(-102deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(34){-webkit-transform:rotate(108deg) translate(110px) rotate(-108deg);transform:rotate(108deg) translate(110px) rotate(-108deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(35){-webkit-transform:rotate(114deg) translate(110px) rotate(-114deg);transform:rotate(114deg) translate(110px) rotate(-114deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(36){-webkit-transform:rotate(120deg) translate(110px) rotate(-120deg);transform:rotate(120deg) translate(110px) rotate(-120deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(37){-webkit-transform:rotate(126deg) translate(110px) rotate(-126deg);transform:rotate(126deg) translate(110px) rotate(-126deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(38){-webkit-transform:rotate(132deg) translate(110px) rotate(-132deg);transform:rotate(132deg) translate(110px) rotate(-132deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(39){-webkit-transform:rotate(138deg) translate(110px) rotate(-138deg);transform:rotate(138deg) translate(110px) rotate(-138deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(40){-webkit-transform:rotate(144deg) translate(110px) rotate(-144deg);transform:rotate(144deg) translate(110px) rotate(-144deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(41){-webkit-transform:rotate(150deg) translate(110px) rotate(-150deg);transform:rotate(150deg) translate(110px) rotate(-150deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(42){-webkit-transform:rotate(156deg) translate(110px) rotate(-156deg);transform:rotate(156deg) translate(110px) rotate(-156deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(43){-webkit-transform:rotate(162deg) translate(110px) rotate(-162deg);transform:rotate(162deg) translate(110px) rotate(-162deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(44){-webkit-transform:rotate(168deg) translate(110px) rotate(-168deg);transform:rotate(168deg) translate(110px) rotate(-168deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(45){-webkit-transform:rotate(174deg) translate(110px) rotate(-174deg);transform:rotate(174deg) translate(110px) rotate(-174deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(46){-webkit-transform:rotate(180deg) translate(110px) rotate(-180deg);transform:rotate(180deg) translate(110px) rotate(-180deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(47){-webkit-transform:rotate(186deg) translate(110px) rotate(-186deg);transform:rotate(186deg) translate(110px) rotate(-186deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(48){-webkit-transform:rotate(192deg) translate(110px) rotate(-192deg);transform:rotate(192deg) translate(110px) rotate(-192deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(49){-webkit-transform:rotate(198deg) translate(110px) rotate(-198deg);transform:rotate(198deg) translate(110px) rotate(-198deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(50){-webkit-transform:rotate(204deg) translate(110px) rotate(-204deg);transform:rotate(204deg) translate(110px) rotate(-204deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(51){-webkit-transform:rotate(210deg) translate(110px) rotate(-210deg);transform:rotate(210deg) translate(110px) rotate(-210deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(52){-webkit-transform:rotate(216deg) translate(110px) rotate(-216deg);transform:rotate(216deg) translate(110px) rotate(-216deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(53){-webkit-transform:rotate(222deg) translate(110px) rotate(-222deg);transform:rotate(222deg) translate(110px) rotate(-222deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(54){-webkit-transform:rotate(228deg) translate(110px) rotate(-228deg);transform:rotate(228deg) translate(110px) rotate(-228deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(55){-webkit-transform:rotate(234deg) translate(110px) rotate(-234deg);transform:rotate(234deg) translate(110px) rotate(-234deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(56){-webkit-transform:rotate(240deg) translate(110px) rotate(-240deg);transform:rotate(240deg) translate(110px) rotate(-240deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(57){-webkit-transform:rotate(246deg) translate(110px) rotate(-246deg);transform:rotate(246deg) translate(110px) rotate(-246deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(58){-webkit-transform:rotate(252deg) translate(110px) rotate(-252deg);transform:rotate(252deg) translate(110px) rotate(-252deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(59){-webkit-transform:rotate(258deg) translate(110px) rotate(-258deg);transform:rotate(258deg) translate(110px) rotate(-258deg)}.clock-picker__circle--minutes ng-circle-button:nth-of-type(60){-webkit-transform:rotate(264deg) translate(110px) rotate(-264deg);transform:rotate(264deg) translate(110px) rotate(-264deg)}.clock-picker__circle--minutes ng-circle-button:not(:nth-child(5n+2)){width:4px;height:4px;margin:-2px;z-index:2}.clock-picker__circle--minutes ng-circle-button:not(:nth-child(5n+2)) .clock-picker__item-button{color:transparent;background-color:#fff}.clock-picker__circle--hours{position:relative;width:220px;height:220px;padding:0;border-radius:50%;list-style:none}.clock-picker__circle--hours ng-circle-button{display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px}.clock-picker__circle--hours ng-circle-button:nth-of-type(1){-webkit-transform:rotate(-60deg) translate(110px) rotate(60deg);transform:rotate(-60deg) translate(110px) rotate(60deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(2){-webkit-transform:rotate(-30deg) translate(110px) rotate(30deg);transform:rotate(-30deg) translate(110px) rotate(30deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(3){-webkit-transform:rotate(0) translate(110px) rotate(0);transform:rotate(0) translate(110px) rotate(0)}.clock-picker__circle--hours ng-circle-button:nth-of-type(4){-webkit-transform:rotate(30deg) translate(110px) rotate(-30deg);transform:rotate(30deg) translate(110px) rotate(-30deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(5){-webkit-transform:rotate(60deg) translate(110px) rotate(-60deg);transform:rotate(60deg) translate(110px) rotate(-60deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(6){-webkit-transform:rotate(90deg) translate(110px) rotate(-90deg);transform:rotate(90deg) translate(110px) rotate(-90deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(7){-webkit-transform:rotate(120deg) translate(110px) rotate(-120deg);transform:rotate(120deg) translate(110px) rotate(-120deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(8){-webkit-transform:rotate(150deg) translate(110px) rotate(-150deg);transform:rotate(150deg) translate(110px) rotate(-150deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(9){-webkit-transform:rotate(180deg) translate(110px) rotate(-180deg);transform:rotate(180deg) translate(110px) rotate(-180deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(10){-webkit-transform:rotate(210deg) translate(110px) rotate(-210deg);transform:rotate(210deg) translate(110px) rotate(-210deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(11){-webkit-transform:rotate(240deg) translate(110px) rotate(-240deg);transform:rotate(240deg) translate(110px) rotate(-240deg)}.clock-picker__circle--hours ng-circle-button:nth-of-type(12){-webkit-transform:rotate(270deg) translate(110px) rotate(-270deg);transform:rotate(270deg) translate(110px) rotate(-270deg)}.svg{top:50%;right:auto;bottom:auto;left:50%;position:absolute;width:280px;height:280px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}"]
}] }
];
/** @nocollapse */
CircleComponent.ctorParameters = () => [
{ type: ClockPickerService }
];
CircleComponent.propDecorators = {
itemChange: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class CircleButtonComponent {
constructor() { }
}
CircleButtonComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-circle-button',
template: "<button\n class=\"clock-picker__item-button\"\n [ngClass]=\"{'clock-picker__item-button--selected': selected}\"\n>\n <ng-content></ng-content>\n</button>\n",
encapsulation: ViewEncapsulation.None,
styles: [".clock-picker__item-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;outline:0;padding:0;width:100%;height:100%;position:relative;cursor:pointer;border-radius:50%;font:400 16px Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#495351}.clock-picker__item-button:hover{background-color:#f5f5f5;color:#6d7c79}.clock-picker__item-button--selected{background-color:#f5f5f5}"]
}] }
];
/** @nocollapse */
CircleButtonComponent.ctorParameters = () => [];
CircleButtonComponent.propDecorators = {
selected: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class TimeDisplayComponent {
/**
* @param {?} clockPickerService
*/
constructor(clockPickerService) {
this.clockPickerService = clockPickerService;
}
/**
* @return {?}
*/
get displayHours() {
return convertToTimeFormat(this.clockPickerService.Time.selected.hours);
}
/**
* @return {?}
*/
get displayMinutes() {
return convertToTimeFormat(this.clockPickerService.Time.selected.minutes);
}
/**
* @return {?}
*/
get isHoursMode() {
return this.clockPickerService.Time.Mode.isModeHours;
}
/**
* @return {?}
*/
get hoursMode() {
return this.clockPickerService.Time.HoursMode.value;
}
/**
* @return {?}
*/
handleMinutesClick() {
this.clockPickerService.Time.Mode.setModeToMinutes();
}
/**
* @return {?}
*/
handleHoursClick() {
this.clockPickerService.Time.Mode.setModeToHours();
}
}
TimeDisplayComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-time-display',
template: "<div class=\"clock-picker__time-display\">\n <button\n (click)=\"handleHoursClick()\"\n class=\"clock-picker__time-display__button\"\n [ngClass]=\"{'clock-picker__time-display__button--selected': isHoursMode}\"\n >{{displayHours}}\n </button>\n <span class=\"clock-picker__time-display__divider\">:</span>\n <button\n (click)=\"handleMinutesClick()\"\n class=\"clock-picker__time-display__button\"\n [ngClass]=\"{'clock-picker__time-display__button--selected': !isHoursMode}\"\n >\n {{displayMinutes}}\n </button>\n <ng-hours-mode-panel></ng-hours-mode-panel>\n</div>\n",
encapsulation: ViewEncapsulation.None,
styles: [".clock-picker__time-display{display:flex;justify-content:center;align-items:center;margin:20px 0}.clock-picker__time-display__button,.clock-picker__time-display__divider,.clock-picker__time-display__hours-mode{color:#495351}.clock-picker__time-display__button,.clock-picker__time-display__divider{font:400 30px Arial,Helvetica,sans-serif}.clock-picker__time-display__hours-mode{margin:0 5px;font:400 20px Arial,Helvetica,sans-serif}.clock-picker__time-display__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;outline:0;padding:0;width:auto;height:30px;cursor:pointer}.clock-picker__time-display__button--selected,.clock-picker__time-display__button:hover{color:#6d7c79}"]
}] }
];
/** @nocollapse */
TimeDisplayComponent.ctorParameters = () => [
{ type: ClockPickerService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const hoursModeSlide = trigger('hoursModeSlide', [
state('0', style({
transform: 'translateY(0)'
})),
state('1', style({
transform: 'translateY(-19px)'
})),
transition(`0 => 1`, [
animate('200ms ease')
]),
transition(`1 => 0`, [
animate('200ms ease')
]),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class HoursModePanelComponent {
/**
* @param {?} clockPickerService
*/
constructor(clockPickerService) {
this.clockPickerService = clockPickerService;
this.hoursModeOptions = [HOURS_MODE_AM, HOURS_MODE_PM];
this.hoursScopeOptions = [HOURS_SCOPE_12, HOURS_SCOPE_24];
}
/**
* @return {?}
*/
get hoursMode() {
return this.clockPickerService.Time.HoursMode.value;
}
/**
* @return {?}
*/
get hoursScope() {
return this.clockPickerService.Time.HoursScope.value;
}
/**
* @return {?}
*/
get selectedIndex() {
return this.clockPickerService.config.is24
? this.hoursScopeOptions.indexOf(this.hoursScope).toString()
: this.hoursModeOptions.indexOf(this.hoursMode).toString();
}
/**
* @return {?}
*/
get options() {
return this.clockPickerService.config.is24
? this.hoursScopeOptions
: this.hoursModeOptions;
}
/**
* @return {?}
*/
toggleMode() {
if (this.clockPickerService.config.is24) {
this.clockPickerService.Time.HoursScope.value = this.hoursScopeOptions.find((item) => item !== this.hoursScope);
}
else {
this.clockPickerService.Time.HoursMode.value = this.hoursModeOptions.find((item) => item !== this.hoursMode);
}
}
/**
* @return {?}
*/
ngOnInit() {
}
}
HoursModePanelComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-hours-mode-panel',
template: "<div class=\"clock-picker__hours-mode-panel\">\n <div [@hoursModeSlide]=\"selectedIndex\" class=\"clock-picker__hours-mode-panel__scrollable\">\n <button\n *ngFor=\"let option of options\"\n (click)=\"toggleMode()\"\n class=\"clock-picker__hours-mode-panel__button\"\n >{{option.toLowerCase()}}</button>\n </div>\n</div>\n",
animations: [hoursModeSlide],
styles: [".clock-picker__hours-mode-panel{position:relative;height:19px;overflow:hidden}.clock-picker__hours-mode-panel__scrollable{display:flex;flex-direction:column}.clock-picker__hours-mode-panel__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;outline:0;padding:0;width:auto;height:19px;cursor:pointer;margin:0 5px;font:400 13px Arial,Helvetica,sans-serif;color:#495351}"]
}] }
];
/** @nocollapse */
HoursModePanelComponent.ctorParameters = () => [
{ type: ClockPickerService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ClockFaceBuilder {
/**
* @param {?} items
* @param {?} clockFaceConfig
*/
constructor(items, clockFaceConfig) {
this.items = items;
this.clockFaceConfig = clockFaceConfig;
}
/**
* @return {?}
*/
get centralPointCoordinates() {
const { radius } = this.clockFaceConfig;
return {
x1: radius,
y1: radius,
};
}
/**
* @param {?} timeItem
* @param {?} timeItemArray
* @return {?}
*/
buildFaceControl(timeItem, timeItemArray) {
const { radius, offset } = this.clockFaceConfig;
const { length } = timeItemArray;
/** @type {?} */
const degree = (360 / length);
return Object.assign({}, this.centralPointCoordinates, { x2: radius * Math.cos((degree * (timeItem - offset) * Math.PI) / 180) + radius, y2: radius * Math.sin((degree * (timeItem - offset) * Math.PI) / 180) + radius, display: timeItem });
}
/**
* @return {?}
*/
get faceControls() {
return this.items.map((timeItem, _, array) => this.buildFaceControl(timeItem, array));
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class ClockFaceComponent {
/**
* @param {?} clockPickerService
*/
constructor(clockPickerService) {
this.clockPickerService = clockPickerService;
this.radius = 90;
this.eventTargetEmitterConstraint = SVGLineElement;
this.center = { x1: this.radius, y1: this.radius };
}
/**
* @return {?}
*/
get clockFaceItems() {
return {
minutes: new ClockFaceBuilder(this.clockPickerService.clockValues(this.mode), { radius: this.radius, offset: -45 }).faceControls,
hours: new ClockFaceBuilder(this.clockPickerService.clockValues(this.mode), { radius: this.radius, offset: 3 }).faceControls
};
}
/**
* @return {?}
*/
get mode() {
return this.clockPickerService.Time.Mode.mode;
}
/**
* @return {?}
*/
get selected() {
return this.clockPickerService.Time.selected;
}
/**
* @param {?} item
* @return {?}
*/
isSelected(item) {
return this.selected[this.mode] === item;
}
/**
* @param {?} value
* @return {?}
*/
updateValue(value) {
if (this.clockPickerService.Time.Mode.isModeHours) {
this.clockPickerService.Time.hours = value;
}
else {
this.clockPickerService.Time.minutes = value;
}
}
/**
* @param {?} target
* @return {?}
*/
handleElementEmitter(target) {
/** @type {?} */
const value = target.innerHTML;
this.updateValue(Number(value));
}
}
ClockFaceComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-clock-face',
template: "\n <ng-movement-emitter\n [constraintElement]=\"eventTargetEmitterConstraint\"\n (elementEmitted)=\"handleElementEmitter($event)\">\n <svg\n class=\"clock-picker__clock-face\"\n >\n <ng-container *ngFor=\"let face of clockFaceItems[mode]\">\n <line\n class=\"clock-picker__clock-face__tick\"\n [ngClass]=\"{'clock-picker__clock-face__tick--selected': isSelected(face.display)}\"\n [attr.x1]=\"face.x1\"\n [attr.y1]=\"face.y1\"\n [attr.x2]=\"face.x2\"\n [attr.y2]=\"face.y2\"\n >{{face.display}}</line>\n </ng-container>\n <circle\n r=\"10\"\n [attr.cx]=\"center.x1\"\n [attr.cy]=\"center.y1\"\n class=\"clock-picker__clock-face__center\"\n ></circle>\n </svg>\n </ng-movement-emitter>\n",
styles: [".clock-picker__clock-face{top:50%;right:auto;bottom:auto;left:50%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0;width:180px;height:180px}.clock-picker__clock-face__tick{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;stroke:transparent;stroke-width:3}.clock-picker__clock-face__tick--selected{stroke:#fff;stroke-width:2}.clock-picker__clock-face__center{fill:#fff}"]
}] }
];
/** @nocollapse */
ClockFaceComponent.ctorParameters = () => [
{ type: ClockPickerService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class LockEventHandler {
constructor() {
this.isMoveLocked = true;
this.eventEmitter$ = new Subject();
}
/**
* @return {?}
*/
eventEmitter() {
return this.eventEmitter$.asObservable();
}
/**
* @param {?} isLocked
* @return {?}
*/
setMoveLock(isLocked) {
this.isMoveLocked = isLocked;
}
/**
* @param {?} event
* @return {?}
*/
handleMove(event) {
if (!this.isMoveLocked || ('TouchEvent' in window && event instanceof TouchEvent)) {
this.emitMovement(event);
}
}
/**
* @param {?} event
* @return {?}
*/
emitMovement(event) {
this.eventEmitter$.next(event);
}
/**
* @return {?}
*/
handleMouseUp() {
this.setMoveLock(true);
}
/**
* @return {?}
*/
handleMouseDown() {
this.setMoveLock(false);
}
/**
* @param {?} event
* @return {?}
*/
handleEvent(event) {
switch (event.type) {
case 'mousemove':
return this.handleMove((/** @type {?} */ (event)));
case 'mouseup':
return this.handleMouseUp();
case 'mousedown':
return this.handleMouseDown();
case 'touchmove':
return this.handleMove((/** @type {?} */ (event)));
}
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class MovementEmitterComponent {
constructor() {
this.mouseDown$ = new Subject();
this.mouseUp$ = new Subject();
this.mouseMove$ = new