@alexfriesen/ngx-mat-timepicker
Version:
ngx-mat-timepicker is an Angular material 17+ extension to add time pickers!
2,699 lines • 184 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, inject, model, Directive, Inject, Input, HostListener, Pipe, viewChild, output, Component, ChangeDetectionStrategy, input, computed, ElementRef, booleanAttribute, signal, HostBinding, ContentChild, Optional, NgModule } from '@angular/core';
import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
import * as i1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
import { BehaviorSubject, Subject, takeUntil as takeUntil$1 } from 'rxjs';
import { DateTime, Info } from 'luxon';
import { NgTemplateOutlet, SlicePipe, DOCUMENT } from '@angular/common';
import { MatMiniFabButton, MatButton, MatIconButton, MAT_FAB_DEFAULT_OPTIONS } from '@angular/material/button';
import { shareReplay, takeUntil, tap, map, distinctUntilChanged } from 'rxjs/operators';
import { toSignal, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
import { trigger, transition, style, animate, sequence } from '@angular/animations';
import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
import * as i2 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i4 from '@angular/cdk/a11y';
import { A11yModule } from '@angular/cdk/a11y';
import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';
import * as i2$1 from '@angular/material/form-field';
import { MatFormField, MatSuffix, MatLabel } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import { MatInput } from '@angular/material/input';
const NGX_MAT_TIMEPICKER_CONFIG = new InjectionToken('NGX_MAT_TIMEPICKER_CONFIG');
function provideNgxMatTimepickerOptions(config) {
return [{ provide: NGX_MAT_TIMEPICKER_CONFIG, useValue: config }];
}
var NgxMatTimepickerFormat;
(function (NgxMatTimepickerFormat) {
NgxMatTimepickerFormat["TWELVE"] = "hh:mm a";
NgxMatTimepickerFormat["TWELVE_SHORT"] = "h:m a";
NgxMatTimepickerFormat["TWENTY_FOUR"] = "HH:mm";
NgxMatTimepickerFormat["TWENTY_FOUR_SHORT"] = "H:m";
})(NgxMatTimepickerFormat || (NgxMatTimepickerFormat = {}));
var NgxMatTimepickerPeriods;
(function (NgxMatTimepickerPeriods) {
NgxMatTimepickerPeriods["AM"] = "AM";
NgxMatTimepickerPeriods["PM"] = "PM";
})(NgxMatTimepickerPeriods || (NgxMatTimepickerPeriods = {}));
function fixDateTimeUnit(unit) {
switch (unit) {
case 'hours':
case 'minutes':
printDeprecationWarning(unit);
return fixUnit(unit);
default:
return unit;
}
}
function fixUnit(unit) {
switch (unit) {
case 'hours':
return 'hour';
case 'minutes':
return 'minute';
default:
return unit;
}
}
function printDeprecationWarning(unit) {
console.warn(`'${unit}' is deprecated. Use '${fixUnit(unit)}' instead.`);
}
// @dynamic
class NgxMatTimepickerAdapter {
static { this.defaultFormat = 12; }
static { this.defaultLocale = 'en-US'; }
static { this.defaultNumberingSystem = 'latn'; }
/***
* Format hour according to time format (12 or 24)
*/
static formatHour(currentHour, format, period) {
if (this.isTwentyFour(format)) {
return currentHour;
}
const hour = period === NgxMatTimepickerPeriods.AM ? currentHour : currentHour + 12;
if (period === NgxMatTimepickerPeriods.AM && hour >= 12) {
return 0;
}
else if (period === NgxMatTimepickerPeriods.PM && hour >= 24) {
return 12;
}
return hour;
}
static formatTime(time, opts) {
if (!time) {
return 'Invalid Time';
}
const parsedTime = this.parseTime(time, opts).setLocale(this.defaultLocale);
if (!parsedTime.isValid) {
return 'Invalid time';
}
const isTwelve = !this.isTwentyFour(opts.format);
if (isTwelve) {
return parsedTime
.toLocaleString({
...DateTime.TIME_SIMPLE,
hour12: isTwelve,
})
.replace(/\u200E/g, '');
}
return parsedTime
.toISOTime({
includeOffset: false,
suppressMilliseconds: true,
suppressSeconds: true,
})
.replace(/\u200E/g, '');
}
static fromDateTimeToString(time, format) {
return time
.reconfigure({
numberingSystem: this.defaultNumberingSystem,
locale: this.defaultLocale,
})
.toFormat(this.isTwentyFour(format)
? NgxMatTimepickerFormat.TWENTY_FOUR
: NgxMatTimepickerFormat.TWELVE);
}
static isBetween(time, before, after, unit = 'minute') {
unit = fixDateTimeUnit(unit);
const innerUnit = unit === 'hour' ? unit : undefined;
return (this.isSameOrBefore(time, after, innerUnit) &&
this.isSameOrAfter(time, before, innerUnit));
}
static isSameOrAfter(time, compareWith, unit = 'minute') {
unit = fixDateTimeUnit(unit);
if (unit === 'hour') {
return time.hour >= compareWith.hour;
}
return (time.hasSame(compareWith, unit) || time.valueOf() > compareWith.valueOf());
}
static isSameOrBefore(time, compareWith, unit = 'minute') {
unit = fixDateTimeUnit(unit);
if (unit === 'hour') {
return time.hour <= compareWith.hour;
}
return (time.hasSame(compareWith, unit) || time.valueOf() <= compareWith.valueOf());
}
static isTimeAvailable(time, min, max, granularity, minutesGap, format) {
if (!time) {
return undefined;
}
const convertedTime = this.parseTime(time, { format });
const minutes = convertedTime.minute;
if (minutesGap && minutes === minutes && minutes % minutesGap !== 0) {
throw new Error(`Your minutes - ${minutes} doesn't match your minutesGap - ${minutesGap}`);
}
granularity = fixDateTimeUnit(granularity);
const isAfter = min && !max && this.isSameOrAfter(convertedTime, min, granularity);
const isBefore = max && !min && this.isSameOrBefore(convertedTime, max, granularity);
const between = min && max && this.isBetween(convertedTime, min, max, granularity);
const isAvailable = !min && !max;
return isAfter || isBefore || between || isAvailable;
}
static isTwentyFour(format) {
return format === 24;
}
static parseTime(time, opts) {
const localeOpts = this._getLocaleOptionsByTime(time, opts);
let timeMask = NgxMatTimepickerFormat.TWENTY_FOUR_SHORT;
// If there's a space, means we have the meridiem. Way faster than splitting text
// if (~time.indexOf(" ")) {
// 09/02/2023 it seems that sometimes the space from the formatter is a nnbsp (Chromium >= 110)
// which causes the indexOf(" ") to fail: charCode 32, while nbsp is 8239
if (time.match(/\s/g)) {
/*
* We translate the meridiem in simple AM or PM letters (instead of A.M.)
* because even if we set the locale with NgxMatTimepickerModule.setLocale
* the default (en-US) will always be used here
*/
time = time.replace(/\.\s*/g, '');
timeMask = NgxMatTimepickerFormat.TWELVE_SHORT;
}
return DateTime.fromFormat(time.replace(/\s+/g, ' '), timeMask, {
numberingSystem: localeOpts.numberingSystem,
locale: localeOpts.locale,
});
}
static toLocaleTimeString(time, opts = {}) {
const { format = this.defaultFormat, locale = this.defaultLocale } = opts;
let hourCycle = 'h12';
let timeMask = NgxMatTimepickerFormat.TWELVE_SHORT;
if (this.isTwentyFour(format)) {
hourCycle = 'h23';
timeMask = NgxMatTimepickerFormat.TWENTY_FOUR_SHORT;
}
return DateTime.fromFormat(time, timeMask)
.reconfigure({
locale,
numberingSystem: opts.numberingSystem,
outputCalendar: opts.outputCalendar,
})
.toLocaleString({
...DateTime.TIME_SIMPLE,
hourCycle,
});
}
/**
*
* @param time
* @param opts
* @private
*/
static _getLocaleOptionsByTime(time, opts) {
const { numberingSystem, locale } = DateTime.now()
.reconfigure({
locale: opts.locale,
numberingSystem: opts.numberingSystem,
outputCalendar: opts.outputCalendar,
})
.resolvedLocaleOptions();
return isNaN(parseInt(time, 10))
? {
numberingSystem: numberingSystem,
locale,
}
: {
numberingSystem: this.defaultNumberingSystem,
locale: this.defaultLocale,
};
}
}
var NgxMatTimepickerUnits;
(function (NgxMatTimepickerUnits) {
NgxMatTimepickerUnits[NgxMatTimepickerUnits["HOUR"] = 0] = "HOUR";
NgxMatTimepickerUnits[NgxMatTimepickerUnits["MINUTE"] = 1] = "MINUTE";
})(NgxMatTimepickerUnits || (NgxMatTimepickerUnits = {}));
const DEFAULT_HOUR = {
time: 12,
angle: 360,
};
const DEFAULT_MINUTE = {
time: 0,
angle: 360,
};
class NgxMatTimepickerService {
constructor() {
this.hour$ = new BehaviorSubject(DEFAULT_HOUR);
this.minute$ = new BehaviorSubject(DEFAULT_MINUTE);
this.period$ = new BehaviorSubject(NgxMatTimepickerPeriods.AM);
this.hour = toSignal(this.hour$);
this.minute = toSignal(this.minute$);
this.period = toSignal(this.period$);
}
setHour(hour) {
this.hour$.next(hour);
}
setMinute(minute) {
this.minute$.next(minute);
}
setPeriod(period) {
const isPeriodValid = period === NgxMatTimepickerPeriods.AM ||
period === NgxMatTimepickerPeriods.PM;
if (isPeriodValid) {
this.period$.next(period);
}
}
getFullTime(format) {
const selectedHour = this.hour().time;
const selectedMinute = this.minute().time;
const hour = selectedHour != null ? selectedHour : DEFAULT_HOUR.time;
const minute = selectedMinute != null ? selectedMinute : DEFAULT_MINUTE.time;
const period = format === 12 ? this.period() : '';
const time = `${hour}:${minute} ${period}`.trim();
return NgxMatTimepickerAdapter.formatTime(time, { format });
}
setDefaultTimeIfAvailable(time, min, max, format, minutesGap) {
if (!time) {
this._resetTime();
}
/* Workaround to double error message*/
try {
if (NgxMatTimepickerAdapter.isTimeAvailable(time, min, max, 'minute', minutesGap)) {
this._setDefaultTime(time, format);
}
}
catch (e) {
console.error(e);
}
}
_resetTime() {
this.setHour({ ...DEFAULT_HOUR });
this.setMinute({ ...DEFAULT_MINUTE });
this.setPeriod(NgxMatTimepickerPeriods.AM);
}
_setDefaultTime(time, format) {
const defaultDto = NgxMatTimepickerAdapter.parseTime(time, { format });
if (defaultDto.isValid) {
const period = time.substring(time.length - 2).toUpperCase();
const hour = defaultDto.hour;
this.setHour({
...DEFAULT_HOUR,
time: formatHourByPeriod(hour, period),
});
this.setMinute({ ...DEFAULT_MINUTE, time: defaultDto.minute });
this.setPeriod(period);
}
else {
this._resetTime();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/***
* Format hour in 24hours format to meridian (AM or PM) format
*/
function formatHourByPeriod(hour, period) {
switch (period) {
case NgxMatTimepickerPeriods.AM:
return hour === 0 ? 12 : hour;
case NgxMatTimepickerPeriods.PM:
return hour === 12 ? 12 : hour - 12;
default:
return hour;
}
}
class NgxMatTimepickerEventService {
constructor() {
this._backdropClick$ = new Subject();
this._keydownEvent$ = new Subject();
}
get backdropClick() {
return this._backdropClick$
.asObservable()
.pipe(shareReplay({ bufferSize: 1, refCount: true }));
}
get keydownEvent() {
return this._keydownEvent$
.asObservable()
.pipe(shareReplay({ bufferSize: 1, refCount: true }));
}
dispatchEvent(event) {
switch (event.type) {
case 'click':
this._backdropClick$.next(event);
break;
case 'keydown':
this._keydownEvent$.next(event);
break;
default:
throw new Error('no such event type');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerEventService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerEventService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const NGX_MAT_TIMEPICKER_LOCALE = new InjectionToken('TimeLocale', {
providedIn: 'root',
factory: () => NgxMatTimepickerAdapter.defaultLocale,
});
const NGX_MAT_TIMEPICKER_NUMBERINGSYSTEM = new InjectionToken('TIMEPICKER_NUMBERINGSYSTEM', {
providedIn: 'root',
factory: () => NgxMatTimepickerAdapter.defaultNumberingSystem,
});
class NgxMatTimepickerLocaleService {
constructor() {
this._locale = inject(NGX_MAT_TIMEPICKER_LOCALE);
this._numberingSystem = inject(NGX_MAT_TIMEPICKER_NUMBERINGSYSTEM);
}
get locale() {
return this._locale;
}
get numberingSystem() {
return this._numberingSystem;
}
updateLocale(newValue) {
this._locale = newValue;
}
updateNumberingSystemByLocale(newValue) {
this._numberingSystem = this.resolveNumberingSystemByLocale(newValue);
}
updateNumberingSystem(newValue) {
this._numberingSystem = newValue;
}
resolveNumberingSystemByLocale(locale) {
return DateTime.local().setLocale(locale).resolvedLocaleOptions()
.numberingSystem;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerLocaleService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerLocaleService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class NgxMatTimepickerBaseDirective {
get defaultTime() {
return this._defaultTime;
}
set defaultTime(time) {
this._defaultTime = time;
this._setDefaultTime(time);
}
get _locale() {
return this._timepickerLocaleSrv.locale;
}
constructor(_timepickerSrv, _eventSrv, _timepickerLocaleSrv, data) {
this._timepickerSrv = _timepickerSrv;
this._eventSrv = _eventSrv;
this._timepickerLocaleSrv = _timepickerLocaleSrv;
this.data = data;
this.color = model('primary');
this.selectedHour = this._timepickerSrv.hour;
this.selectedHour$ = this._timepickerSrv.hour$.pipe(shareReplay({ bufferSize: 1, refCount: true }));
this.selectedMinute = this._timepickerSrv.minute;
this.selectedMinute$ = this._timepickerSrv.minute$.pipe(shareReplay({ bufferSize: 1, refCount: true }));
this.selectedPeriod = this._timepickerSrv.period;
this.selectedPeriod$ = this._timepickerSrv.period$.pipe(shareReplay({ bufferSize: 1, refCount: true }));
this.activeTimeUnit = NgxMatTimepickerUnits.HOUR;
this.timeUnit = NgxMatTimepickerUnits;
this._subsCtrl$ = new Subject();
this.color.set(data.color);
this.defaultTime = data.defaultTime;
}
changePeriod(period) {
this._timepickerSrv.setPeriod(period);
this._onTimeChange();
}
changeTimeUnit(unit) {
this.activeTimeUnit = unit;
}
close() {
this.data.timepickerBaseRef.close();
}
ngOnDestroy() {
this._subsCtrl$.next();
this._subsCtrl$.complete();
}
ngOnInit() {
this._defineTime();
this.data.timepickerBaseRef.timeUpdated$
.pipe(takeUntil(this._subsCtrl$))
.subscribe({
next: (v) => {
if (v) {
this._setDefaultTime(v);
}
},
});
}
onHourChange(hour) {
this._timepickerSrv.setHour(hour);
this._onTimeChange();
}
onHourSelected(hour) {
if (!this.data.hoursOnly) {
this.changeTimeUnit(NgxMatTimepickerUnits.MINUTE);
}
this.data.timepickerBaseRef.hourSelected.emit(hour);
}
onKeydown(e) {
this._eventSrv.dispatchEvent(e);
e.stopPropagation();
}
onMinuteChange(minute) {
this._timepickerSrv.setMinute(minute);
this._onTimeChange();
}
setTime() {
this.data.timepickerBaseRef.timeSet.emit(this._timepickerSrv.getFullTime(this.data.format));
this.close();
}
_defineTime() {
const minTime = this.data.minTime;
if (minTime && !this.data.time && !this.data.defaultTime) {
const time = NgxMatTimepickerAdapter.fromDateTimeToString(minTime, this.data.format);
this._setDefaultTime(time);
}
}
_onTimeChange() {
const time = NgxMatTimepickerAdapter.toLocaleTimeString(this._timepickerSrv.getFullTime(this.data.format), {
locale: this._locale,
format: this.data.format,
});
this.data.timepickerBaseRef.timeChanged.emit(time);
}
_setDefaultTime(time) {
this._timepickerSrv.setDefaultTimeIfAvailable(time, this.data.minTime, this.data.maxTime, this.data.format, this.data.minutesGap);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerBaseDirective, deps: [{ token: NgxMatTimepickerService }, { token: NgxMatTimepickerEventService }, { token: NgxMatTimepickerLocaleService }, { token: NGX_MAT_TIMEPICKER_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: NgxMatTimepickerBaseDirective, isStandalone: true, selector: "[ngxMatTimepickerBase]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, defaultTime: { classPropertyName: "defaultTime", publicName: "defaultTime", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerBaseDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxMatTimepickerBase]',
standalone: true,
}]
}], ctorParameters: () => [{ type: NgxMatTimepickerService }, { type: NgxMatTimepickerEventService }, { type: NgxMatTimepickerLocaleService }, { type: undefined, decorators: [{
type: Inject,
args: [NGX_MAT_TIMEPICKER_CONFIG]
}] }], propDecorators: { defaultTime: [{
type: Input
}], onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
const HOURS_24 = [
{
time: 1,
angle: 30,
},
{
time: 2,
angle: 60,
},
{
time: 3,
angle: 90,
},
{
time: 4,
angle: 120,
},
{
time: 5,
angle: 150,
},
{
time: 6,
angle: 180,
},
{
time: 7,
angle: 210,
},
{
time: 8,
angle: 240,
},
{
time: 9,
angle: 270,
},
{
time: 10,
angle: 300,
},
{
time: 11,
angle: 330,
},
{
time: 0,
angle: 360,
},
{
time: 13,
angle: 390,
},
{
time: 14,
angle: 420,
},
{
time: 15,
angle: 450,
},
{
time: 16,
angle: 480,
},
{
time: 17,
angle: 510,
},
{
time: 18,
angle: 540,
},
{
time: 19,
angle: 570,
},
{
time: 20,
angle: 600,
},
{
time: 21,
angle: 630,
},
{
time: 22,
angle: 660,
},
{
time: 23,
angle: 690,
},
{
time: 12,
angle: 720,
},
];
const HOURS_12 = [
{
time: 1,
angle: 30,
},
{
time: 2,
angle: 60,
},
{
time: 3,
angle: 90,
},
{
time: 4,
angle: 120,
},
{
time: 5,
angle: 150,
},
{
time: 6,
angle: 180,
},
{
time: 7,
angle: 210,
},
{
time: 8,
angle: 240,
},
{
time: 9,
angle: 270,
},
{
time: 10,
angle: 300,
},
{
time: 11,
angle: 330,
},
{
time: 12,
angle: 360,
},
];
function disableHours(hours, config) {
if (config.min || config.max) {
return hours.map((value) => {
const hour = NgxMatTimepickerAdapter.isTwentyFour(config.format)
? value.time
: NgxMatTimepickerAdapter.formatHour(value.time, config.format, config.period);
const currentTime = DateTime.fromObject({ hour }).toFormat(NgxMatTimepickerFormat.TWELVE);
return {
...value,
disabled: !NgxMatTimepickerAdapter.isTimeAvailable(currentTime, config.min, config.max, 'hour'),
};
});
}
return hours;
}
function disableMinutes(minutes, selectedHour, config) {
if (config.min || config.max) {
const hour = NgxMatTimepickerAdapter.formatHour(selectedHour, config.format, config.period);
let currentTime = DateTime.fromObject({
hour,
minute: 0,
});
return minutes.map((value) => {
currentTime = currentTime.set({ minute: value.time });
return {
...value,
disabled: !NgxMatTimepickerAdapter.isTimeAvailable(currentTime.toFormat(NgxMatTimepickerFormat.TWELVE), config.min, config.max, 'minute'),
};
});
}
return minutes;
}
function getHours(format) {
if (format === 24) {
return HOURS_24;
}
return HOURS_12;
}
function getMinutes(gap = 1) {
const minutesCount = 60;
const angleStep = 360 / minutesCount;
const minutes = [];
for (let i = 0; i < minutesCount; i++) {
const angle = angleStep * i;
if (i % gap === 0) {
minutes.push({
time: i,
angle: angle !== 0 ? angle : 360,
});
}
}
return minutes;
}
function isDigit(e) {
// Allow: backspace, delete, tab, escape, enter
if ([46, 8, 9, 27, 13].some((n) => n === e.keyCode) ||
// Allow: Ctrl/cmd+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+C
(e.keyCode === 67 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+X
(e.keyCode === 88 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, up, down
(e.keyCode >= 35 && e.keyCode <= 40)) {
return true;
}
// Allow: 0-9
return !((e.keyCode < 48 || e.keyCode > 57) &&
(e.keyCode < 96 || e.keyCode > 105));
}
const NgxMatTimepickerUtils = {
disableHours,
disableMinutes,
getHours,
getMinutes,
isDigit,
};
var NgxMatTimepickerMeasure;
(function (NgxMatTimepickerMeasure) {
NgxMatTimepickerMeasure["hour"] = "hour";
NgxMatTimepickerMeasure["minute"] = "minute";
})(NgxMatTimepickerMeasure || (NgxMatTimepickerMeasure = {}));
class NgxMatTimepickerTimeLocalizerPipe {
constructor() {
this._timepickerLocaleSrv = inject(NgxMatTimepickerLocaleService);
}
get _locale() {
return this._timepickerLocaleSrv.locale;
}
get _numberingSystem() {
return this._timepickerLocaleSrv.numberingSystem;
}
transform(time, timeUnit, isKeyboardEnabled = false) {
if (time == null || time === '') {
return '';
}
switch (timeUnit) {
case NgxMatTimepickerUnits.HOUR: {
const format = time === 0 || isKeyboardEnabled ? 'HH' : 'H';
return this._formatTime(NgxMatTimepickerMeasure.hour, time, format);
}
case NgxMatTimepickerUnits.MINUTE:
return this._formatTime(NgxMatTimepickerMeasure.minute, time, 'mm');
default:
throw new Error(`There is no Time Unit with type ${timeUnit}`);
}
}
_formatTime(timeMeasure, time, format) {
try {
return DateTime.fromObject({ [timeMeasure]: +time })
.reconfigure({
locale: this._locale,
numberingSystem: this._numberingSystem,
})
.toFormat(format);
}
catch {
throw new Error(`Cannot format provided time - ${time} to locale - ${this._locale}`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerTimeLocalizerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerTimeLocalizerPipe, isStandalone: true, name: "timeLocalizer" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerTimeLocalizerPipe, decorators: [{
type: Pipe,
args: [{
name: 'timeLocalizer',
standalone: true,
}]
}] });
class NgxMatTimepickerMinutesFormatterPipe {
transform(minute, gap = 5) {
if (!minute) {
return minute;
}
return minute % gap === 0 ? minute : "";
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerMinutesFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerMinutesFormatterPipe, isStandalone: true, name: "minutesFormatter" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerMinutesFormatterPipe, decorators: [{
type: Pipe,
args: [{
name: "minutesFormatter",
standalone: true
}]
}] });
class NgxMatTimepickerActiveMinutePipe {
transform(minute, currentMinute, gap, isClockFaceDisabled) {
if (minute == null || isClockFaceDisabled) {
return false;
}
const defaultGap = 5;
return ((currentMinute === minute) && (minute % (gap || defaultGap) === 0));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerActiveMinutePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerActiveMinutePipe, isStandalone: true, name: "activeMinute" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerActiveMinutePipe, decorators: [{
type: Pipe,
args: [{
name: "activeMinute",
standalone: true
}]
}] });
class NgxMatTimepickerActiveHourPipe {
transform(hour, currentHour, isClockFaceDisabled) {
if (hour == null || isClockFaceDisabled) {
return false;
}
return hour === currentHour;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerActiveHourPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerActiveHourPipe, isStandalone: true, name: "activeHour" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerActiveHourPipe, decorators: [{
type: Pipe,
args: [{
name: "activeHour",
standalone: true
}]
}] });
function roundAngle(angle, step) {
return Math.round(angle / step) * step;
}
function countAngleByCords(x0, y0, x, y, currentAngle) {
if (y > y0 && x >= x0) {
// II quarter
return 180 - currentAngle;
}
else if (y > y0 && x < x0) {
// III quarter
return 180 + currentAngle;
}
else if (y < y0 && x < x0) {
// IV quarter
return 360 - currentAngle;
}
else {
// I quarter
return currentAngle;
}
}
const CLOCK_HAND_STYLES = {
small: {
height: '75px',
top: 'calc(50% - 75px)',
},
large: {
height: '103px',
top: 'calc(50% - 103px)',
},
};
class NgxMatTimepickerFaceComponent {
constructor() {
this.clockFace = viewChild.required('clockFace');
this.clockHand = viewChild.required('clockHand');
this.color = 'primary';
this.timeChange = output();
this.timeSelected = output();
this.innerClockFaceSize = 85;
this.timeUnit = NgxMatTimepickerUnits;
}
ngAfterViewInit() {
this._setClockHandPosition();
this._addTouchEvents();
}
ngOnChanges(changes) {
const faceTimeChanges = changes['faceTime'];
const selectedTimeChanges = changes['selectedTime'];
if (faceTimeChanges &&
faceTimeChanges.currentValue &&
selectedTimeChanges &&
selectedTimeChanges.currentValue) {
/* Set time according to pass an input value */
this.selectedTime = this.faceTime.find((time) => time.time === this.selectedTime.time);
}
if (selectedTimeChanges && selectedTimeChanges.currentValue) {
this._setClockHandPosition();
}
if (faceTimeChanges && faceTimeChanges.currentValue) {
// To avoid an error ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => this._selectAvailableTime());
}
}
ngOnDestroy() {
this._removeTouchEvents();
}
onMousedown(e) {
e.preventDefault();
this._isStarted = true;
}
onMouseup(e) {
e.preventDefault();
this._isStarted = false;
}
selectTime(e) {
if (!this._isStarted && e instanceof MouseEvent && e.type !== 'click') {
return;
}
const clockFaceCords = this.clockFace().nativeElement.getBoundingClientRect();
/* Get x0 and y0 of the circle */
const centerX = clockFaceCords.left + clockFaceCords.width / 2;
const centerY = clockFaceCords.top + clockFaceCords.height / 2;
/* Counting the arctangent and convert it to from radian to deg */
const arctangent = (Math.atan(Math.abs(e.clientX - centerX) / Math.abs(e.clientY - centerY)) *
180) /
Math.PI;
/* Get angle according to quadrant */
const circleAngle = countAngleByCords(centerX, centerY, e.clientX, e.clientY, arctangent);
/* Check if selected time from the inner clock face (24 hours format only) */
const isInnerClockChosen = this.format &&
this._isInnerClockFace(centerX, centerY, e.clientX, e.clientY);
/* Round angle according to angle step */
const angleStep = this.unit === NgxMatTimepickerUnits.MINUTE
? 6 * (this.minutesGap || 1)
: 30;
const roundedAngle = roundAngle(circleAngle, angleStep);
const angle = (roundedAngle || 360) + (isInnerClockChosen ? 360 : 0);
const selectedTime = this.faceTime.find((val) => val.angle === angle);
if (selectedTime && !selectedTime.disabled) {
this.timeChange.emit(selectedTime);
/* To let know whether user ended interaction with clock face */
if (!this._isStarted) {
this.timeSelected.emit(selectedTime.time);
}
}
}
_addTouchEvents() {
this._touchStartHandler = this.onMousedown.bind(this);
this._touchEndHandler = this.onMouseup.bind(this);
this.clockFace().nativeElement.addEventListener('touchstart', this._touchStartHandler);
this.clockFace().nativeElement.addEventListener('touchend', this._touchEndHandler);
}
_decreaseClockHand() {
this.clockHand().nativeElement.style.height =
CLOCK_HAND_STYLES.small.height;
this.clockHand().nativeElement.style.top = CLOCK_HAND_STYLES.small.top;
}
_increaseClockHand() {
this.clockHand().nativeElement.style.height =
CLOCK_HAND_STYLES.large.height;
this.clockHand().nativeElement.style.top = CLOCK_HAND_STYLES.large.top;
}
_isInnerClockFace(x0, y0, x, y) {
/* Detect whether time from the inner clock face or not (24 format only) */
return (Math.sqrt(Math.pow(x - x0, 2) + Math.pow(y - y0, 2)) <
this.innerClockFaceSize);
}
_removeTouchEvents() {
this.clockFace().nativeElement.removeEventListener('touchstart', this._touchStartHandler);
this.clockFace().nativeElement.removeEventListener('touchend', this._touchEndHandler);
}
_selectAvailableTime() {
const currentTime = this.faceTime.find((time) => this.selectedTime.time === time.time);
this.isClockFaceDisabled = this.faceTime.every((time) => time.disabled);
if (currentTime && currentTime.disabled && !this.isClockFaceDisabled) {
const availableTime = this.faceTime.find((time) => !time.disabled);
this.timeChange.emit(availableTime);
}
}
_setClockHandPosition() {
if (NgxMatTimepickerAdapter.isTwentyFour(this.format)) {
if (this.selectedTime.time > 11) {
this._decreaseClockHand();
}
else {
this._increaseClockHand();
}
}
if (this.selectedTime) {
this.clockHand().nativeElement.style.transform = `rotate(${this.selectedTime.angle}deg)`;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerFaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerFaceComponent, isStandalone: true, selector: "ngx-mat-timepicker-face", inputs: { color: "color", faceTime: "faceTime", unit: "unit", format: "format", minutesGap: "minutesGap", selectedTime: "selectedTime" }, outputs: { timeChange: "timeChange", timeSelected: "timeSelected" }, host: { listeners: { "mousedown": "onMousedown($event)", "mouseup": "onMouseup($event)", "click": "selectTime($event)", "touchmove": "selectTime($event.changedTouches[0])", "touchend": "selectTime($event.changedTouches[0])", "mousemove": "selectTime($event)" } }, viewQueries: [{ propertyName: "clockFace", first: true, predicate: ["clockFace"], descendants: true, isSignal: true }, { propertyName: "clockHand", first: true, predicate: ["clockHand"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- DEFAULT TEMPLATES - START -->\n<ng-template #hourButton let-time>\n <button\n mat-mini-fab\n disableRipple\n class=\"mat-elevation-z0\"\n [color]=\"\n (time.time | activeHour: selectedTime?.time : isClockFaceDisabled)\n ? color\n : 'void'\n \"\n [style.transform]=\"'rotateZ(-' + time.angle + 'deg)'\"\n [disabled]=\"time.disabled\"\n >\n {{ time.time | timeLocalizer: timeUnit.HOUR }}\n </button>\n</ng-template>\n<!-- DEFAULT TEMPLATES - END -->\n<div class=\"clock-face\" #clockFace>\n @if (unit !== timeUnit.MINUTE) {\n <div class=\"clock-face__container\">\n @for (time of faceTime | slice: 0 : 12; track time.time) {\n <div\n class=\"clock-face__number clock-face__number--outer\"\n [style.transform]=\"'rotateZ(' + time.angle + 'deg)'\"\n >\n <ng-content\n *ngTemplateOutlet=\"hourButton; context: { $implicit: time }\"\n />\n </div>\n }\n @if (faceTime.length > 12) {\n <div class=\"clock-face__inner\">\n @for (time of faceTime | slice: 12 : 24; track time.time) {\n <div\n class=\"clock-face__number clock-face__number--inner\"\n [style.top]=\"'calc(50% - ' + innerClockFaceSize + 'px)'\"\n [style.transform]=\"'rotateZ(' + time.angle + 'deg)'\"\n [style.height.px]=\"innerClockFaceSize\"\n >\n <ng-content\n *ngTemplateOutlet=\"hourButton; context: { $implicit: time }\"\n />\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"clock-face__container\">\n @for (time of faceTime; track time.time) {\n <div\n class=\"clock-face__number clock-face__number--outer\"\n [style.transform]=\"'rotateZ(' + time.angle + 'deg)'\"\n >\n <button\n mat-mini-fab\n disableRipple\n class=\"mat-elevation-z0\"\n [color]=\"\n (time.time\n | activeMinute\n : selectedTime?.time\n : minutesGap\n : isClockFaceDisabled)\n ? color\n : 'void'\n \"\n [style.transform]=\"'rotateZ(-' + time.angle + 'deg)'\"\n [disabled]=\"time.disabled\"\n >\n {{\n time.time\n | minutesFormatter: minutesGap\n | timeLocalizer: timeUnit.MINUTE\n }}\n </button>\n </div>\n }\n </div>\n }\n <div\n #clockHand\n class=\"clock-face__clock-hand\"\n [class.clock-face__clock-hand_minute]=\"unit === timeUnit.MINUTE\"\n [hidden]=\"isClockFaceDisabled\"\n >\n @if (unit === timeUnit.MINUTE) {\n <button mat-mini-fab [color]=\"color\">\n <span class=\"clock-face__clock-hand_minute_dot\"></span>\n </button>\n }\n </div>\n <div class=\"clock-face__center\"></div>\n</div>\n", styles: [":host button[mat-mini-fab]{--mdc-fab-small-container-shape: 999px;--mdc-fab-small-container-elevation-shadow: none;--mdc-fab-small-hover-container-elevation-shadow: none;--mat-fab-small-state-layer-color: transparent}:host [mat-mini-fab].mat-unthemed{--mdc-fab-container-color: transparent}:host [mat-mini-fab].mat-unthemed:disabled[disabled]{--mdc-fab-container-color: transparent}:host .clock-face{width:290px;height:290px;border-radius:50%;position:relative;display:flex;justify-content:center;box-sizing:border-box;background-color:var(--mat-app-background-color)}:host .clock-face__inner{position:absolute;top:0;left:0;width:100%;height:100%}:host .clock-face [mat-mini-fab].mat-void{box-shadow:none;background-color:transparent}:host .clock-face [mat-mini-fab].mat-void>span.mat-mdc-button-persistent-ripple{display:none}:host .clock-face__container{margin-left:-2px}:host .clock-face__number{position:absolute;transform-origin:25px 100%;width:50px;text-align:center;z-index:2;top:calc(50% - 125px);left:calc(50% - 25px)}:host .clock-face__number--outer{height:125px}:host .clock-face__number--outer>span{font-size:16px}:host .clock-face__number--inner>span{font-size:14px}:host .clock-face__clock-hand{height:103px;width:3px;padding:0;transform-origin:1px 100%;position:absolute;top:calc(50% - 103px);z-index:1;background-color:var(--mdc-fab-small-container-color)}:host .clock-face__center{width:8px;height:8px;padding:0;position:absolute;border-radius:50%;top:50%;left:50%;margin:-4px;background-color:var(--mdc-fab-small-container-color)}:host .clock-face__clock-hand_minute>button{position:absolute;top:-22px;left:calc(50% - 20px);box-sizing:content-box;display:flex;justify-content:center;align-items:center}:host .clock-face__clock-hand_minute>button .clock-face__clock-hand_minute_dot{display:block;width:4px;height:4px;background:#fff;border-radius:50%}@media (max-device-width: 1023px) and (orientation: landscape){:host .clock-face{width:250px;height:250px}}@media screen and (max-width: 360px){:host .clock-face{width:250px;height:250px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "pipe", type: NgxMatTimepickerActiveHourPipe, name: "activeHour" }, { kind: "pipe", type: NgxMatTimepickerActiveMinutePipe, name: "activeMinute" }, { kind: "pipe", type: NgxMatTimepickerMinutesFormatterPipe, name: "minutesFormatter" }, { kind: "pipe", type: NgxMatTimepickerTimeLocalizerPipe, name: "timeLocalizer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerFaceComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-face', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgTemplateOutlet,
SlicePipe,
MatMiniFabButton,
NgxMatTimepickerActiveHourPipe,
NgxMatTimepickerActiveMinutePipe,
NgxMatTimepickerMinutesFormatterPipe,
NgxMatTimepickerTimeLocalizerPipe,
], template: "<!-- DEFAULT TEMPLATES - START -->\n<ng-template #hourButton let-time>\n <button\n mat-mini-fab\n disableRipple\n class=\"mat-elevation-z0\"\n [color]=\"\n (time.time | activeHour: selectedTime?.time : isClockFaceDisabled)\n ? color\n : 'void'\n \"\n [style.transform]=\"'rotateZ(-' + time.angle + 'deg)'\"\n [disabled]=\"time.disabled\"\n >\n {{ time.time | timeLocalizer: timeUnit.HOUR }}\n </button>\n</ng-template>\n<!-- DEFAULT TEMPLATES - END -->\n<div class=\"clock-face\" #clockFace>\n @if (unit !== timeUnit.MINUTE) {\n <div class=\"clock-face__container\">\n @for (time of faceTime | slice: 0 : 12; track time.time) {\n <div\n class=\"clock-face__number clock-face__number--outer\"\n [style.transform]=\"'rotateZ(' + time.angle + 'deg)'\"\n >\n <ng-content\n *ngTemplateOutlet=\"hourButton; context: { $implicit: time }\"\n />\n </div>\n }\n @if (faceTime.length > 12) {\n <div class=\"clock-face__inner\">\n @for (time of faceTime | slice: 12 : 24; track time.time) {\n <div\n class=\"clock-face__number clock-face__number--inner\"\n [style.top]=\"'calc(50% - ' + innerClockFaceSize + 'px)'\"\n [style.transform]=\"'rotateZ(' + time.angle + 'deg)'\"\n [style.height.px]=\"innerClockFaceSize\"\n >\n <ng-content\n *ngTemplateOutlet=\"hourButton; context: { $implicit: time }\"\n />\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"clock-face__container\">\n @for (time of faceTime; track time.time) {\n <div\n class=\"clock-face__number clock-face__number--outer\"\n [style.transform]=\"'rotateZ(' + time.angle + 'deg)'\"\n >\n <button\n mat-mini-fab\n disableRipple\n class=\"mat-elevation-z0\"\n [color]=\"\n (time.time\n | activeMinute\n : selectedTime?.time\n : minutesGap\n : isClockFaceDisabled)\n ? color\n : 'void'\n \"\n [style.transform]=\"'rotateZ(-' + time.angle + 'deg)'\"\n [disabled]=\"time.disabled\"\n >\n {{\n time.time\n | minutesFormatter: minutesGap\n | timeLocalizer: timeUnit.MINUTE\n }}\n </button>\n </div>\n }\n </div>\n }\n <div\n #clockHand\n class=\"clock-face__clock-hand\"\n [class.clock-face__clock-hand_minute]=\"unit === timeUnit.MINUTE\"\n [hidden]=\"isClockFaceDisabled\"\n >\n @if (unit === timeUnit.MINUTE) {\n <button mat-mini-fab [color]=\"color\">\n <span class=\"clock-face__clock-hand_minute_dot\"></span>\n </button>\n }\n </div>\n <div class=\"clock-face__center\"></div>\n</div>\n", styles: [":host button[mat-mini-fab]{--mdc-fab-small-container-shape: 999px;--mdc-fab-small-container-elevation-shadow: none;--mdc-fab-small-hover-container-elevation-shadow: none;--mat-fab-small-state-layer-color: transparent}:host [mat-mini-fab].mat-unthemed{--mdc-fab-container-color: transparent}:host [mat-mini-fab].mat-unthemed:disabled[disabled]{--mdc-fab-container-color: transparent}:host .clock-face{width:290px;height:290px;border-radius:50%;position:relative;display:flex;justify-content:center;box-sizing:border-box;background-color:var(--mat-app-background-color)}:host .clock-face__inner{position:absolute;top:0;left:0;width:100%;height:100%}:host .clock-face [mat-mini-fab].mat-void{box-shadow:none;background-color:transparent}:host .clock-face [mat-mini-fab].mat-void>span.mat-mdc-button-persistent-ripple{display:none}:host .clock-face__container{margin-left:-2px}:host .clock-face__number{position:absolute;transform-origin:25px 100%;width:50px;text-align:center;z-index:2;top:calc(50% - 125px);left:calc(50% - 25px)}:host .clock-face__number--outer{height:125px}:host .clock-face__number--outer>span{font-size:16px}:host .clock-face__number--inner>span{font-size:14px}:host .clock-face__clock-hand{height:103px;width:3px;padding:0;transform-origin:1px 100%;position:absolute;top:calc(50% - 103px);z-index:1;background-color:var(--mdc-fab-small-container-color)}:host .clock-face__center{width:8px;height:8px;padding:0;position:absolute;border-radius:50%;top:50%;left:50%;margin:-4px;background-color:var(--mdc-fab-small-container-color)}:host .clock-face__clock-hand_minute>button{position:absolute;top:-22px;left:calc(50% - 20px);box-sizing:content-box;display:flex;justify-content:center;align-items:center}:host .clock-face__clock-hand_minute>button .clock-face__clock-hand_minute_dot{display:block;width:4px;height:4px;background:#fff;border-radius:50%}@media (max-device-width: 1023px) and (orientation: landscape){:host .clock-face{width:250px;height:250px}}@media screen and (max-width: 360px){:host .clock-face{width:250px;height:250px}}\n"] }]
}], propDecorators: { color: [{
type: Input
}], faceTime: [{
type: Input
}], unit: [{
type: Input
}], format: [{
type: Input
}], minutesGap: [{
type: Input
}], selectedTime: [{
type: Input
}], onMousedown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}], onMouseup: [{
type: HostListener,
args: ['mouseup', ['$event']]
}], selectTime: [{
type: HostListener,
args: ['click', ['$event']]
}, {
type: HostListener,
args: ['touchmove', ['$event.changedTouches[0]']]
}, {
type: HostListener,
args: ['touchend', ['$event.changedTouches[0]']]
}, {
type: HostListener,
args: ['mousemove', ['$event']]
}] } });
class NgxMatTimepickerMinutesFaceComponent {
constructor() {
this.color = input('primary');
this.format = input();
this.maxTime = input();
this.minTime = input();
this.minuteChange = output();
this.minutesGap = input();
this.minutesList = computed(() => {
const minutes = getMinutes(this.minutesGap());
return disableMinutes(minutes, this.selectedHour(), {
min: this.minTime(),
max: this.maxTime(),
format: this.format(),
period: this.period(),
});
});
this.period = input();
this.selectedHour = input();
this.selectedMinute = input();
this.timeUnit = NgxMatTimepickerUnits;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerMinutesFaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: NgxMatTimepickerMinutesFaceComponent, isStandalone: true, selector: "ngx-mat-timepicker-minutes-face", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, minutesGap: { classPropertyName: "minutesGap", publicName: "minutesGap", isSignal: true, isRequired: false, transformFunction: null }, period: { classPropertyName: "period", publicName: "period", isSignal: true, isRequired: false, transformFunction: null }, selectedHour: { classPropertyName: "selectedHour", publicName: "selectedHour", isSignal: true, isRequired: false, transformFunction: null }, selectedMinute: { classPropertyName: "selectedMinute", publicName: "selectedMinute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { minuteChange: "minuteChange" }, ngImport: i0, template: "<ngx-mat-timepicker-face\n [color]=\"color()\"\n [faceTime]=\"minutesList()\"\n [selectedTime]=\"selectedMinute()\"\n [minutesGap]=\"minutesGap()\"\n [unit]=\"timeUnit.MINUTE\"\n (timeChange)=\"minuteChange.emit($event)\"\n/>\n", dependencies: [{ kind: "component", type: NgxMatTimepickerFaceComponent, selector: "ngx-mat-timepicker-face", inputs: ["color", "faceTime", "unit", "format", "minutesGap", "selectedTime"], outputs: ["timeChange", "timeSelected"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerMinutesFaceComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-minutes-face', imports: [NgxMatTimepickerFaceComponent], template: "<ngx-mat-timepicker-face\n [color]=\"color()\"\n [faceTime]=\"minutesList()\"\n [selectedTime]=\"selectedMinute()\"\n [minutesGap]=\"minutesGap()\"\n [unit]=\"timeUnit.MINUTE\"\n (timeChange)=\"minuteChange.emit($event)\"\n/>\n" }]
}] });
class NgxMatTimepickerHoursFaceDirective {
constructor() {
this.color = input('primary');
this.format = model(24);
this.availableHours = computed(() => {
return getHours(this.format());
});
this.hoursList = computed(() => {
return this.computeHoursList();
});
this.maxTime = input();
this.minTime = input();
this.selectedHour = input();
this.hourChange = output();
this.hourSelected = output();
this.timeUnit = NgxMatTimepickerUnits;
}
onTimeSelected(time) {
this.hourSelected.emit(time);
}
computeHoursList() {
return this.availableHours();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerHoursFaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: NgxMatTimepickerHoursFaceDirective, isStandalone: true, selector: "[ngxMatTimepickerHoursFace]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, selectedHour: { classPropertyName: "selectedHour", publicName: "selectedHour", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", hourChange: "hourChange", hourSelected: "hourSelected" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerHoursFaceDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxMatTimepickerHoursFace]',
standalone: true,
}]
}] });
class NgxMatTimepicker12HoursFaceComponent extends NgxMatTimepickerHoursFaceDirective {
constructor() {
super();
this.period = input();
this.format.set(12);
}
computeHoursList() {
return disableHours(this.availableHours(), {
min: this.minTime(),
max: this.maxTime(),
format: this.format(),
period: this.period(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepicker12HoursFaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: NgxMatTimepicker12HoursFaceComponent, isStandalone: true, selector: "ngx-mat-timepicker-12-hours-face", inputs: { period: { classPropertyName: "period", publicName: "period", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ngx-mat-timepicker-face\n [unit]=\"timeUnit.HOUR\"\n [format]=\"format()\"\n [color]=\"color()\"\n [faceTime]=\"hoursList()\"\n [selectedTime]=\"selectedHour()\"\n (timeChange)=\"hourChange.emit($event)\"\n (timeSelected)=\"onTimeSelected($event)\"\n/>\n", dependencies: [{ kind: "component", type: NgxMatTimepickerFaceComponent, selector: "ngx-mat-timepicker-face", inputs: ["color", "faceTime", "unit", "format", "minutesGap", "selectedTime"], outputs: ["timeChange", "timeSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepicker12HoursFaceComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-12-hours-face', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxMatTimepickerFaceComponent], template: "<ngx-mat-timepicker-face\n [unit]=\"timeUnit.HOUR\"\n [format]=\"format()\"\n [color]=\"color()\"\n [faceTime]=\"hoursList()\"\n [selectedTime]=\"selectedHour()\"\n (timeChange)=\"hourChange.emit($event)\"\n (timeSelected)=\"onTimeSelected($event)\"\n/>\n" }]
}], ctorParameters: () => [] });
class NgxMatTimepicker24HoursFaceComponent extends NgxMatTimepickerHoursFaceDirective {
constructor() {
super();
this.format.set(24);
}
computeHoursList() {
return disableHours(this.availableHours(), {
min: this.minTime(),
max: this.maxTime(),
format: this.format(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepicker24HoursFaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgxMatTimepicker24HoursFaceComponent, isStandalone: true, selector: "ngx-mat-timepicker-24-hours-face", usesInheritance: true, ngImport: i0, template: "<ngx-mat-timepicker-face\n [unit]=\"timeUnit.HOUR\"\n [format]=\"format()\"\n [color]=\"color()\"\n [faceTime]=\"hoursList()\"\n [selectedTime]=\"selectedHour()\"\n (timeChange)=\"hourChange.emit($event)\"\n (timeSelected)=\"onTimeSelected($event)\"\n/>\n", dependencies: [{ kind: "component", type: NgxMatTimepickerFaceComponent, selector: "ngx-mat-timepicker-face", inputs: ["color", "faceTime", "unit", "format", "minutesGap", "selectedTime"], outputs: ["timeChange", "timeSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepicker24HoursFaceComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-24-hours-face', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxMatTimepickerFaceComponent], template: "<ngx-mat-timepicker-face\n [unit]=\"timeUnit.HOUR\"\n [format]=\"format()\"\n [color]=\"color()\"\n [faceTime]=\"hoursList()\"\n [selectedTime]=\"selectedHour()\"\n (timeChange)=\"hourChange.emit($event)\"\n (timeSelected)=\"onTimeSelected($event)\"\n/>\n" }]
}], ctorParameters: () => [] });
class NgxMatTimepickerPeriodComponent {
constructor() {
this._overlay = inject(Overlay);
this.activeTimeUnit = input();
this.format = input();
this.hours = input();
this.minutes = input();
this.maxTime = input();
this.minTime = input();
this.meridiems = input();
this.selectedHour = input();
this.selectedPeriod = input();
this.periodChanged = output();
this.isAmDisabled = computed(() => {
const times = this._getDisabledTimeByPeriod(NgxMatTimepickerPeriods.AM);
return times.every((t) => t.disabled);
});
this.isPmDisabled = computed(() => {
const times = this._getDisabledTimeByPeriod(NgxMatTimepickerPeriods.PM);
return times.every((t) => t.disabled);
});
this.isPeriodAvailable = computed(() => {
const period = this.selectedPeriod();
if (period === NgxMatTimepickerPeriods.AM) {
return !this.isAmDisabled();
}
if (period === NgxMatTimepickerPeriods.PM) {
return !this.isPmDisabled();
}
return false;
});
this.timePeriod = NgxMatTimepickerPeriods;
this.overlayScrollStrategy = this._overlay.scrollStrategies.reposition();
}
changePeriod(period) {
const allowed = this._isSwitchPeriodAvailable(period);
if (allowed) {
this.periodChanged.emit(period);
}
}
_getDisabledTimeByPeriod(period) {
switch (this.activeTimeUnit()) {
case NgxMatTimepickerUnits.HOUR:
return disableHours(this.hours(), {
min: this.minTime(),
max: this.maxTime(),
format: this.format(),
period,
});
case NgxMatTimepickerUnits.MINUTE:
return disableMinutes(this.minutes(), +this.selectedHour(), {
min: this.minTime(),
max: this.maxTime(),
format: this.format(),
period,
});
default:
throw new Error('no such NgxMatTimepickerUnits');
}
}
_isSwitchPeriodAvailable(period) {
const time = this._getDisabledTimeByPeriod(period);
return !time.every((t) => t.disabled);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerPeriodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerPeriodComponent, isStandalone: true, selector: "ngx-mat-timepicker-period", inputs: { activeTimeUnit: { classPropertyName: "activeTimeUnit", publicName: "activeTimeUnit", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hours: { classPropertyName: "hours", publicName: "hours", isSignal: true, isRequired: false, transformFunction: null }, minutes: { classPropertyName: "minutes", publicName: "minutes", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, meridiems: { classPropertyName: "meridiems", publicName: "meridiems", isSignal: true, isRequired: false, transformFunction: null }, selectedHour: { classPropertyName: "selectedHour", publicName: "selectedHour", isSignal: true, isRequired: false, transformFunction: null }, selectedPeriod: { classPropertyName: "selectedPeriod", publicName: "selectedPeriod", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { periodChanged: "periodChanged" }, ngImport: i0, template: "<div\n class=\"timepicker-period\"\n cdkOverlayOrigin\n #eventPanelOrigin=\"cdkOverlayOrigin\"\n>\n <mat-button-toggle-group\n vertical\n hideSingleSelectionIndicator\n [value]=\"selectedPeriod()\"\n (valueChange)=\"changePeriod($event)\"\n >\n <mat-button-toggle [value]=\"timePeriod.AM\" [disabled]=\"isAmDisabled()\">\n {{ meridiems()[0] }}\n </mat-button-toggle>\n\n <mat-button-toggle [value]=\"timePeriod.PM\" [disabled]=\"isPmDisabled()\">\n {{ meridiems()[1] }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"todo-remove-pointer-events-if-necessary\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayPositionStrategy]=\"overlayPositionStrategy\"\n [cdkConnectedOverlayOrigin]=\"eventPanelOrigin\"\n [cdkConnectedOverlayOpen]=\"!isPeriodAvailable\"\n>\n @if (!isPeriodAvailable()) {\n <div class=\"timepicker-period__warning\" [@scaleInOut]>\n <p>Current time would be invalid in this period.</p>\n </div>\n }\n</ng-template>\n", styles: ["mat-button-toggle-group{--mat-standard-button-toggle-shape: .5rem;--mat-standard-button-toggle-height: 38px}.timepicker-period{display:flex;flex-direction:column;position:relative}.timepicker-period__warning{padding:5px 10px;border-radius:3px;background-color:#0000008c;position:absolute;width:200px;left:-20px;top:40px}.timepicker-period__warning>p{margin:0;font-size:12px;font-weight:700;color:#fff}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }], animations: [
trigger('scaleInOut', [
transition(':enter', [
style({ transform: 'scale(0)' }),
animate('.2s', style({ transform: 'scale(1)' })),
sequence([
animate('3s', style({ opacity: 1 })),
animate('.3s', style({ opacity: 0 })),
]),
]),
]),
] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerPeriodComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-period', animations: [
trigger('scaleInOut', [
transition(':enter', [
style({ transform: 'scale(0)' }),
animate('.2s', style({ transform: 'scale(1)' })),
sequence([
animate('3s', style({ opacity: 1 })),
animate('.3s', style({ opacity: 0 })),
]),
]),
]),
], imports: [
CdkOverlayOrigin,
CdkConnectedOverlay,
MatButtonToggleGroup,
MatButtonToggle,
], template: "<div\n class=\"timepicker-period\"\n cdkOverlayOrigin\n #eventPanelOrigin=\"cdkOverlayOrigin\"\n>\n <mat-button-toggle-group\n vertical\n hideSingleSelectionIndicator\n [value]=\"selectedPeriod()\"\n (valueChange)=\"changePeriod($event)\"\n >\n <mat-button-toggle [value]=\"timePeriod.AM\" [disabled]=\"isAmDisabled()\">\n {{ meridiems()[0] }}\n </mat-button-toggle>\n\n <mat-button-toggle [value]=\"timePeriod.PM\" [disabled]=\"isPmDisabled()\">\n {{ meridiems()[1] }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"todo-remove-pointer-events-if-necessary\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayPositionStrategy]=\"overlayPositionStrategy\"\n [cdkConnectedOverlayOrigin]=\"eventPanelOrigin\"\n [cdkConnectedOverlayOpen]=\"!isPeriodAvailable\"\n>\n @if (!isPeriodAvailable()) {\n <div class=\"timepicker-period__warning\" [@scaleInOut]>\n <p>Current time would be invalid in this period.</p>\n </div>\n }\n</ng-template>\n", styles: ["mat-button-toggle-group{--mat-standard-button-toggle-shape: .5rem;--mat-standard-button-toggle-height: 38px}.timepicker-period{display:flex;flex-direction:column;position:relative}.timepicker-period__warning{padding:5px 10px;border-radius:3px;background-color:#0000008c;position:absolute;width:200px;left:-20px;top:40px}.timepicker-period__warning>p{margin:0;font-size:12px;font-weight:700;color:#fff}\n"] }]
}] });
class NgxMatTimepickerParserPipe {
constructor() {
this._timepickerLocaleSrv = inject(NgxMatTimepickerLocaleService);
}
get _locale() {
return this._timepickerLocaleSrv.locale;
}
get _numberingSystem() {
return this._timepickerLocaleSrv.numberingSystem;
}
transform(time, timeUnit = NgxMatTimepickerUnits.HOUR) {
if (time == null || time === '') {
return '';
}
if (!isNaN(+time)) {
return `${time}`;
}
if (timeUnit === NgxMatTimepickerUnits.MINUTE) {
return this._parseTime(time, 'mm', NgxMatTimepickerMeasure.minute).toString();
}
return this._parseTime(time, 'HH', NgxMatTimepickerMeasure.hour).toString();
}
_parseTime(time, format, timeMeasure) {
const parsedTime = DateTime.fromFormat(String(time), format, {
locale: this._locale,
numberingSystem: this._numberingSystem,
})[timeMeasure];
if (!isNaN(parsedTime)) {
return parsedTime;
}
throw new Error(`Cannot parse time - ${time}`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerParserPipe, isStandalone: true, name: "ngxMatTimepickerParser" }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerParserPipe }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerParserPipe, decorators: [{
type: Pipe,
args: [{
name: 'ngxMatTimepickerParser',
standalone: true,
}]
}, {
type: Injectable
}] });
class NgxMatTimepickerAutofocusDirective {
constructor() {
this._element = inject(ElementRef);
this._document = inject(DOCUMENT, { optional: true });
this._activeElement = this._document?.activeElement;
}
ngOnChanges() {
if (this.isFocusActive) {
// To avoid ExpressionChangedAfterItHasBeenCheckedError;
setTimeout(() => this._element.nativeElement.focus({ preventScroll: true }));
}
}
ngOnDestroy() {
// To avoid ExpressionChangedAfterItHasBeenCheckedError;
setTimeout(() => this._activeElement?.focus({ preventScroll: true }));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: NgxMatTimepickerAutofocusDirective, isStandalone: true, selector: "[ngxMatTimepickerAutofocus]", inputs: { isFocusActive: ["ngxMatTimepickerAutofocus", "isFocusActive"] }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerAutofocusDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxMatTimepickerAutofocus]',
standalone: true,
}]
}], propDecorators: { isFocusActive: [{
type: Input,
args: ['ngxMatTimepickerAutofocus']
}] } });
function retainSelection() {
this.selectionStart = this.selectionEnd;
}
class NgxMatTimepickerDialControlComponent {
constructor() {
this.disabled = input(false, { transform: booleanAttribute });
this.isActive = input(false, { transform: booleanAttribute });
this.isEditable = input(false, { transform: booleanAttribute });
this.minutesGap = input(1);
this.timeList = input([]);
this.timeChanged = output();
this.timeUnitChanged = output();
this.focused = output();
this.unfocused = output();
this._elRef = inject(ElementRef);
this._timeParserPipe = inject(NgxMatTimepickerParserPipe);
}
get _selectedTime() {
if (this.time) {
return this.timeList().find((t) => t.time === +this.time);
}
return undefined;
}
focusChanged(value) {
if (value) {
this.focused.emit();
}
else {
this.unfocused.emit();
}
}
changeTimeByKeyboard(e) {
const char = String.fromCharCode(e.keyCode);
if (isTimeDisabledToChange(this.time, char, this.timeList())) {
e.preventDefault();
}
}
ngAfterViewInit() {
this._elRef.nativeElement
.querySelector('input')
.addEventListener('select', retainSelection, false);
}
ngOnDestroy() {
this._elRef.nativeElement
?.querySelector('input')
?.removeEventListener('select', retainSelection);
}
onKeydown(e) {
if (!isDigit(e)) {
e.preventDefault();
}
else {
this._changeTimeByArrow(e.keyCode);
}
}
onModelChange(value) {
this.time = this._timeParserPipe.transform(value, this.timeUnit);
}
saveTimeAndChangeTimeUnit(event, unit) {
event.preventDefault();
this.previousTime = this.time;
this.timeUnitChanged.emit(unit);
this.focusChanged(true);
}
updateTime() {
if (this._selectedTime) {
this.timeChanged.emit(this._selectedTime);
this.previousTime = this._selectedTime.time;
}
}
_addTime(amount) {
return `${+this.time + amount}`.padStart(2, '0');
}
_changeTimeByArrow(keyCode) {
let time;
// arrow up
if (keyCode === 38) {
time = this._addTime(this.minutesGap() || 1);
}
// arrow down
else if (keyCode === 40) {
time = this._addTime(-1 * (this.minutesGap() || 1));
}
if (!isTimeUnavailable(time, this.timeList())) {
this.time = time;
this.updateTime();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDialControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerDialControlComponent, isStandalone: true, selector: "ngx-mat-timepicker-dial-control", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, minutesGap: { classPropertyName: "minutesGap", publicName: "minutesGap", isSignal: true, isRequired: false, transformFunction: null }, timeList: { classPropertyName: "timeList", publicName: "timeList", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: false, isRequired: false, transformFunction: null }, timeUnit: { classPropertyName: "timeUnit", publicName: "timeUnit", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { timeChanged: "timeChanged", timeUnitChanged: "timeUnitChanged", focused: "focused", unfocused: "unfocused" }, providers: [NgxMatTimepickerParserPipe], ngImport: i0, template: "<div class=\"wrapper\" [class.active]=\"isActive()\">\n @if (!isEditable()) {\n <input\n readonly\n class=\"control\"\n [ngModel]=\"time | timeLocalizer: timeUnit : true\"\n [disabled]=\"disabled()\"\n [ngxMatTimepickerAutofocus]=\"isActive()\"\n (input)=\"updateTime()\"\n (focus)=\"saveTimeAndChangeTimeUnit($event, timeUnit)\"\n (blur)=\"focusChanged(false)\"\n (ngModelChange)=\"time = $event\"\n />\n } @else {\n <input\n class=\"control\"\n [ngModel]=\"\n time | ngxMatTimepickerParser: timeUnit | timeLocalizer: timeUnit : true\n \"\n [disabled]=\"disabled()\"\n [ngxMatTimepickerAutofocus]=\"isActive()\"\n (input)=\"updateTime()\"\n (focus)=\"saveTimeAndChangeTimeUnit($event, timeUnit)\"\n (blur)=\"focusChanged(false)\"\n (keydown)=\"onKeydown($event)\"\n (keypress)=\"changeTimeByKeyboard($event)\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n }\n</div>\n", styles: [":host{position:relative;width:100%}.wrapper{display:flex;flex:1;align-items:center;justify-content:center;overflow:hidden;padding:.825rem 1rem;border:2px solid transparent;border-radius:.5rem;transition:background-color .2s;background-color:var(--mdc-filled-text-field-container-color)}.focused,.active{border-color:var(--mdc-filled-text-field-focus-active-indicator-color);background-color:var(--mat-standard-button-toggle-selected-state-background-color)}.control{font-size:inherit;color:inherit;text-align:center;border:none;background:transparent;min-width:0;width:60px;height:100%}.control:focus-visible{outline:none}.control:disabled{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgxMatTimepickerAutofocusDirective, selector: "[ngxMatTimepickerAutofocus]", inputs: ["ngxMatTimepickerAutofocus"] }, { kind: "pipe", type: NgxMatTimepickerParserPipe, name: "ngxMatTimepickerParser" }, { kind: "pipe", type: NgxMatTimepickerTimeLocalizerPipe, name: "timeLocalizer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDialControlComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-dial-control', changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgxMatTimepickerParserPipe], imports: [
FormsModule,
NgxMatTimepickerAutofocusDirective,
NgxMatTimepickerParserPipe,
NgxMatTimepickerTimeLocalizerPipe,
], template: "<div class=\"wrapper\" [class.active]=\"isActive()\">\n @if (!isEditable()) {\n <input\n readonly\n class=\"control\"\n [ngModel]=\"time | timeLocalizer: timeUnit : true\"\n [disabled]=\"disabled()\"\n [ngxMatTimepickerAutofocus]=\"isActive()\"\n (input)=\"updateTime()\"\n (focus)=\"saveTimeAndChangeTimeUnit($event, timeUnit)\"\n (blur)=\"focusChanged(false)\"\n (ngModelChange)=\"time = $event\"\n />\n } @else {\n <input\n class=\"control\"\n [ngModel]=\"\n time | ngxMatTimepickerParser: timeUnit | timeLocalizer: timeUnit : true\n \"\n [disabled]=\"disabled()\"\n [ngxMatTimepickerAutofocus]=\"isActive()\"\n (input)=\"updateTime()\"\n (focus)=\"saveTimeAndChangeTimeUnit($event, timeUnit)\"\n (blur)=\"focusChanged(false)\"\n (keydown)=\"onKeydown($event)\"\n (keypress)=\"changeTimeByKeyboard($event)\"\n (ngModelChange)=\"onModelChange($event)\"\n />\n }\n</div>\n", styles: [":host{position:relative;width:100%}.wrapper{display:flex;flex:1;align-items:center;justify-content:center;overflow:hidden;padding:.825rem 1rem;border:2px solid transparent;border-radius:.5rem;transition:background-color .2s;background-color:var(--mdc-filled-text-field-container-color)}.focused,.active{border-color:var(--mdc-filled-text-field-focus-active-indicator-color);background-color:var(--mat-standard-button-toggle-selected-state-background-color)}.control{font-size:inherit;color:inherit;text-align:center;border:none;background:transparent;min-width:0;width:60px;height:100%}.control:focus-visible{outline:none}.control:disabled{cursor:default}\n"] }]
}], propDecorators: { time: [{
type: Input
}], timeUnit: [{
type: Input
}] } });
function isTimeDisabledToChange(currentTime, nextTime, timeList) {
const isNumber = /\d/.test(nextTime);
if (isNumber) {
const time = currentTime + nextTime;
return isTimeUnavailable(time, timeList);
}
return undefined;
}
function isTimeUnavailable(time, timeList) {
const selectedTime = timeList.find((value) => value.time === +time);
return !selectedTime || (selectedTime && selectedTime.disabled);
}
class NgxMatTimepickerDialComponent {
constructor() {
this.locale = inject(NgxMatTimepickerLocaleService).locale;
this.meridiems = Info.meridiems({ locale: this.locale });
this.timeUnit = NgxMatTimepickerUnits;
this.color = input('primary');
this.editableHintTmpl = input();
this.format = input();
this.hour = input();
this.minute = input();
this.minutesGap = input();
this.period = input();
this.activeTimeUnit = input();
this.hoursOnly = input();
this.isEditable = input();
this.maxTime = input();
this.minTime = input();
this.isHintVisible = signal(false);
this.hourString = computed(() => `${this.hour()}`);
this.minuteString = computed(() => `${this.minute()}`);
this.hours = computed(() => {
const hours = getHours(this.format());
return disableHours(hours, {
min: this.minTime(),
max: this.maxTime(),
format: this.format(),
period: this.period(),
});
});
this.minutes = computed(() => {
const minutes = getMinutes(this.minutesGap());
return disableMinutes(minutes, +this.hour(), {
min: this.minTime(),
max: this.maxTime(),
format: this.format(),
period: this.period(),
});
});
this.hourChanged = output();
this.minuteChanged = output();
this.periodChanged = output();
this.timeUnitChanged = output();
}
changeHour(hour) {
this.hourChanged.emit(hour);
}
changeMinute(minute) {
this.minuteChanged.emit(minute);
}
changePeriod(period) {
this.periodChanged.emit(period);
}
changeTimeUnit(unit) {
this.timeUnitChanged.emit(unit);
}
hideHint() {
this.isHintVisible.set(false);
}
showHint() {
this.isHintVisible.set(true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerDialComponent, isStandalone: true, selector: "ngx-mat-timepicker-dial", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, editableHintTmpl: { classPropertyName: "editableHintTmpl", publicName: "editableHintTmpl", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hour: { classPropertyName: "hour", publicName: "hour", isSignal: true, isRequired: false, transformFunction: null }, minute: { classPropertyName: "minute", publicName: "minute", isSignal: true, isRequired: false, transformFunction: null }, minutesGap: { classPropertyName: "minutesGap", publicName: "minutesGap", isSignal: true, isRequired: false, transformFunction: null }, period: { classPropertyName: "period", publicName: "period", isSignal: true, isRequired: false, transformFunction: null }, activeTimeUnit: { classPropertyName: "activeTimeUnit", publicName: "activeTimeUnit", isSignal: true, isRequired: false, transformFunction: null }, hoursOnly: { classPropertyName: "hoursOnly", publicName: "hoursOnly", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hourChanged: "hourChanged", minuteChanged: "minuteChanged", periodChanged: "periodChanged", timeUnitChanged: "timeUnitChanged" }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"time\">\n <ngx-mat-timepicker-dial-control\n [timeList]=\"hours()\"\n [time]=\"hourString()\"\n [timeUnit]=\"timeUnit.HOUR\"\n [isActive]=\"activeTimeUnit() === timeUnit.HOUR\"\n [isEditable]=\"isEditable()\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (timeChanged)=\"changeHour($event)\"\n (focused)=\"showHint()\"\n (unfocused)=\"hideHint()\"\n />\n <span class=\"seperator\">:</span>\n <ngx-mat-timepicker-dial-control\n [timeList]=\"minutes()\"\n [time]=\"minuteString()\"\n [timeUnit]=\"timeUnit.MINUTE\"\n [isActive]=\"activeTimeUnit() === timeUnit.MINUTE\"\n [isEditable]=\"isEditable()\"\n [minutesGap]=\"minutesGap()\"\n [disabled]=\"hoursOnly()\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (timeChanged)=\"changeMinute($event)\"\n (focused)=\"showHint()\"\n (unfocused)=\"hideHint()\"\n />\n </div>\n @if (format() !== 24) {\n <ngx-mat-timepicker-period\n class=\"period\"\n [selectedPeriod]=\"period()\"\n [activeTimeUnit]=\"activeTimeUnit()\"\n [maxTime]=\"maxTime()\"\n [minTime]=\"minTime()\"\n [format]=\"format()\"\n [hours]=\"hours()\"\n [minutes]=\"minutes()\"\n [selectedHour]=\"hour()\"\n [meridiems]=\"meridiems\"\n (periodChanged)=\"changePeriod($event)\"\n />\n }\n</div>\n\n@if (isEditable() || editableHintTmpl()) {\n <div [class.hint-hidden]=\"!isHintVisible()\">\n <ng-container\n *ngTemplateOutlet=\"\n editableHintTmpl() ? editableHintTmpl() : editableHintDefault\n \"\n />\n <ng-template #editableHintDefault>\n <small class=\"hint\">\n * use arrows (<span>⇅</span>) to change the time\n </small>\n </ng-template>\n </div>\n}\n", styles: [":host{display:block;text-align:center;width:100%}.container{display:flex;align-items:center;justify-content:center;gap:.75rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.time{display:flex;align-items:center;line-height:normal;flex:1 0 auto;font-size:3em}.period{display:block}.hint-hidden{visibility:hidden}.hint{display:inline-block;font-size:10px}.hint span{font-size:14px}.seperator{padding:.5rem;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxMatTimepickerDialControlComponent, selector: "ngx-mat-timepicker-dial-control", inputs: ["disabled", "isActive", "isEditable", "minutesGap", "timeList", "time", "timeUnit"], outputs: ["timeChanged", "timeUnitChanged", "focused", "unfocused"] }, { kind: "component", type: NgxMatTimepickerPeriodComponent, selector: "ngx-mat-timepicker-period", inputs: ["activeTimeUnit", "format", "hours", "minutes", "maxTime", "minTime", "meridiems", "selectedHour", "selectedPeriod"], outputs: ["periodChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDialComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-dial', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgTemplateOutlet,
NgxMatTimepickerDialControlComponent,
NgxMatTimepickerPeriodComponent,
], template: "<div class=\"container\">\n <div class=\"time\">\n <ngx-mat-timepicker-dial-control\n [timeList]=\"hours()\"\n [time]=\"hourString()\"\n [timeUnit]=\"timeUnit.HOUR\"\n [isActive]=\"activeTimeUnit() === timeUnit.HOUR\"\n [isEditable]=\"isEditable()\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (timeChanged)=\"changeHour($event)\"\n (focused)=\"showHint()\"\n (unfocused)=\"hideHint()\"\n />\n <span class=\"seperator\">:</span>\n <ngx-mat-timepicker-dial-control\n [timeList]=\"minutes()\"\n [time]=\"minuteString()\"\n [timeUnit]=\"timeUnit.MINUTE\"\n [isActive]=\"activeTimeUnit() === timeUnit.MINUTE\"\n [isEditable]=\"isEditable()\"\n [minutesGap]=\"minutesGap()\"\n [disabled]=\"hoursOnly()\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (timeChanged)=\"changeMinute($event)\"\n (focused)=\"showHint()\"\n (unfocused)=\"hideHint()\"\n />\n </div>\n @if (format() !== 24) {\n <ngx-mat-timepicker-period\n class=\"period\"\n [selectedPeriod]=\"period()\"\n [activeTimeUnit]=\"activeTimeUnit()\"\n [maxTime]=\"maxTime()\"\n [minTime]=\"minTime()\"\n [format]=\"format()\"\n [hours]=\"hours()\"\n [minutes]=\"minutes()\"\n [selectedHour]=\"hour()\"\n [meridiems]=\"meridiems\"\n (periodChanged)=\"changePeriod($event)\"\n />\n }\n</div>\n\n@if (isEditable() || editableHintTmpl()) {\n <div [class.hint-hidden]=\"!isHintVisible()\">\n <ng-container\n *ngTemplateOutlet=\"\n editableHintTmpl() ? editableHintTmpl() : editableHintDefault\n \"\n />\n <ng-template #editableHintDefault>\n <small class=\"hint\">\n * use arrows (<span>⇅</span>) to change the time\n </small>\n </ng-template>\n </div>\n}\n", styles: [":host{display:block;text-align:center;width:100%}.container{display:flex;align-items:center;justify-content:center;gap:.75rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.time{display:flex;align-items:center;line-height:normal;flex:1 0 auto;font-size:3em}.period{display:block}.hint-hidden{visibility:hidden}.hint{display:inline-block;font-size:10px}.hint span{font-size:14px}.seperator{padding:.5rem;font-weight:500}\n"] }]
}] });
class NgxMatTimepickerContentComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerContentComponent, isStandalone: true, selector: "ngx-mat-timepicker-content", inputs: { appendToInput: ["appendToInput", "appendToInput", booleanAttribute], inputElement: "inputElement" }, ngImport: i0, template: "@if (appendToInput) {\n <div>\n <ng-container *ngTemplateOutlet=\"timepickerOutlet\" />\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"timepickerOutlet\" />\n}\n<ng-template #timepickerOutlet>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerContentComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-content', imports: [NgTemplateOutlet], template: "@if (appendToInput) {\n <div>\n <ng-container *ngTemplateOutlet=\"timepickerOutlet\" />\n </div>\n} @else {\n <ng-container *ngTemplateOutlet=\"timepickerOutlet\" />\n}\n<ng-template #timepickerOutlet>\n <ng-content></ng-content>\n</ng-template>\n" }]
}], propDecorators: { appendToInput: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], inputElement: [{
type: Input
}] } });
class NgxMatTimepickerDialogComponent extends NgxMatTimepickerBaseDirective {
constructor(data, _dialogRef, timepickerSrv, eventSrv, timepickerLocaleSrv) {
super(timepickerSrv, eventSrv, timepickerLocaleSrv, data);
this.data = data;
this._dialogRef = _dialogRef;
}
close() {
this._dialogRef.close();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: NgxMatTimepickerService }, { token: NgxMatTimepickerEventService }, { token: NgxMatTimepickerLocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerDialogComponent, isStandalone: true, selector: "ngx-mat-timepicker-dialog", usesInheritance: true, ngImport: i0, template: "<ng-template #cancelBtnDefault>\n <button mat-button [color]=\"color()\">CANCEL</button>\n</ng-template>\n\n<ng-template #confirmBtnDefault>\n <button mat-button [color]=\"color()\">OK</button>\n</ng-template>\n\n<div mat-dialog-content>\n <ngx-mat-timepicker-content\n [appendToInput]=\"data.appendToInput\"\n [inputElement]=\"data.inputElement\"\n >\n <div class=\"timepicker\" [class]=\"data.timepickerClass\">\n <div\n [class.is-editable]=\"data.enableKeyboardInput\"\n class=\"timepicker-header\"\n >\n <ngx-mat-timepicker-dial\n [color]=\"color()\"\n [format]=\"data.format\"\n [hour]=\"selectedHour()?.time\"\n [minute]=\"selectedMinute()?.time\"\n [period]=\"selectedPeriod()\"\n [activeTimeUnit]=\"activeTimeUnit\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [isEditable]=\"data.enableKeyboardInput\"\n [editableHintTmpl]=\"data.editableHintTmpl\"\n [minutesGap]=\"data.minutesGap\"\n [hoursOnly]=\"data.hoursOnly\"\n (periodChanged)=\"changePeriod($event)\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (hourChanged)=\"onHourChange($event)\"\n (minuteChanged)=\"onMinuteChange($event)\"\n />\n </div>\n <div class=\"timepicker-body\">\n @switch (activeTimeUnit) {\n @case (timeUnit.HOUR) {\n <div>\n @if (data.format === 24) {\n <ngx-mat-timepicker-24-hours-face\n [color]=\"color()\"\n [selectedHour]=\"selectedHour()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n (hourChange)=\"onHourChange($event)\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n } @else {\n <ngx-mat-timepicker-12-hours-face\n [color]=\"color()\"\n [selectedHour]=\"selectedHour()\"\n [period]=\"selectedPeriod()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n (hourChange)=\"onHourChange($event)\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n }\n </div>\n }\n @case (timeUnit.MINUTE) {\n <ngx-mat-timepicker-minutes-face\n [color]=\"color()\"\n [selectedMinute]=\"selectedMinute()\"\n [selectedHour]=\"selectedHour()?.time\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n [period]=\"selectedPeriod()\"\n [minutesGap]=\"data.minutesGap\"\n (minuteChange)=\"onMinuteChange($event)\"\n />\n }\n }\n </div>\n </div>\n </ngx-mat-timepicker-content>\n</div>\n<div mat-dialog-actions align=\"end\">\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"close()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.cancelBtnTmpl ? data.cancelBtnTmpl : cancelBtnDefault\n \"\n />\n </div>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"setTime()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.confirmBtnTmpl ? data.confirmBtnTmpl : confirmBtnDefault\n \"\n />\n </div>\n</div>\n", styles: [":host{display:block;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color);box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow);border-radius:var(--mat-datepicker-calendar-container-shape)}[mat-dialog-content]{max-height:85vh}.timepicker{display:flex;flex-direction:column;gap:2.25rem}.timepicker-header{display:flex;justify-content:center;align-items:center}.timepicker-header.is-editable{height:auto}.timepicker-body{margin:auto}\n"], dependencies: [{ kind: "directive", type:
// Common
NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
// Material
MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type:
// NgxMatTimepicker
NgxMatTimepickerContentComponent, selector: "ngx-mat-timepicker-content", inputs: ["appendToInput", "inputElement"] }, { kind: "component", type: NgxMatTimepickerDialComponent, selector: "ngx-mat-timepicker-dial", inputs: ["color", "editableHintTmpl", "format", "hour", "minute", "minutesGap", "period", "activeTimeUnit", "hoursOnly", "isEditable", "maxTime", "minTime"], outputs: ["hourChanged", "minuteChanged", "periodChanged", "timeUnitChanged"] }, { kind: "component", type: NgxMatTimepicker24HoursFaceComponent, selector: "ngx-mat-timepicker-24-hours-face" }, { kind: "component", type: NgxMatTimepicker12HoursFaceComponent, selector: "ngx-mat-timepicker-12-hours-face", inputs: ["period"] }, { kind: "component", type: NgxMatTimepickerMinutesFaceComponent, selector: "ngx-mat-timepicker-minutes-face", inputs: ["color", "format", "maxTime", "minTime", "minutesGap", "period", "selectedHour", "selectedMinute"], outputs: ["minuteChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-dialog', imports: [
// Common
NgTemplateOutlet,
// Material
MatButton,
MatDialogContent,
MatDialogActions,
// NgxMatTimepicker
NgxMatTimepickerContentComponent,
NgxMatTimepickerDialComponent,
NgxMatTimepicker24HoursFaceComponent,
NgxMatTimepicker12HoursFaceComponent,
NgxMatTimepickerMinutesFaceComponent,
], template: "<ng-template #cancelBtnDefault>\n <button mat-button [color]=\"color()\">CANCEL</button>\n</ng-template>\n\n<ng-template #confirmBtnDefault>\n <button mat-button [color]=\"color()\">OK</button>\n</ng-template>\n\n<div mat-dialog-content>\n <ngx-mat-timepicker-content\n [appendToInput]=\"data.appendToInput\"\n [inputElement]=\"data.inputElement\"\n >\n <div class=\"timepicker\" [class]=\"data.timepickerClass\">\n <div\n [class.is-editable]=\"data.enableKeyboardInput\"\n class=\"timepicker-header\"\n >\n <ngx-mat-timepicker-dial\n [color]=\"color()\"\n [format]=\"data.format\"\n [hour]=\"selectedHour()?.time\"\n [minute]=\"selectedMinute()?.time\"\n [period]=\"selectedPeriod()\"\n [activeTimeUnit]=\"activeTimeUnit\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [isEditable]=\"data.enableKeyboardInput\"\n [editableHintTmpl]=\"data.editableHintTmpl\"\n [minutesGap]=\"data.minutesGap\"\n [hoursOnly]=\"data.hoursOnly\"\n (periodChanged)=\"changePeriod($event)\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (hourChanged)=\"onHourChange($event)\"\n (minuteChanged)=\"onMinuteChange($event)\"\n />\n </div>\n <div class=\"timepicker-body\">\n @switch (activeTimeUnit) {\n @case (timeUnit.HOUR) {\n <div>\n @if (data.format === 24) {\n <ngx-mat-timepicker-24-hours-face\n [color]=\"color()\"\n [selectedHour]=\"selectedHour()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n (hourChange)=\"onHourChange($event)\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n } @else {\n <ngx-mat-timepicker-12-hours-face\n [color]=\"color()\"\n [selectedHour]=\"selectedHour()\"\n [period]=\"selectedPeriod()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n (hourChange)=\"onHourChange($event)\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n }\n </div>\n }\n @case (timeUnit.MINUTE) {\n <ngx-mat-timepicker-minutes-face\n [color]=\"color()\"\n [selectedMinute]=\"selectedMinute()\"\n [selectedHour]=\"selectedHour()?.time\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n [period]=\"selectedPeriod()\"\n [minutesGap]=\"data.minutesGap\"\n (minuteChange)=\"onMinuteChange($event)\"\n />\n }\n }\n </div>\n </div>\n </ngx-mat-timepicker-content>\n</div>\n<div mat-dialog-actions align=\"end\">\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"close()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.cancelBtnTmpl ? data.cancelBtnTmpl : cancelBtnDefault\n \"\n />\n </div>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"setTime()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.confirmBtnTmpl ? data.confirmBtnTmpl : confirmBtnDefault\n \"\n />\n </div>\n</div>\n", styles: [":host{display:block;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color);box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow);border-radius:var(--mat-datepicker-calendar-container-shape)}[mat-dialog-content]{max-height:85vh}.timepicker{display:flex;flex-direction:column;gap:2.25rem}.timepicker-header{display:flex;justify-content:center;align-items:center}.timepicker-header.is-editable{height:auto}.timepicker-body{margin:auto}\n"] }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }, { type: i1.MatDialogRef }, { type: NgxMatTimepickerService }, { type: NgxMatTimepickerEventService }, { type: NgxMatTimepickerLocaleService }] });
class NgxMatTimepickerStandaloneComponent extends NgxMatTimepickerBaseDirective {
constructor(data, timepickerSrv, eventSrv, timepickerLocaleSrv) {
super(timepickerSrv, eventSrv, timepickerLocaleSrv, data);
this.data = data;
}
close() {
this.data.timepickerBaseRef.close();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerStandaloneComponent, deps: [{ token: NGX_MAT_TIMEPICKER_CONFIG }, { token: NgxMatTimepickerService }, { token: NgxMatTimepickerEventService }, { token: NgxMatTimepickerLocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerStandaloneComponent, isStandalone: true, selector: "ngx-mat-timepicker-standalone", host: { classAttribute: "mat-app-background" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cancelBtnDefault>\n <button mat-button [color]=\"color()\">CANCEL</button>\n</ng-template>\n\n<ng-template #confirmBtnDefault>\n <button mat-button [color]=\"color()\">OK</button>\n</ng-template>\n\n<div cdkTrapFocus>\n <ngx-mat-timepicker-content\n [appendToInput]=\"data.appendToInput\"\n [inputElement]=\"data.inputElement\"\n >\n <div class=\"timepicker\" [class]=\"data.timepickerClass\">\n <div\n [class.is-editable]=\"data.enableKeyboardInput\"\n class=\"timepicker-header\"\n >\n <ngx-mat-timepicker-dial\n [color]=\"color()\"\n [format]=\"data.format\"\n [hour]=\"selectedHour()?.time\"\n [minute]=\"selectedMinute()?.time\"\n [period]=\"selectedPeriod()\"\n [activeTimeUnit]=\"activeTimeUnit\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [isEditable]=\"data.enableKeyboardInput\"\n [editableHintTmpl]=\"data.editableHintTmpl\"\n [minutesGap]=\"data.minutesGap\"\n [hoursOnly]=\"data.hoursOnly\"\n (periodChanged)=\"changePeriod($event)\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (hourChanged)=\"onHourChange($event)\"\n (minuteChanged)=\"onMinuteChange($event)\"\n />\n </div>\n <div class=\"timepicker__main-content\">\n <div class=\"timepicker__body\">\n @switch (activeTimeUnit) {\n @case (timeUnit.HOUR) {\n <div>\n @if (data.format === 24) {\n <ngx-mat-timepicker-24-hours-face\n [color]=\"color()\"\n (hourChange)=\"onHourChange($event)\"\n [selectedHour]=\"selectedHour()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n } @else {\n <ngx-mat-timepicker-12-hours-face\n [color]=\"color()\"\n (hourChange)=\"onHourChange($event)\"\n [selectedHour]=\"selectedHour()\"\n [period]=\"selectedPeriod()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n }\n </div>\n }\n @case (timeUnit.MINUTE) {\n <ngx-mat-timepicker-minutes-face\n [color]=\"color()\"\n [selectedMinute]=\"selectedMinute()\"\n [selectedHour]=\"selectedHour()?.time\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n [period]=\"selectedPeriod()\"\n [minutesGap]=\"data.minutesGap\"\n (minuteChange)=\"onMinuteChange($event)\"\n />\n }\n }\n </div>\n </div>\n </div>\n </ngx-mat-timepicker-content>\n\n <div class=\"ngx-mat-timepicker-standalone-actions\">\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"close()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.cancelBtnTmpl ? data.cancelBtnTmpl : cancelBtnDefault\n \"\n />\n </div>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"setTime()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.confirmBtnTmpl ? data.confirmBtnTmpl : confirmBtnDefault\n \"\n />\n </div>\n </div>\n</div>\n", styles: [":host{display:block;overflow:hidden;padding:1.5rem;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color);box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow);border-radius:var(--mat-datepicker-calendar-container-shape)}.timepicker{display:flex;flex-direction:column;gap:2.25rem}ngx-mat-timepicker-content{display:block}ngx-mat-timepicker-content .timepicker-header{display:flex;justify-content:center;align-items:center}ngx-mat-timepicker-content .timepicker-header.is-editable{height:auto}ngx-mat-timepicker-content .clock-face{margin:1rem}.ngx-mat-timepicker-standalone-actions{display:flex;flex-direction:row;justify-content:flex-end;padding-top:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: NgxMatTimepickerDialComponent, selector: "ngx-mat-timepicker-dial", inputs: ["color", "editableHintTmpl", "format", "hour", "minute", "minutesGap", "period", "activeTimeUnit", "hoursOnly", "isEditable", "maxTime", "minTime"], outputs: ["hourChanged", "minuteChanged", "periodChanged", "timeUnitChanged"] }, { kind: "component", type: NgxMatTimepickerContentComponent, selector: "ngx-mat-timepicker-content", inputs: ["appendToInput", "inputElement"] }, { kind: "component", type: NgxMatTimepicker24HoursFaceComponent, selector: "ngx-mat-timepicker-24-hours-face" }, { kind: "component", type: NgxMatTimepicker12HoursFaceComponent, selector: "ngx-mat-timepicker-12-hours-face", inputs: ["period"] }, { kind: "component", type: NgxMatTimepickerMinutesFaceComponent, selector: "ngx-mat-timepicker-minutes-face", inputs: ["color", "format", "maxTime", "minTime", "minutesGap", "period", "selectedHour", "selectedMinute"], outputs: ["minuteChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerStandaloneComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-standalone', host: {
class: 'mat-app-background',
}, imports: [
NgTemplateOutlet,
A11yModule,
MatButton,
NgxMatTimepickerDialComponent,
NgxMatTimepickerContentComponent,
NgxMatTimepicker24HoursFaceComponent,
NgxMatTimepicker12HoursFaceComponent,
NgxMatTimepickerMinutesFaceComponent,
], template: "<ng-template #cancelBtnDefault>\n <button mat-button [color]=\"color()\">CANCEL</button>\n</ng-template>\n\n<ng-template #confirmBtnDefault>\n <button mat-button [color]=\"color()\">OK</button>\n</ng-template>\n\n<div cdkTrapFocus>\n <ngx-mat-timepicker-content\n [appendToInput]=\"data.appendToInput\"\n [inputElement]=\"data.inputElement\"\n >\n <div class=\"timepicker\" [class]=\"data.timepickerClass\">\n <div\n [class.is-editable]=\"data.enableKeyboardInput\"\n class=\"timepicker-header\"\n >\n <ngx-mat-timepicker-dial\n [color]=\"color()\"\n [format]=\"data.format\"\n [hour]=\"selectedHour()?.time\"\n [minute]=\"selectedMinute()?.time\"\n [period]=\"selectedPeriod()\"\n [activeTimeUnit]=\"activeTimeUnit\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [isEditable]=\"data.enableKeyboardInput\"\n [editableHintTmpl]=\"data.editableHintTmpl\"\n [minutesGap]=\"data.minutesGap\"\n [hoursOnly]=\"data.hoursOnly\"\n (periodChanged)=\"changePeriod($event)\"\n (timeUnitChanged)=\"changeTimeUnit($event)\"\n (hourChanged)=\"onHourChange($event)\"\n (minuteChanged)=\"onMinuteChange($event)\"\n />\n </div>\n <div class=\"timepicker__main-content\">\n <div class=\"timepicker__body\">\n @switch (activeTimeUnit) {\n @case (timeUnit.HOUR) {\n <div>\n @if (data.format === 24) {\n <ngx-mat-timepicker-24-hours-face\n [color]=\"color()\"\n (hourChange)=\"onHourChange($event)\"\n [selectedHour]=\"selectedHour()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n } @else {\n <ngx-mat-timepicker-12-hours-face\n [color]=\"color()\"\n (hourChange)=\"onHourChange($event)\"\n [selectedHour]=\"selectedHour()\"\n [period]=\"selectedPeriod()\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n (hourSelected)=\"onHourSelected($event)\"\n />\n }\n </div>\n }\n @case (timeUnit.MINUTE) {\n <ngx-mat-timepicker-minutes-face\n [color]=\"color()\"\n [selectedMinute]=\"selectedMinute()\"\n [selectedHour]=\"selectedHour()?.time\"\n [minTime]=\"data.minTime\"\n [maxTime]=\"data.maxTime\"\n [format]=\"data.format\"\n [period]=\"selectedPeriod()\"\n [minutesGap]=\"data.minutesGap\"\n (minuteChange)=\"onMinuteChange($event)\"\n />\n }\n }\n </div>\n </div>\n </div>\n </ngx-mat-timepicker-content>\n\n <div class=\"ngx-mat-timepicker-standalone-actions\">\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"close()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.cancelBtnTmpl ? data.cancelBtnTmpl : cancelBtnDefault\n \"\n />\n </div>\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div (click)=\"setTime()\">\n <ng-container\n *ngTemplateOutlet=\"\n data.confirmBtnTmpl ? data.confirmBtnTmpl : confirmBtnDefault\n \"\n />\n </div>\n </div>\n</div>\n", styles: [":host{display:block;overflow:hidden;padding:1.5rem;background-color:var(--mat-datepicker-calendar-container-background-color);color:var(--mat-datepicker-calendar-container-text-color);box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow);border-radius:var(--mat-datepicker-calendar-container-shape)}.timepicker{display:flex;flex-direction:column;gap:2.25rem}ngx-mat-timepicker-content{display:block}ngx-mat-timepicker-content .timepicker-header{display:flex;justify-content:center;align-items:center}ngx-mat-timepicker-content .timepicker-header.is-editable{height:auto}ngx-mat-timepicker-content .clock-face{margin:1rem}.ngx-mat-timepicker-standalone-actions{display:flex;flex-direction:row;justify-content:flex-end;padding-top:1.5rem}\n"] }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [NGX_MAT_TIMEPICKER_CONFIG]
}] }, { type: NgxMatTimepickerService }, { type: NgxMatTimepickerEventService }, { type: NgxMatTimepickerLocaleService }] });
let config;
class NgxMatTimepickerComponent {
constructor() {
this._dialog = inject(MatDialog);
this.appendToInput = false;
this.color = input('primary');
this.hoursOnly = false;
this.isEsc = true;
this.opened = output();
this.closed = output();
this.timeSet = output();
this.timeChanged = output();
this.hourSelected = output();
this.id = `ngx_mat_timepicker_${++NgxMatTimepickerComponent.nextId}`;
this.overlayPositions = [
{
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top',
offsetY: 0,
},
{
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetY: 0,
},
];
this.showPicker = false;
this.timeUpdated$ = new BehaviorSubject(undefined); // used in the dialog, check if a better approach can be used
this._format = 12;
}
static { this.nextId = 0; }
get disabled() {
return this._timepickerInput?.disabled;
}
set format(value) {
this._format = NgxMatTimepickerAdapter.isTwentyFour(value) ? 24 : 12;
}
get format() {
return this._timepickerInput?.format ?? this._format;
}
get inputElement() {
return this._timepickerInput?.element;
}
get maxTime() {
return this._timepickerInput
? this._timepickerInput.max
: this.max;
}
get minTime() {
return this._timepickerInput
? this._timepickerInput.min
: this.min;
}
set minutesGap(gap) {
if (gap == null) {
return;
}
gap = Math.floor(gap);
this._minutesGap = gap <= 59 ? gap : 1;
}
get minutesGap() {
return this._minutesGap;
}
get overlayOrigin() {
return this._timepickerInput
? this._timepickerInput.cdkOverlayOrigin
: undefined;
}
get time() {
return this._timepickerInput?.value;
}
close() {
if (this.appendToInput) {
this._overlayRef?.dispose();
}
else {
this._dialogRef?.close();
}
this.inputElement.focus(); // Fix ExpressionHasChangedAfterCheck error on overlay destroy
this.showPicker = false;
this.closed.emit();
}
open() {
// Set data to be injected
config = {
timepickerBaseRef: this,
time: this.time,
defaultTime: this.defaultTime,
maxTime: this.maxTime,
minTime: this.minTime,
format: this.format,
minutesGap: this.minutesGap,
disableAnimation: this.disableAnimation,
cancelBtnTmpl: this.cancelBtnTmpl,
confirmBtnTmpl: this.confirmBtnTmpl,
editableHintTmpl: this.editableHintTmpl,
disabled: this.disabled,
enableKeyboardInput: this.enableKeyboardInput,
preventOverlayClick: this.preventOverlayClick,
appendToInput: this.appendToInput,
hoursOnly: this.hoursOnly,
timepickerClass: this.timepickerClass,
inputElement: this.inputElement,
color: this.color(),
};
if (this.appendToInput) {
this.showPicker = true;
}
else {
this._dialogRef = this._dialog.open(NgxMatTimepickerDialogComponent, {
panelClass: 'ngx-mat-timepicker-dialog',
data: {
...config,
},
});
this._dialogRef.afterClosed().subscribe(() => {
this.closed.emit();
});
}
this.opened.emit();
}
/***
* Register an input with this timepicker.
* input - The timepicker input to register with this timepicker
*/
registerInput(input) {
if (this._timepickerInput) {
console.warn('Input for this timepicker was already set', input.element);
throw Error('A Timepicker can only be associated with a single input.');
}
this._timepickerInput = input;
}
unregisterInput() {
this._timepickerInput = undefined;
}
updateTime(time) {
this.timeUpdated$.next(time);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: NgxMatTimepickerComponent, isStandalone: true, selector: "ngx-mat-timepicker", inputs: { appendToInput: { classPropertyName: "appendToInput", publicName: "appendToInput", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, enableKeyboardInput: { classPropertyName: "enableKeyboardInput", publicName: "enableKeyboardInput", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, minutesGap: { classPropertyName: "minutesGap", publicName: "minutesGap", isSignal: false, isRequired: false, transformFunction: null }, cancelBtnTmpl: { classPropertyName: "cancelBtnTmpl", publicName: "cancelBtnTmpl", isSignal: false, isRequired: false, transformFunction: null }, confirmBtnTmpl: { classPropertyName: "confirmBtnTmpl", publicName: "confirmBtnTmpl", isSignal: false, isRequired: false, transformFunction: null }, editableHintTmpl: { classPropertyName: "editableHintTmpl", publicName: "editableHintTmpl", isSignal: false, isRequired: false, transformFunction: null }, defaultTime: { classPropertyName: "defaultTime", publicName: "defaultTime", isSignal: false, isRequired: false, transformFunction: null }, disableAnimation: { classPropertyName: "disableAnimation", publicName: "disableAnimation", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventOverlayClick: { classPropertyName: "preventOverlayClick", publicName: "preventOverlayClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hoursOnly: { classPropertyName: "hoursOnly", publicName: "hoursOnly", isSignal: false, isRequired: false, transformFunction: null }, isEsc: { classPropertyName: "isEsc", publicName: "isEsc", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, timepickerClass: { classPropertyName: "timepickerClass", publicName: "timepickerClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", timeSet: "timeSet", timeChanged: "timeChanged", hourSelected: "hourSelected" }, host: { properties: { "id": "this.id" } }, providers: [
{
provide: NGX_MAT_TIMEPICKER_CONFIG,
useFactory() {
return config;
},
},
], ngImport: i0, template: `
<ng-template
cdkConnectedOverlay
cdkConnectedOverlayHasBackdrop
cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
[cdkConnectedOverlayOpen]="showPicker"
[cdkConnectedOverlayOrigin]="overlayOrigin"
[cdkConnectedOverlayPositions]="overlayPositions"
(backdropClick)="close()"
>
<ngx-mat-timepicker-standalone />
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: NgxMatTimepickerStandaloneComponent, selector: "ngx-mat-timepicker-standalone" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-mat-timepicker',
template: `
<ng-template
cdkConnectedOverlay
cdkConnectedOverlayHasBackdrop
cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
[cdkConnectedOverlayOpen]="showPicker"
[cdkConnectedOverlayOrigin]="overlayOrigin"
[cdkConnectedOverlayPositions]="overlayPositions"
(backdropClick)="close()"
>
<ngx-mat-timepicker-standalone />
</ng-template>
`,
providers: [
{
provide: NGX_MAT_TIMEPICKER_CONFIG,
useFactory() {
return config;
},
},
],
imports: [CdkConnectedOverlay, NgxMatTimepickerStandaloneComponent]
}]
}], propDecorators: { appendToInput: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], enableKeyboardInput: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], format: [{
type: Input
}], minutesGap: [{
type: Input
}], cancelBtnTmpl: [{
type: Input
}], confirmBtnTmpl: [{
type: Input
}], editableHintTmpl: [{
type: Input
}], defaultTime: [{
type: Input
}], disableAnimation: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], preventOverlayClick: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], hoursOnly: [{
type: Input
}], isEsc: [{
type: Input
}], max: [{
type: Input
}], min: [{
type: Input
}], timepickerClass: [{
type: Input
}], id: [{
type: HostBinding,
args: ['id']
}] } });
/* To override a default toggle icon */
class NgxMatTimepickerToggleIconDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: NgxMatTimepickerToggleIconDirective, isStandalone: true, selector: "[ngxMatTimepickerToggleIcon]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerToggleIconDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxMatTimepickerToggleIcon]',
standalone: true,
}]
}] });
class NgxMatTimepickerToggleComponent {
set disabled(value) {
this._disabled = value;
}
get disabled() {
return this._disabled === undefined
? this.timepicker?.disabled
: this._disabled;
}
open(event) {
if (this.timepicker) {
this.timepicker.open();
event.stopPropagation();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerToggleComponent, isStandalone: true, selector: "ngx-mat-timepicker-toggle", inputs: { disabled: "disabled", timepicker: ["for", "timepicker"] }, queries: [{ propertyName: "customIcon", first: true, predicate: NgxMatTimepickerToggleIconDirective, descendants: true, static: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"ngx-mat-timepicker-toggle mat-elevation-z0\"\n mat-icon-button\n [disabled]=\"disabled\"\n (click)=\"open($event)\"\n>\n @if (!customIcon) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n class=\"ngx-mat-timepicker-toggle-default-icon\"\n >\n <path\n d=\"M12 2C6.489 2 2 6.489 2 12s4.489 10 10 10 10-4.489 10-10S17.511 2 12 2zm0 2c4.43 0 8 3.57 8 8s-3.57 8-8 8-8-3.57-8-8 3.57-8 8-8zm-1 2v6.414l4.293 4.293 1.414-1.414L13 11.586V6h-2z\"\n />\n </svg>\n }\n\n <ng-content select=\"[ngxMatTimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [":host{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-toggle', imports: [MatIconButton], template: "<button\n type=\"button\"\n class=\"ngx-mat-timepicker-toggle mat-elevation-z0\"\n mat-icon-button\n [disabled]=\"disabled\"\n (click)=\"open($event)\"\n>\n @if (!customIcon) {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n class=\"ngx-mat-timepicker-toggle-default-icon\"\n >\n <path\n d=\"M12 2C6.489 2 2 6.489 2 12s4.489 10 10 10 10-4.489 10-10S17.511 2 12 2zm0 2c4.43 0 8 3.57 8 8s-3.57 8-8 8-8-3.57-8-8 3.57-8 8-8zm-1 2v6.414l4.293 4.293 1.414-1.414L13 11.586V6h-2z\"\n />\n </svg>\n }\n\n <ng-content select=\"[ngxMatTimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [":host{cursor:pointer}\n"] }]
}], propDecorators: { disabled: [{
type: Input
}], customIcon: [{
type: ContentChild,
args: [NgxMatTimepickerToggleIconDirective, { static: true }]
}], timepicker: [{
type: Input,
args: ['for']
}] } });
function concatTime(currentTime, nextTime) {
const isNumber = /\d/.test(nextTime);
if (isNumber) {
const time = currentTime + nextTime;
return +time;
}
return undefined;
}
class NgxMatTimepickerControlComponent {
static { this.nextId = 0; }
constructor(_timeParser) {
this._timeParser = _timeParser;
this.color = input('primary');
this.floatLabel = input('auto');
this.id = NgxMatTimepickerControlComponent.nextId++;
this.timeChanged = output();
}
changeTime(event) {
event.stopPropagation();
const char = event.data;
const time = concatTime(String(this.time), char);
this._changeTimeIfValid(time);
}
decrease() {
if (!this.disabled) {
let previousTime = +this.time - 1;
if (previousTime < this.min) {
previousTime = this.max;
}
if (this._isSelectedTimeDisabled(previousTime)) {
previousTime = this._getAvailableTime(previousTime, this._getPrevAvailableTime.bind(this));
}
if (previousTime !== this.time) {
this.timeChanged.emit(previousTime);
}
}
}
increase() {
if (!this.disabled) {
let nextTime = +this.time + 1;
if (nextTime > this.max) {
nextTime = this.min;
}
if (this._isSelectedTimeDisabled(nextTime)) {
nextTime = this._getAvailableTime(nextTime, this._getNextAvailableTime.bind(this));
}
if (nextTime !== this.time) {
this.timeChanged.emit(nextTime);
}
}
}
ngOnChanges(changes) {
if (changes['timeList'] && this.time != null) {
if (this._isSelectedTimeDisabled(this.time)) {
this._setAvailableTime();
}
}
}
onBlur() {
this.isFocused = false;
if (this._previousTime !== this.time) {
this._changeTimeIfValid(+this.time);
}
}
onFocus() {
this.isFocused = true;
this._previousTime = this.time;
}
onKeydown(event) {
event.stopPropagation();
if (!isDigit(event)) {
event.preventDefault();
}
switch (event.key) {
case 'ArrowUp':
this.increase();
break;
case 'ArrowDown':
this.decrease();
break;
}
if (this.preventTyping && event.key !== 'Tab') {
event.preventDefault();
}
}
onModelChange(value) {
this.time = +this._timeParser.transform(value, this.timeUnit);
}
_changeTimeIfValid(value) {
if (!isNaN(value)) {
this.time = value;
if (this.time > this.max) {
const timeString = String(value);
this.time = +timeString[timeString.length - 1];
}
if (this.time < this.min) {
this.time = this.min;
}
this.timeChanged.emit(this.time);
}
}
_getAvailableTime(currentTime, fn) {
const currentTimeIndex = this.timeList.findIndex((time) => time.time === currentTime);
const availableTime = fn(currentTimeIndex);
return availableTime != null ? availableTime : this.time;
}
_getNextAvailableTime(index) {
const timeCollection = this.timeList;
const maxValue = timeCollection.length;
for (let i = index + 1; i < maxValue; i++) {
const time = timeCollection[i];
if (!time.disabled) {
return time.time;
}
}
return undefined;
}
_getPrevAvailableTime(index) {
for (let i = index; i >= 0; i--) {
const time = this.timeList[i];
if (!time.disabled) {
return time.time;
}
}
return undefined;
}
_isSelectedTimeDisabled(time) {
return this.timeList.find((faceTime) => faceTime.time === time).disabled;
}
_setAvailableTime() {
this.time = this.timeList.find((t) => !t.disabled).time;
this.timeChanged.emit(this.time);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerControlComponent, deps: [{ token: NgxMatTimepickerParserPipe }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: NgxMatTimepickerControlComponent, isStandalone: true, selector: "ngx-mat-timepicker-time-control", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, preventTyping: { classPropertyName: "preventTyping", publicName: "preventTyping", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, time: { classPropertyName: "time", publicName: "time", isSignal: false, isRequired: false, transformFunction: null }, timeList: { classPropertyName: "timeList", publicName: "timeList", isSignal: false, isRequired: false, transformFunction: null }, timeUnit: { classPropertyName: "timeUnit", publicName: "timeUnit", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { timeChanged: "timeChanged" }, providers: [NgxMatTimepickerParserPipe], usesOnChanges: true, ngImport: i0, template: "<mat-form-field\n class=\"ngx-mat-timepicker-control\"\n [color]=\"color()\"\n [floatLabel]=\"floatLabel()\"\n [class.active]=\"isFocused\"\n>\n <input\n id=\"ngx_mat_timepicker_field_{{ id }}\"\n name=\"ngx_mat_timepicker_field_{{ id }}\"\n matInput\n maxlength=\"2\"\n [ngModel]=\"\n time | ngxMatTimepickerParser: timeUnit | timeLocalizer: timeUnit : true\n \"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onModelChange($event)\"\n (beforeinput)=\"changeTime($event)\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <div class=\"arrows-wrap\" matSuffix>\n <button class=\"arrow\" role=\"button\" (click)=\"increase()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n </svg>\n </button>\n <button class=\"arrow\" role=\"button\" (click)=\"decrease()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\" />\n </svg>\n </button>\n </div>\n</mat-form-field>\n", styles: [".ngx-mat-timepicker-control{width:60px;min-width:60px}.ngx-mat-timepicker-control .arrows-wrap{position:relative;z-index:1}.ngx-mat-timepicker-control .arrows-wrap>.arrow{height:15px;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;background-color:transparent;transition:opacity .2s;opacity:.5}.ngx-mat-timepicker-control .arrows-wrap>.arrow:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: NgxMatTimepickerParserPipe, name: "ngxMatTimepickerParser" }, { kind: "pipe", type: NgxMatTimepickerTimeLocalizerPipe, name: "timeLocalizer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerControlComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-time-control', changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgxMatTimepickerParserPipe], imports: [
FormsModule,
MatFormField,
MatLabel,
MatSuffix,
MatInput,
NgxMatTimepickerParserPipe,
NgxMatTimepickerTimeLocalizerPipe,
], template: "<mat-form-field\n class=\"ngx-mat-timepicker-control\"\n [color]=\"color()\"\n [floatLabel]=\"floatLabel()\"\n [class.active]=\"isFocused\"\n>\n <input\n id=\"ngx_mat_timepicker_field_{{ id }}\"\n name=\"ngx_mat_timepicker_field_{{ id }}\"\n matInput\n maxlength=\"2\"\n [ngModel]=\"\n time | ngxMatTimepickerParser: timeUnit | timeLocalizer: timeUnit : true\n \"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onModelChange($event)\"\n (beforeinput)=\"changeTime($event)\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <div class=\"arrows-wrap\" matSuffix>\n <button class=\"arrow\" role=\"button\" (click)=\"increase()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n </svg>\n </button>\n <button class=\"arrow\" role=\"button\" (click)=\"decrease()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\" />\n </svg>\n </button>\n </div>\n</mat-form-field>\n", styles: [".ngx-mat-timepicker-control{width:60px;min-width:60px}.ngx-mat-timepicker-control .arrows-wrap{position:relative;z-index:1}.ngx-mat-timepicker-control .arrows-wrap>.arrow{height:15px;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;background-color:transparent;transition:opacity .2s;opacity:.5}.ngx-mat-timepicker-control .arrows-wrap>.arrow:hover{opacity:1}\n"] }]
}], ctorParameters: () => [{ type: NgxMatTimepickerParserPipe }], propDecorators: { disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], max: [{
type: Input
}], min: [{
type: Input
}], placeholder: [{
type: Input
}], preventTyping: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], time: [{
type: Input
}], timeList: [{
type: Input
}], timeUnit: [{
type: Input
}] } });
class NgxMatTimepickerFieldComponent {
get defaultTime() {
return this._defaultTime;
}
set defaultTime(val) {
this._defaultTime = val;
this._isDefaultTime = !!val;
}
get format() {
return this._format;
}
set format(value) {
if (NgxMatTimepickerAdapter.isTwentyFour(value)) {
this._format = 24;
this.minHour = 0;
this.maxHour = 23;
}
else {
this._format = 12;
this.minHour = 1;
this.maxHour = 12;
}
this.hoursList = NgxMatTimepickerUtils.getHours(this._format);
const isDynamicallyChanged = value && this._previousFormat && this._previousFormat !== this._format;
if (isDynamicallyChanged) {
this._updateTime(this.timepickerTime);
}
this._previousFormat = this._format;
}
get max() {
return this._max;
}
set max(value) {
if (typeof value === 'string') {
this._max = NgxMatTimepickerAdapter.parseTime(value, {
locale: this._locale,
format: this.format,
});
return;
}
this._max = value;
}
get min() {
return this._min;
}
set min(value) {
if (typeof value === 'string') {
this._min = NgxMatTimepickerAdapter.parseTime(value, {
locale: this._locale,
format: this.format,
});
return;
}
this._min = value;
}
get _locale() {
return this._timepickerLocaleSrv.locale;
}
constructor(_timepickerService, _timepickerLocaleSrv) {
this._timepickerService = _timepickerService;
this._timepickerLocaleSrv = _timepickerLocaleSrv;
this.color = input('primary');
this.floatLabel = input('auto');
this.hour = signal(undefined);
this.hour$ = toObservable(this.hour);
this.maxHour = 12;
this.minHour = 1;
this.minute = signal(undefined);
this.minute$ = toObservable(this.minute);
this.period = NgxMatTimepickerPeriods.AM;
this.periods = [
NgxMatTimepickerPeriods.AM,
NgxMatTimepickerPeriods.PM,
];
this.timeChanged = output();
this.timeUnit = NgxMatTimepickerUnits;
this._format = 12;
this._isFirstTimeChange = true;
this._subsCtrl$ = new Subject();
this._onChange = () => {
// ignore
};
this._onTouched = () => {
// ignore
};
}
changeHour(hour) {
this._timepickerService.setHour(this.hoursList.find((h) => h.time === hour));
this._changeTime();
}
changeMinute(minute) {
this._timepickerService.setMinute(this.minutesList.find((m) => m.time === minute));
this._changeTime();
}
changePeriod(value) {
this._timepickerService.setPeriod(value);
this._changeTime();
}
ngOnDestroy() {
this._subsCtrl$.next();
this._subsCtrl$.complete();
}
ngOnInit() {
this._initTime(this.defaultTime);
this.hoursList = NgxMatTimepickerUtils.getHours(this._format);
this.minutesList = NgxMatTimepickerUtils.getMinutes();
this.isTimeRangeSet = !!(this.min || this.max);
this._timepickerService.hour$
.pipe(tap((clockTime) => (this._selectedHour = clockTime?.time)), map(this._changeDefaultTimeValue.bind(this)), tap(() => this.isTimeRangeSet && this._updateAvailableMinutes()))
.subscribe({
next: (v) => this.hour.set(v),
});
this._timepickerService.minute$
.pipe(map(this._changeDefaultTimeValue.bind(this)), tap(() => (this._isFirstTimeChange = false)))
.subscribe({
next: (v) => this.minute.set(v),
});
if (this.format === 12) {
this._timepickerService.period$
.pipe(distinctUntilChanged(), tap((period) => (this.period = period)), tap((period) => (this.isChangePeriodDisabled = this._isPeriodDisabled(period))), takeUntil(this._subsCtrl$))
.subscribe(() => this.isTimeRangeSet && this._updateAvailableTime());
}
}
onTimeSet(time) {
this._updateTime(time);
this._emitLocalTimeChange(time);
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
writeValue(val) {
if (val) {
this._initTime(val);
}
else {
this._resetTime();
}
}
_changeDefaultTimeValue(clockFaceTime) {
if (!this._isDefaultTime && this._isFirstTimeChange) {
return { ...clockFaceTime, time: null };
}
return clockFaceTime;
}
_changeTime() {
if (!isNaN(this.hour()?.time) && !isNaN(this.minute()?.time)) {
const time = this._timepickerService.getFullTime(this.format);
this.timepickerTime = time;
this._emitLocalTimeChange(time);
}
}
_emitLocalTimeChange(time) {
const localTime = NgxMatTimepickerAdapter.toLocaleTimeString(time, {
format: this.format,
locale: this._locale,
});
this._onChange(localTime);
this._onTouched(localTime);
this.timeChanged.emit(localTime);
}
_initTime(time) {
const isDefaultTimeAvailable = NgxMatTimepickerAdapter.isTimeAvailable(time, this.min, this.max, 'minute', null, this.format);
if (!isDefaultTimeAvailable) {
if (this.min) {
this._updateTime(NgxMatTimepickerAdapter.fromDateTimeToString(this.min, this.format));
return;
}
if (this.max) {
this._updateTime(NgxMatTimepickerAdapter.fromDateTimeToString(this.max, this.format));
return;
}
}
this._updateTime(time);
}
_isPeriodDisabled(period) {
return NgxMatTimepickerUtils.disableHours(NgxMatTimepickerUtils.getHours(12), {
min: this.min,
max: this.max,
format: 12,
period: period === NgxMatTimepickerPeriods.AM
? NgxMatTimepickerPeriods.PM
: NgxMatTimepickerPeriods.AM,
}).every((time) => time.disabled);
}
_resetTime() {
this._timepickerService.setHour({ angle: 0, time: null });
this._timepickerService.setMinute({ angle: 0, time: null });
}
_updateAvailableHours() {
this.hoursList = NgxMatTimepickerUtils.disableHours(this.hoursList, {
min: this.min,
max: this.max,
format: this.format,
period: this.period,
});
}
_updateAvailableMinutes() {
this.minutesList = NgxMatTimepickerUtils.disableMinutes(this.minutesList, this._selectedHour, {
min: this.min,
max: this.max,
format: this.format,
period: this.period,
});
}
_updateAvailableTime() {
this._updateAvailableHours();
if (this._selectedHour) {
this._updateAvailableMinutes();
}
}
_updateTime(time) {
if (time) {
const formattedTime = NgxMatTimepickerAdapter.formatTime(time, {
locale: this._locale,
format: this.format,
});
this._timepickerService.setDefaultTimeIfAvailable(formattedTime, this.min, this.max, this.format);
this.timepickerTime = formattedTime;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerFieldComponent, deps: [{ token: NgxMatTimepickerService }, { token: NgxMatTimepickerLocaleService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgxMatTimepickerFieldComponent, isStandalone: true, selector: "ngx-mat-timepicker-field", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, defaultTime: { classPropertyName: "defaultTime", publicName: "defaultTime", isSignal: false, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, cancelBtnTmpl: { classPropertyName: "cancelBtnTmpl", publicName: "cancelBtnTmpl", isSignal: false, isRequired: false, transformFunction: null }, confirmBtnTmpl: { classPropertyName: "confirmBtnTmpl", publicName: "confirmBtnTmpl", isSignal: false, isRequired: false, transformFunction: null }, controlOnly: { classPropertyName: "controlOnly", publicName: "controlOnly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toggleIcon: { classPropertyName: "toggleIcon", publicName: "toggleIcon", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { timeChanged: "timeChanged" }, providers: [
NgxMatTimepickerService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: NgxMatTimepickerFieldComponent,
multi: true,
},
], ngImport: i0, template: "<div class=\"field-group\" [class.disabled]=\"disabled\">\n <ngx-mat-timepicker-time-control\n class=\"first\"\n [color]=\"color()\"\n [floatLabel]=\"floatLabel()\"\n [placeholder]=\"'HH'\"\n [time]=\"hour()?.time\"\n [min]=\"minHour\"\n [max]=\"maxHour\"\n [timeUnit]=\"timeUnit.HOUR\"\n [disabled]=\"disabled\"\n [timeList]=\"hoursList\"\n [preventTyping]=\"isTimeRangeSet\"\n (timeChanged)=\"changeHour($event)\"\n />\n <div class=\"wrapped-field\">\n <span class=\"separator-colon second\">:</span>\n </div>\n <ngx-mat-timepicker-time-control\n class=\"third\"\n [color]=\"color()\"\n [floatLabel]=\"floatLabel()\"\n [placeholder]=\"'MM'\"\n [time]=\"minute()?.time\"\n [min]=\"0\"\n [max]=\"59\"\n [timeUnit]=\"timeUnit.MINUTE\"\n [disabled]=\"disabled\"\n [timeList]=\"minutesList\"\n [preventTyping]=\"isTimeRangeSet\"\n (timeChanged)=\"changeMinute($event)\"\n />\n @if (format !== 24) {\n <mat-form-field class=\"period-select forth\" [color]=\"color()\">\n <mat-select\n [ngModel]=\"period\"\n [disabled]=\"disabled || isChangePeriodDisabled\"\n (selectionChange)=\"changePeriod($event.value)\"\n >\n @for (option of periods; track option) {\n <mat-option [value]=\"option\">{{ option }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @if (!controlOnly) {\n <div class=\"wrapped-field\">\n <ngx-mat-timepicker-toggle\n class=\"ngx-mat-timepicker__toggle\"\n [for]=\"timepicker\"\n [disabled]=\"disabled\"\n >\n <span ngxMatTimepickerToggleIcon>\n <ng-container *ngTemplateOutlet=\"toggleIcon || defaultIcon\" />\n </span>\n </ngx-mat-timepicker-toggle>\n </div>\n }\n</div>\n\n<ngx-mat-timepicker\n #timepicker\n [color]=\"color()\"\n [min]=\"min\"\n [max]=\"max\"\n [defaultTime]=\"timepickerTime\"\n [format]=\"format\"\n [cancelBtnTmpl]=\"cancelBtnTmpl\"\n [confirmBtnTmpl]=\"confirmBtnTmpl\"\n (timeSet)=\"onTimeSet($event)\"\n/>\n\n<ng-template #defaultIcon>\n <mat-icon>watch_later</mat-icon>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;height:100%}.field-group{display:flex}.wrapped-field{margin-bottom:20px;vertical-align:middle;display:inline-flex;align-items:center}.disabled{background:#00000012;pointer-events:none}.separator-colon{margin-left:5px;margin-right:5px}.period-select{width:60px;min-width:60px;margin-left:8px;text-align:center}.control .first{order:1}.control .second{order:2}.control .third{order:3}.control .forth{order:4}.toggle{order:4;margin-bottom:1.5em;margin-left:4px}.toggle span.mat-button-wrapper{font-size:24px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NgxMatTimepickerControlComponent, selector: "ngx-mat-timepicker-time-control", inputs: ["color", "floatLabel", "disabled", "max", "min", "placeholder", "preventTyping", "time", "timeList", "timeUnit"], outputs: ["timeChanged"] }, { kind: "component", type: NgxMatTimepickerToggleComponent, selector: "ngx-mat-timepicker-toggle", inputs: ["disabled", "for"] }, { kind: "directive", type: NgxMatTimepickerToggleIconDirective, selector: "[ngxMatTimepickerToggleIcon]" }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "editableHintTmpl", "defaultTime", "disableAnimation", "preventOverlayClick", "hoursOnly", "isEsc", "max", "min", "timepickerClass"], outputs: ["opened", "closed", "timeSet", "timeChanged", "hourSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerFieldComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-timepicker-field', providers: [
NgxMatTimepickerService,
{
provide: NG_VALUE_ACCESSOR,
useExisting: NgxMatTimepickerFieldComponent,
multi: true,
},
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgTemplateOutlet,
FormsModule,
MatFormField,
MatSelect,
MatIcon,
MatOption,
NgxMatTimepickerControlComponent,
NgxMatTimepickerToggleComponent,
NgxMatTimepickerToggleIconDirective,
NgxMatTimepickerComponent,
], template: "<div class=\"field-group\" [class.disabled]=\"disabled\">\n <ngx-mat-timepicker-time-control\n class=\"first\"\n [color]=\"color()\"\n [floatLabel]=\"floatLabel()\"\n [placeholder]=\"'HH'\"\n [time]=\"hour()?.time\"\n [min]=\"minHour\"\n [max]=\"maxHour\"\n [timeUnit]=\"timeUnit.HOUR\"\n [disabled]=\"disabled\"\n [timeList]=\"hoursList\"\n [preventTyping]=\"isTimeRangeSet\"\n (timeChanged)=\"changeHour($event)\"\n />\n <div class=\"wrapped-field\">\n <span class=\"separator-colon second\">:</span>\n </div>\n <ngx-mat-timepicker-time-control\n class=\"third\"\n [color]=\"color()\"\n [floatLabel]=\"floatLabel()\"\n [placeholder]=\"'MM'\"\n [time]=\"minute()?.time\"\n [min]=\"0\"\n [max]=\"59\"\n [timeUnit]=\"timeUnit.MINUTE\"\n [disabled]=\"disabled\"\n [timeList]=\"minutesList\"\n [preventTyping]=\"isTimeRangeSet\"\n (timeChanged)=\"changeMinute($event)\"\n />\n @if (format !== 24) {\n <mat-form-field class=\"period-select forth\" [color]=\"color()\">\n <mat-select\n [ngModel]=\"period\"\n [disabled]=\"disabled || isChangePeriodDisabled\"\n (selectionChange)=\"changePeriod($event.value)\"\n >\n @for (option of periods; track option) {\n <mat-option [value]=\"option\">{{ option }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @if (!controlOnly) {\n <div class=\"wrapped-field\">\n <ngx-mat-timepicker-toggle\n class=\"ngx-mat-timepicker__toggle\"\n [for]=\"timepicker\"\n [disabled]=\"disabled\"\n >\n <span ngxMatTimepickerToggleIcon>\n <ng-container *ngTemplateOutlet=\"toggleIcon || defaultIcon\" />\n </span>\n </ngx-mat-timepicker-toggle>\n </div>\n }\n</div>\n\n<ngx-mat-timepicker\n #timepicker\n [color]=\"color()\"\n [min]=\"min\"\n [max]=\"max\"\n [defaultTime]=\"timepickerTime\"\n [format]=\"format\"\n [cancelBtnTmpl]=\"cancelBtnTmpl\"\n [confirmBtnTmpl]=\"confirmBtnTmpl\"\n (timeSet)=\"onTimeSet($event)\"\n/>\n\n<ng-template #defaultIcon>\n <mat-icon>watch_later</mat-icon>\n</ng-template>\n", styles: [":host{display:flex;align-items:center;height:100%}.field-group{display:flex}.wrapped-field{margin-bottom:20px;vertical-align:middle;display:inline-flex;align-items:center}.disabled{background:#00000012;pointer-events:none}.separator-colon{margin-left:5px;margin-right:5px}.period-select{width:60px;min-width:60px;margin-left:8px;text-align:center}.control .first{order:1}.control .second{order:2}.control .third{order:3}.control .forth{order:4}.toggle{order:4;margin-bottom:1.5em;margin-left:4px}.toggle span.mat-button-wrapper{font-size:24px}\n"] }]
}], ctorParameters: () => [{ type: NgxMatTimepickerService }, { type: NgxMatTimepickerLocaleService }], propDecorators: { defaultTime: [{
type: Input
}], format: [{
type: Input
}], max: [{
type: Input
}], min: [{
type: Input
}], cancelBtnTmpl: [{
type: Input
}], confirmBtnTmpl: [{
type: Input
}], controlOnly: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], toggleIcon: [{
type: Input
}] } });
class NgxMatTimepickerDirective {
get element() {
return this._elementRef && this._elementRef.nativeElement;
}
get format() {
return this._format;
}
set format(value) {
this._format = NgxMatTimepickerAdapter.isTwentyFour(+value)
? 24
: 12;
const isDynamicallyChanged = value && this._previousFormat && this._previousFormat !== this._format;
if (isDynamicallyChanged) {
this.value = this._value;
this._timepicker.updateTime(this._value);
}
this._previousFormat = this._format;
}
get max() {
return this._max;
}
set max(value) {
if (typeof value === 'string') {
this._max = NgxMatTimepickerAdapter.parseTime(value, {
locale: this._locale,
format: this.format,
});
return;
}
this._max = value;
}
get min() {
return this._min;
}
set min(value) {
if (typeof value === 'string') {
this._min = NgxMatTimepickerAdapter.parseTime(value, {
locale: this._locale,
format: this.format,
});
return;
}
this._min = value;
}
set timepicker(picker) {
this._registerTimepicker(picker);
}
get value() {
if (!this._value) {
return '';
}
return NgxMatTimepickerAdapter.toLocaleTimeString(this._value, {
format: this.format,
locale: this._locale,
});
}
set value(value) {
if (!value) {
this._value = '';
this._updateInputValue();
return;
}
const time = NgxMatTimepickerAdapter.formatTime(value, {
locale: this._locale,
format: this.format,
});
const isAvailable = NgxMatTimepickerAdapter.isTimeAvailable(time, this._min, this._max, 'minute', this._timepicker.minutesGap, this._format);
if (isAvailable) {
this._value = time;
this._updateInputValue();
return;
}
console.warn("Selected time doesn't match min or max value");
}
set _defaultTime(time) {
this._timepicker.defaultTime = NgxMatTimepickerAdapter.formatTime(time, {
locale: this._locale,
format: this.format,
});
}
get _locale() {
return this._timepickerLocaleSrv.locale;
}
constructor(_elementRef, _timepickerLocaleSrv, _matFormField) {
this._elementRef = _elementRef;
this._timepickerLocaleSrv = _timepickerLocaleSrv;
this._matFormField = _matFormField;
this.cdkOverlayOrigin = new CdkOverlayOrigin(this._matFormField
? this._matFormField.getConnectedOverlayOrigin()
: this._elementRef);
this._format = 12;
this._subsCtrl$ = new Subject();
this._value = '';
this.onTouched = () => {
// ignore
};
this._onChange = () => {
// ignore
};
}
ngOnChanges(changes) {
const vChanges = changes['value'];
if (vChanges && vChanges.currentValue) {
this._defaultTime = vChanges.currentValue;
}
}
ngOnDestroy() {
this._unregisterTimepicker();
this._subsCtrl$.next();
this._subsCtrl$.complete();
}
onClick(event) {
if (!this.disableClick) {
this._timepicker.open();
event.stopPropagation();
}
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
updateValue(e) {
this.value = e.target.value;
this._onChange(this.value);
}
writeValue(value) {
this.value = value;
if (value) {
this._defaultTime = value;
}
}
_registerTimepicker(picker) {
if (picker) {
this._timepicker = picker;
this._timepicker.registerInput(this);
outputToObservable(this._timepicker.timeSet)
.pipe(takeUntil$1(this._subsCtrl$))
.subscribe((time) => {
this.value = time;
this._onChange(this.value);
this.onTouched();
this._defaultTime = this._value;
});
}
else {
throw new Error('NgxMatTimepickerComponent is not defined.' +
' Please make sure you passed the timepicker to ngxMatTimepicker directive');
}
}
_unregisterTimepicker() {
if (this._timepicker) {
this._timepicker.unregisterInput();
}
}
_updateInputValue() {
this._elementRef.nativeElement.value = this.value;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDirective, deps: [{ token: i0.ElementRef }, { token: NgxMatTimepickerLocaleService }, { token: MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.3", type: NgxMatTimepickerDirective, isStandalone: true, selector: "[ngxMatTimepicker]", inputs: { format: "format", max: "max", min: "min", timepicker: ["ngxMatTimepicker", "timepicker"], value: "value", disableClick: ["disableClick", "disableClick", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "blur": "onTouched()", "click": "onClick($event)", "change": "updateValue($event)" }, properties: { "disabled": "disabled", "attr.cdkOverlayOrigin": "this.cdkOverlayOrigin" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: NgxMatTimepickerDirective,
multi: true,
},
], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxMatTimepicker]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: NgxMatTimepickerDirective,
multi: true,
},
],
host: {
'[disabled]': 'disabled',
'(blur)': 'onTouched()',
},
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NgxMatTimepickerLocaleService }, { type: i2$1.MatFormField, decorators: [{
type: Optional
}, {
type: Inject,
args: [MatFormField]
}] }], propDecorators: { format: [{
type: Input
}], max: [{
type: Input
}], min: [{
type: Input
}], timepicker: [{
type: Input,
args: ['ngxMatTimepicker']
}], value: [{
type: Input
}], cdkOverlayOrigin: [{
type: HostBinding,
args: ['attr.cdkOverlayOrigin']
}], disableClick: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], updateValue: [{
type: HostListener,
args: ['change', ['$event']]
}] } });
class NgxMatTimepickerTimeFormatterPipe {
transform(time, timeUnit) {
if (time == null || time === '') {
return time;
}
switch (timeUnit) {
case NgxMatTimepickerUnits.HOUR:
return DateTime.fromObject({ hour: +time }).toFormat('HH');
case NgxMatTimepickerUnits.MINUTE:
return DateTime.fromObject({ minute: +time }).toFormat('mm');
default:
throw new Error('no such time unit');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerTimeFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerTimeFormatterPipe, isStandalone: true, name: "timeFormatter" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerTimeFormatterPipe, decorators: [{
type: Pipe,
args: [{
name: 'timeFormatter',
standalone: true,
}]
}] });
class NgxMatTimepickerModule {
static setLocale(locale) {
return {
ngModule: NgxMatTimepickerModule,
providers: [
{ provide: NGX_MAT_TIMEPICKER_LOCALE, useValue: locale },
{ provide: NGX_MAT_TIMEPICKER_CONFIG, useValue: undefined },
NgxMatTimepickerLocaleService,
],
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerModule, imports: [
// Not really used, but needed to use it as abstract class
NgxMatTimepickerBaseDirective,
NgxMatTimepickerHoursFaceDirective,
//
NgxMatTimepickerActiveHourPipe,
NgxMatTimepickerActiveMinutePipe,
NgxMatTimepickerComponent,
NgxMatTimepickerDialComponent,
NgxMatTimepickerDialControlComponent,
NgxMatTimepickerDialogComponent,
NgxMatTimepickerDirective,
NgxMatTimepickerFaceComponent,
NgxMatTimepickerMinutesFaceComponent,
NgxMatTimepickerPeriodComponent,
NgxMatTimepickerStandaloneComponent,
NgxMatTimepickerToggleComponent,
NgxMatTimepicker12HoursFaceComponent,
NgxMatTimepicker24HoursFaceComponent,
NgxMatTimepickerToggleIconDirective,
NgxMatTimepickerAutofocusDirective,
NgxMatTimepickerMinutesFormatterPipe,
NgxMatTimepickerFieldComponent,
NgxMatTimepickerControlComponent,
NgxMatTimepickerParserPipe,
NgxMatTimepickerContentComponent,
NgxMatTimepickerTimeFormatterPipe,
NgxMatTimepickerTimeLocalizerPipe], exports: [NgxMatTimepickerComponent,
NgxMatTimepickerToggleComponent,
NgxMatTimepickerFieldComponent,
NgxMatTimepickerDirective,
NgxMatTimepickerToggleIconDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerModule, providers: [
NgxMatTimepickerLocaleService,
{
provide: MAT_FAB_DEFAULT_OPTIONS,
useValue: { color: 'void' },
},
], imports: [NgxMatTimepickerComponent,
NgxMatTimepickerDialComponent,
NgxMatTimepickerDialControlComponent,
NgxMatTimepickerDialogComponent,
NgxMatTimepickerFaceComponent,
NgxMatTimepickerMinutesFaceComponent,
NgxMatTimepickerPeriodComponent,
NgxMatTimepickerStandaloneComponent,
NgxMatTimepickerToggleComponent,
NgxMatTimepicker12HoursFaceComponent,
NgxMatTimepicker24HoursFaceComponent,
NgxMatTimepickerFieldComponent,
NgxMatTimepickerControlComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxMatTimepickerModule, decorators: [{
type: NgModule,
args: [{
imports: [
// Not really used, but needed to use it as abstract class
NgxMatTimepickerBaseDirective,
NgxMatTimepickerHoursFaceDirective,
//
NgxMatTimepickerActiveHourPipe,
NgxMatTimepickerActiveMinutePipe,
NgxMatTimepickerComponent,
NgxMatTimepickerDialComponent,
NgxMatTimepickerDialControlComponent,
NgxMatTimepickerDialogComponent,
NgxMatTimepickerDirective,
NgxMatTimepickerFaceComponent,
NgxMatTimepickerMinutesFaceComponent,
NgxMatTimepickerPeriodComponent,
NgxMatTimepickerStandaloneComponent,
NgxMatTimepickerToggleComponent,
NgxMatTimepicker12HoursFaceComponent,
NgxMatTimepicker24HoursFaceComponent,
NgxMatTimepickerToggleIconDirective,
NgxMatTimepickerAutofocusDirective,
NgxMatTimepickerMinutesFormatterPipe,
NgxMatTimepickerFieldComponent,
NgxMatTimepickerControlComponent,
NgxMatTimepickerParserPipe,
NgxMatTimepickerContentComponent,
NgxMatTimepickerTimeFormatterPipe,
NgxMatTimepickerTimeLocalizerPipe,
],
exports: [
NgxMatTimepickerComponent,
NgxMatTimepickerToggleComponent,
NgxMatTimepickerFieldComponent,
NgxMatTimepickerDirective,
NgxMatTimepickerToggleIconDirective,
],
providers: [
NgxMatTimepickerLocaleService,
{
provide: MAT_FAB_DEFAULT_OPTIONS,
useValue: { color: 'void' },
},
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NgxMatTimepickerComponent, NgxMatTimepickerDirective, NgxMatTimepickerFieldComponent, NgxMatTimepickerLocaleService, NgxMatTimepickerModule, NgxMatTimepickerToggleComponent, NgxMatTimepickerToggleIconDirective };
//# sourceMappingURL=alexfriesen-ngx-mat-timepicker.mjs.map