ngx-material-timepicker
Version:
Handy material design timepicker for angular
104 lines • 12.9 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { TimePeriod } from '../../models/time-period.enum';
import { TimeUnit } from '../../models/time-unit.enum';
import { animate, sequence, style, transition, trigger } from '@angular/animations';
import { DateTime } from 'luxon';
import { disableHours, disableMinutes } from '../../utils/timepicker-time.utils';
let NgxMaterialTimepickerPeriodComponent = class NgxMaterialTimepickerPeriodComponent {
constructor() {
this.timePeriod = TimePeriod;
this.isPeriodAvailable = true;
this.periodChanged = new EventEmitter();
}
changePeriod(period) {
this.isPeriodAvailable = this.isSwitchPeriodAvailable(period);
if (this.isPeriodAvailable) {
this.periodChanged.next(period);
}
}
animationDone() {
this.isPeriodAvailable = true;
}
isSwitchPeriodAvailable(period) {
const time = this.getDisabledTimeByPeriod(period);
return !time.every(t => t.disabled);
}
getDisabledTimeByPeriod(period) {
switch (this.activeTimeUnit) {
case TimeUnit.HOUR:
return disableHours(this.hours, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period
});
case TimeUnit.MINUTE:
return disableMinutes(this.minutes, +this.selectedHour, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period
});
default:
throw new Error('no such TimeUnit');
}
}
};
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], NgxMaterialTimepickerPeriodComponent.prototype, "selectedPeriod", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], NgxMaterialTimepickerPeriodComponent.prototype, "format", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], NgxMaterialTimepickerPeriodComponent.prototype, "activeTimeUnit", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Array)
], NgxMaterialTimepickerPeriodComponent.prototype, "hours", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Array)
], NgxMaterialTimepickerPeriodComponent.prototype, "minutes", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", DateTime)
], NgxMaterialTimepickerPeriodComponent.prototype, "minTime", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", DateTime)
], NgxMaterialTimepickerPeriodComponent.prototype, "maxTime", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Object)
], NgxMaterialTimepickerPeriodComponent.prototype, "selectedHour", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", Object)
], NgxMaterialTimepickerPeriodComponent.prototype, "periodChanged", void 0);
NgxMaterialTimepickerPeriodComponent = tslib_1.__decorate([
Component({
selector: 'ngx-material-timepicker-period',
template: "<div class=\"timepicker-period\">\n\t\t\t<button class=\"timepicker-dial__item timepicker-period__btn\"\n [ngClass]=\"{'timepicker-dial__item_active': selectedPeriod === timePeriod.AM}\"\n (click)=\"changePeriod(timePeriod.AM)\"\n type=\"button\">AM</button>\n <button class=\"timepicker-dial__item timepicker-period__btn\"\n [ngClass]=\"{'timepicker-dial__item_active': selectedPeriod === timePeriod.PM}\"\n (click)=\"changePeriod(timePeriod.PM)\"\n type=\"button\">PM</button>\n <div class=\"timepicker-period__warning\" [@scaleInOut] (@scaleInOut.done)=\"animationDone()\" *ngIf=\"!isPeriodAvailable\">\n <p>Current time would be invalid in this period.</p>\n </div>\n</div>\n",
animations: [
trigger('scaleInOut', [
transition(':enter', [
style({ transform: 'scale(0)' }),
animate('.2s', style({ transform: 'scale(1)' })),
sequence([
animate('3s', style({ opacity: 1 })),
animate('.3s', style({ opacity: 0 }))
])
])
])
],
styles: [".timepicker-dial__item{cursor:pointer;color:rgba(255,255,255,.5);font-family:Roboto,sans-serif}@supports (font-family:var(--primary-font-family)){.timepicker-dial__item{font-family:var(--primary-font-family);color:var(--dial-inactive-color)}}.timepicker-dial__item_active{color:#fff}@supports (color:var(--dial-active-color)){.timepicker-dial__item_active{color:var(--dial-active-color)}}.timepicker-period{display:flex;flex-direction:column;position:relative}.timepicker-period__btn{padding:1px 3px;border:0;background-color:transparent;font-size:18px;font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0;border-radius:3px;transition:background-color .5s;font-family:Roboto,sans-serif}.timepicker-period__btn:focus{background-color:rgba(0,0,0,.07)}.timepicker-period__warning{padding:5px 10px;border-radius:3px;background-color:rgba(0,0,0,.55);color:#fff;position:absolute;width:200px;left:-20px;top:40px}.timepicker-period__warning>p{margin:0;font-size:12px;font-family:Roboto,sans-serif}@supports (font-family:var(--primary-font-family)){.timepicker-period__btn,.timepicker-period__warning>p{font-family:var(--primary-font-family)}}"]
})
], NgxMaterialTimepickerPeriodComponent);
export { NgxMaterialTimepickerPeriodComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1hdGVyaWFsLXRpbWVwaWNrZXItcGVyaW9kLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1tYXRlcmlhbC10aW1lcGlja2VyLyIsInNvdXJjZXMiOlsic3JjL2FwcC9tYXRlcmlhbC10aW1lcGlja2VyL2NvbXBvbmVudHMvdGltZXBpY2tlci1wZXJpb2Qvbmd4LW1hdGVyaWFsLXRpbWVwaWNrZXItcGVyaW9kLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDM0QsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRXZELE9BQU8sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDcEYsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNqQyxPQUFPLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBbUJqRixJQUFhLG9DQUFvQyxHQUFqRCxNQUFhLG9DQUFvQztJQWpCakQ7UUFtQkksZUFBVSxHQUFHLFVBQVUsQ0FBQztRQUN4QixzQkFBaUIsR0FBRyxJQUFJLENBQUM7UUFXZixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7SUFzQzdELENBQUM7SUFwQ0csWUFBWSxDQUFDLE1BQWtCO1FBQzNCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsdUJBQXVCLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDOUQsSUFBSSxJQUFJLENBQUMsaUJBQWlCLEVBQUU7WUFDeEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7U0FDbkM7SUFDTCxDQUFDO0lBRUQsYUFBYTtRQUNULElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUM7SUFDbEMsQ0FBQztJQUVPLHVCQUF1QixDQUFDLE1BQWtCO1FBQzlDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNsRCxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRU8sdUJBQXVCLENBQUMsTUFBa0I7UUFDOUMsUUFBUSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3pCLEtBQUssUUFBUSxDQUFDLElBQUk7Z0JBQ2QsT0FBTyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtvQkFDNUIsR0FBRyxFQUFFLElBQUksQ0FBQyxPQUFPO29CQUNqQixHQUFHLEVBQUUsSUFBSSxDQUFDLE9BQU87b0JBQ2pCLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTtvQkFDbkIsTUFBTTtpQkFDVCxDQUFDLENBQUM7WUFDUCxLQUFLLFFBQVEsQ0FBQyxNQUFNO2dCQUNoQixPQUFPLGNBQWMsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtvQkFDcEQsR0FBRyxFQUFFLElBQUksQ0FBQyxPQUFPO29CQUNqQixHQUFHLEVBQUUsSUFBSSxDQUFDLE9BQU87b0JBQ2pCLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTtvQkFDbkIsTUFBTTtpQkFDVCxDQUFDLENBQUM7WUFDUDtnQkFDSSxNQUFNLElBQUksS0FBSyxDQUFDLGtCQUFrQixDQUFDLENBQUM7U0FDM0M7SUFDTCxDQUFDO0NBQ0osQ0FBQTtBQS9DWTtJQUFSLEtBQUssRUFBRTs7NEVBQTRCO0FBQzNCO0lBQVIsS0FBSyxFQUFFOztvRUFBZ0I7QUFDZjtJQUFSLEtBQUssRUFBRTs7NEVBQTBCO0FBQ3pCO0lBQVIsS0FBSyxFQUFFOzttRUFBd0I7QUFDdkI7SUFBUixLQUFLLEVBQUU7O3FFQUEwQjtBQUN6QjtJQUFSLEtBQUssRUFBRTtzQ0FBVSxRQUFRO3FFQUFDO0FBQ2xCO0lBQVIsS0FBSyxFQUFFO3NDQUFVLFFBQVE7cUVBQUM7QUFDbEI7SUFBUixLQUFLLEVBQUU7OzBFQUErQjtBQUU3QjtJQUFULE1BQU0sRUFBRTs7MkVBQWdEO0FBZGhELG9DQUFvQztJQWpCaEQsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLGdDQUFnQztRQUMxQyxpeEJBQTREO1FBRTVELFVBQVUsRUFBRTtZQUNSLE9BQU8sQ0FBQyxZQUFZLEVBQUU7Z0JBQ2xCLFVBQVUsQ0FBQyxRQUFRLEVBQUU7b0JBQ2pCLEtBQUssQ0FBQyxFQUFDLFNBQVMsRUFBRSxVQUFVLEVBQUMsQ0FBQztvQkFDOUIsT0FBTyxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsRUFBQyxTQUFTLEVBQUUsVUFBVSxFQUFDLENBQUMsQ0FBQztvQkFDOUMsUUFBUSxDQUFDO3dCQUNMLE9BQU8sQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUM7d0JBQ2xDLE9BQU8sQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUM7cUJBQ3RDLENBQUM7aUJBQ0wsQ0FBQzthQUNMLENBQUM7U0FDTDs7S0FDSixDQUFDO0dBQ1csb0NBQW9DLENBb0RoRDtTQXBEWSxvQ0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGltZVBlcmlvZCB9IGZyb20gJy4uLy4uL21vZGVscy90aW1lLXBlcmlvZC5lbnVtJztcbmltcG9ydCB7IFRpbWVVbml0IH0gZnJvbSAnLi4vLi4vbW9kZWxzL3RpbWUtdW5pdC5lbnVtJztcbmltcG9ydCB7IENsb2NrRmFjZVRpbWUgfSBmcm9tICcuLi8uLi9tb2RlbHMvY2xvY2stZmFjZS10aW1lLmludGVyZmFjZSc7XG5pbXBvcnQgeyBhbmltYXRlLCBzZXF1ZW5jZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IERhdGVUaW1lIH0gZnJvbSAnbHV4b24nO1xuaW1wb3J0IHsgZGlzYWJsZUhvdXJzLCBkaXNhYmxlTWludXRlcyB9IGZyb20gJy4uLy4uL3V0aWxzL3RpbWVwaWNrZXItdGltZS51dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmd4LW1hdGVyaWFsLXRpbWVwaWNrZXItcGVyaW9kJyxcbiAgICB0ZW1wbGF0ZVVybDogJ25neC1tYXRlcmlhbC10aW1lcGlja2VyLXBlcmlvZC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJ25neC1tYXRlcmlhbC10aW1lcGlja2VyLXBlcmlvZC5jb21wb25lbnQuc2NzcyddLFxuICAgIGFuaW1hdGlvbnM6IFtcbiAgICAgICAgdHJpZ2dlcignc2NhbGVJbk91dCcsIFtcbiAgICAgICAgICAgIHRyYW5zaXRpb24oJzplbnRlcicsIFtcbiAgICAgICAgICAgICAgICBzdHlsZSh7dHJhbnNmb3JtOiAnc2NhbGUoMCknfSksXG4gICAgICAgICAgICAgICAgYW5pbWF0ZSgnLjJzJywgc3R5bGUoe3RyYW5zZm9ybTogJ3NjYWxlKDEpJ30pKSxcbiAgICAgICAgICAgICAgICBzZXF1ZW5jZShbXG4gICAgICAgICAgICAgICAgICAgIGFuaW1hdGUoJzNzJywgc3R5bGUoe29wYWNpdHk6IDF9KSksXG4gICAgICAgICAgICAgICAgICAgIGFuaW1hdGUoJy4zcycsIHN0eWxlKHtvcGFjaXR5OiAwfSkpXG4gICAgICAgICAgICAgICAgXSlcbiAgICAgICAgICAgIF0pXG4gICAgICAgIF0pXG4gICAgXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hNYXRlcmlhbFRpbWVwaWNrZXJQZXJpb2RDb21wb25lbnQge1xuXG4gICAgdGltZVBlcmlvZCA9IFRpbWVQZXJpb2Q7XG4gICAgaXNQZXJpb2RBdmFpbGFibGUgPSB0cnVlO1xuXG4gICAgQElucHV0KCkgc2VsZWN0ZWRQZXJpb2Q6IFRpbWVQZXJpb2Q7XG4gICAgQElucHV0KCkgZm9ybWF0OiBudW1iZXI7XG4gICAgQElucHV0KCkgYWN0aXZlVGltZVVuaXQ6IFRpbWVVbml0O1xuICAgIEBJbnB1dCgpIGhvdXJzOiBDbG9ja0ZhY2VUaW1lW107XG4gICAgQElucHV0KCkgbWludXRlczogQ2xvY2tGYWNlVGltZVtdO1xuICAgIEBJbnB1dCgpIG1pblRpbWU6IERhdGVUaW1lO1xuICAgIEBJbnB1dCgpIG1heFRpbWU6IERhdGVUaW1lO1xuICAgIEBJbnB1dCgpIHNlbGVjdGVkSG91cjogbnVtYmVyIHwgc3RyaW5nO1xuXG4gICAgQE91dHB1dCgpIHBlcmlvZENoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPFRpbWVQZXJpb2Q+KCk7XG5cbiAgICBjaGFuZ2VQZXJpb2QocGVyaW9kOiBUaW1lUGVyaW9kKTogdm9pZCB7XG4gICAgICAgIHRoaXMuaXNQZXJpb2RBdmFpbGFibGUgPSB0aGlzLmlzU3dpdGNoUGVyaW9kQXZhaWxhYmxlKHBlcmlvZCk7XG4gICAgICAgIGlmICh0aGlzLmlzUGVyaW9kQXZhaWxhYmxlKSB7XG4gICAgICAgICAgICB0aGlzLnBlcmlvZENoYW5nZWQubmV4dChwZXJpb2QpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgYW5pbWF0aW9uRG9uZSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc1BlcmlvZEF2YWlsYWJsZSA9IHRydWU7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBpc1N3aXRjaFBlcmlvZEF2YWlsYWJsZShwZXJpb2Q6IFRpbWVQZXJpb2QpOiBib29sZWFuIHtcbiAgICAgICAgY29uc3QgdGltZSA9IHRoaXMuZ2V0RGlzYWJsZWRUaW1lQnlQZXJpb2QocGVyaW9kKTtcbiAgICAgICAgcmV0dXJuICF0aW1lLmV2ZXJ5KHQgPT4gdC5kaXNhYmxlZCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXREaXNhYmxlZFRpbWVCeVBlcmlvZChwZXJpb2Q6IFRpbWVQZXJpb2QpOiBDbG9ja0ZhY2VUaW1lW10ge1xuICAgICAgICBzd2l0Y2ggKHRoaXMuYWN0aXZlVGltZVVuaXQpIHtcbiAgICAgICAgICAgIGNhc2UgVGltZVVuaXQuSE9VUjpcbiAgICAgICAgICAgICAgICByZXR1cm4gZGlzYWJsZUhvdXJzKHRoaXMuaG91cnMsIHtcbiAgICAgICAgICAgICAgICAgICAgbWluOiB0aGlzLm1pblRpbWUsXG4gICAgICAgICAgICAgICAgICAgIG1heDogdGhpcy5tYXhUaW1lLFxuICAgICAgICAgICAgICAgICAgICBmb3JtYXQ6IHRoaXMuZm9ybWF0LFxuICAgICAgICAgICAgICAgICAgICBwZXJpb2RcbiAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIGNhc2UgVGltZVVuaXQuTUlOVVRFOlxuICAgICAgICAgICAgICAgIHJldHVybiBkaXNhYmxlTWludXRlcyh0aGlzLm1pbnV0ZXMsICt0aGlzLnNlbGVjdGVkSG91ciwge1xuICAgICAgICAgICAgICAgICAgICBtaW46IHRoaXMubWluVGltZSxcbiAgICAgICAgICAgICAgICAgICAgbWF4OiB0aGlzLm1heFRpbWUsXG4gICAgICAgICAgICAgICAgICAgIGZvcm1hdDogdGhpcy5mb3JtYXQsXG4gICAgICAgICAgICAgICAgICAgIHBlcmlvZFxuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ25vIHN1Y2ggVGltZVVuaXQnKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==