[{"__symbolic":"module","version":3,"metadata":{"SkyTimepickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-timepicker","template":"<div class=\"sky-input-group\">\n  <ng-content></ng-content>\n  <div class=\"sky-input-group-btn sky-input-group-timepicker-btn\">\n    <sky-dropdown\n      buttonType=\"clock-o\"\n      alignment=\"right\"\n      [messageStream]=\"dropdownController\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <div class=\"sky-timepicker-container\">\n            <section class=\"sky-timepicker-column\" [ngClass]=\"{'sky-timepicker-24hour':is8601}\">\n              <ol>\n                <li *ngFor=\"let hour of hours;\">\n                  <button type=\"button\" name=\"hour\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedHour === hour}\">{{hour}}</button>\n                </li>\n              </ol>\n            </section>\n            <section class=\"sky-timepicker-column\">\n              <ol>\n                <li *ngFor=\"let minute of minutes;\">\n                  <button type=\"button\" name=\"minute\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedMinute === minute}\">{{ '00' .substring(0, 2 - (minute) .toString() .length) + (minute) }}</button>\n                </li>\n              </ol>\n            </section>\n            <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n              <ol>\n                <li>\n                  <button type=\"button\" name=\"meridie\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedMeridies === 'AM'}\">AM</button>\n                </li>\n                <li>\n                  <button type=\"button\" name=\"meridie\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedMeridies === 'PM'}\">PM</button>\n                </li>\n              </ol>\n            </section>\n          </div>\n          <div class=\"sky-timepicker-container sky-timepicker-footer\">\n            <section class=\"sky-timepicker-column\">\n              <button\n                type=\"button\"\n                (click)=\"onButtonClick()\">\n                {{'timepicker_close' | skyResources}}\n              </button>\n            </section>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </div>\n</div>\n","styles":[".sky-input-group-timepicker-btn /deep/ .sky-btn {\n  border-radius: 0;\n}\n\n.sky-input-group-timepicker-btn /deep/ .sky-dropdown-menu {\n  box-shadow: none;\n  background-color: transparent;\n  text-align: center;\n}\n\n.sky-input-group /deep/ .sky-dropdown-item {\n  box-shadow: 0 0 3px 0;\n}\n\n.sky-timepicker-container {\n  font-size: 15px;\n  display: flex;\n  padding: 5px;\n  background-color: #eeeeef;\n}\n\n.sky-timepicker-container button {\n  background-color: #ffffff;\n  border-width: 0;\n  padding: 15px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n  width: 100%;\n  height: 100%;\n}\n\n.sky-timepicker-container :last-child ol {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.sky-timepicker-container :last-child ol li {\n  border-bottom: 1px solid #e2e3e4;\n  flex: 1;\n}\n\n.sky-timepicker-column {\n  margin: 5px;\n}\n\n.sky-timepicker-column ol {\n  border-top: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  column-gap: 1px;\n  columns: 2;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.sky-timepicker-column ol li {\n  text-align: center;\n  cursor: pointer;\n  margin: 0;\n}\n\n.sky-timepicker-column ol li button {\n  cursor: pointer;\n}\n\n.sky-timepicker-column ol li button:focus {\n  outline: thin dotted;\n  outline: -webkit-focus-ring-color auto 5px;\n  outline-offset: -2px;\n}\n\n.sky-timepicker-column ol li button:hover {\n  background-color: #eeeeef;\n}\n\n.sky-timepicker-column ol li button:active {\n  background-color: #e2e3e4;\n}\n\n.sky-timepicker-column ol li button.sky-btn-active:hover {\n  background-color: #007ca6;\n}\n\n.sky-timepicker-column ol .sky-btn-active {\n  background-color: #007ca6;\n  color: #ffffff;\n}\n\n.sky-timepicker-column.sky-timepicker-24hour ol {\n  columns: 4;\n}\n\n.sky-timepicker-column.sky-timepicker-24hour ol li {\n  border-bottom-width: 0px;\n}\n\n.sky-timepicker-footer {\n  margin: 0px;\n  padding: 10px;\n  padding-top: 0px;\n}\n\n.sky-timepicker-footer .sky-timepicker-column {\n  width: 100%;\n}\n\n.sky-timepicker-footer button {\n  border-style: solid;\n  border-width: 1px;\n  border-color: #e2e3e4;\n  padding: 10px;\n  cursor: pointer;\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"selectedTimeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"setFormat":[{"__symbolic":"method"}],"setTime":[{"__symbolic":"method"}],"onButtonClick":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyTimepickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-timepicker","template":"<div class=\"sky-input-group\">\n  <ng-content></ng-content>\n  <div class=\"sky-input-group-btn sky-input-group-timepicker-btn\">\n    <sky-dropdown\n      buttonType=\"clock-o\"\n      alignment=\"right\"\n      [messageStream]=\"dropdownController\">\n      <sky-dropdown-menu>\n        <sky-dropdown-item>\n          <div class=\"sky-timepicker-container\">\n            <section class=\"sky-timepicker-column\" [ngClass]=\"{'sky-timepicker-24hour':is8601}\">\n              <ol>\n                <li *ngFor=\"let hour of hours;\">\n                  <button type=\"button\" name=\"hour\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedHour === hour}\">{{hour}}</button>\n                </li>\n              </ol>\n            </section>\n            <section class=\"sky-timepicker-column\">\n              <ol>\n                <li *ngFor=\"let minute of minutes;\">\n                  <button type=\"button\" name=\"minute\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedMinute === minute}\">{{ '00' .substring(0, 2 - (minute) .toString() .length) + (minute) }}</button>\n                </li>\n              </ol>\n            </section>\n            <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n              <ol>\n                <li>\n                  <button type=\"button\" name=\"meridie\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedMeridies === 'AM'}\">AM</button>\n                </li>\n                <li>\n                  <button type=\"button\" name=\"meridie\" (click)=\"setTime($event);\" [ngClass]=\"{'sky-btn-active': selectedMeridies === 'PM'}\">PM</button>\n                </li>\n              </ol>\n            </section>\n          </div>\n          <div class=\"sky-timepicker-container sky-timepicker-footer\">\n            <section class=\"sky-timepicker-column\">\n              <button\n                type=\"button\"\n                (click)=\"onButtonClick()\">\n                {{'timepicker_close' | skyResources}}\n              </button>\n            </section>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </div>\n</div>\n","styles":[".sky-input-group-timepicker-btn /deep/ .sky-btn {\n  border-radius: 0;\n}\n\n.sky-input-group-timepicker-btn /deep/ .sky-dropdown-menu {\n  box-shadow: none;\n  background-color: transparent;\n  text-align: center;\n}\n\n.sky-input-group /deep/ .sky-dropdown-item {\n  box-shadow: 0 0 3px 0;\n}\n\n.sky-timepicker-container {\n  font-size: 15px;\n  display: flex;\n  padding: 5px;\n  background-color: #eeeeef;\n}\n\n.sky-timepicker-container button {\n  background-color: #ffffff;\n  border-width: 0;\n  padding: 15px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n  width: 100%;\n  height: 100%;\n}\n\n.sky-timepicker-container :last-child ol {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.sky-timepicker-container :last-child ol li {\n  border-bottom: 1px solid #e2e3e4;\n  flex: 1;\n}\n\n.sky-timepicker-column {\n  margin: 5px;\n}\n\n.sky-timepicker-column ol {\n  border-top: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  column-gap: 1px;\n  columns: 2;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.sky-timepicker-column ol li {\n  text-align: center;\n  cursor: pointer;\n  margin: 0;\n}\n\n.sky-timepicker-column ol li button {\n  cursor: pointer;\n}\n\n.sky-timepicker-column ol li button:focus {\n  outline: thin dotted;\n  outline: -webkit-focus-ring-color auto 5px;\n  outline-offset: -2px;\n}\n\n.sky-timepicker-column ol li button:hover {\n  background-color: #eeeeef;\n}\n\n.sky-timepicker-column ol li button:active {\n  background-color: #e2e3e4;\n}\n\n.sky-timepicker-column ol li button.sky-btn-active:hover {\n  background-color: #007ca6;\n}\n\n.sky-timepicker-column ol .sky-btn-active {\n  background-color: #007ca6;\n  color: #ffffff;\n}\n\n.sky-timepicker-column.sky-timepicker-24hour ol {\n  columns: 4;\n}\n\n.sky-timepicker-column.sky-timepicker-24hour ol li {\n  border-bottom-width: 0px;\n}\n\n.sky-timepicker-footer {\n  margin: 0px;\n  padding: 10px;\n  padding-top: 0px;\n}\n\n.sky-timepicker-footer .sky-timepicker-column {\n  width: 100%;\n}\n\n.sky-timepicker-footer button {\n  border-style: solid;\n  border-width: 1px;\n  border-color: #e2e3e4;\n  padding: 10px;\n  cursor: pointer;\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"selectedTimeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"setFormat":[{"__symbolic":"method"}],"setTime":[{"__symbolic":"method"}],"onButtonClick":[{"__symbolic":"method"}]}}}}]