ngx-analog-wrist-watch/bundles/ngx-analog-wrist-watch.umd.min.js

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("ngx-analog-wrist-watch",["exports","@angular/core"],e):e((t=t||self)["ngx-analog-wrist-watch"]={},t.ng.core)}(this,(function(t,e){"use strict";var n=[{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"]}],o=["topLeftDugHole","topRightDugHole","bottomLeftDugHole","bottomRightDugHole"],r=function(){function t(){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 t.prototype.fetchInternalStyle=function(){return'\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'},t.prototype.fetchInLineStyle=function(){return this.inlineStyleInfo},t.prototype.createDugHoles=function(t,e){var n={};return o.forEach((function(o){var r=e.createElement("span");e.appendChild(t,r),n[o]=r})),n},t.prototype.createWatchStraps=function(t,e){var o={};return n.forEach((function(n,r){var i=e.createElement("span");e.appendChild(t,i),o["elementName"+r]=i,o["className"+r]=n.styleClassName.map((function(t){return t}))})),o},t.prototype.addClockNumbers=function(t,e,n){for(var o=0;o<this.CLOCK_NUMBER;o++){var r=n.createElement("span"),i=n.createText((o+1).toString());n.appendChild(r,i),n.appendChild(t,r),n.setProperty(r,"[timeChange]","onNumClick()"),e(r,o,this.inlineStyleInfo)}},t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}();var i=function(){function t(){}return t.prototype.ngOnInit=function(){},t.decorators=[{type:e.Component,args:[{selector:"NgxWrist-NgxAnalogWristWatch",template:"\n    <p>\n      ngx-analog-wrist-watch works!\n    </p>\n  "}]}],t.ctorParameters=function(){return[]},t}(),l=function(){function t(t,n,o){this.el=t,this.renderer=n,this.clockService=o,this.timeVal=new e.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 t.prototype.ngOnInit=function(){this.createInitElement(),this.stylesInInit(),this.checkIfInputContainValue(this.elementInfo,this.inlineStyleInfo),this.watchRunner()},t.prototype.createInitElement=function(){var t=this.renderer.createElement("label"),e=this.renderer.createText("Time"),n=this.renderer.createElement("input"),o=this.renderer.createElement("div"),r=this.renderer.createElement("span"),i=this.renderer.createText("⌚");this.elementInfo.input=n,this.elementInfo.clockBox=o,this.elementInfo.spanToggle=r,this.elementInfo.watchIcon=i,this.elementInfo.label=t,this.elementInfo.labelText=e},t.prototype.stylesInInit=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)},t.prototype.watchRunner=function(){var t=this;this.addClockElement(this.elementInfo.clockBox),this.runClock=setInterval((function(){var e=t.startClock();t.timeInfo=e}),1e3),this.onWatchBtnClick(),this.onChangeHourTimeClick()},t.prototype.appendTagInInit=function(t){var e=this.el.nativeElement;this.renderer.setAttribute(t.input,"type","text"),this.renderer.appendChild(t.label,t.labelText),this.renderer.appendChild(t.spanToggle,t.watchIcon),this.renderer.appendChild(e,t.label),this.renderer.appendChild(e,t.input),this.renderer.appendChild(e,t.spanToggle),this.renderer.appendChild(e,t.clockBox)},t.prototype.applyStyleInInit=function(t){this.applyStyleInDivDirective(t),this.applyStyleInInputAndLabelTag(t),this.applyStyleInInputAndLabelTag(t),this.applyStyleInWatchIcon(t),this.applyStyleInClockBox(t)},t.prototype.applyStyleInDivDirective=function(t){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,t.input.style.border=this.inlineStyleInfo.border},t.prototype.applyStyleInInputAndLabelTag=function(t){t.input.style.borderBottom=this.inlineStyleInfo.borderBottom,t.input.style.outline=this.inlineStyleInfo.outline,t.input.style.width=this.inlineStyleInfo.width,t.input.style.fontSize=this.inlineStyleInfo.fontSize,t.label.style.position=this.inlineStyleInfo.absolute,t.label.style.color=this.inlineStyleInfo.color},t.prototype.applyStyleInWatchIcon=function(t){t.spanToggle.style.position=this.inlineStyleInfo.absolute,t.spanToggle.style.marginLeft=this.inlineStyleInfo.marginLeft,t.spanToggle.style.cursor=this.inlineStyleInfo.cursor,t.spanToggle.style.top=this.inlineStyleInfo.iconTop,t.spanToggle.style.fontSize=this.inlineStyleInfo.iconFontSize},t.prototype.applyStyleInClockBox=function(t){t.clockBox.style.boxShadow=this.inlineStyleInfo.boxShadow,t.clockBox.style.width=this.inlineStyleInfo.boxWidth,t.clockBox.style.height=this.inlineStyleInfo.boxHeight,t.clockBox.style.justifyContent=this.inlineStyleInfo.justifyContent,t.clockBox.style.alignItems=this.inlineStyleInfo.alignItems,t.clockBox.style.display=this.inlineStyleInfo.boxDisplayNone},t.prototype.applyStyleInFocus=function(t,e){var n=this;t.input.addEventListener("focus",(function(){n.floatLabelToTop(t,e)}))},t.prototype.applyStyleInBlur=function(t,e){var n=this;t.input.addEventListener("blur",(function(){n.checkIfInputContainValue(t,e)}))},t.prototype.checkIfInputContainValue=function(t,e){t.input.value?this.floatLabelToTop(t,e):this.floatLabelToBottom(t,e)},t.prototype.floatLabelToTop=function(t,e){t.label.style.top=e.top,t.label.style.fontSize=e.labelFontSize,t.input.style.borderBottom=e.inputBorderBottom,t.label.style.transition=e.transistionTop},t.prototype.floatLabelToBottom=function(t,e){t.label.style.top=e.inherit,t.input.style.borderBottom=e.borderBottom,t.label.style.fontSize=e.inherit},t.prototype.applyBoxStyle=function(t){this.renderer.listen(t.spanToggle,"click",(function(){t.clockBox.classList.toggle("toggle-time")}))},t.prototype.addClockElement=function(t){var e=this.renderer.createElement("div"),n=this.renderer.createElement("div"),o=this.renderer.createElement("div"),r=this.renderer.createElement("div"),i=this.renderer.createElement("div");this.renderer.addClass(r,"clock-crown"),this.renderer.addClass(i,"spindle"),this.renderer.appendChild(t,e),this.renderer.appendChild(t,n),this.renderer.appendChild(n,o),this.renderer.appendChild(o,r),this.renderer.appendChild(o,i),this.elementInfo.clockCrown=r,this.elementInfo.clockSpindle=i,this.applyStyleInClockCircle(e,n,o),this.clockService.addClockNumbers(o,this.applyStyleInClockNum,this.renderer),this.drawClockFace(t),this.addClockHands(o)},t.prototype.applyStyleInClockCircle=function(t,e,n){t.style.width=this.inlineStyleInfo.primaryWidth,t.style.height=this.inlineStyleInfo.primaryHeight,t.style.borderRadius=this.inlineStyleInfo.primaryBorderRadius,t.style.border=this.inlineStyleInfo.primaryBorder,t.style.position=this.inlineStyleInfo.relative,t.style.zIndex="1",e.style.width=this.inlineStyleInfo.secondaryWidth,e.style.height=this.inlineStyleInfo.secondaryHeight,e.style.borderRadius=this.inlineStyleInfo.secondaryBorderRadius,e.style.border=this.inlineStyleInfo.secondaryBorder,e.style.position=this.inlineStyleInfo.absolute,e.style.zIndex="1",n.style.width=this.inlineStyleInfo.thirdWidth,n.style.height=this.inlineStyleInfo.thirdHeight,n.style.borderRadius=this.inlineStyleInfo.thirdBorderRadius,n.style.border=this.inlineStyleInfo.thirdBorder,n.style.position=this.inlineStyleInfo.absolute,n.style.top=this.inlineStyleInfo.thirdTop},t.prototype.applyStyleInClockNum=function(t,e,n){t.style.position=n.absolute,t.style.left=n.clockNum[e].left,t.style.top=n.clockNum[e].top},t.prototype.drawClockFace=function(t){var e=this.renderer.createElement("div");this.renderer.appendChild(t,e);var n=this.clockService.createDugHoles(e,this.renderer),o=this.clockService.createWatchStraps(e,this.renderer);this.applyStyleInDugHoles(n),this.applyStyleInWatchStraps(o)},t.prototype.applyStyleInDugHoles=function(t){t.topLeftDugHole.style.position=this.inlineStyleInfo.absolute,t.topLeftDugHole.style.width=this.inlineStyleInfo.wrapWidth,t.topLeftDugHole.style.borderBottom=this.inlineStyleInfo.wrapBorderBottom,t.topLeftDugHole.style.borderLeft=this.inlineStyleInfo.wrapBorderLeft,t.topLeftDugHole.style.top=this.inlineStyleInfo.wrapTop,t.topLeftDugHole.style.left=this.inlineStyleInfo.wrapLeft,t.topLeftDugHole.style.borderBottomRightRadius=this.inlineStyleInfo.rightBorderRightRadius,this.renderer.addClass(t.topLeftDugHole,"top-left-dughole"),this.renderer.addClass(t.topRightDugHole,"top-right-dughole"),this.renderer.addClass(t.bottomLeftDugHole,"bottom-left-dughole"),this.renderer.addClass(t.bottomRightDugHole,"bottom-right-dughole"),t.topRightDugHole.style.position=this.inlineStyleInfo.absolute,t.topRightDugHole.style.width=this.inlineStyleInfo.rightWrapWidth,t.topRightDugHole.style.borderBottom=this.inlineStyleInfo.rightWrapBorderBottom,t.topRightDugHole.style.borderRight=this.inlineStyleInfo.rightWrapBorderright,t.topRightDugHole.style.top=this.inlineStyleInfo.rightWrapTop,t.topRightDugHole.style.left=this.inlineStyleInfo.rightWrapLeft,t.topRightDugHole.style.margin=this.inlineStyleInfo.rightWrapMargin,t.topRightDugHole.style.borderBottomLeftRadius=this.inlineStyleInfo.rightBorderLeftRadius;var e=this.renderer.createElement("style"),n=this.renderer.createText(this.internalStyle);this.renderer.appendChild(e,n),this.renderer.appendChild(document.head,e)},t.prototype.applyStyleInWatchStraps=function(t){for(var e=0;0<t["className"+e].length;e++){if(2!==t["className"+e].length){if(this.renderer.addClass(t["elementName"+e],t["className"+e][e-e]),17===e)break}else this.renderer.addClass(t["elementName"+e],t["className"+e][e-e]),this.renderer.addClass(t["elementName"+e],t["className"+e][e-(e-1)])}},t.prototype.addClockHands=function(t){var e=this.renderer.createElement("span"),n=this.renderer.createElement("i");this.renderer.addClass(e,"axis-circle"),this.renderer.addClass(n,"dot-puncture"),this.renderer.appendChild(e,n);var o=this.renderer.createElement("div");this.renderer.addClass(o,"hour-hand"),this.renderer.addClass(o,"hour");var r=this.renderer.createElement("span"),i=this.renderer.createElement("span");this.renderer.addClass(r,"hour-hand-round"),this.renderer.addClass(i,"hour-hand-arrow"),this.renderer.appendChild(o,r),this.renderer.appendChild(o,i);var l=this.renderer.createElement("div");this.renderer.addClass(l,"second-hand"),this.renderer.addClass(l,"hand");var a=this.renderer.createElement("div");this.renderer.addClass(a,"minute-hand"),this.renderer.addClass(a,"hour"),this.renderer.appendChild(t,e),this.renderer.appendChild(t,o),this.renderer.appendChild(t,l),this.renderer.appendChild(t,a),this.elementInfo.hourHand=o,this.elementInfo.secondHand=l,this.elementInfo.minuteHand=a},t.prototype.startClock=function(){var t=new Date,e=t.getSeconds()/60*360+90;this.elementInfo.secondHand.style.transform="rotate("+e+"deg)";var n=t.getMinutes(),o=n/60*360+360;this.elementInfo.minuteHand.style.transform="rotate("+o+"deg)";var r=t.getHours(),i=360*r/12+360*n/60/12;return this.elementInfo.hourHand.style.transform="rotate("+i+"deg)",{hour:r,minute:n,hourDegree:i,minuteDegree:o}},t.prototype.onWatchBtnClick=function(){var t=this;this.renderer.listen(this.elementInfo.clockCrown,"click",(function(){var e=t.timeInfo.hour<=12||24===t.timeInfo.hour?"am":" pm ";t.renderer.setProperty(t.elementInfo.input,"value",t.timeInfo.hour+":"+t.timeInfo.minute+e),t.checkIfInputContainValue(t.elementInfo,t.inlineStyleInfo),t.renderer.removeClass(t.elementInfo.clockBox,"toggle-time"),t.clockValue=t.elementInfo.input.value,t.getClockValue()}))},t.prototype.onChangeHourTimeClick=function(){var t=this,e=0;this.renderer.listen(this.elementInfo.hourHand,"click",(function(){var n=new Date;clearInterval(t.runClock),e++,n.setHours(t.timeInfo.hour,t.timeInfo.minute+e);var o=n.getMinutes(),r=o/60*360+360;t.elementInfo.minuteHand.style.transform="rotate("+r+"deg)";var i=360*n.getHours()/12+360*n.getMinutes()/60/12;t.elementInfo.hourHand.style.transform="rotate("+i+"deg)";var l=n.getHours()<=12||24===n.getHours()?"am":" pm ";t.renderer.setProperty(t.elementInfo.input,"value",n.getHours()+":"+o+l),t.checkIfInputContainValue(t.elementInfo,t.inlineStyleInfo);var a={hour:n.getHours(),minute:n.getMinutes(),hourDegree:i,minuteDegree:r};t.timeInfo=a,t.refreshClock()}))},t.prototype.refreshClock=function(){var t=this;setTimeout((function(){setInterval((function(){t.timeInfo=t.startClock()}),1e3)}),4e4)},t.prototype.getClockValue=function(){this.timeVal.emit(this.clockValue)},t.decorators=[{type:e.Directive,args:[{selector:"[ngxWristAnalogwristwatch]"}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer2},{type:r}]},t.propDecorators={timeVal:[{type:e.Output}]},t}();var a=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[i,l],imports:[],exports:[i,l]}]}],t}();t.AnalogwristwatchDirective=l,t.NgxAnalogWristWatchComponent=i,t.NgxAnalogWristWatchModule=a,t.NgxAnalogWristWatchService=r,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-analog-wrist-watch.umd.min.js.map