[{"__symbolic":"module","version":3,"metadata":{"TimePanelComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-time-panel","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"template":"<div class=\"time-panel\" [ngClass]=\"{\n    'picker-popup': mode === 'popup',\n    'picker-dropdown': mode === 'dropdown',\n    'picker-inline': mode === 'inline'}\"><div class=\"time-panel-header\" [ngStyle]=\"{'color': themeColor}\"><div class=\"time\" *ngIf=\"showSeconds\">{{hourValue | numberFixedLen: 2}} : {{minValue | numberFixedLen: 2}} : {{(secValue | numberFixedLen: 2)}}</div><div class=\"time\" *ngIf=\"!showSeconds\">{{hourValue | numberFixedLen: 2}} : {{minValue | numberFixedLen: 2}}</div><div class=\"meridiem\" *ngIf=\"hourTime === '12'\"><div class=\"button-group\"><button class=\"button\" type=\"button\" [ngStyle]=\"{\n                            'background-color': meridianValue === 'AM' ? themeColor : null,\n                            'border-color': themeColor,\n                            'color': meridianValue === 'AM' ? '#FFFFFF' : themeColor\n                        }\" (click)=\"setMeridian('AM')\">AM</button> <button class=\"button\" type=\"button\" [ngStyle]=\"{\n                            'background-color': meridianValue === 'PM' ? themeColor : null,\n                            'border-color': themeColor,\n                            'color': meridianValue === 'PM' ? '#FFFFFF' : themeColor\n                        }\" (click)=\"setMeridian('PM')\">PM</button></div></div></div><div class=\"time-control\"><div class=\"title\">{{'hour' | translate}}</div><app-slide-bar [floor]=\"hourFloor\" [ceiling]=\"hourCeiling\" [(low)]=\"hourValue\"></app-slide-bar></div><div class=\"time-control\"><div class=\"title\">{{'minute' | translate}}</div><app-slide-bar [floor]=\"0\" [ceiling]=\"59\" [(low)]=\"minValue\"></app-slide-bar></div><div class=\"time-control\" *ngIf=\"showSeconds\"><div class=\"title\">{{'second' | translate}}</div><app-slide-bar [floor]=\"0\" [ceiling]=\"59\" [(low)]=\"secValue\"></app-slide-bar></div><div class=\"control\"><div class=\"button\" (click)=\"setTime()\" pickerBtnHighlight>{{'set time' | translate}}</div></div></div>","styles":["*,::after,::before{-moz-box-sizing:border-box;box-sizing:border-box}:host{position:absolute;top:0;left:0;width:100%;height:100%}.time-panel{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;width:100%;height:100%}.time-panel-header{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}.time{font-size:37.92px;line-height:40px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:60%}.picker-inline .time{font-size:21.328px;line-height:40px;padding:0}@media only screen and (min-width:768px){.picker-dropdown .time{font-size:21.328px;line-height:40px;padding:0}}.title{font-size:21.328px;line-height:40px;width:80%;margin:10px auto}.picker-inline .title{font-size:12px;line-height:20px;margin:5px auto}@media only screen and (min-width:768px){.picker-dropdown .title{font-size:12px;line-height:20px;margin:5px auto}}.meridiem{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:40%}.picker-inline .meridiem{font-size:8px;line-height:10px}@media only screen and (min-width:768px){.picker-dropdown .meridiem{font-size:8px;line-height:10px}}.meridiem .button-group{display:inline-block}.meridiem .button{border:1px solid;background:#fff;-moz-border-radius:3px;border-radius:3px;float:left;margin:0;-webkit-box-align:initial;-webkit-align-items:initial;-moz-box-align:initial;-ms-flex-align:initial;align-items:initial;width:auto;padding:0 5px;cursor:pointer}.meridiem .button:first-child{-moz-border-radius-topright:0;border-top-right-radius:0;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;border-right:0}.meridiem .button:last-child{-moz-border-radius-topleft:0;border-top-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0}.control{font-size:21.328px;line-height:40px;text-align:center;margin:5px 0}.picker-inline .control{font-size:12px;line-height:20px}@media only screen and (min-width:768px){.picker-dropdown .control{font-size:12px;line-height:20px}}.control .button{width:50%;color:#fff;margin:0 auto;-moz-border-radius:3px;border-radius:3px;cursor:pointer}"]}]}],"members":{"onSetTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./picker.service","name":"PickerService"}]}],"ngOnInit":[{"__symbolic":"method"}],"setMeridian":[{"__symbolic":"method"}],"setTime":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TimePanelComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-time-panel","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"template":"<div class=\"time-panel\" [ngClass]=\"{\n    'picker-popup': mode === 'popup',\n    'picker-dropdown': mode === 'dropdown',\n    'picker-inline': mode === 'inline'}\"><div class=\"time-panel-header\" [ngStyle]=\"{'color': themeColor}\"><div class=\"time\" *ngIf=\"showSeconds\">{{hourValue | numberFixedLen: 2}} : {{minValue | numberFixedLen: 2}} : {{(secValue | numberFixedLen: 2)}}</div><div class=\"time\" *ngIf=\"!showSeconds\">{{hourValue | numberFixedLen: 2}} : {{minValue | numberFixedLen: 2}}</div><div class=\"meridiem\" *ngIf=\"hourTime === '12'\"><div class=\"button-group\"><button class=\"button\" type=\"button\" [ngStyle]=\"{\n                            'background-color': meridianValue === 'AM' ? themeColor : null,\n                            'border-color': themeColor,\n                            'color': meridianValue === 'AM' ? '#FFFFFF' : themeColor\n                        }\" (click)=\"setMeridian('AM')\">AM</button> <button class=\"button\" type=\"button\" [ngStyle]=\"{\n                            'background-color': meridianValue === 'PM' ? themeColor : null,\n                            'border-color': themeColor,\n                            'color': meridianValue === 'PM' ? '#FFFFFF' : themeColor\n                        }\" (click)=\"setMeridian('PM')\">PM</button></div></div></div><div class=\"time-control\"><div class=\"title\">{{'hour' | translate}}</div><app-slide-bar [floor]=\"hourFloor\" [ceiling]=\"hourCeiling\" [(low)]=\"hourValue\"></app-slide-bar></div><div class=\"time-control\"><div class=\"title\">{{'minute' | translate}}</div><app-slide-bar [floor]=\"0\" [ceiling]=\"59\" [(low)]=\"minValue\"></app-slide-bar></div><div class=\"time-control\" *ngIf=\"showSeconds\"><div class=\"title\">{{'second' | translate}}</div><app-slide-bar [floor]=\"0\" [ceiling]=\"59\" [(low)]=\"secValue\"></app-slide-bar></div><div class=\"control\"><div class=\"button\" (click)=\"setTime()\" pickerBtnHighlight>{{'set time' | translate}}</div></div></div>","styles":["*,::after,::before{-moz-box-sizing:border-box;box-sizing:border-box}:host{position:absolute;top:0;left:0;width:100%;height:100%}.time-panel{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;width:100%;height:100%}.time-panel-header{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}.time{font-size:37.92px;line-height:40px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:60%}.picker-inline .time{font-size:21.328px;line-height:40px;padding:0}@media only screen and (min-width:768px){.picker-dropdown .time{font-size:21.328px;line-height:40px;padding:0}}.title{font-size:21.328px;line-height:40px;width:80%;margin:10px auto}.picker-inline .title{font-size:12px;line-height:20px;margin:5px auto}@media only screen and (min-width:768px){.picker-dropdown .title{font-size:12px;line-height:20px;margin:5px auto}}.meridiem{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:40%}.picker-inline .meridiem{font-size:8px;line-height:10px}@media only screen and (min-width:768px){.picker-dropdown .meridiem{font-size:8px;line-height:10px}}.meridiem .button-group{display:inline-block}.meridiem .button{border:1px solid;background:#fff;-moz-border-radius:3px;border-radius:3px;float:left;margin:0;-webkit-box-align:initial;-webkit-align-items:initial;-moz-box-align:initial;-ms-flex-align:initial;align-items:initial;width:auto;padding:0 5px;cursor:pointer}.meridiem .button:first-child{-moz-border-radius-topright:0;border-top-right-radius:0;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;border-right:0}.meridiem .button:last-child{-moz-border-radius-topleft:0;border-top-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0}.control{font-size:21.328px;line-height:40px;text-align:center;margin:5px 0}.picker-inline .control{font-size:12px;line-height:20px}@media only screen and (min-width:768px){.picker-dropdown .control{font-size:12px;line-height:20px}}.control .button{width:50%;color:#fff;margin:0 auto;-moz-border-radius:3px;border-radius:3px;cursor:pointer}"]}]}],"members":{"onSetTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./picker.service","name":"PickerService"}]}],"ngOnInit":[{"__symbolic":"method"}],"setMeridian":[{"__symbolic":"method"}],"setTime":[{"__symbolic":"method"}]}}}}]