ngx-material-timepicker
Version:
Handy material design timepicker for angular
116 lines • 13.4 kB
JavaScript
import * as tslib_1 from "tslib";
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { isDigit } from '../../../utils/timepicker.utils';
import { TimeFormatterPipe } from '../../../pipes/time-formatter.pipe';
import { TimeUnit } from '../../../models/time-unit.enum';
let NgxTimepickerTimeControlComponent = class NgxTimepickerTimeControlComponent {
constructor() {
this.timeChanged = new EventEmitter();
}
ngOnInit() {
if (this.isDefaultTimeSet) {
this.time = new TimeFormatterPipe().transform(this.time, this.timeUnit);
}
}
ngOnChanges(changes) {
const timeChanges = changes['time'];
const isTimeNotProvided = timeChanges && timeChanges.isFirstChange() && !this.isDefaultTimeSet;
if (isTimeNotProvided) {
this.time = null;
}
}
onKeydown(event) {
if (!isDigit(event)) {
event.preventDefault();
}
switch (event.key) {
case 'ArrowUp':
this.increase();
break;
case 'ArrowDown':
this.decrease();
break;
}
}
increase() {
if (!this.disabled) {
let nextTime = +this.time + 1;
if (nextTime > this.max) {
nextTime = this.min;
}
this.timeChanged.emit(nextTime);
}
}
decrease() {
if (!this.disabled) {
let previousTime = +this.time - 1;
if (previousTime < this.min) {
previousTime = this.max;
}
this.timeChanged.emit(previousTime);
}
}
onInput(input) {
const value = parseInt(input.value, 10);
if (!isNaN(value)) {
this.time = value;
if (this.time > this.max) {
this.time = +String(value)[0];
}
if (this.time < this.min) {
this.time = this.min;
}
input.value = String(this.time);
this.timeChanged.emit(this.time);
}
}
onFocus() {
this.isFocused = true;
}
onBlur() {
this.time = new TimeFormatterPipe().transform(this.time, this.timeUnit);
this.isFocused = false;
}
};
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], NgxTimepickerTimeControlComponent.prototype, "time", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], NgxTimepickerTimeControlComponent.prototype, "min", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], NgxTimepickerTimeControlComponent.prototype, "max", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], NgxTimepickerTimeControlComponent.prototype, "placeholder", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], NgxTimepickerTimeControlComponent.prototype, "timeUnit", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], NgxTimepickerTimeControlComponent.prototype, "disabled", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], NgxTimepickerTimeControlComponent.prototype, "isDefaultTimeSet", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", Object)
], NgxTimepickerTimeControlComponent.prototype, "timeChanged", void 0);
NgxTimepickerTimeControlComponent = tslib_1.__decorate([
Component({
selector: 'ngx-timepicker-time-control',
template: "<div class=\"ngx-timepicker-control\" [ngClass]=\"{'ngx-timepicker-control--active': isFocused}\">\n <!--suppress HtmlFormInputWithoutLabel -->\n <input class=\"ngx-timepicker-control__input\"\n maxlength=\"2\"\n [(ngModel)]=\"time\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (keydown)=\"onKeydown($event)\"\n (input)=\"onInput(inputElement)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" #inputElement>\n <div class=\"ngx-timepicker-control__arrows\">\n <span class=\"ngx-timepicker-control__arrow\" role=\"button\" (click)=\"increase()\">\n ▲\n </span>\n <span class=\"ngx-timepicker-control__arrow\" role=\"button\" (click)=\"decrease()\">\n ▼\n </span>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".ngx-timepicker-control{position:relative;display:flex;width:60px;height:30px;padding:0 5px;box-sizing:border-box}.ngx-timepicker-control--active:after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;background-color:#00bfff}.ngx-timepicker-control__input{width:100%;height:100%;padding:0 5px 0 0;border:0;font-size:1rem;color:inherit;outline:0;text-align:center}.ngx-timepicker-control__input:disabled{background-color:transparent}.ngx-timepicker-control__arrows{position:absolute;right:2px;top:0;display:flex;flex-direction:column}.ngx-timepicker-control__arrow{font-size:11px;color:rgba(0,0,0,.4);cursor:pointer;transition:color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ngx-timepicker-control__arrow:hover{color:rgba(0,0,0,.9)}"]
})
], NgxTimepickerTimeControlComponent);
export { NgxTimepickerTimeControlComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbWVwaWNrZXItdGltZS1jb250cm9sLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1tYXRlcmlhbC10aW1lcGlja2VyLyIsInNvdXJjZXMiOlsic3JjL2FwcC9tYXRlcmlhbC10aW1lcGlja2VyL2NvbXBvbmVudHMvdGltZXBpY2tlci1maWVsZC90aW1lcGlja2VyLXRpbWUtY29udHJvbC9uZ3gtdGltZXBpY2tlci10aW1lLWNvbnRyb2wuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFDbEksT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQzFELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQVMxRCxJQUFhLGlDQUFpQyxHQUE5QyxNQUFhLGlDQUFpQztJQVA5QztRQWlCYyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFzRnZELENBQUM7SUFsRkcsUUFBUTtRQUNKLElBQUksSUFBSSxDQUFDLGdCQUFnQixFQUFFO1lBQ3ZCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxpQkFBaUIsRUFBRSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUMzRTtJQUNMLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDOUIsTUFBTSxXQUFXLEdBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3BDLE1BQU0saUJBQWlCLEdBQUcsV0FBVyxJQUFJLFdBQVcsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQztRQUUvRixJQUFJLGlC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OztzRUFBMEM7QUFWMUMsaUNBQWlDO0lBUDdDLFNBQVMsQ0FBQztRQUNQLFFBQVEsRUFBRSw2QkFBNkI7UUFDdkMsZzNCQUEyRDtRQUUzRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7S0FDbEQsQ0FBQztHQUVXLGlDQUFpQyxDQWdHN0M7U0FoR1ksaUNBQWlDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgaXNEaWdpdCB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL3RpbWVwaWNrZXIudXRpbHMnO1xuaW1wb3J0IHsgVGltZUZvcm1hdHRlclBpcGUgfSBmcm9tICcuLi8uLi8uLi9waXBlcy90aW1lLWZvcm1hdHRlci5waXBlJztcbmltcG9ydCB7IFRpbWVVbml0IH0gZnJvbSAnLi4vLi4vLi4vbW9kZWxzL3RpbWUtdW5pdC5lbnVtJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduZ3gtdGltZXBpY2tlci10aW1lLWNvbnRyb2wnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9uZ3gtdGltZXBpY2tlci10aW1lLWNvbnRyb2wuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL25neC10aW1lcGlja2VyLXRpbWUtY29udHJvbC5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuXG5leHBvcnQgY2xhc3MgTmd4VGltZXBpY2tlclRpbWVDb250cm9sQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuXG4gICAgQElucHV0KCkgdGltZTogbnVtYmVyIHwgbnVsbDtcbiAgICBASW5wdXQoKSBtaW46IG51bWJlcjtcbiAgICBASW5wdXQoKSBtYXg6IG51bWJlcjtcbiAgICBASW5wdXQoKSBwbGFjZWhvbGRlcjogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHRpbWVVbml0OiBUaW1lVW5pdDtcbiAgICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBpc0RlZmF1bHRUaW1lU2V0OiBib29sZWFuO1xuXG4gICAgQE91dHB1dCgpIHRpbWVDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgICBpc0ZvY3VzZWQ6IGJvb2xlYW47XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuaXNEZWZhdWx0VGltZVNldCkge1xuICAgICAgICAgICAgdGhpcy50aW1lID0gbmV3IFRpbWVGb3JtYXR0ZXJQaXBlKCkudHJhbnNmb3JtKHRoaXMudGltZSwgdGhpcy50aW1lVW5pdCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IHRpbWVDaGFuZ2VzID0gY2hhbmdlc1sndGltZSddO1xuICAgICAgICBjb25zdCBpc1RpbWVOb3RQcm92aWRlZCA9IHRpbWVDaGFuZ2VzICYmIHRpbWVDaGFuZ2VzLmlzRmlyc3RDaGFuZ2UoKSAmJiAhdGhpcy5pc0RlZmF1bHRUaW1lU2V0O1xuXG4gICAgICAgIGlmIChpc1RpbWVOb3RQcm92aWRlZCkge1xuICAgICAgICAgICAgdGhpcy50aW1lID0gbnVsbDtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG9uS2V5ZG93bihldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgICAgICBpZiAoIWlzRGlnaXQoZXZlbnQpKSB7XG4gICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICB9XG5cbiAgICAgICAgc3dpdGNoIChldmVudC5rZXkpIHtcbiAgICAgICAgICAgIGNhc2UgJ0Fycm93VXAnOlxuICAgICAgICAgICAgICAgIHRoaXMuaW5jcmVhc2UoKTtcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGNhc2UgJ0Fycm93RG93bic6XG4gICAgICAgICAgICAgICAgdGhpcy5kZWNyZWFzZSgpO1xuICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgaW5jcmVhc2UoKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgICAgICAgbGV0IG5leHRUaW1lID0gK3RoaXMudGltZSArIDE7XG5cbiAgICAgICAgICAgIGlmIChuZXh0VGltZSA+IHRoaXMubWF4KSB7XG4gICAgICAgICAgICAgICAgbmV4dFRpbWUgPSB0aGlzLm1pbjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgdGhpcy50aW1lQ2hhbmdlZC5lbWl0KG5leHRUaW1lKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGRlY3JlYXNlKCk6IHZvaWQge1xuICAgICAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgICAgICAgIGxldCBwcmV2aW91c1RpbWUgPSArdGhpcy50aW1lIC0gMTtcblxuICAgICAgICAgICAgaWYgKHByZXZpb3VzVGltZSA8IHRoaXMubWluKSB7XG4gICAgICAgICAgICAgICAgcHJldmlvdXNUaW1lID0gdGhpcy5tYXg7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIHRoaXMudGltZUNoYW5nZWQuZW1pdChwcmV2aW91c1RpbWUpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgb25JbnB1dChpbnB1dDogSFRNTElucHV0RWxlbWVudCkge1xuICAgICAgICBjb25zdCB2YWx1ZSA9IHBhcnNlSW50KGlucHV0LnZhbHVlLCAxMCk7XG5cbiAgICAgICAgaWYgKCFpc05hTih2YWx1ZSkpIHtcbiAgICAgICAgICAgIHRoaXMudGltZSA9IHZhbHVlO1xuXG4gICAgICAgICAgICBpZiAodGhpcy50aW1lID4gdGhpcy5tYXgpIHtcbiAgICAgICAgICAgICAgICB0aGlzLnRpbWUgPSArU3RyaW5nKHZhbHVlKVswXTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgaWYgKHRoaXMudGltZSA8IHRoaXMubWluKSB7XG4gICAgICAgICAgICAgICAgdGhpcy50aW1lID0gdGhpcy5taW47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIGlucHV0LnZhbHVlID0gU3RyaW5nKHRoaXMudGltZSk7XG4gICAgICAgICAgICB0aGlzLnRpbWVDaGFuZ2VkLmVtaXQodGhpcy50aW1lKTtcbiAgICAgICAgfVxuXG4gICAgfVxuXG4gICAgb25Gb2N1cygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc0ZvY3VzZWQgPSB0cnVlO1xuICAgIH1cblxuICAgIG9uQmx1cigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy50aW1lID0gbmV3IFRpbWVGb3JtYXR0ZXJQaXBlKCkudHJhbnNmb3JtKHRoaXMudGltZSwgdGhpcy50aW1lVW5pdCk7XG4gICAgICAgIHRoaXMuaXNGb2N1c2VkID0gZmFsc2U7XG4gICAgfVxufVxuIl19