ng-clock-picker-lib-voova
Version:
This is a customize version from the original https://jedrzejiwanicki.github.io/ng-clockpicker, Original function will not work the same
969 lines (951 loc) • 169 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/forms'), require('@angular/animations'), require('rxjs/internal/operators'), require('@angular/common'), require('@angular/platform-browser/animations')) :
typeof define === 'function' && define.amd ? define('ng-clock-picker-lib-voova', ['exports', '@angular/core', 'rxjs', '@angular/forms', '@angular/animations', 'rxjs/internal/operators', '@angular/common', '@angular/platform-browser/animations'], factory) :
(factory((global['ng-clock-picker-lib-voova'] = {}),global.ng.core,global.rxjs,global.ng.forms,global.ng.animations,global.rxjs['internal/operators'],global.ng.common,global.ng.platformBrowser.animations));
}(this, (function (exports,core,rxjs,forms,animations,operators,common,animations$1) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var AbstractValueAccessor = /** @class */ (function () {
function AbstractValueAccessor() {
}
/**
* @param {?} obj
* @return {?}
*/
AbstractValueAccessor.prototype.onChange = /**
* @param {?} obj
* @return {?}
*/
function (obj) { };
/**
* @return {?}
*/
AbstractValueAccessor.prototype.onTouched = /**
* @return {?}
*/
function () { };
/**
* @param {?} obj
* @return {?}
*/
AbstractValueAccessor.prototype.writeValue = /**
* @param {?} obj
* @return {?}
*/
function (obj) {
this._value = obj;
this.onChange(obj);
};
/**
* @param {?} fn
* @return {?}
*/
AbstractValueAccessor.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
AbstractValueAccessor.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
return AbstractValueAccessor;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var DynamicComponentsService = /** @class */ (function () {
function DynamicComponentsService(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
}
/**
* @template T
* @param {?} component
* @param {?} vcr
* @param {?} subscriber
* @param {?=} config
* @return {?}
*/
DynamicComponentsService.prototype.loadDynamicComponent = /**
* @template T
* @param {?} component
* @param {?} vcr
* @param {?} subscriber
* @param {?=} config
* @return {?}
*/
function (component, vcr, subscriber, config) {
/** @type {?} */
var factory = this.componentFactoryResolver.resolveComponentFactory(component);
/** @type {?} */
var componentRef = vcr.createComponent(factory);
for (var key in config) {
if (config.hasOwnProperty(key)) {
(( /** @type {?} */(componentRef.instance)))[key] = config[key];
}
}
(( /** @type {?} */(componentRef.instance))).close = function (data) {
componentRef.destroy();
subscriber.next(data);
};
};
DynamicComponentsService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
DynamicComponentsService.ctorParameters = function () {
return [
{ type: core.ComponentFactoryResolver }
];
};
return DynamicComponentsService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @abstract
*/
var /**
* @abstract
*/ DialogComponent = /** @class */ (function () {
function DialogComponent() {
}
/**
* @param {?} data
* @return {?}
*/
DialogComponent.prototype.close = /**
* @param {?} data
* @return {?}
*/
function (data) { };
return DialogComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var ɵ0 = function (_, i, a) { return i === a.length - 1 ? 0 : i + 1; };
/** @type {?} */
var fullHours = Array(24)
.fill(0, 0, 24)
.map(ɵ0);
/** @type {?} */
var hours = {
'24h': fullHours,
'12h': fullHours.slice(0, 12),
};
/** @type {?} */
var config = function (hoursScope) {
return ({
hours: hours[hoursScope],
minutes: Array(60).fill(0, 0, 60).map(function (_, i) { return i; }),
});
};
/** @type {?} */
var defaultConfig = {
buttonConfirm: 'Confirm',
buttonCancel: 'Cancel',
initialValue: '12:00',
closeOnOverlayClick: false,
is24: true,
};
/** @type {?} */
var MODE_MINUTES = 'minutes';
/** @type {?} */
var MODE_HOURS = 'hours';
/** @type {?} */
var HOURS_MODE_AM = 'AM';
/** @type {?} */
var HOURS_MODE_PM = 'PM';
/** @type {?} */
var HOURS_SCOPE_24 = '24h';
/** @type {?} */
var HOURS_SCOPE_12 = '12h';
/** @type {?} */
var FORMAT_24 = 'hour24';
/** @type {?} */
var defaults = {
hours: 0,
minutes: 0,
scope: HOURS_SCOPE_24,
is24: true,
format: null // FORMAT_12 or FORMAT_12
};
/**
* @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 {?} */
var date = new Date("11/11/11 " + time);
/** @type {?} */
var scope = determineScope(date.getHours());
return {
hours: date.getHours(),
minutes: date.getMinutes(),
scope: scope,
};
}
/**
* @param {?} hour
* @return {?}
*/
function determineScope(hour) {
for (var key in hours) {
if (hours[key].indexOf(hour) >= 0) {
return key;
}
}
}
/**
* @param {?} hours
* @param {?} minutes
* @param {?} mode
* @param {?} is24
* @param {?=} format
* @return {?}
*/
function getDisplayTime(
// tslint:disable-next-line:no-shadowed-variable
hours$$1, minutes, mode, is24, format) {
console.log('getDisplayTime hours: ', hours$$1);
console.log('getDisplayTime minutes: ', minutes);
console.log('getDisplayTime mode: ', mode);
console.log('getDisplayTime is24: ', is24);
console.log('getDisplayTime format: ', format);
/** @type {?} */
var date = new Date();
date.setHours((mode.isHoursModePM && !is24) ? hours$$1 + 12 : hours$$1);
date.setMinutes(minutes);
return format === FORMAT_24
? date.toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit' })
: date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var Mode = /** @class */ (function () {
function Mode() {
this._mode = MODE_HOURS;
}
Object.defineProperty(Mode.prototype, "mode", {
get: /**
* @return {?}
*/ function () {
return this._mode;
},
set: /**
* @param {?} mode
* @return {?}
*/ function (mode) {
this._mode = mode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Mode.prototype, "isModeMinutes", {
get: /**
* @return {?}
*/ function () {
return this._mode === MODE_MINUTES;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Mode.prototype, "isModeHours", {
get: /**
* @return {?}
*/ function () {
return this._mode === MODE_HOURS;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Mode.prototype.setModeToMinutes = /**
* @return {?}
*/
function () {
this.mode = MODE_MINUTES;
};
/**
* @return {?}
*/
Mode.prototype.setModeToHours = /**
* @return {?}
*/
function () {
this.mode = MODE_HOURS;
};
return Mode;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var HoursScope = /** @class */ (function () {
function HoursScope(is24, scope) {
this._hoursScopeChangeEmitter = new rxjs.Subject();
this._value = is24 ? scope : HOURS_SCOPE_12;
}
/**
* @param {?} scope
* @return {?}
*/
HoursScope.isHoursScope24 = /**
* @param {?} scope
* @return {?}
*/
function (scope) {
return scope === HOURS_SCOPE_24;
};
Object.defineProperty(HoursScope.prototype, "hoursScopeChanged", {
get: /**
* @return {?}
*/ function () {
return this._hoursScopeChangeEmitter.asObservable();
},
enumerable: true,
configurable: true
});
Object.defineProperty(HoursScope.prototype, "value", {
get: /**
* @return {?}
*/ function () {
return this._value;
},
set: /**
* @param {?} scope
* @return {?}
*/ function (scope) {
this._hoursScopeChangeEmitter.next({ current: this.value, next: scope });
this._value = scope;
},
enumerable: true,
configurable: true
});
Object.defineProperty(HoursScope.prototype, "isScope24", {
get: /**
* @return {?}
*/ function () {
return this.value === HOURS_SCOPE_24;
},
enumerable: true,
configurable: true
});
return HoursScope;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var HoursMode = /** @class */ (function () {
function HoursMode(scope) {
this._value = HoursScope.isHoursScope24(scope) ? HOURS_MODE_PM : HOURS_MODE_AM;
}
Object.defineProperty(HoursMode.prototype, "value", {
get: /**
* @return {?}
*/ function () {
return this._value;
},
set: /**
* @param {?} mode
* @return {?}
*/ function (mode) {
this._value = mode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(HoursMode.prototype, "isHoursModePM", {
get: /**
* @return {?}
*/ function () {
return this.value === HOURS_MODE_PM;
},
enumerable: true,
configurable: true
});
return HoursMode;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var Time = /** @class */ (function () {
function Time(initialConfig) {
if (initialConfig === void 0) {
initialConfig = defaults;
}
this._mode = new Mode();
this.init(initialConfig);
}
/**
* @param {?} hour
* @param {?} currentScope
* @param {?} nextScope
* @return {?}
*/
Time.getConcurrentScopeValue = /**
* @param {?} hour
* @param {?} currentScope
* @param {?} nextScope
* @return {?}
*/
function (hour, currentScope, nextScope) {
return hours[nextScope][hours[currentScope].indexOf(hour)];
};
/**
* @param {?} initialConfig
* @return {?}
*/
Time.prototype.init = /**
* @param {?} initialConfig
* @return {?}
*/
function (initialConfig) {
var _this = this;
// TODO: Static 24 hours value
initialConfig.is24 = true;
console.log('getConcurrentScopeValue', initialConfig);
this._is24 = initialConfig.is24;
this._format = initialConfig.format;
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(function (_a) {
var current = _a.current, next = _a.next;
_this.hours = Time.getConcurrentScopeValue(_this.selected.hours, current, next);
});
};
Object.defineProperty(Time.prototype, "selected", {
get: /**
* @return {?}
*/ function () {
return {
hours: this._selectedHours,
minutes: this._selectedMinutes,
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(Time.prototype, "is24", {
get: /**
* @return {?}
*/ function () {
return this._is24;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Time.prototype, "Mode", {
get: /**
* @return {?}
*/ function () {
return this._mode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Time.prototype, "HoursScope", {
get: /**
* @return {?}
*/ function () {
return this._hoursScope;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Time.prototype, "HoursMode", {
get: /**
* @return {?}
*/ function () {
return this._hoursMode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Time.prototype, "minutes", {
set: /**
* @param {?} minutes
* @return {?}
*/ function (minutes) {
this._selectedMinutes = minutes;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Time.prototype, "hours", {
set: /**
* @param {?} hour
* @return {?}
*/ function (hour) {
this._selectedHours = hour;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Time.prototype, "displayTime", {
get: /**
* @return {?}
*/ function () {
return getDisplayTime(this.selected.hours, this.selected.minutes, this.HoursMode, this.is24, this._format);
},
enumerable: true,
configurable: true
});
return Time;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var ClockPickerService = /** @class */ (function () {
function ClockPickerService() {
this._config = defaultConfig;
}
/**
* @return {?}
*/
ClockPickerService.prototype.init = /**
* @return {?}
*/
function () {
// TODO: Static 24 hours value
this.config.is24 = true;
var _a = this.config, initialValue = _a.initialValue, is24 = _a.is24, format = _a.format;
console.log('ClockPickerService this.config', this.config);
console.log('ClockPickerService initialValue', initialValue);
this._time = new Time(( /** @type {?} */(__assign({}, parseTimeString(initialValue), { is24: is24, format: format }))));
};
Object.defineProperty(ClockPickerService.prototype, "Time", {
get: /**
* @return {?}
*/ function () {
return this._time;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ClockPickerService.prototype, "config", {
get: /**
* @return {?}
*/ function () {
return this._config;
},
set: /**
* @param {?} clockPickerConfig
* @return {?}
*/ function (clockPickerConfig) {
this._config = clockPickerConfig;
},
enumerable: true,
configurable: true
});
/**
* @param {?} mode
* @return {?}
*/
ClockPickerService.prototype.clockValues = /**
* @param {?} mode
* @return {?}
*/
function (mode) {
return config(this.Time.HoursScope.value)[mode];
};
ClockPickerService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
ClockPickerService.ctorParameters = function () { return []; };
return ClockPickerService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var ClockPickerDialogComponent = /** @class */ (function (_super) {
__extends(ClockPickerDialogComponent, _super);
function ClockPickerDialogComponent(clockPickerService) {
var _this = _super.call(this) || this;
_this.clockPickerService = clockPickerService;
return _this;
}
Object.defineProperty(ClockPickerDialogComponent.prototype, "items", {
get: /**
* @return {?}
*/ function () {
return this.clockPickerService.clockValues(this.clockPickerService.Time.Mode.mode);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ClockPickerDialogComponent.prototype, "fullTime", {
get: /**
* @return {?}
*/ function () {
return this.clockPickerService.Time.displayTime;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ClockPickerDialogComponent.prototype, "format", {
get: /**
* @return {?}
*/ function () {
return this.clockPickerService.config.format;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ClockPickerDialogComponent.prototype, "config", {
get: /**
* @return {?}
*/ function () {
return this.clockPickerService.config;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
ClockPickerDialogComponent.prototype.handleClose = /**
* @return {?}
*/
function () {
var _this = this;
this.enterLeaveCmp.requestClose().subscribe(function () { return _this.close(_this.fullTime); });
};
/**
* @return {?}
*/
ClockPickerDialogComponent.prototype.cancel = /**
* @return {?}
*/
function () {
var _this = this;
this.enterLeaveCmp.requestClose().subscribe(function () { return _this.close(null); });
};
/**
* @param {?} event
* @return {?}
*/
ClockPickerDialogComponent.prototype.handleOverlayClick = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
if (this.config.closeOnOverlayClick) {
this.cancel();
}
};
/**
* @param {?} item
* @return {?}
*/
ClockPickerDialogComponent.prototype.handleItemChange = /**
* @param {?} item
* @return {?}
*/
function (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: core.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: core.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 = function () {
return [
{ type: ClockPickerService }
];
};
ClockPickerDialogComponent.propDecorators = {
enterLeaveCmp: [{ type: core.ViewChild, args: ['enterLeave',] }]
};
return ClockPickerDialogComponent;
}(DialogComponent));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var ClockPickerDialogService = /** @class */ (function () {
function ClockPickerDialogService(dynamicComponentsService, clockPickerService) {
this.dynamicComponentsService = dynamicComponentsService;
this.clockPickerService = clockPickerService;
}
/**
* @param {?} vcr
* @return {?}
*/
ClockPickerDialogService.prototype.registerViewContainerRef = /**
* @param {?} vcr
* @return {?}
*/
function (vcr) {
this.viewContainerRef = vcr;
};
/**
* @param {?=} config
* @return {?}
*/
ClockPickerDialogService.prototype.showClockPickerDialog = /**
* @param {?=} config
* @return {?}
*/
function (config$$1) {
var _this = this;
this.clockPickerService.config = __assign({}, defaultConfig, config$$1);
this.clockPickerService.init();
return new rxjs.Observable(function (subscriber) { return _this.dynamicComponentsService.loadDynamicComponent(ClockPickerDialogComponent, _this.viewContainerRef, subscriber); });
};
ClockPickerDialogService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
ClockPickerDialogService.ctorParameters = function () {
return [
{ type: DynamicComponentsService },
{ type: ClockPickerService }
];
};
return ClockPickerDialogService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var ClockPickerDirective = /** @class */ (function (_super) {
__extends(ClockPickerDirective, _super);
function ClockPickerDirective(elementRef, viewContainerRef, clockPickerDialogService) {
var _this = _super.call(this) || this;
_this.elementRef = elementRef;
_this.viewContainerRef = viewContainerRef;
_this.clockPickerDialogService = clockPickerDialogService;
_this.ngClockPickerChange = new core.EventEmitter();
return _this;
}
/**
* @param {?} event
* @return {?}
*/
ClockPickerDirective.prototype.onFocus = /**
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
/** @type {?} */
var initialValue = this.elementRef.nativeElement.value;
event.preventDefault();
this.elementRef.nativeElement.blur();
// TODO: Static 24 hours value
this.ngClockPickerConfig.is24 = true;
this.clockPickerDialogService
.showClockPickerDialog(__assign({ initialValue: initialValue }, this.ngClockPickerConfig))
.subscribe(function (data) {
if (data) {
_this.elementRef.nativeElement.value = data;
_this.onChange(data);
_this.ngClockPickerChange.emit(data);
}
});
};
/**
* @return {?}
*/
ClockPickerDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.clockPickerDialogService.registerViewContainerRef(this.viewContainerRef);
};
ClockPickerDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[ngClockPicker]',
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: core.forwardRef(function () { return ClockPickerDirective; }), multi: true }],
},] }
];
/** @nocollapse */
ClockPickerDirective.ctorParameters = function () {
return [
{ type: core.ElementRef },
{ type: core.ViewContainerRef },
{ type: ClockPickerDialogService }
];
};
ClockPickerDirective.propDecorators = {
ngClockPickerConfig: [{ type: core.Input }],
ngClockPickerChange: [{ type: core.Output }],
onFocus: [{ type: core.HostListener, args: ['focus', ['$event'],] }]
};
return ClockPickerDirective;
}(AbstractValueAccessor));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
var scaleIn = animations.trigger('scaleIn', [
animations.transition('hours => minutes', [
animations.style({ opacity: 0, transform: 'scale(0)' }),
animations.animate('200ms ease', animations.style({ opacity: 1, transform: 'scale(1)' }))
]),
animations.transition('minutes => hours', [
animations.style({ opacity: 0, transform: 'scale(0)' }),
animations.animate('200ms ease', animations.style({ opacity: 1, transform: 'scale(1)' }))
])
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var CircleComponent = /** @class */ (function () {
function CircleComponent(clockPickerService) {
this.clockPickerService = clockPickerService;
this.itemChange = new core.EventEmitter();
}
Object.defineProperty(CircleComponent.prototype, "items", {
get: /**
* @return {?}
*/ function () {
return this.clockPickerService.clockValues(this.mode);
},
enumerable: true,
configurable: true
});
Object.defineProperty(CircleComponent.prototype, "mode", {
get: /**
* @return {?}
*/ function () {
return this.clockPickerService.Time.Mode.mode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CircleComponent.prototype, "selected", {
get: /**
* @return {?}
*/ function () {
return this.clockPickerService.Time.selected;
},
enumerable: true,
configurable: true
});
/**
* @param {?} item
* @return {?}
*/
CircleComponent.prototype.isSelected = /**
* @param {?} item
* @return {?}
*/
function (item) {
return this.selected[this.mode] === item;
};
/**
* @param {?} item
* @return {?}
*/
CircleComponent.prototype.handleClick = /**
* @param {?} item
* @return {?}
*/
function (item) {
this.itemChange.emit(item);
};
CircleComponent.decorators = [
{ type: core.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--hours24c': 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: core.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(11