@material-extra/timepicker
Version:
Material timepicker component
95 lines • 10.8 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { MateTimepickerFace } from '../timepicker-face/timepicker-face.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
const _c0 = ["clockFace"];
const _c1 = function (a0) { return { transform: a0 }; };
function MateTimepickerDialogMinuteComponent_div_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 6);
i0.ɵɵelementStart(1, "span", 7);
i0.ɵɵtext(2);
i0.ɵɵpipe(3, "number");
i0.ɵɵelementEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
const minute_r2 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassProp("active", minute_r2 == ctx_r1.value % 60);
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c1, "translateX(-50%) rotateZ(" + ctx_r1.step * minute_r2 + "deg)"));
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c1, "rotateZ(" + -ctx_r1.step * minute_r2 + "deg)"));
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 5, minute_r2, "2.0"));
} }
export class MateTimepickerDialogMinuteComponent extends MateTimepickerFace {
constructor() {
super();
this.step = 6;
this.values = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
this.outerValues = Array.from(Array(60).keys());
this.change = new EventEmitter();
this.finish = new EventEmitter();
}
ngOnInit() {
}
onChange(value) {
this.value = value;
this.change.emit(this.value);
}
valueChange(add) {
add += this.value;
if (add < 0) {
add = 59;
}
if (add > 59) {
add = 0;
}
this.value = add;
this.change.emit(this.value);
}
onFinish() {
this.finish.emit();
}
}
MateTimepickerDialogMinuteComponent.ɵfac = function MateTimepickerDialogMinuteComponent_Factory(t) { return new (t || MateTimepickerDialogMinuteComponent)(); };
MateTimepickerDialogMinuteComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MateTimepickerDialogMinuteComponent, selectors: [["mate-timepicker-dialog-minute"]], viewQuery: function MateTimepickerDialogMinuteComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵstaticViewQuery(_c0, true);
} if (rf & 2) {
var _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clockFace = _t.first);
} }, inputs: { value: "value" }, outputs: { change: "change", finish: "finish" }, exportAs: ["mateTimepickerDialogMinute"], features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 6, consts: [[1, "mate-timepicker-face", 3, "keydown"], [1, "clock-face", "minute-face"], ["clockFace", ""], [1, "clock-face__container"], ["class", "clock-face__number", 3, "active", "ngStyle", 4, "ngFor", "ngForOf"], [1, "clock-face__clock-hand", 3, "ngStyle"], [1, "clock-face__number", 3, "ngStyle"], [3, "ngStyle"]], template: function MateTimepickerDialogMinuteComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0);
i0.ɵɵlistener("keydown", function MateTimepickerDialogMinuteComponent_Template_div_keydown_0_listener($event) { return ctx.onKeydown($event); });
i0.ɵɵelementStart(1, "div", 1, 2);
i0.ɵɵelementStart(3, "div", 3);
i0.ɵɵtemplate(4, MateTimepickerDialogMinuteComponent_div_4_Template, 4, 12, "div", 4);
i0.ɵɵelementEnd();
i0.ɵɵelement(5, "span", 5);
i0.ɵɵelementEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵadvance(4);
i0.ɵɵproperty("ngForOf", ctx.values);
i0.ɵɵadvance(1);
i0.ɵɵclassProp("hand-point", ctx.value % 5 != 0);
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c1, "rotateZ(" + ctx.step * ctx.value + "deg)"));
} }, directives: [i1.NgForOf, i1.NgStyle], pipes: [i1.DecimalPipe], styles: [".clock-face.minute-face[_ngcontent-%COMP%] .clock-face__clock-hand[_ngcontent-%COMP%]{height:calc(50% - 27px);top:27px}.clock-face.minute-face[_ngcontent-%COMP%] .clock-face__clock-hand.hand-point[_ngcontent-%COMP%]{height:calc(50% - 15px);top:15px}"] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MateTimepickerDialogMinuteComponent, [{
type: Component,
args: [{
selector: 'mate-timepicker-dialog-minute',
templateUrl: './timepicker-dialog-minute.component.html',
styleUrls: ['./timepicker-dialog-minute.component.scss'],
exportAs: 'mateTimepickerDialogMinute'
}]
}], function () { return []; }, { clockFace: [{
type: ViewChild,
args: ['clockFace', { static: true }]
}], value: [{
type: Input
}], change: [{
type: Output
}], finish: [{
type: Output
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZXBpY2tlci1kaWFsb2ctbWludXRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJEOi9Eb2N1bWVudHMvTGlicmFyeS9Bbmd1bGFyL21hdGVyaWFsLWV4dGVuZC9wcm9qZWN0cy9tYXRlcmlhbC90aW1lcGlja2VyL3NyYy8iLCJzb3VyY2VzIjpbImxpYi90aW1lcGlja2VyLWRpYWxvZy1taW51dGUvdGltZXBpY2tlci1kaWFsb2ctbWludXRlLmNvbXBvbmVudC50cyIsImxpYi90aW1lcGlja2VyLWRpYWxvZy1taW51dGUvdGltZXBpY2tlci1kaWFsb2ctbWludXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXBHLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDhDQUE4QyxDQUFDOzs7Ozs7SUNDMUUsOEJBRUU7SUFBQSwrQkFBc0U7SUFBQSxZQUF5Qjs7SUFBQSxpQkFBTztJQUN4RyxpQkFBTTs7OztJQUh3RCx3REFBcUM7SUFDOUYsb0hBQWdGO0lBQzdFLGVBQStEO0lBQS9ELHFHQUErRDtJQUFDLGVBQXlCO0lBQXpCLDREQUF5Qjs7QURLdkcsTUFBTSxPQUFPLG1DQUFvQyxTQUFRLGtCQUFrQjtJQWlCdkU7UUFDSSxLQUFLLEVBQUUsQ0FBQztRQWpCSSxTQUFJLEdBQUcsQ0FBQyxDQUFDO1FBQ1QsV0FBTSxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUN4RCxnQkFBVyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7UUFTcEQsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHcEMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFJM0MsQ0FBQztJQUVNLFFBQVE7SUFDZixDQUFDO0lBRU0sUUFBUSxDQUFDLEtBQWE7UUFDekIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFFTSxXQUFXLENBQUMsR0FBVztRQUMxQixHQUFHLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQztRQUNsQixJQUFJLEdBQUcsR0FBRyxDQUFDLEVBQUU7WUFDVCxHQUFHLEdBQUcsRUFBRSxDQUFDO1NBQ1o7UUFDRCxJQUFJLEdBQUcsR0FBRyxFQUFFLEVBQUU7WUFDVixHQUFHLEdBQUcsQ0FBQyxDQUFDO1NBQ1g7UUFFRCxJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQztRQUNqQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVNLFFBQVE7UUFDWCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3ZCLENBQUM7O3NIQTVDUSxtQ0FBbUM7d0VBQW5DLG1DQUFtQzs7Ozs7O1FDVmhELDhCQUNFO1FBRGdDLHVIQUFXLHFCQUFpQixJQUFDO1FBQzdELGlDQUNFO1FBQUEsOEJBQ0U7UUFBQSxxRkFFRTtRQUVKLGlCQUFNO1FBQ04sMEJBRU87UUFDVCxpQkFBTTtRQUNSLGlCQUFNOztRQVRnQyxlQUE2QjtRQUE3QixvQ0FBNkI7UUFNekQsZUFBbUM7UUFBbkMsZ0RBQW1DO1FBREosZ0dBQThEOztrRERFMUYsbUNBQW1DO2NBTi9DLFNBQVM7ZUFBQztnQkFDUCxRQUFRLEVBQUUsK0JBQStCO2dCQUN6QyxXQUFXLEVBQUUsMkNBQTJDO2dCQUN4RCxTQUFTLEVBQUUsQ0FBQywyQ0FBMkMsQ0FBQztnQkFDeEQsUUFBUSxFQUFFLDRCQUE0QjthQUN6QztzQ0FPVSxTQUFTO2tCQURmLFNBQVM7bUJBQUMsV0FBVyxFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQztZQUkvQixLQUFLO2tCQURYLEtBQUs7WUFJQyxNQUFNO2tCQURaLE1BQU07WUFJQSxNQUFNO2tCQURaLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdDaGlsZH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQge01hdGVUaW1lcGlja2VyRmFjZX0gZnJvbSAnLi4vdGltZXBpY2tlci1mYWNlL3RpbWVwaWNrZXItZmFjZS5kaXJlY3RpdmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ21hdGUtdGltZXBpY2tlci1kaWFsb2ctbWludXRlJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi90aW1lcGlja2VyLWRpYWxvZy1taW51dGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vdGltZXBpY2tlci1kaWFsb2ctbWludXRlLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBleHBvcnRBczogJ21hdGVUaW1lcGlja2VyRGlhbG9nTWludXRlJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgTWF0ZVRpbWVwaWNrZXJEaWFsb2dNaW51dGVDb21wb25lbnQgZXh0ZW5kcyBNYXRlVGltZXBpY2tlckZhY2UgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gICAgcHVibGljIHJlYWRvbmx5IHN0ZXAgPSA2O1xyXG4gICAgcHVibGljIHJlYWRvbmx5IHZhbHVlcyA9IFswLCA1LCAxMCwgMTUsIDIwLCAyNSwgMzAsIDM1LCA0MCwgNDUsIDUwLCA1NV07XHJcbiAgICBwdWJsaWMgcmVhZG9ubHkgb3V0ZXJWYWx1ZXMgPSBBcnJheS5mcm9tKEFycmF5KDYwKS5rZXlzKCkpO1xyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ2Nsb2NrRmFjZScsIHtzdGF0aWM6IHRydWV9KVxyXG4gICAgcHVibGljIGNsb2NrRmFjZTogRWxlbWVudFJlZjtcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgcHVibGljIHZhbHVlO1xyXG5cclxuICAgIEBPdXRwdXQoKVxyXG4gICAgcHVibGljIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xyXG5cclxuICAgIEBPdXRwdXQoKVxyXG4gICAgcHVibGljIGZpbmlzaCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgICAgIHN1cGVyKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG5nT25Jbml0KCkge1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbkNoYW5nZSh2YWx1ZTogbnVtYmVyKSB7XHJcbiAgICAgICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xyXG4gICAgICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIHZhbHVlQ2hhbmdlKGFkZDogbnVtYmVyKSB7XHJcbiAgICAgICAgYWRkICs9IHRoaXMudmFsdWU7XHJcbiAgICAgICAgaWYgKGFkZCA8IDApIHtcclxuICAgICAgICAgICAgYWRkID0gNTk7XHJcbiAgICAgICAgfVxyXG4gICAgICAgIGlmIChhZGQgPiA1OSkge1xyXG4gICAgICAgICAgICBhZGQgPSAwO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGhpcy52YWx1ZSA9IGFkZDtcclxuICAgICAgICB0aGlzLmNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbkZpbmlzaCgpIHtcclxuICAgICAgICB0aGlzLmZpbmlzaC5lbWl0KCk7XHJcbiAgICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIm1hdGUtdGltZXBpY2tlci1mYWNlXCIgKGtleWRvd24pPVwib25LZXlkb3duKCRldmVudClcIj5cclxuICA8ZGl2ICNjbG9ja0ZhY2UgY2xhc3M9XCJjbG9jay1mYWNlIG1pbnV0ZS1mYWNlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiY2xvY2stZmFjZV9fY29udGFpbmVyXCI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJjbG9jay1mYWNlX19udW1iZXJcIiAqbmdGb3I9XCJsZXQgbWludXRlIG9mIHZhbHVlc1wiIFtjbGFzcy5hY3RpdmVdPVwibWludXRlID09IHZhbHVlICUgNjBcIlxyXG4gICAgICAgICAgIFtuZ1N0eWxlXT1cInsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKSByb3RhdGVaKCcgKyAoc3RlcCAqIG1pbnV0ZSkgKyAnZGVnKSd9XCI+XHJcbiAgICAgICAgPHNwYW4gW25nU3R5bGVdPVwie3RyYW5zZm9ybTogJ3JvdGF0ZVooJyArICgtc3RlcCAqIG1pbnV0ZSkgKyAnZGVnKSd9XCI+e3ttaW51dGUgfCBudW1iZXI6JzIuMCd9fTwvc3Bhbj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxzcGFuIGNsYXNzPVwiY2xvY2stZmFjZV9fY2xvY2staGFuZFwiIFtuZ1N0eWxlXT1cInsgdHJhbnNmb3JtOiAncm90YXRlWignICsgKHN0ZXAgKiB2YWx1ZSkgKyAnZGVnKSd9XCJcclxuICAgICAgICAgIFtjbGFzcy5oYW5kLXBvaW50XT1cInZhbHVlICUgNSAhPSAwXCI+XHJcbiAgICA8L3NwYW4+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=