ngx-analog-wrist-watch
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
995 lines (992 loc) • 51.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ngx-analog-wrist-watch', ['exports', '@angular/core'], factory) :
(global = global || self, factory(global['ngx-analog-wrist-watch'] = {}, global.ng.core));
}(this, (function (exports, core) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-analog-wrist-watch.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var watchStraps = [
{
styleClassName: ['strap-primary-top-left', 'border-color']
},
{
styleClassName: ['strap-primary-top-middle', 'border-color']
},
{
styleClassName: ['strap-primary-top-right', 'border-color']
},
{
styleClassName: ['strap-secondary-top-left']
},
{
styleClassName: ['strap-secondary-top-middle']
},
{
styleClassName: ['strap-secondary-top-right']
},
{
styleClassName: ['strap-tertiary-top-left']
},
{
styleClassName: ['strap-tertiary-top-middle']
},
{
styleClassName: ['strap-tertiary-top-right']
},
{
styleClassName: ['strap-primary-bottom-left', 'border-color']
},
{
styleClassName: ['strap-primary-bottom-middle', 'border-color']
},
{
styleClassName: ['strap-primary-bottom-right', 'border-color']
},
{
styleClassName: ['strap-secondary-bottom-left']
},
{
styleClassName: ['strap-secondary-bottom-middle']
},
{
styleClassName: ['strap-secondary-bottom-right']
},
{
styleClassName: ['strap-tertiary-bottom-left']
},
{
styleClassName: ['strap-tertiary-bottom-middle']
},
{
styleClassName: ['strap-tertiary-bottom-right']
},
];
/** @type {?} */
var dugHoles = ['topLeftDugHole', 'topRightDugHole', 'bottomLeftDugHole', 'bottomRightDugHole'];
/** @type {?} */
var internalStyle = "\n:root {\n --color:#2F4F4F;\n --border-color:black;\n --border-green:green;\n --absolute:absolute;\n --transparent:transparent;\n}\nspan + .toggle-time {\n display:flex!important;\n}\ndiv .top-left-dughole::before{\n content: \"\";\n border-right: 15px solid var(--color);\n position: var(--absolute);\n left: 0px;\n border-top: 16px solid var(--transparent);\n border-bottom: 0px solid var(--color);\n width: 0px;\n bottom: 0px;\n}\ndiv .top-right-dughole::before{\n content: \"\";\n border-left: 15px solid var(--color);\n position: var(--absolute);\n left: 0px;\n border-top: 15px solid var(--transparent);\n border-bottom: 0px solid var(--color);\n bottom: 0px;\n}\n\ndiv .strap-primary-top-left {\n position: var(--absolute);\n left: 42%;\n top: 31%;\n height: 40px;\n background:var(--color);\n margin: 3px;\n width: 25px;\n}\n\ndiv .border-color{\n box-shadow: 0px 0px 1px 1px var(--border-green);\n}\n\ndiv .strap-primary-top-middle{\n position: var(--absolute);\n left: 47%;\n top: 30%;\n height: 40px;\n background:var(--color);\n margin: 1px;\n width: 38px;\n}\n\ndiv .strap-primary-top-right {\n position: var(--absolute);\n left: 53%;\n top: 201px;\n height: 42px;\n background:var(--color);\n width: 25px;\n margin: 6px;\n}\n\ndiv .bottom-left-dughole{\n position: var(--absolute);\n width: 15px;\n border-top: 54px solid rgb(47, 79, 79);\n border-left: 16px solid white;\n top: 64%;\n left: 37%;\n}\n\ndiv .bottom-left-dughole::before{\n content: \"\";\n border-right: 15px solid var(--color);\n position: var(--absolute);\n left: 0px;\n border-top: 0px solid var(--color);\n border-bottom: 14px solid var(--transparent);\n width: 0px;\n}\n\ndiv .strap-primary-bottom-left {\n position: var(--absolute);\n left: 42%;\n top: 444px;\n height: 35px;\n background:var(--color);\n margin: 3px;\n width: 25px;\n}\n\ndiv .strap-primary-bottom-middle{\n position: var(--absolute);\n left: 47%;\n top: 67%;\n height: 40px;\n background:var(--color);\n margin: 1px;\n width: 38px;\n}\n\ndiv .strap-primary-bottom-right {\n position: var(--absolute);\n left: 55%;\n top: 440px;\n height: 44px;\n background:var(--color);\n width: 25px;\n margin: -4px\n}\n\ndiv .bottom-right-dughole{\n position: var(--absolute);\n width: 15px;\n border-top: 61px solid rgb(47, 79, 79);\n border-right: 16px solid white;\n top: 408px;\n left: 57%;\n margin: 11px;\n border-top-left-radius: 19px;\n}\ndiv .bottom-right-dughole::before{\n content: \"\";\n border-left: 15px solid var(--color);\n position: var(--absolute);\n left: 0px;\n border-top: 0px solid var(--color);\n border-bottom: 14px solid var(--transparent);\n width: 0px;\n}\n div .strap-secondary-top-left{\n top: 133px;\n left: 241px;\n position: var(--absolute);\n width: 20px;\n height: 30px;\n border-bottom: 43px solid var(--color);\n border-left: 4px solid var(--transparent);\n}\n\ndiv .strap-secondary-top-middle{\n top: 150px;\n left: 265px;\n position: var(--absolute);\n width: 40px;\n height: 48px;\n background-color:var(--color);\n box-shadow: 0px 0px 0px 1px var(--border-green);\n}\n\ndiv .strap-secondary-top-right{\n top: 132px;\n left: 306px;\n position: var(--absolute);\n width: 20px;\n height: 29px;\n border-bottom: 43px solid var(--color);\n border-right: 4px solid var(--transparent);\n}\n\n\ndiv .strap-tertiary-top-left{\n top: 88px;\n left: 241px;\n position: var(--absolute);\n width: 20px;\n height: 30px;\n border-bottom: 43px solid var(--color);\n border-left: 4px solid var(--transparent);\n}\n\ndiv .strap-tertiary-top-middle{\n top: 100px;\n left: 265px;\n position: var(--absolute);\n width: 40px;\n height: 48px;\n background-color:var(--color);\n box-shadow: 0px 0px 0px 1px var(--border-green);\n}\n\ndiv .strap-tertiary-top-right{\n top: 87px;\n left: 306px;\n position: var(--absolute);\n width: 20px;\n height: 29px;\n border-bottom: 43px solid var(--color);\n border-right: 4px solid var(--transparent);\n}\n\ndiv .strap-secondary-bottom-left{\n top: 485px;\n left: 241px;\n position: var(--absolute);\n width: 20px;\n height: 30px;\n border-top: 43px solid var(--color);\n border-left: 4px solid var(--transparent);\n}\n\n\ndiv .strap-secondary-bottom-middle{\n top: 485px;\n left: 265px;\n position: var(--absolute);\n width: 40px;\n height: 48px;\n background-color:var(--color);\n box-shadow: 0px 0px 0px 1px var(--border-green);\n}\n\ndiv .strap-secondary-bottom-right{\n top: 483px;\n left: 306px;\n position: var(--absolute);\n width: 20px;\n height: 30px;\n border-top: 45px solid var(--color);\n border-right: 4px solid var(--transparent);\n}\n\ndiv .strap-tertiary-bottom-left{\n top: 530px;\n left: 241px;\n position: var(--absolute);\n width: 20px;\n height: 30px;\n border-top: 43px solid var(--color);\n border-left: 4px solid var(--transparent);\n}\n\ndiv .strap-tertiary-bottom-middle{\n top: 530px;\n left: 265px;\n position: var(--absolute);\n width: 40px;\n height: 48px;\n background-color:var(--color);\n box-shadow: 0px 0px 0px 1px var(--border-green);\n}\n\ndiv .strap-tertiary-bottom-right{\n top: 530px;\n left: 306px;\n position: var(--absolute);\n width: 20px;\n height: 30px;\n border-top: 45px solid var(--color);\n border-right: 4px solid var(--transparent);\n}\n\ndiv .hour-hand {\n border: 1px solid var(--border-color);\n position: var(--absolute);\n top: 61px;\n height: 40px;\n left: 82px;\n width: 5px;\n}\n\ndiv .hour-hand::before {\n position: var(--absolute);\n content: \"\";\n border-radius: 50%;\n width: 15px;\n height: 15px;\n border: 1px solid var(--border-color);\n top: -17px;\n left: -6px;\n}\n\ndiv .second-hand{\n position: var(--absolute);\n width: 112px;\n border-bottom: 1px solid black;\n left: 10px;\n}\ndiv .second-hand::after {\n content: \"\";\n width: 10px;\n background: var(--border-color);\n height: 10px;\n position: var(--absolute);\n left: 111px;\n top: -5px;\n border-radius: 50%;\n}\n\ndiv .second-hand::before {\n content: \"\";\n width: 15px;\n background: var(--border-color);\n height: 15px;\n position: var(--absolute);\n left: 23px;\n top: -7px;\n border-radius: 50%;\n background-image: radial-gradient(circle, black, white, black);\n}\n\ndiv .minute-hand {\n border: 1px solid var(--border-color);\n position: var(--absolute);\n top: 51px;\n height: 50px;\n left: 85px;\n width: 5px;\n}\n\ndiv .minute-hand::before {\n position: var(--absolute);\n content: \"\";\n border-right: 4px solid var(--transparent);\n border-left: 3px solid var(--transparent);\n top: -24px;\n left: -1px;\n border-bottom: 23px solid var(--border-color);\n}\n\ndiv .hour-hand-round {\n position: var(--absolute);\n height: 9px;\n border-left: 1px solid var(--border-color);\n left: 35%;\n top: -10px;\n}\n\ndiv .hour-hand-round::before {\n position: var(--absolute);\n content: \"\";\n height: 7px;\n border-left: 1px solid var(--border-color);\n right: 3px;\n top: -5px;\n transform: rotate(120deg);\n}\n\ndiv .hour-hand-round::after {\n position: var(--absolute);\n content: \"\";\n height: 7px;\n border-left: 1px solid var(--border-color);\n left: 2px;\n top: -5px;\n transform: rotate(63deg);\n}\n\ndiv .hour-hand-arrow{\n position: var(--absolute);\n content: \"\";\n border-right: 6px solid var(--transparent);\n border-left: 6px solid var(--transparent);\n top: -31px;\n left: -4px;\n border-bottom: 15px solid var(--border-color);\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n}\n\ndiv .hour {\n transform-origin: 70% 85%;\n transition: all 0.05s;\n transform: rotate(90deg);\n transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);\n}\n\ndiv .hand {\n top: 51%;\n position: var(--absolute);\n transform-origin: 70%;\n transition: all 0.05s;\n transform: rotate(90deg);\n transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);\n}\n\ndiv .axis-circle {\n height: 10px;\n width: 10px;\n border: 5px solid var(--border-color);\n border-radius: 50%;\n position: var(--absolute);\n top: 85px;\n left: 78px;\n background-color: var(--border-color);\n z-index:1;\n }\n\ndiv .axis-circle .dot-puncture {\n z-index: 1;\n width: 6px;\n background: silver;\n height: 6px;\n position: var(--absolute);\n left: 2px;\n top: 2px;\n border-radius: 50%;\n }\n div .clock-crown {\n position :absolute;\n left:201px;\n top:51%;\n transform: rotate(90deg);\n z-index:1;\n }\n div .clock-crown::before {\n content:\"\";\n position :var(--absolute);\n width: 10px;\n height: 0;\n border-left: 2px solid var(--transparent);\n border-right: 2px solid var(--transparent);\n border-bottom: 10px solid var(--color);\n top:-10px;\n left:-1px;\n }\n div .spindle {\n position :absolute;\n left:216px;\n top:49%;\n transform: rotate(90deg);\n transition:all 2s;\n\n }\n div .spindle::after {\n content: \"\";\n position: var(--absolute);\n width: 4px;\n left: 8px;\n border-bottom: 14px solid var(--color);\n opacity:0\n }\n\n div .spindle-move::after {\n opacity:1;\n\n }\n\n div .clock-crown-drag {\n left:215px;\n }\n div .change-hour {\n transform-origin: 70% 85%;\n transition: all 0.05s;\n transform: rotate(90deg);\n transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);\n }\n";
var NgxAnalogWristWatchService = /** @class */ (function () {
function NgxAnalogWristWatchService() {
this.CLOCK_NUMBER = 12;
this.inlineStyleInfo = {
border: 'none',
borderBottom: '2px solid teal',
inputBorderBottom: '2px solid blue',
outline: 'none',
color: 'blue',
fontSize: '18px',
labelFontSize: '14px',
left: '10px',
bottom: '10px',
relative: 'relative',
absolute: 'absolute',
display: 'inline-block',
marginbottom: '25px',
float: 'left',
marginright: '25px',
padding: '2rem',
top: '15px',
width: '250px',
boxShadow: '#ded9d9 0px 3px 4px',
boxWidth: '500px',
boxHeight: '575px',
inherit: 'inherit',
transistionTop: 'top 2s cubic-bezier(0.53, 0.49, 0.35, 0.39) 0s',
marginLeft: '-15px',
iconTop: '24px',
iconFontSize: '20px',
boxDisplayNone: 'none',
boxDisplayFlex: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
primaryWidth: '202px',
primaryHeight: '202px',
primaryBorderRadius: '50%',
primaryBorder: '10px solid var(--color)',
secondaryWidth: '193px',
secondaryHeight: '193px',
secondaryBorderRadius: '50%',
secondaryBorder: '6px solid gray',
thirdWidth: '184px',
thirdHeight: '185px',
thirdBorderRadius: '50%',
thirdBorder: '5px solid var(--border-color)',
thirdTop: '-1px',
numLeft: '133px',
numTop: '14px',
clockNum: [
{
left: '130px',
top: '18px'
},
{
left: '160px',
top: '49px',
},
{
left: '165px',
top: '89px',
},
{
left: '151px',
top: '128px',
},
{
left: '125px',
top: '153px',
},
{
left: '86px',
top: '162px',
},
{
left: '49px',
top: '153px',
},
{
left: '19px',
top: '127px',
},
{
left: '7px',
top: '89px',
},
{
left: '13px',
top: '48px',
},
{
left: '39px',
top: '20px',
},
{
left: '81px',
top: '3px',
}
],
beltTop: '-143px',
beltLeft: '85px',
beltWidth: '38px',
beltHeight: '48px',
beltBackgroundColor: '#2F4F4F',
wrapWidth: '15px',
wrapBorderBottom: '54px solid var(--color)',
wrapBorderLeft: '16px solid white',
wrapLeft: '37%',
wrapTop: '207px',
rightWrapWidth: '15px',
rightBorderRightRadius: '9px',
rightWrapBorderBottom: '63px solid var(--color)',
rightWrapBorderright: '16px solid white',
rightWrapLeft: '60%',
rightWrapTop: '32%',
rightWrapMargin: '-7px',
rightBorderLeftRadius: '10px',
};
this.watchElements = ['label', 'input', 'span', 'primaryCricle',
'secondaryCircle', 'teritaryCircle', 'clockBox', 'hourHand', 'minuteHand', 'secondHand'];
}
/**
* @return {?}
*/
NgxAnalogWristWatchService.prototype.fetchInternalStyle = /**
* @return {?}
*/
function () {
return internalStyle;
};
/**
* @return {?}
*/
NgxAnalogWristWatchService.prototype.fetchInLineStyle = /**
* @return {?}
*/
function () {
return this.inlineStyleInfo;
};
/**
* @param {?} wrapper
* @param {?} renderer
* @return {?}
*/
NgxAnalogWristWatchService.prototype.createDugHoles = /**
* @param {?} wrapper
* @param {?} renderer
* @return {?}
*/
function (wrapper, renderer) {
/** @type {?} */
var styleToDugHole = {};
dugHoles.forEach((/**
* @param {?} dugHole
* @return {?}
*/
function (dugHole) {
/** @type {?} */
var dugHol = renderer.createElement('span');
renderer.appendChild(wrapper, dugHol);
styleToDugHole[dugHole] = dugHol;
}));
return styleToDugHole;
};
/**
* @param {?} wrapper
* @param {?} renderer
* @return {?}
*/
NgxAnalogWristWatchService.prototype.createWatchStraps = /**
* @param {?} wrapper
* @param {?} renderer
* @return {?}
*/
function (wrapper, renderer) {
/** @type {?} */
var styleToWatchStrap = {};
watchStraps.forEach((/**
* @param {?} watchStrap
* @param {?} index
* @return {?}
*/
function (watchStrap, index) {
/** @type {?} */
var strap = renderer.createElement('span');
renderer.appendChild(wrapper, strap);
styleToWatchStrap['elementName' + index] = strap;
styleToWatchStrap['className' + index] = watchStrap.styleClassName.map((/**
* @param {?} className
* @return {?}
*/
function (className) {
return className;
}));
}));
return styleToWatchStrap;
};
/**
* @param {?} thirdCircle
* @param {?} applyStyleInClockNum
* @param {?} renderer
* @return {?}
*/
NgxAnalogWristWatchService.prototype.addClockNumbers = /**
* @param {?} thirdCircle
* @param {?} applyStyleInClockNum
* @param {?} renderer
* @return {?}
*/
function (thirdCircle, applyStyleInClockNum, renderer) {
for (var pos = 0; pos < this.CLOCK_NUMBER; pos++) {
/** @type {?} */
var numSpan = renderer.createElement('span');
/** @type {?} */
var num = renderer.createText((pos + 1).toString());
renderer.appendChild(numSpan, num);
renderer.appendChild(thirdCircle, numSpan);
renderer.setProperty(numSpan, '[timeChange]', 'onNumClick()');
applyStyleInClockNum(numSpan, pos, this.inlineStyleInfo);
}
};
NgxAnalogWristWatchService.decorators = [
{ type: core.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxAnalogWristWatchService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxAnalogWristWatchService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function NgxAnalogWristWatchService_Factory() { return new NgxAnalogWristWatchService(); }, token: NgxAnalogWristWatchService, providedIn: "root" });
return NgxAnalogWristWatchService;
}());
if (false) {
/** @type {?} */
NgxAnalogWristWatchService.prototype.CLOCK_NUMBER;
/** @type {?} */
NgxAnalogWristWatchService.prototype.inlineStyleInfo;
/** @type {?} */
NgxAnalogWristWatchService.prototype.watchElements;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-analog-wrist-watch.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxAnalogWristWatchComponent = /** @class */ (function () {
function NgxAnalogWristWatchComponent() {
}
/**
* @return {?}
*/
NgxAnalogWristWatchComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
NgxAnalogWristWatchComponent.decorators = [
{ type: core.Component, args: [{
selector: 'NgxWrist-NgxAnalogWristWatch',
template: "\n <p>\n ngx-analog-wrist-watch works!\n </p>\n "
}] }
];
/** @nocollapse */
NgxAnalogWristWatchComponent.ctorParameters = function () { return []; };
return NgxAnalogWristWatchComponent;
}());
/**
* @fileoverview added by tsickle
* Generated from: lib/analogwristwatch.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AnalogwristwatchDirective = /** @class */ (function () {
function AnalogwristwatchDirective(el, renderer, clockService) {
this.el = el;
this.renderer = renderer;
this.clockService = clockService;
this.timeVal = new core.EventEmitter();
this.elementInfo = {
input: null,
clockBox: null,
spanToggle: null,
watchIcon: null,
label: null,
labelText: null,
hourHand: null,
minuteHand: null,
secondHand: null,
clockCrown: null,
clockSpindle: null,
clockNum: null,
};
}
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.createInitElement();
this.stylesInInit();
this.checkIfInputContainValue(this.elementInfo, this.inlineStyleInfo);
this.watchRunner();
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.createInitElement = /**
* @return {?}
*/
function () {
/** @type {?} */
var label = this.renderer.createElement('label');
/** @type {?} */
var text = this.renderer.createText('Time');
/** @type {?} */
var input = this.renderer.createElement('input');
/** @type {?} */
var clockBox = this.renderer.createElement('div');
/** @type {?} */
var span = this.renderer.createElement('span');
/** @type {?} */
var unicodeClock = "\u231A";
/** @type {?} */
var icon = this.renderer.createText(unicodeClock);
this.elementInfo.input = input;
this.elementInfo.clockBox = clockBox;
this.elementInfo.spanToggle = span;
this.elementInfo.watchIcon = icon;
this.elementInfo.label = label;
this.elementInfo.labelText = text;
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.stylesInInit = /**
* @return {?}
*/
function () {
this.internalStyle = this.clockService.fetchInternalStyle();
this.inlineStyleInfo = this.clockService.fetchInLineStyle();
this.appendTagInInit(this.elementInfo);
this.applyStyleInInit(this.elementInfo);
this.applyStyleInFocus(this.elementInfo, this.inlineStyleInfo);
this.applyStyleInBlur(this.elementInfo, this.inlineStyleInfo);
this.applyBoxStyle(this.elementInfo);
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.watchRunner = /**
* @return {?}
*/
function () {
var _this = this;
this.addClockElement(this.elementInfo.clockBox);
this.runClock = setInterval((/**
* @return {?}
*/
function () {
/** @type {?} */
var timeInfo = _this.startClock();
_this.timeInfo = timeInfo;
}), 1000);
this.onWatchBtnClick();
this.onChangeHourTimeClick();
};
/**
* @param {?} initElement
* @return {?}
*/
AnalogwristwatchDirective.prototype.appendTagInInit = /**
* @param {?} initElement
* @return {?}
*/
function (initElement) {
/** @type {?} */
var container = this.el.nativeElement;
this.renderer.setAttribute(initElement.input, 'type', 'text');
this.renderer.appendChild(initElement.label, initElement.labelText);
this.renderer.appendChild(initElement.spanToggle, initElement.watchIcon);
this.renderer.appendChild(container, initElement.label);
this.renderer.appendChild(container, initElement.input);
this.renderer.appendChild(container, initElement.spanToggle);
this.renderer.appendChild(container, initElement.clockBox);
};
/**
* @param {?} initElement
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInInit = /**
* @param {?} initElement
* @return {?}
*/
function (initElement) {
this.applyStyleInDivDirective(initElement);
this.applyStyleInInputAndLabelTag(initElement);
this.applyStyleInInputAndLabelTag(initElement);
this.applyStyleInWatchIcon(initElement);
this.applyStyleInClockBox(initElement);
};
/**
* @param {?} initElement
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInDivDirective = /**
* @param {?} initElement
* @return {?}
*/
function (initElement) {
this.el.nativeElement.style.display = this.inlineStyleInfo.display,
this.el.nativeElement.style.marginBottom = this.inlineStyleInfo.marginbottom,
this.el.nativeElement.style.marginTop = this.inlineStyleInfo.margintop,
this.el.nativeElement.style.padding = this.inlineStyleInfo.padding,
this.el.nativeElement.style.position = this.inlineStyleInfo.relative,
this.el.nativeElement.style.float = this.inlineStyleInfo.float,
initElement.input.style.border = this.inlineStyleInfo.border;
};
/**
* @param {?} initElement
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInInputAndLabelTag = /**
* @param {?} initElement
* @return {?}
*/
function (initElement) {
initElement.input.style.borderBottom = this.inlineStyleInfo.borderBottom;
initElement.input.style.outline = this.inlineStyleInfo.outline;
initElement.input.style.width = this.inlineStyleInfo.width;
initElement.input.style.fontSize = this.inlineStyleInfo.fontSize;
initElement.label.style.position = this.inlineStyleInfo.absolute;
initElement.label.style.color = this.inlineStyleInfo.color;
};
/**
* @param {?} initElement
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInWatchIcon = /**
* @param {?} initElement
* @return {?}
*/
function (initElement) {
initElement.spanToggle.style.position = this.inlineStyleInfo.absolute;
initElement.spanToggle.style.marginLeft = this.inlineStyleInfo.marginLeft;
initElement.spanToggle.style.cursor = this.inlineStyleInfo.cursor;
initElement.spanToggle.style.top = this.inlineStyleInfo.iconTop;
initElement.spanToggle.style.fontSize = this.inlineStyleInfo.iconFontSize;
};
/**
* @param {?} initElement
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInClockBox = /**
* @param {?} initElement
* @return {?}
*/
function (initElement) {
initElement.clockBox.style.boxShadow = this.inlineStyleInfo.boxShadow;
initElement.clockBox.style.width = this.inlineStyleInfo.boxWidth;
initElement.clockBox.style.height = this.inlineStyleInfo.boxHeight;
initElement.clockBox.style.justifyContent = this.inlineStyleInfo.justifyContent;
initElement.clockBox.style.alignItems = this.inlineStyleInfo.alignItems;
initElement.clockBox.style.display = this.inlineStyleInfo.boxDisplayNone;
};
/**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInFocus = /**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
function (initElement, style) {
var _this = this;
initElement.input.addEventListener('focus', (/**
* @return {?}
*/
function () {
_this.floatLabelToTop(initElement, style);
}));
};
/**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInBlur = /**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
function (initElement, style) {
var _this = this;
initElement.input.addEventListener('blur', (/**
* @return {?}
*/
function () {
_this.checkIfInputContainValue(initElement, style);
}));
};
/**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
AnalogwristwatchDirective.prototype.checkIfInputContainValue = /**
* @param {?} initElement
* @param {?} style
* @return {?}
*/
function (initElement, style) {
initElement.input.value ? this.floatLabelToTop(initElement, style) : this.floatLabelToBottom(initElement, style);
};
/**
* @param {?} elementInfo
* @param {?} style
* @return {?}
*/
AnalogwristwatchDirective.prototype.floatLabelToTop = /**
* @param {?} elementInfo
* @param {?} style
* @return {?}
*/
function (elementInfo, style) {
elementInfo.label.style.top = style.top;
elementInfo.label.style.fontSize = style.labelFontSize;
elementInfo.input.style.borderBottom = style.inputBorderBottom;
elementInfo.label.style.transition = style.transistionTop;
};
/**
* @param {?} elementInfo
* @param {?} style
* @return {?}
*/
AnalogwristwatchDirective.prototype.floatLabelToBottom = /**
* @param {?} elementInfo
* @param {?} style
* @return {?}
*/
function (elementInfo, style) {
elementInfo.label.style.top = style.inherit;
elementInfo.input.style.borderBottom = style.borderBottom;
elementInfo.label.style.fontSize = style.inherit;
};
/**
* @param {?} initElement
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyBoxStyle = /**
* @param {?} initElement
* @return {?}
*/
function (initElement) {
this.renderer.listen(initElement.spanToggle, 'click', (/**
* @return {?}
*/
function () {
initElement.clockBox.classList.toggle('toggle-time');
}));
};
/**
* @param {?} clockBox
* @return {?}
*/
AnalogwristwatchDirective.prototype.addClockElement = /**
* @param {?} clockBox
* @return {?}
*/
function (clockBox) {
/** @type {?} */
var primaryCircle = this.renderer.createElement('div');
/** @type {?} */
var secondaryCircle = this.renderer.createElement('div');
/** @type {?} */
var thirdCircle = this.renderer.createElement('div');
/** @type {?} */
var clockCrown = this.renderer.createElement('div');
/** @type {?} */
var clockSpindle = this.renderer.createElement('div');
this.renderer.addClass(clockCrown, 'clock-crown');
this.renderer.addClass(clockSpindle, 'spindle');
this.renderer.appendChild(clockBox, primaryCircle);
this.renderer.appendChild(clockBox, secondaryCircle);
this.renderer.appendChild(secondaryCircle, thirdCircle);
this.renderer.appendChild(thirdCircle, clockCrown);
this.renderer.appendChild(thirdCircle, clockSpindle);
this.elementInfo.clockCrown = clockCrown;
this.elementInfo.clockSpindle = clockSpindle;
this.applyStyleInClockCircle(primaryCircle, secondaryCircle, thirdCircle);
this.clockService.addClockNumbers(thirdCircle, this.applyStyleInClockNum, this.renderer);
this.drawClockFace(clockBox);
this.addClockHands(thirdCircle);
};
/**
* @param {?} primaryCircle
* @param {?} secondaryCircle
* @param {?} thirdCircle
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInClockCircle = /**
* @param {?} primaryCircle
* @param {?} secondaryCircle
* @param {?} thirdCircle
* @return {?}
*/
function (primaryCircle, secondaryCircle, thirdCircle) {
primaryCircle.style.width = this.inlineStyleInfo.primaryWidth;
primaryCircle.style.height = this.inlineStyleInfo.primaryHeight;
primaryCircle.style.borderRadius = this.inlineStyleInfo.primaryBorderRadius;
primaryCircle.style.border = this.inlineStyleInfo.primaryBorder;
primaryCircle.style.position = this.inlineStyleInfo.relative;
primaryCircle.style.zIndex = '1';
secondaryCircle.style.width = this.inlineStyleInfo.secondaryWidth;
secondaryCircle.style.height = this.inlineStyleInfo.secondaryHeight;
secondaryCircle.style.borderRadius = this.inlineStyleInfo.secondaryBorderRadius;
secondaryCircle.style.border = this.inlineStyleInfo.secondaryBorder;
secondaryCircle.style.position = this.inlineStyleInfo.absolute;
secondaryCircle.style.zIndex = '1';
thirdCircle.style.width = this.inlineStyleInfo.thirdWidth;
thirdCircle.style.height = this.inlineStyleInfo.thirdHeight;
thirdCircle.style.borderRadius = this.inlineStyleInfo.thirdBorderRadius;
thirdCircle.style.border = this.inlineStyleInfo.thirdBorder;
thirdCircle.style.position = this.inlineStyleInfo.absolute;
thirdCircle.style.top = this.inlineStyleInfo.thirdTop;
};
/**
* @param {?} clockNum
* @param {?} num
* @param {?} style
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInClockNum = /**
* @param {?} clockNum
* @param {?} num
* @param {?} style
* @return {?}
*/
function (clockNum, num, style) {
clockNum.style.position = style.absolute;
clockNum.style.left = style.clockNum[num].left;
clockNum.style.top = style.clockNum[num].top;
};
/**
* @param {?} clockBox
* @return {?}
*/
AnalogwristwatchDirective.prototype.drawClockFace = /**
* @param {?} clockBox
* @return {?}
*/
function (clockBox) {
/** @type {?} */
var wrapper = this.renderer.createElement('div');
this.renderer.appendChild(clockBox, wrapper);
/** @type {?} */
var dugHole = this.clockService.createDugHoles(wrapper, this.renderer);
/** @type {?} */
var strap = this.clockService.createWatchStraps(wrapper, this.renderer);
this.applyStyleInDugHoles(dugHole);
this.applyStyleInWatchStraps(strap);
};
/**
* @param {?} dugHole
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInDugHoles = /**
* @param {?} dugHole
* @return {?}
*/
function (dugHole) {
dugHole.topLeftDugHole.style.position = this.inlineStyleInfo.absolute;
dugHole.topLeftDugHole.style.width = this.inlineStyleInfo.wrapWidth;
dugHole.topLeftDugHole.style.borderBottom = this.inlineStyleInfo.wrapBorderBottom;
dugHole.topLeftDugHole.style.borderLeft = this.inlineStyleInfo.wrapBorderLeft;
dugHole.topLeftDugHole.style.top = this.inlineStyleInfo.wrapTop;
dugHole.topLeftDugHole.style.left = this.inlineStyleInfo.wrapLeft;
dugHole.topLeftDugHole.style.borderBottomRightRadius = this.inlineStyleInfo.rightBorderRightRadius;
this.renderer.addClass(dugHole.topLeftDugHole, 'top-left-dughole');
this.renderer.addClass(dugHole.topRightDugHole, 'top-right-dughole');
this.renderer.addClass(dugHole.bottomLeftDugHole, 'bottom-left-dughole');
this.renderer.addClass(dugHole.bottomRightDugHole, 'bottom-right-dughole');
dugHole.topRightDugHole.style.position = this.inlineStyleInfo.absolute;
dugHole.topRightDugHole.style.width = this.inlineStyleInfo.rightWrapWidth;
dugHole.topRightDugHole.style.borderBottom = this.inlineStyleInfo.rightWrapBorderBottom;
dugHole.topRightDugHole.style.borderRight = this.inlineStyleInfo.rightWrapBorderright;
dugHole.topRightDugHole.style.top = this.inlineStyleInfo.rightWrapTop;
dugHole.topRightDugHole.style.left = this.inlineStyleInfo.rightWrapLeft;
dugHole.topRightDugHole.style.margin = this.inlineStyleInfo.rightWrapMargin;
dugHole.topRightDugHole.style.borderBottomLeftRadius = this.inlineStyleInfo.rightBorderLeftRadius;
/** @type {?} */
var styleTag = this.renderer.createElement('style');
/** @type {?} */
var cssText = this.renderer.createText(this.internalStyle);
this.renderer.appendChild(styleTag, cssText);
this.renderer.appendChild(document.head, styleTag);
};
/**
* @param {?} strap
* @return {?}
*/
AnalogwristwatchDirective.prototype.applyStyleInWatchStraps = /**
* @param {?} strap
* @return {?}
*/
function (strap) {
/** @type {?} */
var pos = 0;
for (var index = 0; pos < strap['className' + index].length; index++) {
/** @type {?} */
var size = strap['className' + index].length;
if (size === 2) {
this.renderer.addClass(strap['elementName' + index], strap['className' + index][index - index]);
this.renderer.addClass(strap['elementName' + index], strap['className' + index][index - (index - 1)]);
continue;
}
else {
this.renderer.addClass(strap['elementName' + index], strap['className' + index][index - index]);
if (index === 17) {
break;
}
}
}
};
/**
* @param {?} thirdCircle
* @return {?}
*/
AnalogwristwatchDirective.prototype.addClockHands = /**
* @param {?} thirdCircle
* @return {?}
*/
function (thirdCircle) {
/** @type {?} */
var axisCircle = this.renderer.createElement('span');
/** @type {?} */
var dotPuncture = this.renderer.createElement('i');
this.renderer.addClass(axisCircle, 'axis-circle');
this.renderer.addClass(dotPuncture, 'dot-puncture');
this.renderer.appendChild(axisCircle, dotPuncture);
/** @type {?} */
var hourHand = this.renderer.createElement('div');
this.renderer.addClass(hourHand, 'hour-hand');
this.renderer.addClass(hourHand, 'hour');
/** @type {?} */
var hourHandRound = this.renderer.createElement('span');
/** @type {?} */
var hourHandArrow = this.renderer.createElement('span');
this.renderer.addClass(hourHandRound, 'hour-hand-round');
this.renderer.addClass(hourHandArrow, 'hour-hand-arrow');
this.renderer.appendChild(hourHand, hourHandRound);
this.renderer.appendChild(hourHand, hourHandArrow);
/** @type {?} */
var secondHand = this.renderer.createElement('div');
this.renderer.addClass(secondHand, 'second-hand');
this.renderer.addClass(secondHand, 'hand');
/** @type {?} */
var minuteHand = this.renderer.createElement('div');
this.renderer.addClass(minuteHand, 'minute-hand');
this.renderer.addClass(minuteHand, 'hour');
this.renderer.appendChild(thirdCircle, axisCircle);
this.renderer.appendChild(thirdCircle, hourHand);
this.renderer.appendChild(thirdCircle, secondHand);
this.renderer.appendChild(thirdCircle, minuteHand);
this.elementInfo.hourHand = hourHand;
this.elementInfo.secondHand = secondHand;
this.elementInfo.minuteHand = minuteHand;
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.startClock = /**
* @return {?}
*/
function () {
/** @type {?} */
var date = new Date();
/** @type {?} */
var seconds = date.getSeconds();
/** @type {?} */
var secondDegrees = ((seconds / 60) * 360) + 90;
this.elementInfo.secondHand.style.transform = "rotate(" + secondDegrees + "deg)";
/** @type {?} */
var minutes = date.getMinutes();
/** @type {?} */
var minuteDegrees = ((minutes / 60) * 360) + 360;
this.elementInfo.minuteHand.style.transform = "rotate(" + minuteDegrees + "deg)";
/** @type {?} */
var hours = date.getHours();
/** @type {?} */
var hourDegrees = hours * 360 / 12 + ((minutes * 360 / 60) / 12);
this.elementInfo.hourHand.style.transform = "rotate(" + hourDegrees + "deg)";
return {
hour: hours,
minute: minutes,
hourDegree: hourDegrees,
minuteDegree: minuteDegrees,
};
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.onWatchBtnClick = /**
* @return {?}
*/
function () {
var _this = this;
this.renderer.listen(this.elementInfo.clockCrown, 'click', (/**
* @return {?}
*/
function () {
/** @type {?} */
var merdian = _this.timeInfo.hour <= 12 || _this.timeInfo.hour === 24 ? 'am' : ' pm ';
_this.renderer.setProperty(_this.elementInfo.input, 'value', _this.timeInfo.hour + ":" + _this.timeInfo.minute + merdian);
_this.checkIfInputContainValue(_this.elementInfo, _this.inlineStyleInfo);
_this.renderer.removeClass(_this.elementInfo.clockBox, 'toggle-time');
_this.clockValue = _this.elementInfo.input.value;
_this.getClockValue();
}));
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.onChangeHourTimeClick = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var nextMove = 0;
this.renderer.listen(this.elementInfo.hourHand, 'click', (/**
* @return {?}
*/
function () {
/** @type {?} */
var date = new Date();
clearInterval(_this.runClock);
nextMove++;
date.setHours(_this.timeInfo.hour, _this.timeInfo.minute + nextMove);
/** @type {?} */
var minutes = date.getMinutes();
/** @type {?} */
var minuteDegrees = ((minutes / 60) * 360) + 360;
_this.elementInfo.minuteHand.style.transform = "rotate(" + minuteDegrees + "deg)";
/** @type {?} */
var hourDegrees = date.getHours() * 360 / 12 + ((date.getMinutes() * 360 / 60) / 12);
_this.elementInfo.hourHand.style.transform = "rotate(" + hourDegrees + "deg)";
/** @type {?} */
var merdian = date.getHours() <= 12 || date.getHours() === 24 ? 'am' : ' pm ';
_this.renderer.setProperty(_this.elementInfo.input, 'value', date.getHours() + ":" + minutes + merdian);
_this.checkIfInputContainValue(_this.elementInfo, _this.inlineStyleInfo);
/** @type {?} */
var changeTimeInfo = {
hour: date.getHours(),
minute: date.getMinutes(),
hourDegree: hourDegrees,
minuteDegree: minuteDegrees,
};
_this.timeInfo = changeTimeInfo;
_this.refreshClock();
}));
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.refreshClock = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () {
setInterval((/**
* @return {?}
*/
function () {
_this.timeInfo = _this.startClock();
}), 1000);
}), 40000);
};
/**
* @return {?}
*/
AnalogwristwatchDirective.prototype.getClockValue = /**
* @return {?}
*/
function () {
this.timeVal.emit(this.clockValue);
};
AnalogwristwatchDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[ngxWristAnalogwristwatch]'
},] }
];
/** @nocollapse */
AnalogwristwatchDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.Renderer2 },
{ type: NgxAnalogWristWatchService }
]; };
AnalogwristwatchDirective.propDecorators = {
timeVal: [{ type: core.Output }]
};
return AnalogwristwatchDirective;
}());
if (false) {
/** @type {?} */
AnalogwristwatchDirective.prototype.timeVal;
/** @type {?} */
AnalogwristwatchDirective.prototype.internalStyle;
/** @type {?} */
AnalogwristwatchDirective.prototype.inlineStyleInfo;
/** @type {?} */
AnalogwristwatchDirective.prototype.elementInfo;
/** @type {?} */
AnalogwristwatchDirective.prototype.timeInfo;
/** @type {?} *