@blackbaud/skyux
Version:
SKY UX built on Angular 2
191 lines • 10.7 kB
JavaScript
import { Component, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
var moment = require('moment');
var SkyTimepickerComponent = (function () {
function SkyTimepickerComponent() {
this.selectedTimeChanged = new EventEmitter();
this.timeFormat = 'hh';
this.is8601 = false;
}
SkyTimepickerComponent.prototype.ngOnInit = function () {
this.setFormat(this.timeFormat);
};
SkyTimepickerComponent.prototype.setFormat = function (format) {
var h = 12;
var m = 12;
var minuteMultiplier = 5;
var localeFormat = 'h:mm A';
if (format === 'hh') {
h = 12;
m = 12;
minuteMultiplier = 5;
localeFormat = 'h:mm A';
}
if (format === 'HH') {
h = 24;
m = 4;
minuteMultiplier = 15;
localeFormat = 'HH:mm';
this.is8601 = true;
}
var data;
data = {
'hours': Array.apply(undefined, Array(h))
.map(function (x, i) {
if (format === 'hh') {
return ++i;
}
/* istanbul ignore else */
if (format === 'HH') {
return i;
}
/* istanbul ignore next */
/* sanity check */
return 0;
}),
'minutes': Array.apply(undefined, Array(m))
.map(function (x, i) {
return i * minuteMultiplier;
}),
'localeFormat': localeFormat,
'minuteMultiplier': minuteMultiplier
};
this.hours = data.hours;
this.minutes = data.minutes;
this.localeFormat = data.localeFormat;
this.minuteMultiplier = data.minuteMultiplier;
};
Object.defineProperty(SkyTimepickerComponent.prototype, "selectedTime", {
get: function () {
var setReturn;
var returnTime;
if (typeof this.returnFormat !== 'undefined') {
setReturn = moment(this.activeTime).format(this.returnFormat);
}
else {
setReturn = moment(this.activeTime).format(this.localeFormat);
}
returnTime = {
hour: moment(this.activeTime).hour(),
minute: moment(this.activeTime).minute(),
meridie: moment(this.activeTime).format('A'),
timezone: moment(this.activeTime).format('Z'),
iso8601: this.activeTime,
local: moment(this.activeTime).format(this.localeFormat),
customFormat: (typeof this.returnFormat !== 'undefined')
? this.returnFormat : this.localeFormat
};
return returnTime;
},
set: function (newTime) {
if (typeof newTime !== 'undefined') {
/* sanity check */
/* istanbul ignore else */
if (newTime.local !== 'Invalid date') {
this.activeTime = newTime.iso8601;
}
}
},
enumerable: true,
configurable: true
});
SkyTimepickerComponent.prototype.setTime = function (event) {
/* istanbul ignore else */
if (typeof event !== 'undefined') {
/* istanbul ignore else */
if (event.type === 'click') {
event.stopPropagation();
if (event.target.name === 'hour') {
this.selectedHour = parseInt(event.target.innerHTML, 0);
}
if (event.target.name === 'minute') {
this.selectedMinute = parseInt(event.target.innerHTML, 0);
}
if (event.target.name === 'meridie') {
this.selectedMeridies = event.target.innerHTML;
}
}
}
};
Object.defineProperty(SkyTimepickerComponent.prototype, "selectedHour", {
get: function () {
if (!this.is8601) {
/* istanbul ignore next */
return parseInt(moment(this.activeTime).format('h'), 0) || 1;
}
/* istanbul ignore else */
if (this.is8601) {
return moment(this.activeTime).hour() + 0;
}
},
set: function (setHour) {
var hour;
var hourOffset = 0;
if (this.selectedMeridies === 'AM' && setHour === 12) {
hourOffset = -12;
}
if (this.selectedMeridies === 'PM' && setHour !== 12) {
hourOffset = 12;
}
if (this.is8601) {
hourOffset = 0;
}
hour = moment({ 'hour': setHour }).add(hourOffset, 'hours').hour();
this.activeTime = moment({
'hour': hour,
'minute': moment(this.activeTime).get('minute') + 0
}).format();
this.selectedTimeChanged.emit(this.selectedTime);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyTimepickerComponent.prototype, "selectedMinute", {
get: function () {
return moment(this.activeTime).minute() + 0;
},
set: function (minute) {
this.activeTime = moment({
'hour': moment(this.activeTime).get('hour') + 0,
'minute': minute
}).format();
this.selectedTimeChanged.emit(this.selectedTime);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkyTimepickerComponent.prototype, "selectedMeridies", {
get: function () {
if (this.activeTime) {
return moment(this.activeTime).format('A');
}
return '';
},
set: function (meridies) {
/* istanbul ignore else */
if (!this.is8601) {
if (meridies !== this.selectedMeridies) {
this.activeTime = moment(this.activeTime).add(12, 'hours').format();
this.selectedTimeChanged.emit(this.selectedTime);
}
}
},
enumerable: true,
configurable: true
});
return SkyTimepickerComponent;
}());
export { SkyTimepickerComponent };
SkyTimepickerComponent.decorators = [
{ type: Component, args: [{
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 buttonType=\"clock-o\" alignment=\"right\">\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 type=\"button\">{{'timepicker_close' | skyResources}}</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{border-radius:0}.sky-input-group /deep/ .sky-form-control{border-right:none}.sky-input-group-timepicker-btn /deep/ .sky-dropdown-menu{box-shadow:none;background-color:transparent;text-align:center}.sky-input-group /deep/ .sky-dropdown-item{box-shadow:0 0 3px 0}.sky-timepicker-container{font-size:15px;display:flex;padding:5px;background-color:#eeeeef}.sky-timepicker-container button{background-color:#fff;border-width:0;padding:15px;padding-top:5px;padding-bottom:5px;width:100%;height:100%}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer;outline:none}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#007ca6}.sky-timepicker-column ol .sky-btn-active{background-color:#007ca6;color:#fff}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0px}.sky-timepicker-footer{margin:0px;padding:10px;padding-top:0px}.sky-timepicker-footer .sky-timepicker-column{width:100%}.sky-timepicker-footer button{border-style:solid;border-width:1px;border-color:#e2e3e4;padding:10px;cursor:pointer}\n"],
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
SkyTimepickerComponent.ctorParameters = function () { return []; };
SkyTimepickerComponent.propDecorators = {
'selectedTimeChanged': [{ type: Output },],
};
//# sourceMappingURL=timepicker.component.js.map