ngx-material-timepicker-decon
Version:
Handy material design timepicker for angular DECONied
149 lines • 15.5 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { TimePeriod } from '../../models/time-period.enum';
import { TimeUnit } from '../../models/time-unit.enum';
import { DateTime } from 'luxon';
import { disableHours, disableMinutes, getHours, getMinutes } from '../../utils/timepicker-time.utils';
export class NgxMaterialTimepickerDialComponent {
constructor() {
this.timeUnit = TimeUnit;
this.periodChanged = new EventEmitter();
this.timeUnitChanged = new EventEmitter();
this.hourChanged = new EventEmitter();
this.minuteChanged = new EventEmitter();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes['period'] && changes['period'].currentValue
|| changes['format'] && changes['format'].currentValue) {
/** @type {?} */
const hours = getHours(this.format);
this.hours = disableHours(hours, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period: this.period
});
}
if (changes['period'] && changes['period'].currentValue
|| changes['hour'] && changes['hour'].currentValue) {
/** @type {?} */
const minutes = getMinutes(this.minutesGap);
this.minutes = disableMinutes(minutes, +this.hour, {
min: this.minTime,
max: this.maxTime,
format: this.format,
period: this.period
});
}
}
/**
* @param {?} unit
* @return {?}
*/
changeTimeUnit(unit) {
this.timeUnitChanged.next(unit);
}
/**
* @param {?} period
* @return {?}
*/
changePeriod(period) {
this.periodChanged.next(period);
}
/**
* @param {?} hour
* @return {?}
*/
changeHour(hour) {
this.hourChanged.next(hour);
}
/**
* @param {?} minute
* @return {?}
*/
changeMinute(minute) {
this.minuteChanged.next(minute);
}
/**
* @return {?}
*/
showHint() {
this.isHintVisible = true;
}
/**
* @return {?}
*/
hideHint() {
this.isHintVisible = false;
}
}
NgxMaterialTimepickerDialComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-material-timepicker-dial',
template: "<div class=\"timepicker-dial\">\n <div class=\"timepicker-dial__container\">\n <div class=\"timepicker-dial__time\">\n <ngx-material-timepicker-dial-control [timeList]=\"hours\" [time]=\"hour\" [timeUnit]=\"timeUnit.HOUR\"\n [isActive]=\"activeTimeUnit === timeUnit.HOUR\"\n [isEditable]=\"isEditable\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (timeChanged)=\"changeHour($event)\"\n (focused)=\"showHint()\"\n (unfocused)=\"hideHint()\">\n\n </ngx-material-timepicker-dial-control>\n <span>:</span>\n <ngx-material-timepicker-dial-control [timeList]=\"minutes\" [time]=\"minute\" [timeUnit]=\"timeUnit.MINUTE\"\n [isActive]=\"activeTimeUnit === timeUnit.MINUTE\"\n [isEditable]=\"isEditable\"\n [minutesGap]=\"minutesGap\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (timeChanged)=\"changeMinute($event)\"\n (focused)=\"showHint()\"\n (unfocused)=\"hideHint()\">\n\n </ngx-material-timepicker-dial-control>\n </div>\n <ngx-material-timepicker-period class=\"timepicker-dial__period\"\n [ngClass]=\"{'timepicker-dial__period--hidden': format === 24}\"\n [selectedPeriod]=\"period\" [activeTimeUnit]=\"activeTimeUnit\"\n [maxTime]=\"maxTime\" [minTime]=\"minTime\" [format]=\"format\"\n [hours]=\"hours\" [minutes]=\"minutes\" [selectedHour]=\"hour\"\n (periodChanged)=\"changePeriod($event)\"></ngx-material-timepicker-period>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".timepicker-dial{text-align:right}.timepicker-dial__container{display:flex;align-items:center;justify-content:flex-end;-webkit-tap-highlight-color:transparent}.timepicker-dial__time{display:flex;align-items:baseline;line-height:normal;font-size:50px;color:rgba(255,255,255,.5);font-family:Roboto,sans-serif}@supports (font-family:var(--primary-font-family)){.timepicker-dial__time{font-family:var(--primary-font-family);color:var(--dial-inactive-color)}}.timepicker-dial__period{display:block;margin-left:10px}.timepicker-dial__hint-container--hidden,.timepicker-dial__period--hidden{visibility:hidden}.timepicker-dial__hint{display:inline-block;font-size:10px;color:#fff}@supports (color:var(--dial-active-color)){.timepicker-dial__hint{color:var(--dial-active-color)}}.timepicker-dial__hint span{font-size:14px}@media (max-device-width:1023px) and (orientation:landscape){.timepicker-dial__container{flex-direction:column}.timepicker-dial__period{margin-left:0}}"]
}] }
];
NgxMaterialTimepickerDialComponent.propDecorators = {
editableHintTmpl: [{ type: Input }],
hour: [{ type: Input }],
minute: [{ type: Input }],
format: [{ type: Input }],
period: [{ type: Input }],
activeTimeUnit: [{ type: Input }],
minTime: [{ type: Input }],
maxTime: [{ type: Input }],
isEditable: [{ type: Input }],
minutesGap: [{ type: Input }],
periodChanged: [{ type: Output }],
timeUnitChanged: [{ type: Output }],
hourChanged: [{ type: Output }],
minuteChanged: [{ type: Output }]
};
if (false) {
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.timeUnit;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.hours;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.minutes;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.isHintVisible;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.editableHintTmpl;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.hour;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.minute;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.format;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.period;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.activeTimeUnit;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.minTime;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.maxTime;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.isEditable;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.minutesGap;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.periodChanged;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.timeUnitChanged;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.hourChanged;
/** @type {?} */
NgxMaterialTimepickerDialComponent.prototype.minuteChanged;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1hdGVyaWFsLXRpbWVwaWNrZXItZGlhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtbWF0ZXJpYWwtdGltZXBpY2tlci1kZWNvbi8iLCJzb3VyY2VzIjpbInNyYy9hcHAvbWF0ZXJpYWwtdGltZXBpY2tlci9jb21wb25lbnRzL3RpbWVwaWNrZXItZGlhbC9uZ3gtbWF0ZXJpYWwtdGltZXBpY2tlci1kaWFsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBaUIsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZJLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFdkQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNqQyxPQUFPLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFRdkcsTUFBTSxPQUFPLGtDQUFrQztJQU4vQztRQVFJLGFBQVEsR0FBRyxRQUFRLENBQUM7UUFrQlYsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBQy9DLG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQVksQ0FBQztRQUMvQyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFpQixDQUFDO1FBQ2hELGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQWlCLENBQUM7SUFrRGhFLENBQUM7Ozs7O0lBaERHLFdBQVcsQ0FBQyxPQUFzQjtRQUM5QixJQUFJLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsWUFBWTtlQUNoRCxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLFlBQVksRUFBRTs7a0JBQ2xELEtBQUssR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztZQUVuQyxJQUFJLENBQUMsS0FBSyxHQUFHLFlBQVksQ0FBQyxLQUFLLEVBQUU7Z0JBQzdCLEdBQUcsRUFBRSxJQUFJLENBQUMsT0FBTztnQkFDakIsR0FBRyxFQUFFLElBQUksQ0FBQyxPQUFPO2dCQUNqQixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07Z0JBQ25CLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTthQUN0QixDQUFDLENBQUM7U0FDTjtRQUNELElBQUksT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxZQUFZO2VBQ2hELE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsWUFBWSxFQUFFOztrQkFDOUMsT0FBTyxHQUFHLFVBQVUsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO1lBRTNDLElBQUksQ0FBQyxPQUFPLEdBQUcsY0FBYyxDQUFDLE9BQU8sRUFBRSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUU7Z0JBQy9DLEdBQUcsRUFBRSxJQUFJLENBQUMsT0FBTztnQkFDakIsR0FBRyxFQUFFLElBQUksQ0FBQyxPQUFPO2dCQUNqQixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07Z0JBQ25CLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTthQUN0QixDQUFDLENBQUM7U0FDTjtJQUNMLENBQUM7Ozs7O0lBRUQsY0FBYyxDQUFDLElBQWM7UUFDekIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7Ozs7SUFFRCxZQUFZLENBQUMsTUFBa0I7UUFDM0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7Ozs7SUFFRCxVQUFVLENBQUMsSUFBbUI7UUFDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQzs7Ozs7SUFFRCxZQUFZLENBQUMsTUFBcUI7UUFDOUIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7OztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztJQUM5QixDQUFDOzs7O0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO0lBQy9CLENBQUM7OztZQTlFSixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLDhCQUE4QjtnQkFDeEMsMnVFQUEwRDtnQkFFMUQsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2FBQ2xEOzs7K0JBVUksS0FBSzttQkFDTCxLQUFLO3FCQUNMLEtBQUs7cUJBQ0wsS0FBSztxQkFDTCxLQUFLOzZCQUNMLEtBQUs7c0JBQ0wsS0FBSztzQkFDTCxLQUFLO3lCQUNMLEtBQUs7eUJBQ0wsS0FBSzs0QkFFTCxNQUFNOzhCQUNOLE1BQU07MEJBQ04sTUFBTTs0QkFDTixNQUFNOzs7O0lBckJQLHNEQUFvQjs7SUFFcEIsbURBQXVCOztJQUN2QixxREFBeUI7O0lBRXpCLDJEQUF1Qjs7SUFFdkIsOERBQTZDOztJQUM3QyxrREFBK0I7O0lBQy9CLG9EQUFpQzs7SUFDakMsb0RBQXdCOztJQUN4QixvREFBNEI7O0lBQzVCLDREQUFrQzs7SUFDbEMscURBQTJCOztJQUMzQixxREFBMkI7O0lBQzNCLHdEQUE2Qjs7SUFDN0Isd0RBQTRCOztJQUU1QiwyREFBeUQ7O0lBQ3pELDZEQUF5RDs7SUFDekQseURBQTBEOztJQUMxRCwyREFBNEQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRpbWVQZXJpb2QgfSBmcm9tICcuLi8uLi9tb2RlbHMvdGltZS1wZXJpb2QuZW51bSc7XG5pbXBvcnQgeyBUaW1lVW5pdCB9IGZyb20gJy4uLy4uL21vZGVscy90aW1lLXVuaXQuZW51bSc7XG5pbXBvcnQgeyBDbG9ja0ZhY2VUaW1lIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2Nsb2NrLWZhY2UtdGltZS5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgRGF0ZVRpbWUgfSBmcm9tICdsdXhvbic7XG5pbXBvcnQgeyBkaXNhYmxlSG91cnMsIGRpc2FibGVNaW51dGVzLCBnZXRIb3VycywgZ2V0TWludXRlcyB9IGZyb20gJy4uLy4uL3V0aWxzL3RpbWVwaWNrZXItdGltZS51dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmd4LW1hdGVyaWFsLXRpbWVwaWNrZXItZGlhbCcsXG4gICAgdGVtcGxhdGVVcmw6ICduZ3gtbWF0ZXJpYWwtdGltZXBpY2tlci1kaWFsLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnbmd4LW1hdGVyaWFsLXRpbWVwaWNrZXItZGlhbC5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIE5neE1hdGVyaWFsVGltZXBpY2tlckRpYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuXG4gICAgdGltZVVuaXQgPSBUaW1lVW5pdDtcblxuICAgIGhvdXJzOiBDbG9ja0ZhY2VUaW1lW107XG4gICAgbWludXRlczogQ2xvY2tGYWNlVGltZVtdO1xuXG4gICAgaXNIaW50VmlzaWJsZTogYm9vbGVhbjtcblxuICAgIEBJbnB1dCgpIGVkaXRhYmxlSGludFRtcGw6IFRlbXBsYXRlUmVmPE5vZGU+O1xuICAgIEBJbnB1dCgpIGhvdXI6IG51bWJlciB8IHN0cmluZztcbiAgICBASW5wdXQoKSBtaW51dGU6IG51bWJlciB8IHN0cmluZztcbiAgICBASW5wdXQoKSBmb3JtYXQ6IG51bWJlcjtcbiAgICBASW5wdXQoKSBwZXJpb2Q6IFRpbWVQZXJpb2Q7XG4gICAgQElucHV0KCkgYWN0aXZlVGltZVVuaXQ6IFRpbWVVbml0O1xuICAgIEBJbnB1dCgpIG1pblRpbWU6IERhdGVUaW1lO1xuICAgIEBJbnB1dCgpIG1heFRpbWU6IERhdGVUaW1lO1xuICAgIEBJbnB1dCgpIGlzRWRpdGFibGU6IGJvb2xlYW47XG4gICAgQElucHV0KCkgbWludXRlc0dhcDogbnVtYmVyO1xuXG4gICAgQE91dHB1dCgpIHBlcmlvZENoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPFRpbWVQZXJpb2Q+KCk7XG4gICAgQE91dHB1dCgpIHRpbWVVbml0Q2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8VGltZVVuaXQ+KCk7XG4gICAgQE91dHB1dCgpIGhvdXJDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxDbG9ja0ZhY2VUaW1lPigpO1xuICAgIEBPdXRwdXQoKSBtaW51dGVDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxDbG9ja0ZhY2VUaW1lPigpO1xuXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgICAgICBpZiAoY2hhbmdlc1sncGVyaW9kJ10gJiYgY2hhbmdlc1sncGVyaW9kJ10uY3VycmVudFZhbHVlXG4gICAgICAgICAgICB8fCBjaGFuZ2VzWydmb3JtYXQnXSAmJiBjaGFuZ2VzWydmb3JtYXQnXS5jdXJyZW50VmFsdWUpIHtcbiAgICAgICAgICAgIGNvbnN0IGhvdXJzID0gZ2V0SG91cnModGhpcy5mb3JtYXQpO1xuXG4gICAgICAgICAgICB0aGlzLmhvdXJzID0gZGlzYWJsZUhvdXJzKGhvdXJzLCB7XG4gICAgICAgICAgICAgICAgbWluOiB0aGlzLm1pblRpbWUsXG4gICAgICAgICAgICAgICAgbWF4OiB0aGlzLm1heFRpbWUsXG4gICAgICAgICAgICAgICAgZm9ybWF0OiB0aGlzLmZvcm1hdCxcbiAgICAgICAgICAgICAgICBwZXJpb2Q6IHRoaXMucGVyaW9kXG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoY2hhbmdlc1sncGVyaW9kJ10gJiYgY2hhbmdlc1sncGVyaW9kJ10uY3VycmVudFZhbHVlXG4gICAgICAgICAgICB8fCBjaGFuZ2VzWydob3VyJ10gJiYgY2hhbmdlc1snaG91ciddLmN1cnJlbnRWYWx1ZSkge1xuICAgICAgICAgICAgY29uc3QgbWludXRlcyA9IGdldE1pbnV0ZXModGhpcy5taW51dGVzR2FwKTtcblxuICAgICAgICAgICAgdGhpcy5taW51dGVzID0gZGlzYWJsZU1pbnV0ZXMobWludXRlcywgK3RoaXMuaG91ciwge1xuICAgICAgICAgICAgICAgIG1pbjogdGhpcy5taW5UaW1lLFxuICAgICAgICAgICAgICAgIG1heDogdGhpcy5tYXhUaW1lLFxuICAgICAgICAgICAgICAgIGZvcm1hdDogdGhpcy5mb3JtYXQsXG4gICAgICAgICAgICAgICAgcGVyaW9kOiB0aGlzLnBlcmlvZFxuICAgICAgICAgICAgfSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBjaGFuZ2VUaW1lVW5pdCh1bml0OiBUaW1lVW5pdCk6IHZvaWQge1xuICAgICAgICB0aGlzLnRpbWVVbml0Q2hhbmdlZC5uZXh0KHVuaXQpO1xuICAgIH1cblxuICAgIGNoYW5nZVBlcmlvZChwZXJpb2Q6IFRpbWVQZXJpb2QpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5wZXJpb2RDaGFuZ2VkLm5leHQocGVyaW9kKTtcbiAgICB9XG5cbiAgICBjaGFuZ2VIb3VyKGhvdXI6IENsb2NrRmFjZVRpbWUpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5ob3VyQ2hhbmdlZC5uZXh0KGhvdXIpO1xuICAgIH1cblxuICAgIGNoYW5nZU1pbnV0ZShtaW51dGU6IENsb2NrRmFjZVRpbWUpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5taW51dGVDaGFuZ2VkLm5leHQobWludXRlKTtcbiAgICB9XG5cbiAgICBzaG93SGludCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc0hpbnRWaXNpYmxlID0gdHJ1ZTtcbiAgICB9XG5cbiAgICBoaWRlSGludCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc0hpbnRWaXNpYmxlID0gZmFsc2U7XG4gICAgfVxufVxuIl19