@material-extra/timepicker
Version:
Material timepicker component
990 lines (980 loc) • 151 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/core'), require('@angular/common'), require('@angular/material/button'), require('@angular/cdk/coercion'), require('rxjs'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('rxjs/operators'), require('@angular/material/dialog'), require('@angular/cdk/bidi'), require('@angular/cdk/keycodes'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field'), require('@angular/cdk/a11y')) :
typeof define === 'function' && define.amd ? define('@material-extra/timepicker', ['exports', '@angular/core', '@angular/material/core', '@angular/common', '@angular/material/button', '@angular/cdk/coercion', 'rxjs', '@angular/cdk/overlay', '@angular/cdk/portal', 'rxjs/operators', '@angular/material/dialog', '@angular/cdk/bidi', '@angular/cdk/keycodes', '@angular/forms', '@angular/material/input', '@angular/material/form-field', '@angular/cdk/a11y'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['material-extra'] = global['material-extra'] || {}, global['material-extra'].timepicker = {}), global.ng.core, global.ng.material.core, global.ng.common, global.ng.material.button, global.ng.cdk.coercion, global.rxjs, global.ng.cdk.overlay, global.ng.cdk.portal, global.rxjs.operators, global.ng.material.dialog, global.ng.cdk.bidi, global.ng.cdk.keycodes, global.ng.forms, global.ng.material.input, global.ng.material.formField, global.ng.cdk.a11y));
}(this, (function (exports, i0, i1, i1$1, i1$2, coercion, rxjs, i2, portal, operators, i1$3, i3, keycodes, forms, input, i2$1, a11y) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var TimepickerUtil = /** @class */ (function () {
function TimepickerUtil() {
}
TimepickerUtil.isEqualsDeep = function (value1, value2) {
return value1 === value2 || ((value1 == null || value2 == null || value1.length === value2.length) &&
JSON.stringify(value1) === JSON.stringify(value2));
};
TimepickerUtil.isRealNumber = function (value) {
return typeof value === 'number' && !isNaN(value) && value !== Infinity && value !== -Infinity;
};
TimepickerUtil.toString = function (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 + '';
}
}
};
return TimepickerUtil;
}());
var Duration = /** @class */ (function () {
function Duration(hour, minute, second) {
this.hour = hour;
this.minute = minute;
this.second = second;
}
Duration.parseTimes = function (times) {
var 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;
};
Duration.valueOf = function (hour, minute, second) {
return new Duration(hour, minute, second);
};
Duration.zero = function () {
return new Duration(0, 0, 0);
};
Duration.fromMillis = function (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);
};
Duration.fromString = function (value, separator) {
if (typeof value === 'string') {
var time = void 0;
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;
};
Duration.fromDate = function (value) {
if (value instanceof Date) {
return new Duration(value.getHours(), value.getMinutes(), value.getSeconds());
}
return null;
};
Duration.now = function (second) {
if (second === void 0) { second = true; }
var now = new Date();
return new Duration(now.getHours(), now.getMinutes(), second ? now.getSeconds() : 0);
};
Duration.prototype.clone = function () {
return new Duration(this.hour, this.minute, this.second);
};
Duration.prototype.getValue = function (type) {
if (['hour', 'minute', 'second'].includes(type)) {
return this[type];
}
return null;
};
Duration.prototype.setValue = function (type, value) {
if (['hour', 'minute', 'second'].includes(type)) {
this[type] = value;
}
return this;
};
Duration.prototype.setNew = function (type, value) {
var result = new Duration(this.hour, this.minute, this.second);
if (['hour', 'minute', 'second'].includes(type)) {
result[type] = value;
}
return result;
};
Duration.prototype.format = function (format) {
if (format) {
var replace = function (f, v, r) {
var 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;
};
var 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');
}
};
Duration.prototype.milliseconds = function () {
return this.hour * Duration.matrix.hours.milliseconds +
this.minute * Duration.matrix.minutes.milliseconds +
this.second * Duration.matrix.seconds.milliseconds;
};
Duration.prototype.setToDate = function (value) {
value.setHours(this.hour);
value.setMinutes(this.minute);
value.setSeconds(this.second);
value.setMilliseconds(0);
return value;
};
Duration.prototype.equals = function (value) {
return value != null && this.hour === value.hour && this.minute === value.minute && this.second === value.second;
};
return Duration;
}());
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) {
var _r2_1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementContainerStart(0);
i0.ɵɵelementStart(1, "span");
i0.ɵɵtext(2, ":");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "label", 2);
i0.ɵɵlistener("click", function MateTimepickerDialogHeaderComponent_ng_container_10_Template_label_click_3_listener() { i0.ɵɵrestoreView(_r2_1); var ctx_r1 = i0.ɵɵnextContext(); return ctx_r1.onActive("second"); });
i0.ɵɵtext(4);
i0.ɵɵpipe(5, "number");
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
}
if (rf & 2) {
var ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance(3);
i0.ɵɵclassProp("active", ctx_r0.type == "second");
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(5, 3, ctx_r0.value.second, "2.0"), " ");
}
}
var MateTimepickerDialogHeaderComponent = /** @class */ (function () {
function MateTimepickerDialogHeaderComponent() {
this.type = 'hour';
this.second = false;
this.active = new i0.EventEmitter();
}
MateTimepickerDialogHeaderComponent.prototype.ngOnInit = function () {
};
MateTimepickerDialogHeaderComponent.prototype.onActive = function (type) {
this.type = type;
this.active.emit(type);
};
return MateTimepickerDialogHeaderComponent;
}());
MateTimepickerDialogHeaderComponent.ɵfac = function MateTimepickerDialogHeaderComponent_Factory(t) { return new (t || MateTimepickerDialogHeaderComponent)(); };
MateTimepickerDialogHeaderComponent.ɵcmp = i0.ɵɵ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) {
i0.ɵɵelementStart(0, "div", 0);
i0.ɵɵelementStart(1, "div", 1);
i0.ɵɵelementStart(2, "label", 2);
i0.ɵɵlistener("click", function MateTimepickerDialogHeaderComponent_Template_label_click_2_listener() { return ctx.onActive("hour"); });
i0.ɵɵtext(3);
i0.ɵɵpipe(4, "number");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(5, "span");
i0.ɵɵtext(6, ":");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(7, "label", 2);
i0.ɵɵlistener("click", function MateTimepickerDialogHeaderComponent_Template_label_click_7_listener() { return ctx.onActive("minute"); });
i0.ɵɵtext(8);
i0.ɵɵpipe(9, "number");
i0.ɵɵelementEnd();
i0.ɵɵtemplate(10, MateTimepickerDialogHeaderComponent_ng_container_10_Template, 6, 6, "ng-container", 3);
i0.ɵɵelementEnd();
i0.ɵɵelementEnd();
}
if (rf & 2) {
i0.ɵɵadvance(2);
i0.ɵɵclassProp("active", ctx.type == "hour");
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(4, 7, ctx.value.hour, "2.0"), " ");
i0.ɵɵadvance(4);
i0.ɵɵclassProp("active", ctx.type == "minute");
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(9, 10, ctx.value.minute, "2.0"), " ");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.second);
}
}, directives: [i1.MatRipple, i1$1.NgIf], pipes: [i1$1.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 () {
i0.ɵsetClassMetadata(MateTimepickerDialogHeaderComponent, [{
type: i0.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: i0.Input
}], second: [{
type: i0.Input
}], value: [{
type: i0.Input
}], active: [{
type: i0.Output
}] });
})();
var MateTimepickerFace = /** @class */ (function () {
function MateTimepickerFace() {
this.innerClockFaceSize = 40;
this.switchClock = new i0.EventEmitter();
this.enterPress = new i0.EventEmitter();
}
MateTimepickerFace.prototype.onChange = function (value) {
};
MateTimepickerFace.prototype.onFinish = function () {
};
MateTimepickerFace.prototype.onMousedown = function (e) {
e.preventDefault();
this.moved = false;
this.selected = false;
this.isStarted = true;
};
MateTimepickerFace.prototype.onClick = function (e) {
e.preventDefault();
this.selectTime(e);
this.isStarted = false;
this.selected = false;
this.onFinish();
};
MateTimepickerFace.prototype.onTouchend = function (e) {
this.selectTime(e);
if (this.moved) {
this.isStarted = false;
this.moved = false;
this.selected = false;
this.onFinish();
}
};
MateTimepickerFace.prototype.onMove = function (e) {
this.moved = true;
this.selectTime(e);
};
MateTimepickerFace.prototype.selectTime = function (e) {
if (!this.isStarted && (e instanceof MouseEvent && e.type !== 'click')) {
return;
}
var clockFaceCords = this.clockFace.nativeElement.getBoundingClientRect();
var centerX = clockFaceCords.left + clockFaceCords.width / 2;
var centerY = clockFaceCords.top + clockFaceCords.height / 2;
var arc = Math.atan(Math.abs(e.clientX - centerX) / Math.abs(e.clientY - centerY)) * 180 / Math.PI;
var circleAngle = this.countAngleByCords(centerX, centerY, e.clientX, e.clientY, arc);
var isInnerClockChosen = !!this.innerValues && this.isInnerClockFace(centerX, centerY, e.clientX, e.clientY, ((clockFaceCords.height + clockFaceCords.width) / 4) - this.innerClockFaceSize);
var index = this.roundAngle(circleAngle);
index = index < 0 ? 0 : index;
var value = isInnerClockChosen ? this.innerValues[index % this.innerValues.length] :
this.outerValues[index % this.outerValues.length];
this.onChange(value);
this.selected = true;
};
MateTimepickerFace.prototype.onMouseup = function (e) {
e.preventDefault();
this.isStarted = false;
if (this.selected) {
this.selected = false;
this.onFinish();
}
};
MateTimepickerFace.prototype.roundAngle = function (angle) {
return Math.round(angle / this.step);
};
MateTimepickerFace.prototype.isInnerClockFace = function (x0, y0, x, y, border) {
return Math.sqrt(Math.pow(x - x0, 2) + Math.pow(y - y0, 2)) < border;
};
MateTimepickerFace.prototype.countAngleByCords = function (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;
}
};
MateTimepickerFace.prototype.valueChange = function (add) {
};
MateTimepickerFace.prototype.onKeydown = function (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;
}
};
return MateTimepickerFace;
}());
MateTimepickerFace.ɵfac = function MateTimepickerFace_Factory(t) { return new (t || MateTimepickerFace)(); };
MateTimepickerFace.ɵdir = i0.ɵɵdefineDirective({ type: MateTimepickerFace, selectors: [["mate-timepicker-face"]], hostBindings: function MateTimepickerFace_HostBindings(rf, ctx) {
if (rf & 1) {
i0.ɵɵ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, i0.ɵɵresolveDocument)("keydown", function MateTimepickerFace_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); }, false, i0.ɵɵresolveDocument);
}
}, outputs: { switchClock: "switchClock", enterPress: "enterPress" } });
/*@__PURE__*/ (function () {
i0.ɵsetClassMetadata(MateTimepickerFace, [{
type: i0.Directive,
args: [{ selector: 'mate-timepicker-face' }]
}], null, { switchClock: [{
type: i0.Output
}], enterPress: [{
type: i0.Output
}], onMousedown: [{
type: i0.HostListener,
args: ['mousedown', ['$event']]
}], onClick: [{
type: i0.HostListener,
args: ['click', ['$event']]
}], onTouchend: [{
type: i0.HostListener,
args: ['touchend', ['$event.changedTouches[0]']]
}], onMove: [{
type: i0.HostListener,
args: ['mousemove', ['$event']]
}, {
type: i0.HostListener,
args: ['touchmove', ['$event.changedTouches[0]']]
}], onMouseup: [{
type: i0.HostListener,
args: ['mouseup', ['$event']]
}, {
type: i0.HostListener,
args: ['document:mouseup', ['$event']]
}], onKeydown: [{
type: i0.HostListener,
args: ['document:keydown', ['$event']]
}] });
})();
var _c0 = ["clockFace"];
var _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) {
var hour_r3 = ctx.$implicit;
var 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) {
var hour_r4 = ctx.$implicit;
var 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"));
}
}
var MateTimepickerDialogHourComponent = /** @class */ (function (_super) {
__extends(MateTimepickerDialogHourComponent, _super);
function MateTimepickerDialogHourComponent() {
var _this = _super.call(this) || this;
_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 i0.EventEmitter();
_this.finish = new i0.EventEmitter();
return _this;
}
MateTimepickerDialogHourComponent.prototype.ngOnInit = function () {
};
MateTimepickerDialogHourComponent.prototype.onChange = function (value) {
this.value = value;
this.change.emit(this.value);
};
MateTimepickerDialogHourComponent.prototype.valueChange = function (add) {
add += this.value;
if (add < 0) {
add = 23;
}
if (add > 23) {
add = 0;
}
this.value = add;
this.change.emit(this.value);
};
MateTimepickerDialogHourComponent.prototype.onFinish = function () {
this.finish.emit();
};
return MateTimepickerDialogHourComponent;
}(MateTimepickerFace));
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$1.NgForOf, i1$1.NgStyle], pipes: [i1$1.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: i0.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: i0.ViewChild,
args: ['clockFace', { static: true }]
}], value: [{
type: i0.Input
}], change: [{
type: i0.Output
}], finish: [{
type: i0.Output
}] });
})();
var _c0$1 = ["clockFace"];
var _c1$1 = 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) {
var minute_r2 = ctx.$implicit;
var ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassProp("active", minute_r2 == ctx_r1.value % 60);
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c1$1, "translateX(-50%) rotateZ(" + ctx_r1.step * minute_r2 + "deg)"));
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c1$1, "rotateZ(" + -ctx_r1.step * minute_r2 + "deg)"));
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 5, minute_r2, "2.0"));
}
}
var MateTimepickerDialogMinuteComponent = /** @class */ (function (_super) {
__extends(MateTimepickerDialogMinuteComponent, _super);
function MateTimepickerDialogMinuteComponent() {
var _this = _super.call(this) || this;
_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 i0.EventEmitter();
_this.finish = new i0.EventEmitter();
return _this;
}
MateTimepickerDialogMinuteComponent.prototype.ngOnInit = function () {
};
MateTimepickerDialogMinuteComponent.prototype.onChange = function (value) {
this.value = value;
this.change.emit(this.value);
};
MateTimepickerDialogMinuteComponent.prototype.valueChange = function (add) {
add += this.value;
if (add < 0) {
add = 59;
}
if (add > 59) {
add = 0;
}
this.value = add;
this.change.emit(this.value);
};
MateTimepickerDialogMinuteComponent.prototype.onFinish = function () {
this.finish.emit();
};
return MateTimepickerDialogMinuteComponent;
}(MateTimepickerFace));
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$1, 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$1, "rotateZ(" + ctx.step * ctx.value + "deg)"));
}
}, directives: [i1$1.NgForOf, i1$1.NgStyle], pipes: [i1$1.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: i0.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: i0.ViewChild,
args: ['clockFace', { static: true }]
}], value: [{
type: i0.Input
}], change: [{
type: i0.Output
}], finish: [{
type: i0.Output
}] });
})();
function MateTimepickerDialogBodyComponent_mate_timepicker_dialog_hour_0_Template(rf, ctx) {
if (rf & 1) {
var _r4_1 = 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.ɵɵr