@material-extra/timepicker
Version:
Material timepicker component
87 lines • 14.8 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../timepicker-dialog-hour/timepicker-dialog-hour.component";
import * as i3 from "../timepicker-dialog-minute/timepicker-dialog-minute.component";
function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template(rf, ctx) { if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "mate-timepicker-dialog-hour", 1);
i0.ɵɵlistener("change", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return ctx_r3.onChange($event); })("switchClock", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_switchClock_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(); return ctx_r5.switchClock.emit($event); })("enterPress", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_enterPress_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r6 = i0.ɵɵnextContext(); return ctx_r6.enterPress.emit(); })("finish", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_finish_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.finish.emit(); });
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵproperty("value", ctx_r0.value);
} }
function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template(rf, ctx) { if (rf & 1) {
const _r9 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "mate-timepicker-dialog-minute", 1);
i0.ɵɵlistener("change", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_change_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return ctx_r8.onChange($event); })("switchClock", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_switchClock_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r10 = i0.ɵɵnextContext(); return ctx_r10.switchClock.emit($event); })("enterPress", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_enterPress_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r11 = i0.ɵɵnextContext(); return ctx_r11.enterPress.emit(); })("finish", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_finish_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r12 = i0.ɵɵnextContext(); return ctx_r12.finish.emit(); });
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵproperty("value", ctx_r1.value);
} }
function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template(rf, ctx) { if (rf & 1) {
const _r14 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "mate-timepicker-dialog-minute", 1);
i0.ɵɵlistener("change", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_change_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return ctx_r13.onChange($event); })("switchClock", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_switchClock_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r15 = i0.ɵɵnextContext(); return ctx_r15.switchClock.emit($event); })("enterPress", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_enterPress_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r16 = i0.ɵɵnextContext(); return ctx_r16.enterPress.emit(); })("finish", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_finish_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r17 = i0.ɵɵnextContext(); return ctx_r17.finish.emit(); });
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵproperty("value", ctx_r2.value);
} }
export class MateTimepickerDialogBodyComponent {
constructor() {
this.type = 'hour';
this.change = new EventEmitter();
this.switchClock = new EventEmitter();
this.enterPress = new EventEmitter();
this.finish = new EventEmitter();
}
ngOnInit() {
}
onChange(value) {
this.value = value;
this.change.emit({
type: this.type,
value: this.value
});
}
}
MateTimepickerDialogBodyComponent.ɵfac = function MateTimepickerDialogBodyComponent_Factory(t) { return new (t || MateTimepickerDialogBodyComponent)(); };
MateTimepickerDialogBodyComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MateTimepickerDialogBodyComponent, selectors: [["mate-timepicker-dialog-body"]], hostAttrs: [1, "mate-timepicker-dialog-body"], inputs: { type: "type", value: "value" }, outputs: { change: "change", switchClock: "switchClock", enterPress: "enterPress", finish: "finish" }, exportAs: ["mateTimepickerDialogBody"], decls: 3, vars: 3, consts: [[3, "value", "change", "switchClock", "enterPress", "finish", 4, "ngIf"], [3, "value", "change", "switchClock", "enterPress", "finish"]], template: function MateTimepickerDialogBodyComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template, 1, 1, "mate-timepicker-dialog-hour", 0);
i0.ɵɵtemplate(1, MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template, 1, 1, "mate-timepicker-dialog-minute", 0);
i0.ɵɵtemplate(2, MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template, 1, 1, "mate-timepicker-dialog-minute", 0);
} if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.type == "hour");
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.type == "minute");
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.type == "second");
} }, directives: [i1.NgIf, i2.MateTimepickerDialogHourComponent, i3.MateTimepickerDialogMinuteComponent], styles: [".mate-timepicker-dialog-body[_nghost-%COMP%]{display:flex;flex:auto;margin:1rem 0;width:100%}.mate-timepicker-dialog-body[_nghost-%COMP%] mate-timepicker-dialog-hour[_ngcontent-%COMP%], .mate-timepicker-dialog-body[_nghost-%COMP%] mate-timepicker-dialog-minute[_ngcontent-%COMP%]{display:block;margin:auto}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face{-webkit-user-select:none;user-select:none}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face{border-radius:50%;box-sizing:border-box;display:flex;height:260px;justify-content:center;margin:auto;position:relative;width:260px}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__container{height:100%}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__container .clock-face__number{font-size:14px;height:100%;position:absolute;text-align:center;width:30px;z-index:10}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__container .clock-face__number span{-webkit-user-select:none;align-items:center;border-radius:50%;display:flex;font-weight:500;height:30px;justify-content:center;margin:auto;user-select:none;width:30px}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__container .clock-face__inner{border-radius:50%;display:flex;height:calc(100% - 100px);position:absolute;top:50px}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__container .clock-face__inner .clock-face__number{font-size:12px;width:30px}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__clock-hand{position:absolute;transform-origin:bottom center;width:2px;z-index:1}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__clock-hand:after{background-color:inherit;border-radius:50%;bottom:-3px;content:\"\";height:6px;left:-2px;position:absolute;width:6px}.mate-timepicker-dialog-body[_nghost-%COMP%] .mate-timepicker-face .clock-face .clock-face__clock-hand.hand-point:before{border-radius:50%;border-style:solid;border-width:8px;box-sizing:initial;content:\"\";height:4px;left:calc(50% - 10px);position:absolute;top:-11px;width:4px}"] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MateTimepickerDialogBodyComponent, [{
type: Component,
args: [{
selector: 'mate-timepicker-dialog-body',
templateUrl: './timepicker-dialog-body.component.html',
styleUrls: ['./timepicker-dialog-body.component.scss'],
host: {
class: 'mate-timepicker-dialog-body'
},
exportAs: 'mateTimepickerDialogBody'
}]
}], function () { return []; }, { type: [{
type: Input
}], value: [{
type: Input
}], change: [{
type: Output
}], switchClock: [{
type: Output
}], enterPress: [{
type: Output
}], finish: [{
type: Output
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZXBpY2tlci1kaWFsb2ctYm9keS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiRDovRG9jdW1lbnRzL0xpYnJhcnkvQW5ndWxhci9tYXRlcmlhbC1leHRlbmQvcHJvamVjdHMvbWF0ZXJpYWwvdGltZXBpY2tlci9zcmMvIiwic291cmNlcyI6WyJsaWIvdGltZXBpY2tlci1kaWFsb2ctYm9keS90aW1lcGlja2VyLWRpYWxvZy1ib2R5LmNvbXBvbmVudC50cyIsImxpYi90aW1lcGlja2VyLWRpYWxvZy1ib2R5L3RpbWVwaWNrZXItZGlhbG9nLWJvZHkuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztJQ0E3RSxzREFHOEI7SUFGRCw4UEFBMkIsZ09BQWdCLCtCQUF3QixJQUF4Qyx3TkFDYix3QkFBaUIsSUFESixnTkFDZ0Isb0JBQWEsSUFEN0I7SUFFeEQsaUJBQThCOzs7SUFIc0Isb0NBQWU7Ozs7SUFJbkUsd0RBR2dDO0lBRkQsa1FBQTJCLHFPQUFnQixnQ0FBd0IsSUFBeEMsNk5BQ2IseUJBQWlCLElBREoscU5BQ2dCLHFCQUFhLElBRDdCO0lBRTFELGlCQUFnQzs7O0lBSHdCLG9DQUFlOzs7O0lBSXZFLHdEQUdnQztJQUZELHFRQUEyQixzT0FBZ0IsZ0NBQXdCLElBQXhDLDhOQUNiLHlCQUFpQixJQURKLHNOQUNnQixxQkFBYSxJQUQ3QjtJQUUxRCxpQkFBZ0M7OztJQUh3QixvQ0FBZTs7QURJdkUsTUFBTSxPQUFPLGlDQUFpQztJQW1CMUM7UUFqQk8sU0FBSSxHQUFjLE1BQU0sQ0FBQztRQU16QixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQWUsQ0FBQztRQUd6QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHekMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFHdEMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFHM0MsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQWE7UUFDbEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFFbkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDYixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7WUFDZixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUs7U0FDcEIsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs7a0hBaENRLGlDQUFpQztzRUFBakMsaUNBQWlDO1FDWjlDLGtJQUdBO1FBQ0Esc0lBR0E7UUFDQSxzSUFHQTs7UUFYNkIseUNBQXNCO1FBSXBCLGVBQXdCO1FBQXhCLDJDQUF3QjtRQUl4QixlQUF3QjtRQUF4QiwyQ0FBd0I7O2tEREkxQyxpQ0FBaUM7Y0FUN0MsU0FBUztlQUFDO2dCQUNQLFFBQVEsRUFBRSw2QkFBNkI7Z0JBQ3ZDLFdBQVcsRUFBRSx5Q0FBeUM7Z0JBQ3RELFNBQVMsRUFBRSxDQUFDLHlDQUF5QyxDQUFDO2dCQUN0RCxJQUFJLEVBQUU7b0JBQ0YsS0FBSyxFQUFFLDZCQUE2QjtpQkFDdkM7Z0JBQ0QsUUFBUSxFQUFFLDBCQUEwQjthQUN2QztzQ0FHVSxJQUFJO2tCQURWLEtBQUs7WUFJQyxLQUFLO2tCQURYLEtBQUs7WUFJQyxNQUFNO2tCQURaLE1BQU07WUFJQSxXQUFXO2tCQURqQixNQUFNO1lBSUEsVUFBVTtrQkFEaEIsTUFBTTtZQUlBLE1BQU07a0JBRFosTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7Q2xvY2tDaGFuZ2UsIENsb2NrVHlwZX0gZnJvbSAnLi4vdGltZXBpY2tlci5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnbWF0ZS10aW1lcGlja2VyLWRpYWxvZy1ib2R5JyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi90aW1lcGlja2VyLWRpYWxvZy1ib2R5LmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL3RpbWVwaWNrZXItZGlhbG9nLWJvZHkuY29tcG9uZW50LnNjc3MnXSxcclxuICAgIGhvc3Q6IHtcclxuICAgICAgICBjbGFzczogJ21hdGUtdGltZXBpY2tlci1kaWFsb2ctYm9keSdcclxuICAgIH0sXHJcbiAgICBleHBvcnRBczogJ21hdGVUaW1lcGlja2VyRGlhbG9nQm9keSdcclxufSlcclxuZXhwb3J0IGNsYXNzIE1hdGVUaW1lcGlja2VyRGlhbG9nQm9keUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBASW5wdXQoKVxyXG4gICAgcHVibGljIHR5cGU6IENsb2NrVHlwZSA9ICdob3VyJztcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgcHVibGljIHZhbHVlO1xyXG5cclxuICAgIEBPdXRwdXQoKVxyXG4gICAgcHVibGljIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Q2xvY2tDaGFuZ2U+KCk7XHJcblxyXG4gICAgQE91dHB1dCgpXHJcbiAgICBwdWJsaWMgc3dpdGNoQ2xvY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuXHJcbiAgICBAT3V0cHV0KClcclxuICAgIHB1YmxpYyBlbnRlclByZXNzID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG5cclxuICAgIEBPdXRwdXQoKVxyXG4gICAgcHVibGljIGZpbmlzaCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCkge1xyXG4gICAgfVxyXG5cclxuICAgIG9uQ2hhbmdlKHZhbHVlOiBudW1iZXIpIHtcclxuICAgICAgICB0aGlzLnZhbHVlID0gdmFsdWU7XHJcblxyXG4gICAgICAgIHRoaXMuY2hhbmdlLmVtaXQoe1xyXG4gICAgICAgICAgICB0eXBlOiB0aGlzLnR5cGUsXHJcbiAgICAgICAgICAgIHZhbHVlOiB0aGlzLnZhbHVlXHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcbn1cclxuIiwiPG1hdGUtdGltZXBpY2tlci1kaWFsb2ctaG91ciAqbmdJZj1cInR5cGUgPT0gJ2hvdXInXCIgW3ZhbHVlXT1cInZhbHVlXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIiAoc3dpdGNoQ2xvY2spPVwic3dpdGNoQ2xvY2suZW1pdCgkZXZlbnQpXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoZW50ZXJQcmVzcyk9XCJlbnRlclByZXNzLmVtaXQoKVwiIChmaW5pc2gpPVwiZmluaXNoLmVtaXQoKVwiPlxyXG48L21hdGUtdGltZXBpY2tlci1kaWFsb2ctaG91cj5cclxuPG1hdGUtdGltZXBpY2tlci1kaWFsb2ctbWludXRlICpuZ0lmPVwidHlwZSA9PSAnbWludXRlJ1wiIFt2YWx1ZV09XCJ2YWx1ZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIiAoc3dpdGNoQ2xvY2spPVwic3dpdGNoQ2xvY2suZW1pdCgkZXZlbnQpXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIChlbnRlclByZXNzKT1cImVudGVyUHJlc3MuZW1pdCgpXCIgKGZpbmlzaCk9XCJmaW5pc2guZW1pdCgpXCI+XHJcbjwvbWF0ZS10aW1lcGlja2VyLWRpYWxvZy1taW51dGU+XHJcbjxtYXRlLXRpbWVwaWNrZXItZGlhbG9nLW1pbnV0ZSAqbmdJZj1cInR5cGUgPT0gJ3NlY29uZCdcIiBbdmFsdWVdPVwidmFsdWVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKGNoYW5nZSk9XCJvbkNoYW5nZSgkZXZlbnQpXCIgKHN3aXRjaENsb2NrKT1cInN3aXRjaENsb2NrLmVtaXQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoZW50ZXJQcmVzcyk9XCJlbnRlclByZXNzLmVtaXQoKVwiIChmaW5pc2gpPVwiZmluaXNoLmVtaXQoKVwiPlxyXG48L21hdGUtdGltZXBpY2tlci1kaWFsb2ctbWludXRlPlxyXG4iXX0=