@material-extra/timepicker
Version:
Material timepicker component
903 lines (893 loc) • 116 kB
JavaScript
import { ɵɵgetCurrentView, ɵɵelementContainerStart, ɵɵelementStart, ɵɵtext, ɵɵelementEnd, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵpipe, ɵɵelementContainerEnd, ɵɵadvance, ɵɵclassProp, ɵɵtextInterpolate1, ɵɵpipeBind2, EventEmitter, ɵɵdefineComponent, ɵɵtemplate, ɵɵproperty, ɵsetClassMetadata, Component, Input, Output, ɵɵdefineDirective, ɵɵresolveDocument, Directive, HostListener, ɵɵpureFunction1, ɵɵtextInterpolate, ɵɵstaticViewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ɵɵInheritDefinitionFeature, ɵɵelement, ViewChild, ɵɵdirectiveInject, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, ɵɵdefineInjectable, Injectable, ɵɵnamespaceSVG, ChangeDetectorRef, ɵɵinjectAttribute, ɵɵcontentQuery, ɵɵviewQuery, ɵɵattribute, ɵɵNgOnChangesFeature, ɵɵprojectionDef, ɵɵprojection, Attribute, ContentChild, InjectionToken, NgZone, ViewContainerRef, Inject, Optional, forwardRef, ɵɵhostProperty, ɵɵProvidersFeature, HostBinding, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
import { MatRipple, mixinColor, MatRippleModule } from '@angular/material/core';
import { NgIf, DecimalPipe, NgForOf, NgStyle, DOCUMENT, CommonModule } from '@angular/common';
import { MatButton, MatButtonModule } from '@angular/material/button';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Subject, Subscription, of, merge } from 'rxjs';
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
import { take, filter } from 'rxjs/operators';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { Directionality } from '@angular/cdk/bidi';
import { DOWN_ARROW } from '@angular/cdk/keycodes';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
import { MatFormField } from '@angular/material/form-field';
import { A11yModule } from '@angular/cdk/a11y';
class TimepickerUtil {
static isEqualsDeep(value1, value2) {
return value1 === value2 || ((value1 == null || value2 == null || value1.length === value2.length) &&
JSON.stringify(value1) === JSON.stringify(value2));
}
static isRealNumber(value) {
return typeof value === 'number' && !isNaN(value) && value !== Infinity && value !== -Infinity;
}
static toString(value) {
if (value === null || value === undefined || value.constructor === String) {
return value;
}
else if (value instanceof Date) {
return value.toJSON();
}
else {
try {
return JSON.stringify(value);
}
catch (e) {
return value + '';
}
}
}
}
class Duration {
constructor(hour, minute, second) {
this.hour = hour;
this.minute = minute;
this.second = second;
}
static parseTimes(times) {
let hour, minute, second;
if (times.length > 1) {
hour = parseInt(times[0], 10);
minute = parseInt(times[1], 10);
if (TimepickerUtil.isRealNumber(hour) && TimepickerUtil.isRealNumber(minute)) {
if (times.length > 2) {
second = parseInt(times[2], 10);
}
if (!TimepickerUtil.isRealNumber(second)) {
second = 0;
}
if (hour < 0) {
hour = 0;
}
if (minute < 0) {
minute = 0;
}
if (second < 0) {
second = 0;
}
hour %= 24;
minute %= 60;
second %= 60;
if (hour < 12 && times.length > 2 && times[2].toLowerCase().includes('pm')) {
hour += 12;
}
return new Duration(hour, minute, second);
}
}
return null;
}
static valueOf(hour, minute, second) {
return new Duration(hour, minute, second);
}
static zero() {
return new Duration(0, 0, 0);
}
static fromMillis(count) {
if (count < 0) {
return null;
}
return new Duration(Math.floor(count / Duration.matrix.hours.milliseconds) % Duration.matrix.days.hours, Math.floor(count / Duration.matrix.minutes.milliseconds) % Duration.matrix.hours.minutes, Math.floor(count / Duration.matrix.seconds.milliseconds) % Duration.matrix.minutes.seconds);
}
static fromString(value, separator) {
if (typeof value === 'string') {
let time;
if (typeof separator === 'string') {
time = Duration.parseTimes(value.split(separator));
if (time) {
return time;
}
}
time = Duration.parseTimes(value.split(':'));
if (time) {
return time;
}
time = Duration.parseTimes(value.split('-'));
if (time) {
return time;
}
time = Duration.parseTimes(value.split('.'));
if (time) {
return time;
}
time = Duration.parseTimes(value.split(';'));
if (time) {
return time;
}
time = Duration.parseTimes(value.split(','));
if (time) {
return time;
}
}
return null;
}
static fromDate(value) {
if (value instanceof Date) {
return new Duration(value.getHours(), value.getMinutes(), value.getSeconds());
}
return null;
}
static now(second = true) {
const now = new Date();
return new Duration(now.getHours(), now.getMinutes(), second ? now.getSeconds() : 0);
}
clone() {
return new Duration(this.hour, this.minute, this.second);
}
getValue(type) {
if (['hour', 'minute', 'second'].includes(type)) {
return this[type];
}
return null;
}
setValue(type, value) {
if (['hour', 'minute', 'second'].includes(type)) {
this[type] = value;
}
return this;
}
setNew(type, value) {
const result = new Duration(this.hour, this.minute, this.second);
if (['hour', 'minute', 'second'].includes(type)) {
result[type] = value;
}
return result;
}
format(format) {
if (format) {
const replace = (f, v, r) => {
let match;
while (true) {
match = r.match(f);
if (match && typeof match[0] === 'string') {
r = r.replace(match[0], String(v).padStart(match[0].length, '0'));
}
else {
break;
}
}
return r;
};
let result = format;
result = replace(/h+/i, this.hour, result);
result = replace(/m+/i, this.minute, result);
result = replace(/s+/i, this.second, result);
return result;
}
else {
return `${String(this.hour).padStart(2, '0')}:${String(this.minute).padStart(2, '0')}:${String(this.second).padStart(2, '0')}`;
}
}
milliseconds() {
return this.hour * Duration.matrix.hours.milliseconds +
this.minute * Duration.matrix.minutes.milliseconds +
this.second * Duration.matrix.seconds.milliseconds;
}
setToDate(value) {
value.setHours(this.hour);
value.setMinutes(this.minute);
value.setSeconds(this.second);
value.setMilliseconds(0);
return value;
}
equals(value) {
return value != null && this.hour === value.hour && this.minute === value.minute && this.second === value.second;
}
}
Duration.matrix = {
days: { hours: 24, minutes: 1440, seconds: 86400, milliseconds: 86400000 },
hours: { minutes: 60, seconds: 3600, milliseconds: 3600000 },
minutes: { seconds: 60, milliseconds: 60000 },
seconds: { milliseconds: 1000 }
};
function MateTimepickerDialogHeaderComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
const _r2 = ɵɵgetCurrentView();
ɵɵelementContainerStart(0);
ɵɵelementStart(1, "span");
ɵɵtext(2, ":");
ɵɵelementEnd();
ɵɵelementStart(3, "label", 2);
ɵɵlistener("click", function MateTimepickerDialogHeaderComponent_ng_container_10_Template_label_click_3_listener() { ɵɵrestoreView(_r2); const ctx_r1 = ɵɵnextContext(); return ctx_r1.onActive("second"); });
ɵɵtext(4);
ɵɵpipe(5, "number");
ɵɵelementEnd();
ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r0 = ɵɵnextContext();
ɵɵadvance(3);
ɵɵclassProp("active", ctx_r0.type == "second");
ɵɵadvance(1);
ɵɵtextInterpolate1(" ", ɵɵpipeBind2(5, 3, ctx_r0.value.second, "2.0"), " ");
} }
class MateTimepickerDialogHeaderComponent {
constructor() {
this.type = 'hour';
this.second = false;
this.active = new EventEmitter();
}
ngOnInit() {
}
onActive(type) {
this.type = type;
this.active.emit(type);
}
}
MateTimepickerDialogHeaderComponent.ɵfac = function MateTimepickerDialogHeaderComponent_Factory(t) { return new (t || MateTimepickerDialogHeaderComponent)(); };
MateTimepickerDialogHeaderComponent.ɵcmp = ɵɵdefineComponent({ type: MateTimepickerDialogHeaderComponent, selectors: [["mate-timepicker-dialog-header"]], hostAttrs: [1, "mate-timepicker-dialog-header"], inputs: { type: "type", second: "second", value: "value" }, outputs: { active: "active" }, exportAs: ["mateTimepickerDialogHeader"], decls: 11, vars: 13, consts: [[1, "mate-timepicker-dial"], [1, "timepicker-dial-time"], ["matRipple", "", 1, "timepicker-dial-time-item", 3, "click"], [4, "ngIf"]], template: function MateTimepickerDialogHeaderComponent_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "div", 0);
ɵɵelementStart(1, "div", 1);
ɵɵelementStart(2, "label", 2);
ɵɵlistener("click", function MateTimepickerDialogHeaderComponent_Template_label_click_2_listener() { return ctx.onActive("hour"); });
ɵɵtext(3);
ɵɵpipe(4, "number");
ɵɵelementEnd();
ɵɵelementStart(5, "span");
ɵɵtext(6, ":");
ɵɵelementEnd();
ɵɵelementStart(7, "label", 2);
ɵɵlistener("click", function MateTimepickerDialogHeaderComponent_Template_label_click_7_listener() { return ctx.onActive("minute"); });
ɵɵtext(8);
ɵɵpipe(9, "number");
ɵɵelementEnd();
ɵɵtemplate(10, MateTimepickerDialogHeaderComponent_ng_container_10_Template, 6, 6, "ng-container", 3);
ɵɵelementEnd();
ɵɵelementEnd();
} if (rf & 2) {
ɵɵadvance(2);
ɵɵclassProp("active", ctx.type == "hour");
ɵɵadvance(1);
ɵɵtextInterpolate1(" ", ɵɵpipeBind2(4, 7, ctx.value.hour, "2.0"), " ");
ɵɵadvance(4);
ɵɵclassProp("active", ctx.type == "minute");
ɵɵadvance(1);
ɵɵtextInterpolate1(" ", ɵɵpipeBind2(9, 10, ctx.value.minute, "2.0"), " ");
ɵɵadvance(2);
ɵɵproperty("ngIf", ctx.second);
} }, directives: [MatRipple, NgIf], pipes: [DecimalPipe], styles: [".mate-timepicker-dialog-header[_nghost-%COMP%]{display:block;width:100%}.mate-timepicker-dialog-header[_nghost-%COMP%] .mate-timepicker-dial[_ngcontent-%COMP%]{margin:0 auto}.mate-timepicker-dialog-header[_nghost-%COMP%] .mate-timepicker-dial[_ngcontent-%COMP%] .timepicker-dial-time[_ngcontent-%COMP%]{-webkit-user-select:none;align-content:center;font-size:44px;line-height:normal;text-align:center;user-select:none}.mate-timepicker-dialog-header[_nghost-%COMP%] .mate-timepicker-dial[_ngcontent-%COMP%] .timepicker-dial-time[_ngcontent-%COMP%] .timepicker-dial-time-item[_ngcontent-%COMP%]{-webkit-user-select:none;border-radius:.2em;cursor:pointer;display:inline-flex;padding:0 .25em;user-select:none}"] });
/*@__PURE__*/ (function () { ɵsetClassMetadata(MateTimepickerDialogHeaderComponent, [{
type: Component,
args: [{
selector: 'mate-timepicker-dialog-header',
templateUrl: './timepicker-dialog-header.component.html',
styleUrls: ['./timepicker-dialog-header.component.scss'],
host: {
class: 'mate-timepicker-dialog-header'
},
exportAs: 'mateTimepickerDialogHeader'
}]
}], function () { return []; }, { type: [{
type: Input
}], second: [{
type: Input
}], value: [{
type: Input
}], active: [{
type: Output
}] }); })();
class MateTimepickerFace {
constructor() {
this.innerClockFaceSize = 40;
this.switchClock = new EventEmitter();
this.enterPress = new EventEmitter();
}
onChange(value) {
}
onFinish() {
}
onMousedown(e) {
e.preventDefault();
this.moved = false;
this.selected = false;
this.isStarted = true;
}
onClick(e) {
e.preventDefault();
this.selectTime(e);
this.isStarted = false;
this.selected = false;
this.onFinish();
}
onTouchend(e) {
this.selectTime(e);
if (this.moved) {
this.isStarted = false;
this.moved = false;
this.selected = false;
this.onFinish();
}
}
onMove(e) {
this.moved = true;
this.selectTime(e);
}
selectTime(e) {
if (!this.isStarted && (e instanceof MouseEvent && e.type !== 'click')) {
return;
}
const clockFaceCords = this.clockFace.nativeElement.getBoundingClientRect();
const centerX = clockFaceCords.left + clockFaceCords.width / 2;
const centerY = clockFaceCords.top + clockFaceCords.height / 2;
const arc = Math.atan(Math.abs(e.clientX - centerX) / Math.abs(e.clientY - centerY)) * 180 / Math.PI;
const circleAngle = this.countAngleByCords(centerX, centerY, e.clientX, e.clientY, arc);
const isInnerClockChosen = !!this.innerValues && this.isInnerClockFace(centerX, centerY, e.clientX, e.clientY, ((clockFaceCords.height + clockFaceCords.width) / 4) - this.innerClockFaceSize);
let index = this.roundAngle(circleAngle);
index = index < 0 ? 0 : index;
const value = isInnerClockChosen ? this.innerValues[index % this.innerValues.length] :
this.outerValues[index % this.outerValues.length];
this.onChange(value);
this.selected = true;
}
onMouseup(e) {
e.preventDefault();
this.isStarted = false;
if (this.selected) {
this.selected = false;
this.onFinish();
}
}
roundAngle(angle) {
return Math.round(angle / this.step);
}
isInnerClockFace(x0, y0, x, y, border) {
return Math.sqrt(Math.pow(x - x0, 2) + Math.pow(y - y0, 2)) < border;
}
countAngleByCords(x0, y0, x, y, currentAngle) {
if (y > y0 && x >= x0) {
return 180 - currentAngle;
}
else if (y > y0 && x < x0) {
return 180 + currentAngle;
}
else if (y < y0 && x < x0) {
return 360 - currentAngle;
}
else { // I quarter
return currentAngle;
}
}
valueChange(add) {
}
onKeydown(event) {
switch (event.code) {
case 'ArrowLeft':
this.switchClock.emit('left');
return;
case 'ArrowRight':
this.switchClock.emit('right');
return;
case 'PageUp':
case 'ArrowUp':
this.valueChange(1);
return;
case 'PageDown':
case 'ArrowDown':
this.valueChange(-1);
return;
case 'Home':
this.switchClock.emit('start');
return;
case 'End':
this.switchClock.emit('end');
return;
case 'Enter':
case 'Space':
this.enterPress.emit();
return;
default:
return;
}
}
}
MateTimepickerFace.ɵfac = function MateTimepickerFace_Factory(t) { return new (t || MateTimepickerFace)(); };
MateTimepickerFace.ɵdir = ɵɵdefineDirective({ type: MateTimepickerFace, selectors: [["mate-timepicker-face"]], hostBindings: function MateTimepickerFace_HostBindings(rf, ctx) { if (rf & 1) {
ɵɵlistener("mousedown", function MateTimepickerFace_mousedown_HostBindingHandler($event) { return ctx.onMousedown($event); })("click", function MateTimepickerFace_click_HostBindingHandler($event) { return ctx.onClick($event); })("touchend", function MateTimepickerFace_touchend_HostBindingHandler($event) { return ctx.onTouchend($event.changedTouches[0]); })("mousemove", function MateTimepickerFace_mousemove_HostBindingHandler($event) { return ctx.onMove($event); })("touchmove", function MateTimepickerFace_touchmove_HostBindingHandler($event) { return ctx.onMove($event.changedTouches[0]); })("mouseup", function MateTimepickerFace_mouseup_HostBindingHandler($event) { return ctx.onMouseup($event); })("mouseup", function MateTimepickerFace_mouseup_HostBindingHandler($event) { return ctx.onMouseup($event); }, false, ɵɵresolveDocument)("keydown", function MateTimepickerFace_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); }, false, ɵɵresolveDocument);
} }, outputs: { switchClock: "switchClock", enterPress: "enterPress" } });
/*@__PURE__*/ (function () { ɵsetClassMetadata(MateTimepickerFace, [{
type: Directive,
args: [{ selector: 'mate-timepicker-face' }]
}], null, { switchClock: [{
type: Output
}], enterPress: [{
type: Output
}], onMousedown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onTouchend: [{
type: HostListener,
args: ['touchend', ['$event.changedTouches[0]']]
}], onMove: [{
type: HostListener,
args: ['mousemove', ['$event']]
}, {
type: HostListener,
args: ['touchmove', ['$event.changedTouches[0]']]
}], onMouseup: [{
type: HostListener,
args: ['mouseup', ['$event']]
}, {
type: HostListener,
args: ['document:mouseup', ['$event']]
}], onKeydown: [{
type: HostListener,
args: ['document:keydown', ['$event']]
}] }); })();
const _c0 = ["clockFace"];
const _c1 = function (a0) { return { transform: a0 }; };
function MateTimepickerDialogHourComponent_div_4_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "div", 8);
ɵɵelementStart(1, "span", 9);
ɵɵtext(2);
ɵɵpipe(3, "number");
ɵɵelementEnd();
ɵɵelementEnd();
} if (rf & 2) {
const hour_r3 = ctx.$implicit;
const ctx_r1 = ɵɵnextContext();
ɵɵclassProp("active", hour_r3 == ctx_r1.value);
ɵɵproperty("ngStyle", ɵɵpureFunction1(8, _c1, "translateX(-50%) rotateZ(" + ctx_r1.step * hour_r3 + "deg)"));
ɵɵadvance(1);
ɵɵproperty("ngStyle", ɵɵpureFunction1(10, _c1, "rotateZ(" + -ctx_r1.step * hour_r3 + "deg)"));
ɵɵadvance(1);
ɵɵtextInterpolate(ɵɵpipeBind2(3, 5, hour_r3, "1.0"));
} }
function MateTimepickerDialogHourComponent_div_6_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "div", 10);
ɵɵelementStart(1, "span", 9);
ɵɵtext(2);
ɵɵpipe(3, "number");
ɵɵelementEnd();
ɵɵelementEnd();
} if (rf & 2) {
const hour_r4 = ctx.$implicit;
const ctx_r2 = ɵɵnextContext();
ɵɵclassProp("active", hour_r4 == ctx_r2.value % 24);
ɵɵproperty("ngStyle", ɵɵpureFunction1(8, _c1, "translateX(-50%) rotateZ(" + ctx_r2.step * (hour_r4 % 12) + "deg)"));
ɵɵadvance(1);
ɵɵproperty("ngStyle", ɵɵpureFunction1(10, _c1, "rotateZ(" + -ctx_r2.step * (hour_r4 % 12) + "deg)"));
ɵɵadvance(1);
ɵɵtextInterpolate(ɵɵpipeBind2(3, 5, hour_r4, "2.0"));
} }
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 = ɵɵdefineComponent({ type: MateTimepickerDialogHourComponent, selectors: [["mate-timepicker-dialog-hour"]], viewQuery: function MateTimepickerDialogHourComponent_Query(rf, ctx) { if (rf & 1) {
ɵɵstaticViewQuery(_c0, true);
} if (rf & 2) {
var _t;
ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.clockFace = _t.first);
} }, inputs: { value: "value" }, outputs: { change: "change", finish: "finish" }, exportAs: ["mateTimepickerDialogHour"], features: [ɵɵ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) {
ɵɵelementStart(0, "div", 0);
ɵɵlistener("keydown", function MateTimepickerDialogHourComponent_Template_div_keydown_0_listener($event) { return ctx.onKeydown($event); });
ɵɵelementStart(1, "div", 1, 2);
ɵɵelementStart(3, "div", 3);
ɵɵtemplate(4, MateTimepickerDialogHourComponent_div_4_Template, 4, 12, "div", 4);
ɵɵelementStart(5, "div", 5);
ɵɵtemplate(6, MateTimepickerDialogHourComponent_div_6_Template, 4, 12, "div", 6);
ɵɵelementEnd();
ɵɵelementEnd();
ɵɵelement(7, "span", 7);
ɵɵelementEnd();
ɵɵelementEnd();
} if (rf & 2) {
ɵɵadvance(4);
ɵɵproperty("ngForOf", ctx.outerValues);
ɵɵadvance(2);
ɵɵproperty("ngForOf", ctx.innerValues);
ɵɵadvance(1);
ɵɵclassProp("outer", ctx.value > 0 && ctx.value <= 12)("inner", ctx.value <= 0 || ctx.value > 12);
ɵɵproperty("ngStyle", ɵɵpureFunction1(7, _c1, "rotateZ(" + ctx.step * ctx.value + "deg)"));
} }, directives: [NgForOf, NgStyle], pipes: [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 () { ɵ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
}] }); })();
const _c0$1 = ["clockFace"];
const _c1$1 = function (a0) { return { transform: a0 }; };
function MateTimepickerDialogMinuteComponent_div_4_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "div", 6);
ɵɵelementStart(1, "span", 7);
ɵɵtext(2);
ɵɵpipe(3, "number");
ɵɵelementEnd();
ɵɵelementEnd();
} if (rf & 2) {
const minute_r2 = ctx.$implicit;
const ctx_r1 = ɵɵnextContext();
ɵɵclassProp("active", minute_r2 == ctx_r1.value % 60);
ɵɵproperty("ngStyle", ɵɵpureFunction1(8, _c1$1, "translateX(-50%) rotateZ(" + ctx_r1.step * minute_r2 + "deg)"));
ɵɵadvance(1);
ɵɵproperty("ngStyle", ɵɵpureFunction1(10, _c1$1, "rotateZ(" + -ctx_r1.step * minute_r2 + "deg)"));
ɵɵadvance(1);
ɵɵtextInterpolate(ɵɵpipeBind2(3, 5, minute_r2, "2.0"));
} }
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 = ɵɵdefineComponent({ type: MateTimepickerDialogMinuteComponent, selectors: [["mate-timepicker-dialog-minute"]], viewQuery: function MateTimepickerDialogMinuteComponent_Query(rf, ctx) { if (rf & 1) {
ɵɵstaticViewQuery(_c0$1, true);
} if (rf & 2) {
var _t;
ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.clockFace = _t.first);
} }, inputs: { value: "value" }, outputs: { change: "change", finish: "finish" }, exportAs: ["mateTimepickerDialogMinute"], features: [ɵɵ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) {
ɵɵelementStart(0, "div", 0);
ɵɵlistener("keydown", function MateTimepickerDialogMinuteComponent_Template_div_keydown_0_listener($event) { return ctx.onKeydown($event); });
ɵɵelementStart(1, "div", 1, 2);
ɵɵelementStart(3, "div", 3);
ɵɵtemplate(4, MateTimepickerDialogMinuteComponent_div_4_Template, 4, 12, "div", 4);
ɵɵelementEnd();
ɵɵelement(5, "span", 5);
ɵɵelementEnd();
ɵɵelementEnd();
} if (rf & 2) {
ɵɵadvance(4);
ɵɵproperty("ngForOf", ctx.values);
ɵɵadvance(1);
ɵɵclassProp("hand-point", ctx.value % 5 != 0);
ɵɵproperty("ngStyle", ɵɵpureFunction1(4, _c1$1, "rotateZ(" + ctx.step * ctx.value + "deg)"));
} }, directives: [NgForOf, NgStyle], pipes: [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 () { ɵ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
}] }); })();
function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template(rf, ctx) { if (rf & 1) {
const _r4 = ɵɵgetCurrentView();
ɵɵelementStart(0, "mate-timepicker-dialog-hour", 1);
ɵɵlistener("change", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_change_0_listener($event) { ɵɵrestoreView(_r4); const ctx_r3 = ɵɵnextContext(); return ctx_r3.onChange($event); })("switchClock", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_switchClock_0_listener($event) { ɵɵrestoreView(_r4); const ctx_r5 = ɵɵnextContext(); return ctx_r5.switchClock.emit($event); })("enterPress", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_enterPress_0_listener() { ɵɵrestoreView(_r4); const ctx_r6 = ɵɵnextContext(); return ctx_r6.enterPress.emit(); })("finish", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template_mate_timepicker_dialog_hour_finish_0_listener() { ɵɵrestoreView(_r4); const ctx_r7 = ɵɵnextContext(); return ctx_r7.finish.emit(); });
ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = ɵɵnextContext();
ɵɵproperty("value", ctx_r0.value);
} }
function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template(rf, ctx) { if (rf & 1) {
const _r9 = ɵɵgetCurrentView();
ɵɵelementStart(0, "mate-timepicker-dialog-minute", 1);
ɵɵlistener("change", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_change_0_listener($event) { ɵɵrestoreView(_r9); const ctx_r8 = ɵɵnextContext(); return ctx_r8.onChange($event); })("switchClock", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_switchClock_0_listener($event) { ɵɵrestoreView(_r9); const ctx_r10 = ɵɵnextContext(); return ctx_r10.switchClock.emit($event); })("enterPress", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_enterPress_0_listener() { ɵɵrestoreView(_r9); const ctx_r11 = ɵɵnextContext(); return ctx_r11.enterPress.emit(); })("finish", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template_mate_timepicker_dialog_minute_finish_0_listener() { ɵɵrestoreView(_r9); const ctx_r12 = ɵɵnextContext(); return ctx_r12.finish.emit(); });
ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = ɵɵnextContext();
ɵɵproperty("value", ctx_r1.value);
} }
function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template(rf, ctx) { if (rf & 1) {
const _r14 = ɵɵgetCurrentView();
ɵɵelementStart(0, "mate-timepicker-dialog-minute", 1);
ɵɵlistener("change", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_change_0_listener($event) { ɵɵrestoreView(_r14); const ctx_r13 = ɵɵnextContext(); return ctx_r13.onChange($event); })("switchClock", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_switchClock_0_listener($event) { ɵɵrestoreView(_r14); const ctx_r15 = ɵɵnextContext(); return ctx_r15.switchClock.emit($event); })("enterPress", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_enterPress_0_listener() { ɵɵrestoreView(_r14); const ctx_r16 = ɵɵnextContext(); return ctx_r16.enterPress.emit(); })("finish", function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template_mate_timepicker_dialog_minute_finish_0_listener() { ɵɵrestoreView(_r14); const ctx_r17 = ɵɵnextContext(); return ctx_r17.finish.emit(); });
ɵɵelementEnd();
} if (rf & 2) {
const ctx_r2 = ɵɵnextContext();
ɵɵproperty("value", ctx_r2.value);
} }
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 = ɵɵ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) {
ɵɵtemplate(0, MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template, 1, 1, "mate-timepicker-dialog-hour", 0);
ɵɵtemplate(1, MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_1_Template, 1, 1, "mate-timepicker-dialog-minute", 0);
ɵɵtemplate(2, MateTimepickerDialogBodyComponent_mate_timepicker_dialog_minute_2_Template, 1, 1, "mate-timepicker-dialog-minute", 0);
} if (rf & 2) {
ɵɵproperty("ngIf", ctx.type == "hour");
ɵɵadvance(1);
ɵɵproperty("ngIf", ctx.type == "minute");
ɵɵadvance(1);
ɵɵproperty("ngIf", ctx.type == "second");
} }, directives: [NgIf, MateTimepickerDialogHourComponent, 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 () { ɵ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
}] }); })();
class MateTimepickerDialogFooterComponent {
constructor() {
this.clickOk = new EventEmitter();
this.clickCancel = new EventEmitter();
}
ngOnInit() {
}
}
MateTimepickerDialogFooterComponent.ɵfac = function MateTimepickerDialogFooterComponent_Factory(t) { return new (t || MateTimepickerDialogFooterComponent)(); };
MateTimepickerDialogFooterComponent.ɵcmp = ɵɵdefineComponent({ type: MateTimepickerDialogFooterComponent, selectors: [["mate-timepicker-dialog-footer"]], hostAttrs: [1, "mate-timepicker-dialog-footer"], outputs: { clickOk: "clickOk", clickCancel: "clickCancel" }, exportAs: ["mateTimepickerDialogFooter"], decls: 5, vars: 0, consts: [[1, "mate-timepicker-actions"], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"]], template: function MateTimepickerDialogFooterComponent_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "div", 0);
ɵɵelementStart(1, "button", 1);
ɵɵlistener("click", function MateTimepickerDialogFooterComponent_Template_button_click_1_listener() { return ctx.clickCancel.emit(); });
ɵɵtext(2, "Cancel");
ɵɵelementEnd();
ɵɵelementStart(3, "button", 2);
ɵɵlistener("click", function MateTimepickerDialogFooterComponent_Template_button_click_3_listener() { return ctx.clickOk.emit(); });
ɵɵtext(4, "Ok");
ɵɵelementEnd();
ɵɵelementEnd();
} }, directives: [MatButton], styles: [".mate-timepicker-dialog-footer[_nghost-%COMP%]{display:block;width:100%}.mate-timepicker-dialog-footer[_nghost-%COMP%] .mate-timepicker-actions[_ngcontent-%COMP%]{align-content:flex-end;display:flex;justify-content:flex-end;margin-left:auto}.mate-timepicker-dialog-footer[_nghost-%COMP%] .mate-timepicker-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:not(:first-child){margin-left:.5rem}"] });
/*@__PURE__*/ (function () { ɵsetClassMetadata(MateTimepickerDialogFooterComponent, [{
type: Component,
args: [{
selector: 'mate-timepicker-dialog-footer',
templateUrl: './timepicker-dialog-footer.component.html',
styleUrls: ['./timepicker-dialog-footer.component.scss'],
host: {
class: 'mate-timepicker-dialog-footer'
},
exportAs: 'mateTimepickerDialogFooter'
}]
}], function () { return []; }, { clickOk: [{
type: Output
}], clickCancel: [{
type: Output
}] }); })();
class MateTimepickerDialogComponent {
constructor() {
this.clockActive = 'hour';
this.valueActive = 0;
this.second = false;
this.change = new EventEmitter();
this.cancel = new EventEmitter();
}
set value(value) {
if (value) {
this._value = value;
}
else if (this.defaultValue) {
this._value = this.defaultValue.clone();
}
else {
this._value = Duration.now(this.second);
}
this.valueActive = this._value.getValue(this.clockActive);
}
get value() {
return this._value;
}
ngOnInit() {
if (!this._value) {
this._value = Duration.now(this.second);
}
this.valueActive = this._value.getValue(this.clockActive);
}
onActive(type) {
this.clockActive = type;
this.valueActive = this._value.getValue(type);
}
onChange(value) {
this._value = this._value.setNew(value.type, value.value);
this.valueActive = value.value;
}
onSwitch() {
if (this.clockActive === 'hour') {
this.onActive('minute');
}
else if (this.second && this.clockActive === 'minute') {
this.onActive('second');
}
}
onClockSwitch(type) {
if (type === 'right') {
this.onSwitch();
}
else if (type === 'left') {
if (this.clockActive === 'second') {
this.onActive('minute');
}
else if (this.clockActive === 'minute') {
this.onActive('hour');
}
}
else if (type === 'start' && this.clockActive !== 'hour') {
this.onActive('hour');
}
else if (type === 'end') {
if (!this.second && this.clockActive !== 'minute') {
this.onActive('minute');
}
else if (this.second && this.clockActive !== 'second') {
this.onActive('second');
}
}
}
onOk() {
this.change.emit(this._value);
}
onCancel() {
this.cancel.emit();
}
}
MateTimepickerDialogComponent.ɵfac = function MateTimepickerDialogComponent_Factory(t) { return new (t || MateTimepickerDialogComponent)(); };
MateTimepickerDialogComponent.ɵcmp = ɵɵdefineComponent({ type: MateTimepickerDialogComponent, selectors: [["mate-timepicker-dialog"]], hostAttrs: [1, "mate-timepicker-dialog"], inputs: { second: "second", defaultValue: "defaultValue", value: "value" }, outputs: { change: "change", cancel: "cancel" }, exportAs: ["mateTimepickerDialog"], decls: 3, vars: 5, consts: [[3, "type", "value", "second", "active"], [3, "value", "type", "change", "switchClock", "enterPress", "finish"], [3, "clickOk", "clickCancel"]], template: function MateTimepickerDialogComponent_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "mate-timepicker-dialog-header", 0);
ɵɵlistener("active", function MateTimepickerDialogComponent_Template_mate_timepicker_dialog_header_active_0_listener($event) { return ctx.onActive($event); });
ɵɵelementEnd();
ɵɵelementStart(1, "mate-timepicker-dialog-body", 1);
ɵɵlistener("change", function MateTimepickerDialogComponent_Template_mate_timepicker_dialog_body_change_1_listener($event) { return ctx.onChange($event); })("switchClock", function MateTimepickerDialogComponent_Template_mate_timepicker_dialog_body_switchClock_1_listener($event) { return ctx.onClockSwitch($event); })("enterPress", function MateTimepickerDialogComponent_Template_mate_timepicker_dialog_body_enterPress_1_listener() { return ctx.onOk(); })("finish", function MateTimepickerDialogComponent_Template_mate_timepicker_dialog_body_finish_1_listener() { return ctx.onSwitch(); });
ɵɵelementEnd();
ɵɵelementStart(2, "mate-timepicker-dialog-footer", 2);
ɵɵlistener("clickOk", function MateTimepickerDialogComponent_Template_mate_timepicker_dialog_footer_clickOk_2_listener() { return ctx.onOk(); })("clickCancel", function MateTimepickerDialogComponent_Template_mate_timepicker_dialog_footer_clickCancel_2_listener() { return ctx.onCancel(); });
ɵɵelementEnd();
} if (rf & 2) {
ɵɵproperty("type", ctx.clockActive)("value", ctx.value)("second", ctx.second);
ɵɵadvance(1);
ɵɵproperty("value", ctx.valueActive)("type", ctx.clockActive);
} }, directives: [MateTimepickerDialogHeaderComponent, MateTimepickerDialogBodyComponent, MateTimepickerDialogFooterComponent], styles: [".mate-timepicker-dialog[_nghost-%COMP%]{display:flex;flex-direction:column;height:420px;padding:8px;width:280px}.mate-timepicker-dialog[_nghost-%COMP%] .mate-dialog-container[_ngcontent-%COMP%]{overflow:visible}"] });
/*@__PURE__*/ (function () { ɵsetClassMetadata(MateTimepickerDialogComponent, [{
type: Component,
args: [{
selector: 'mate-timepicker-dialog',
templateUrl: './timepicker-dialog.component.html',
styleUrls: ['./timepicker-dialog.component.scss'],
host: {
class: 'mate-timepicker-dialog'
},
exportAs: 'mateTimepickerDialog'
}]
}], function () { return []; }, { second: [{
type: Input
}], defaultValue: [{
type: Input
}], value: [{
type: Input
}], change: [{
type: Output
}], cancel: [{
type: Output
}] }); })();
class MateTimepickerContentBase {
constructor(_elementRef) {
this._elementRef = _elementRef;
}
}
const _MateTimepickerContentMixinBase = mixinColor(MateTimepickerContentBase);
class MateTimepickerContentComponent extends _MateTimepickerContentMixinBase {
constructor(elementRef) {
super(elementRef);
}
ngAfterViewInit() {
}
}
MateTimepickerContentComponent.ɵfac = function MateTimepickerContentComponent_Factory(t) { return new (t || MateTimepickerContentComponent)(ɵɵdirectiveInject(ElementRef)); };
MateTimepickerContentComponent.ɵcmp = ɵɵdefineComponent({ type: MateTimepickerContentComponent, selectors: [["mate-timepicker-content"]], hostAttrs: [1, "mate-timepicker-content"], hostVars: 2, hostBindings: function MateTimepickerContentComponent_HostBindings(rf, ctx) { if (rf & 2) {
ɵɵclassProp("mate-timepicker-content-touch", ctx.timepicker.touchUi);
} }, inputs: { color: "color" }, exportAs: ["mateTimepickerContent"], features: [ɵɵInheritDefinitionFeature], decls: 1, vars: 4, consts: [[3, "id", "defaultValue", "second", "value", "change", "cancel"]], template: function MateTimepickerContentComponent_Template(rf, ctx) { if (rf & 1) {
ɵɵelementStart(0, "mate-timepicker-dialog", 0);
ɵɵlistener("change", function MateTimepickerContentComponent_Template_mate_timepicker_dialog_change_0_listener($event) { return ctx.timepicker.select($event); })("cancel", function MateTimepickerContentComponent_Template_mate_timepicker_dialog_cancel_0_listener() { return ctx.timepicker.close(); });
ɵɵelementEnd();
} if (rf & 2) {
ɵɵproperty("id", ctx.timepicker.id)("defaultValue", ctx.timepicker == null ? null : ctx.timepicker._timepickerInput == null ? null : ctx.timepicker._timepickerInput.defaultValue)("second", ctx.timepicker.second)("value", ctx.timepicker._selected);
} }, directives: [MateTimepickerDialogComponent], styles: [".mat-badge-content{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;font-weight:600}.mat-badge-small .mat-badge-content{font-size:9px}.mat-badge-large .mat-badge-content{font-size:24px}.mat-h1,.mat-headline,.mat-typography h1{font:400 24px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-title,.mat-typography h2{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h3,.mat-subheading-2,.mat-typography h3{font:400 16px/28px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h4,.mat-subheading-1,.mat-typography h4{font:400 15px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h5,.mat-typography h5{font:400 11.62px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-h6,.mat-typography h6{font:400 9.38px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-body-2,.mat-body-strong{font:500 14px/24px Roboto,Helvetica Neue,s