@material-extra/timepicker/esm2015/lib/timepicker-dialog-hour/timepicker-dialog-hour.component.js

Material timepicker component

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 MateTimepickerDialogHourComponent_div_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 8);
    i0.ɵɵelementStart(1, "span", 9);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "number");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const hour_r3 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("active", hour_r3 == ctx_r1.value);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c1, "translateX(-50%) rotateZ(" + ctx_r1.step * hour_r3 + "deg)"));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c1, "rotateZ(" + -ctx_r1.step * hour_r3 + "deg)"));
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 5, hour_r3, "1.0"));
} }
function MateTimepickerDialogHourComponent_div_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 10);
    i0.ɵɵelementStart(1, "span", 9);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "number");
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const hour_r4 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("active", hour_r4 == ctx_r2.value % 24);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c1, "translateX(-50%) rotateZ(" + ctx_r2.step * (hour_r4 % 12) + "deg)"));
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c1, "rotateZ(" + -ctx_r2.step * (hour_r4 % 12) + "deg)"));
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 5, hour_r4, "2.0"));
} }
export class MateTimepickerDialogHourComponent extends MateTimepickerFace {
    constructor() {
        super();
        this.step = 30;
        this.outerValues = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        this.innerValues = [0, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
        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 = 23;
        }
        if (add > 23) {
            add = 0;
        }
        this.value = add;
        this.change.emit(this.value);
    }
    onFinish() {
        this.finish.emit();
    }
}
MateTimepickerDialogHourComponent.ɵfac = function MateTimepickerDialogHourComponent_Factory(t) { return new (t || MateTimepickerDialogHourComponent)(); };
MateTimepickerDialogHourComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MateTimepickerDialogHourComponent, selectors: [["mate-timepicker-dialog-hour"]], viewQuery: function MateTimepickerDialogHourComponent_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: ["mateTimepickerDialogHour"], features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 9, consts: [[1, "mate-timepicker-face", 3, "keydown"], [1, "clock-face", "hour-face"], ["clockFace", ""], [1, "clock-face__container"], ["class", "clock-face__number clock-face__number--outer", 3, "active", "ngStyle", 4, "ngFor", "ngForOf"], [1, "clock-face__inner"], ["class", "clock-face__number clock-face__number--inner", 3, "active", "ngStyle", 4, "ngFor", "ngForOf"], [1, "clock-face__clock-hand", 3, "ngStyle"], [1, "clock-face__number", "clock-face__number--outer", 3, "ngStyle"], [3, "ngStyle"], [1, "clock-face__number", "clock-face__number--inner", 3, "ngStyle"]], template: function MateTimepickerDialogHourComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵlistener("keydown", function MateTimepickerDialogHourComponent_Template_div_keydown_0_listener($event) { return ctx.onKeydown($event); });
        i0.ɵɵelementStart(1, "div", 1, 2);
        i0.ɵɵelementStart(3, "div", 3);
        i0.ɵɵtemplate(4, MateTimepickerDialogHourComponent_div_4_Template, 4, 12, "div", 4);
        i0.ɵɵelementStart(5, "div", 5);
        i0.ɵɵtemplate(6, MateTimepickerDialogHourComponent_div_6_Template, 4, 12, "div", 6);
        i0.ɵɵelementEnd();
        i0.ɵɵelementEnd();
        i0.ɵɵelement(7, "span", 7);
        i0.ɵɵelementEnd();
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵadvance(4);
        i0.ɵɵproperty("ngForOf", ctx.outerValues);
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("ngForOf", ctx.innerValues);
        i0.ɵɵadvance(1);
        i0.ɵɵclassProp("outer", ctx.value > 0 && ctx.value <= 12)("inner", ctx.value <= 0 || ctx.value > 12);
        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(7, _c1, "rotateZ(" + ctx.step * ctx.value + "deg)"));
    } }, directives: [i1.NgForOf, i1.NgStyle], pipes: [i1.DecimalPipe], styles: [".clock-face.hour-face[_ngcontent-%COMP%]   .clock-face__clock-hand.outer[_ngcontent-%COMP%]{height:calc(50% - 27px);top:27px}.clock-face.hour-face[_ngcontent-%COMP%]   .clock-face__clock-hand.inner[_ngcontent-%COMP%]{height:calc(50% - 77px);top:77px}"] });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MateTimepickerDialogHourComponent, [{
        type: Component,
        args: [{
                selector: 'mate-timepicker-dialog-hour',
                templateUrl: './timepicker-dialog-hour.component.html',
                styleUrls: ['./timepicker-dialog-hour.component.scss'],
                exportAs: 'mateTimepickerDialogHour'
            }]
    }], function () { return []; }, { clockFace: [{
            type: ViewChild,
            args: ['clockFace', { static: true }]
        }], value: [{
            type: Input
        }], change: [{
            type: Output
        }], finish: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZXBpY2tlci1kaWFsb2ctaG91ci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiRDovRG9jdW1lbnRzL0xpYnJhcnkvQW5ndWxhci9tYXRlcmlhbC1leHRlbmQvcHJvamVjdHMvbWF0ZXJpYWwvdGltZXBpY2tlci9zcmMvIiwic291cmNlcyI6WyJsaWIvdGltZXBpY2tlci1kaWFsb2ctaG91ci90aW1lcGlja2VyLWRpYWxvZy1ob3VyLmNvbXBvbmVudC50cyIsImxpYi90aW1lcGlja2VyLWRpYWxvZy1ob3VyL3RpbWVwaWNrZXItZGlhbG9nLWhvdXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHcEcsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sOENBQThDLENBQUM7Ozs7OztJQ0MxRSw4QkFHRTtJQUFBLCtCQUFvRTtJQUFBLFlBQXVCOztJQUFBLGlCQUFPO0lBQ3BHLGlCQUFNOzs7O0lBSEQsaURBQThCO0lBQzlCLGtIQUE4RTtJQUMzRSxlQUE2RDtJQUE3RCxtR0FBNkQ7SUFBQyxlQUF1QjtJQUF2QiwwREFBdUI7OztJQUczRiwrQkFHRTtJQUFBLCtCQUEyRTtJQUFBLFlBQXVCOztJQUFBLGlCQUFPO0lBQzNHLGlCQUFNOzs7O0lBSGdDLHNEQUFtQztJQUNwRSx5SEFBcUY7SUFDbEYsZUFBb0U7SUFBcEUsMEdBQW9FO0lBQUMsZUFBdUI7SUFBdkIsMERBQXVCOztBREY1RyxNQUFNLE9BQU8saUNBQWtDLFNBQVEsa0JBQWtCO0lBcUJyRTtRQUNJLEtBQUssRUFBRSxDQUFDO1FBckJJLFNBQUksR0FBRyxFQUFFLENBQUM7UUFDVixnQkFBVyxHQUFHLENBQUMsRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUN0RCxnQkFBVyxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQVd2RSxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUdwQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQU0zQyxDQUFDO0lBRU0sUUFBUTtJQUNmLENBQUM7SUFFTSxRQUFRLENBQUMsS0FBYTtRQUN6QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVNLFdBQVcsQ0FBQyxHQUFXO1FBQzFCLEdBQUcsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ2xCLElBQUksR0FBRyxHQUFHLENBQUMsRUFBRTtZQUNULEdBQUcsR0FBRyxFQUFFLENBQUM7U0FDWjtRQUNELElBQUksR0FBRyxHQUFHLEVBQUUsRUFBRTtZQUNWLEdBQUcsR0FBRyxDQUFDLENBQUM7U0FDWDtRQUVELElBQUksQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRU0sUUFBUTtRQUNYLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdkIsQ0FBQzs7a0hBaERRLGlDQUFpQztzRUFBakMsaUNBQWlDOzs7Ozs7UUNYOUMsOEJBQ0U7UUFEZ0MscUhBQVcscUJBQWlCLElBQUM7UUFDN0QsaUNBRUU7UUFBQSw4QkFDRTtRQUFBLG1GQUdFO1FBRUYsOEJBQ0U7UUFBQSxtRkFHRTtRQUVKLGlCQUFNO1FBQ1IsaUJBQU07UUFDTiwwQkFFTztRQUNULGlCQUFNO1FBQ1IsaUJBQU07O1FBakIwRCxlQUFnQztRQUFoQyx5Q0FBZ0M7UUFPbkYsZUFBZ0M7UUFBaEMseUNBQWdDO1FBT25DLGVBQXdDO1FBQXhDLHlEQUF3QywyQ0FBQTtRQURULGdHQUE4RDs7a0RETjFGLGlDQUFpQztjQU43QyxTQUFTO2VBQUM7Z0JBQ1AsUUFBUSxFQUFFLDZCQUE2QjtnQkFDdkMsV0FBVyxFQUFFLHlDQUF5QztnQkFDdEQsU0FBUyxFQUFFLENBQUMseUNBQXlDLENBQUM7Z0JBQ3RELFFBQVEsRUFBRSwwQkFBMEI7YUFDdkM7c0NBT1UsU0FBUztrQkFEZixTQUFTO21CQUFDLFdBQVcsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUM7WUFJL0IsS0FBSztrQkFEWCxLQUFLO1lBTUMsTUFBTTtrQkFEWixNQUFNO1lBSUEsTUFBTTtrQkFEWixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0NhbkNvbG9yLCBUaGVtZVBhbGV0dGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NvcmUnO1xyXG5cclxuaW1wb3J0IHtNYXRlVGltZXBpY2tlckZhY2V9IGZyb20gJy4uL3RpbWVwaWNrZXItZmFjZS90aW1lcGlja2VyLWZhY2UuZGlyZWN0aXZlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdtYXRlLXRpbWVwaWNrZXItZGlhbG9nLWhvdXInLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RpbWVwaWNrZXItZGlhbG9nLWhvdXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vdGltZXBpY2tlci1kaWFsb2ctaG91ci5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgZXhwb3J0QXM6ICdtYXRlVGltZXBpY2tlckRpYWxvZ0hvdXInXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNYXRlVGltZXBpY2tlckRpYWxvZ0hvdXJDb21wb25lbnQgZXh0ZW5kcyBNYXRlVGltZXBpY2tlckZhY2UgaW1wbGVtZW50cyBPbkluaXQsIENhbkNvbG9yIHtcclxuICAgIHB1YmxpYyByZWFkb25seSBzdGVwID0gMzA7XHJcbiAgICBwdWJsaWMgcmVhZG9ubHkgb3V0ZXJWYWx1ZXMgPSBbMTIsIDEsIDIsIDMsIDQsIDUsIDYsIDcsIDgsIDksIDEwLCAxMV07XHJcbiAgICBwdWJsaWMgcmVhZG9ubHkgaW5uZXJWYWx1ZXMgPSBbMCwgMTMsIDE0LCAxNSwgMTYsIDE3LCAxOCwgMTksIDIwLCAyMSwgMjIsIDIzXTtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdjbG9ja0ZhY2UnLCB7c3RhdGljOiB0cnVlfSlcclxuICAgIHB1YmxpYyBjbG9ja0ZhY2U6IEVsZW1lbnRSZWY7XHJcblxyXG4gICAgQElucHV0KClcclxuICAgIHB1YmxpYyB2YWx1ZTtcclxuXHJcbiAgICBwdWJsaWMgY29sb3I6IFRoZW1lUGFsZXR0ZTtcclxuXHJcbiAgICBAT3V0cHV0KClcclxuICAgIHB1YmxpYyBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcclxuXHJcbiAgICBAT3V0cHV0KClcclxuICAgIHB1YmxpYyBmaW5pc2ggPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcclxuXHJcbiAgICBwdWJsaWMgZGVmYXVsdENvbG9yOiBUaGVtZVBhbGV0dGUgfCB1bmRlZmluZWQ7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgc3VwZXIoKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgbmdPbkluaXQoKSB7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uQ2hhbmdlKHZhbHVlOiBudW1iZXIpIHtcclxuICAgICAgICB0aGlzLnZhbHVlID0gdmFsdWU7XHJcbiAgICAgICAgdGhpcy5jaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgdmFsdWVDaGFuZ2UoYWRkOiBudW1iZXIpIHtcclxuICAgICAgICBhZGQgKz0gdGhpcy52YWx1ZTtcclxuICAgICAgICBpZiAoYWRkIDwgMCkge1xyXG4gICAgICAgICAgICBhZGQgPSAyMztcclxuICAgICAgICB9XHJcbiAgICAgICAgaWYgKGFkZCA+IDIzKSB7XHJcbiAgICAgICAgICAgIGFkZCA9IDA7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICB0aGlzLnZhbHVlID0gYWRkO1xyXG4gICAgICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uRmluaXNoKCkge1xyXG4gICAgICAgIHRoaXMuZmluaXNoLmVtaXQoKTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwibWF0ZS10aW1lcGlja2VyLWZhY2VcIiAoa2V5ZG93bik9XCJvbktleWRvd24oJGV2ZW50KVwiPlxyXG4gIDxkaXYgI2Nsb2NrRmFjZSBjbGFzcz1cImNsb2NrLWZhY2UgaG91ci1mYWNlXCI+XHJcblxyXG4gICAgPGRpdiBjbGFzcz1cImNsb2NrLWZhY2VfX2NvbnRhaW5lclwiPlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiY2xvY2stZmFjZV9fbnVtYmVyIGNsb2NrLWZhY2VfX251bWJlci0tb3V0ZXJcIiAqbmdGb3I9XCJsZXQgaG91ciBvZiBvdXRlclZhbHVlc1wiXHJcbiAgICAgICAgICAgW2NsYXNzLmFjdGl2ZV09XCJob3VyID09IHZhbHVlXCJcclxuICAgICAgICAgICBbbmdTdHlsZV09XCJ7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTUwJSkgcm90YXRlWignICsgKHN0ZXAgKiBob3VyKSArICdkZWcpJ31cIj5cclxuICAgICAgICA8c3BhbiBbbmdTdHlsZV09XCJ7dHJhbnNmb3JtOiAncm90YXRlWignICsgKC1zdGVwICogaG91cikgKyAnZGVnKSd9XCI+e3tob3VyIHwgbnVtYmVyOicxLjAnfX08L3NwYW4+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICA8ZGl2IGNsYXNzPVwiY2xvY2stZmFjZV9faW5uZXJcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2xvY2stZmFjZV9fbnVtYmVyIGNsb2NrLWZhY2VfX251bWJlci0taW5uZXJcIlxyXG4gICAgICAgICAgICAgKm5nRm9yPVwibGV0IGhvdXIgb2YgaW5uZXJWYWx1ZXNcIiBbY2xhc3MuYWN0aXZlXT1cImhvdXIgPT0gdmFsdWUgJSAyNFwiXHJcbiAgICAgICAgICAgICBbbmdTdHlsZV09XCJ7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTUwJSkgcm90YXRlWignICsgKHN0ZXAgKiAoaG91ciAlIDEyKSkgKyAnZGVnKSd9XCI+XHJcbiAgICAgICAgICA8c3BhbiBbbmdTdHlsZV09XCJ7dHJhbnNmb3JtOiAncm90YXRlWignICsgKC1zdGVwICogKGhvdXIgJSAxMikpICsgJ2RlZyknfVwiPnt7aG91ciB8IG51bWJlcjonMi4wJ319PC9zcGFuPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPHNwYW4gY2xhc3M9XCJjbG9jay1mYWNlX19jbG9jay1oYW5kXCIgW25nU3R5bGVdPVwieyB0cmFuc2Zvcm06ICdyb3RhdGVaKCcgKyAoc3RlcCAqIHZhbHVlKSArICdkZWcpJ31cIlxyXG4gICAgICAgICAgW2NsYXNzLm91dGVyXT1cInZhbHVlID4gMCAmJiB2YWx1ZSA8PSAxMlwiIFtjbGFzcy5pbm5lcl09XCJ2YWx1ZSA8PSAwIHx8IHZhbHVlID4gMTJcIj5cclxuICAgIDwvc3Bhbj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbiJdfQ==