ngx-material-timepicker
Version:
Handy material design timepicker for angular
117 lines • 14.1 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';
var NgxTimepickerTimeControlComponent = /** @class */ (function () {
function NgxTimepickerTimeControlComponent() {
this.timeChanged = new EventEmitter();
}
NgxTimepickerTimeControlComponent.prototype.ngOnInit = function () {
if (this.isDefaultTimeSet) {
this.time = new TimeFormatterPipe().transform(this.time, this.timeUnit);
}
};
NgxTimepickerTimeControlComponent.prototype.ngOnChanges = function (changes) {
var timeChanges = changes['time'];
var isTimeNotProvided = timeChanges && timeChanges.isFirstChange() && !this.isDefaultTimeSet;
if (isTimeNotProvided) {
this.time = null;
}
};
NgxTimepickerTimeControlComponent.prototype.onKeydown = function (event) {
if (!isDigit(event)) {
event.preventDefault();
}
switch (event.key) {
case 'ArrowUp':
this.increase();
break;
case 'ArrowDown':
this.decrease();
break;
}
};
NgxTimepickerTimeControlComponent.prototype.increase = function () {
if (!this.disabled) {
var nextTime = +this.time + 1;
if (nextTime > this.max) {
nextTime = this.min;
}
this.timeChanged.emit(nextTime);
}
};
NgxTimepickerTimeControlComponent.prototype.decrease = function () {
if (!this.disabled) {
var previousTime = +this.time - 1;
if (previousTime < this.min) {
previousTime = this.max;
}
this.timeChanged.emit(previousTime);
}
};
NgxTimepickerTimeControlComponent.prototype.onInput = function (input) {
var 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);
}
};
NgxTimepickerTimeControlComponent.prototype.onFocus = function () {
this.isFocused = true;
};
NgxTimepickerTimeControlComponent.prototype.onBlur = function () {
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);
return NgxTimepickerTimeControlComponent;
}());
export { NgxTimepickerTimeControlComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbWVwaWNrZXItdGltZS1jb250cm9sLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1tYXRlcmlhbC10aW1lcGlja2VyLyIsInNvdXJjZXMiOlsic3JjL2FwcC9tYXRlcmlhbC10aW1lcGlja2VyL2NvbXBvbmVudHMvdGltZXBpY2tlci1maWVsZC90aW1lcGlja2VyLXRpbWUtY29udHJvbC9uZ3gtdGltZXBpY2tlci10aW1lLWNvbnRyb2wuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFDbEksT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQzFELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQVMxRDtJQVBBO1FBaUJjLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQXNGdkQsQ0FBQztJQWxGRyxvREFBUSxHQUFSO1FBQ0ksSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDdkIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLGlCQUFpQixFQUFFLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1NBQzNFO0lBQ0wsQ0FBQztJQUVELHVEQUFXLEdBQVgsVUFBWSxPQUFzQjtRQUM5QixJQUFNLFdBQVcsR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsSUFBTSxpQkFBaUIsR0FBRyxXQUFXLElBQUksV0FBVyxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDO1FBRS9GLElBQUksaUJBQWlCLEVBQUU7WUFDbkIsSUFB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QU0sRUFBRTs7MEVBQTBDO0lBVjFDLGlDQUFpQztRQVA3QyxTQUFTLENBQUM7WUFDUCxRQUFRLEVBQUUsNkJBQTZCO1lBQ3ZDLGczQkFBMkQ7WUFFM0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O1NBQ2xELENBQUM7T0FFVyxpQ0FBaUMsQ0FnRzdDO0lBQUQsd0NBQUM7Q0FBQSxBQWhHRCxJQWdHQztTQWhHWSxpQ0FBaUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBpc0RpZ2l0IH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvdGltZXBpY2tlci51dGlscyc7XG5pbXBvcnQgeyBUaW1lRm9ybWF0dGVyUGlwZSB9IGZyb20gJy4uLy4uLy4uL3BpcGVzL3RpbWUtZm9ybWF0dGVyLnBpcGUnO1xuaW1wb3J0IHsgVGltZVVuaXQgfSBmcm9tICcuLi8uLi8uLi9tb2RlbHMvdGltZS11bml0LmVudW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25neC10aW1lcGlja2VyLXRpbWUtY29udHJvbCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL25neC10aW1lcGlja2VyLXRpbWUtY29udHJvbC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbmd4LXRpbWVwaWNrZXItdGltZS1jb250cm9sLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5cbmV4cG9ydCBjbGFzcyBOZ3hUaW1lcGlja2VyVGltZUNvbnRyb2xDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG5cbiAgICBASW5wdXQoKSB0aW1lOiBudW1iZXIgfCBudWxsO1xuICAgIEBJbnB1dCgpIG1pbjogbnVtYmVyO1xuICAgIEBJbnB1dCgpIG1heDogbnVtYmVyO1xuICAgIEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmc7XG4gICAgQElucHV0KCkgdGltZVVuaXQ6IFRpbWVVbml0O1xuICAgIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuO1xuICAgIEBJbnB1dCgpIGlzRGVmYXVsdFRpbWVTZXQ6IGJvb2xlYW47XG5cbiAgICBAT3V0cHV0KCkgdGltZUNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcblxuICAgIGlzRm9jdXNlZDogYm9vbGVhbjtcblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5pc0RlZmF1bHRUaW1lU2V0KSB7XG4gICAgICAgICAgICB0aGlzLnRpbWUgPSBuZXcgVGltZUZvcm1hdHRlclBpcGUoKS50cmFuc2Zvcm0odGhpcy50aW1lLCB0aGlzLnRpbWVVbml0KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAgICAgY29uc3QgdGltZUNoYW5nZXMgPSBjaGFuZ2VzWyd0aW1lJ107XG4gICAgICAgIGNvbnN0IGlzVGltZU5vdFByb3ZpZGVkID0gdGltZUNoYW5nZXMgJiYgdGltZUNoYW5nZXMuaXNGaXJzdENoYW5nZSgpICYmICF0aGlzLmlzRGVmYXVsdFRpbWVTZXQ7XG5cbiAgICAgICAgaWYgKGlzVGltZU5vdFByb3ZpZGVkKSB7XG4gICAgICAgICAgICB0aGlzLnRpbWUgPSBudWxsO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgb25LZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgICAgIGlmICghaXNEaWdpdChldmVudCkpIHtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIH1cblxuICAgICAgICBzd2l0Y2ggKGV2ZW50LmtleSkge1xuICAgICAgICAgICAgY2FzZSAnQXJyb3dVcCc6XG4gICAgICAgICAgICAgICAgdGhpcy5pbmNyZWFzZSgpO1xuICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgY2FzZSAnQXJyb3dEb3duJzpcbiAgICAgICAgICAgICAgICB0aGlzLmRlY3JlYXNlKCk7XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBpbmNyZWFzZSgpOiB2b2lkIHtcbiAgICAgICAgaWYgKCF0aGlzLmRpc2FibGVkKSB7XG4gICAgICAgICAgICBsZXQgbmV4dFRpbWUgPSArdGhpcy50aW1lICsgMTtcblxuICAgICAgICAgICAgaWYgKG5leHRUaW1lID4gdGhpcy5tYXgpIHtcbiAgICAgICAgICAgICAgICBuZXh0VGltZSA9IHRoaXMubWluO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICB0aGlzLnRpbWVDaGFuZ2VkLmVtaXQobmV4dFRpbWUpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgZGVjcmVhc2UoKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgICAgICAgbGV0IHByZXZpb3VzVGltZSA9ICt0aGlzLnRpbWUgLSAxO1xuXG4gICAgICAgICAgICBpZiAocHJldmlvdXNUaW1lIDwgdGhpcy5taW4pIHtcbiAgICAgICAgICAgICAgICBwcmV2aW91c1RpbWUgPSB0aGlzLm1heDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgdGhpcy50aW1lQ2hhbmdlZC5lbWl0KHByZXZpb3VzVGltZSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBvbklucHV0KGlucHV0OiBIVE1MSW5wdXRFbGVtZW50KSB7XG4gICAgICAgIGNvbnN0IHZhbHVlID0gcGFyc2VJbnQoaW5wdXQudmFsdWUsIDEwKTtcblxuICAgICAgICBpZiAoIWlzTmFOKHZhbHVlKSkge1xuICAgICAgICAgICAgdGhpcy50aW1lID0gdmFsdWU7XG5cbiAgICAgICAgICAgIGlmICh0aGlzLnRpbWUgPiB0aGlzLm1heCkge1xuICAgICAgICAgICAgICAgIHRoaXMudGltZSA9ICtTdHJpbmcodmFsdWUpWzBdO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAodGhpcy50aW1lIDwgdGhpcy5taW4pIHtcbiAgICAgICAgICAgICAgICB0aGlzLnRpbWUgPSB0aGlzLm1pbjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgaW5wdXQudmFsdWUgPSBTdHJpbmcodGhpcy50aW1lKTtcbiAgICAgICAgICAgIHRoaXMudGltZUNoYW5nZWQuZW1pdCh0aGlzLnRpbWUpO1xuICAgICAgICB9XG5cbiAgICB9XG5cbiAgICBvbkZvY3VzKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmlzRm9jdXNlZCA9IHRydWU7XG4gICAgfVxuXG4gICAgb25CbHVyKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnRpbWUgPSBuZXcgVGltZUZvcm1hdHRlclBpcGUoKS50cmFuc2Zvcm0odGhpcy50aW1lLCB0aGlzLnRpbWVVbml0KTtcbiAgICAgICAgdGhpcy5pc0ZvY3VzZWQgPSBmYWxzZTtcbiAgICB9XG59XG4iXX0=