ngx-mat-timepicker/fesm2022/ngx-mat-timepicker.mjs.map

ngx-mat-timepicker is an Angular material 9+ extension to add time pickers!

{"version":3,"file":"ngx-mat-timepicker.mjs","sources":["../../../projects/ngx-mat-timepicker/src/lib/models/ngx-mat-timepicker-format.enum.ts","../../../projects/ngx-mat-timepicker/src/lib/models/ngx-mat-timepicker-periods.enum.ts","../../../projects/ngx-mat-timepicker/src/lib/services/ngx-mat-timepicker-adapter.ts","../../../projects/ngx-mat-timepicker/src/lib/models/ngx-mat-timepicker-units.enum.ts","../../../projects/ngx-mat-timepicker/src/lib/tokens/ngx-mat-timepicker-config.token.ts","../../../projects/ngx-mat-timepicker/src/lib/services/ngx-mat-timepicker.service.ts","../../../projects/ngx-mat-timepicker/src/lib/services/ngx-mat-timepicker-event.service.ts","../../../projects/ngx-mat-timepicker/src/lib/tokens/ngx-mat-timepicker-time-locale.token.ts","../../../projects/ngx-mat-timepicker/src/lib/services/ngx-mat-timepicker-locale.service.ts","../../../projects/ngx-mat-timepicker/src/lib/directives/ngx-mat-timepicker-base.directive.ts","../../../projects/ngx-mat-timepicker/src/lib/utils/ngx-mat-timepicker.utils.ts","../../../projects/ngx-mat-timepicker/src/lib/models/ngx-mat-timepicker-measures.enum.ts","../../../projects/ngx-mat-timepicker/src/lib/pipes/ngx-mat-timepicker-time-localizer.pipe.ts","../../../projects/ngx-mat-timepicker/src/lib/pipes/ngx-mat-timepicker-minutes-formatter.pipe.ts","../../../projects/ngx-mat-timepicker/src/lib/pipes/ngx-mat-timepicker-active-minute.pipe.ts","../../../projects/ngx-mat-timepicker/src/lib/pipes/ngx-mat-timepicker-active-hour.pipe.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-face/ngx-mat-timepicker-face.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-minutes-face/ngx-mat-timepicker-minutes-face.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-minutes-face/ngx-mat-timepicker-minutes-face.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-hours-face/ngx-mat-timepicker-hours-face.directive.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-12-hours-face/ngx-mat-timepicker-12-hours-face.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-12-hours-face/ngx-mat-timepicker-12-hours-face.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-24-hours-face/ngx-mat-timepicker-24-hours-face.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-24-hours-face/ngx-mat-timepicker-24-hours-face.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-period/ngx-mat-timepicker-period.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-period/ngx-mat-timepicker-period.component.html","../../../projects/ngx-mat-timepicker/src/lib/pipes/ngx-mat-timepicker-parser.pipe.ts","../../../projects/ngx-mat-timepicker/src/lib/directives/ngx-mat-timepicker-autofocus.directive.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial-control/ngx-mat-timepicker-dial-control.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dial/ngx-mat-timepicker-dial.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-content/ngx-mat-timepicker-content.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-content/ngx-mat-timepicker-content.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dialog/ngx-mat-timepicker-dialog.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-dialog/ngx-mat-timepicker-dialog.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-standalone/ngx-mat-timepicker-standalone.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-standalone/ngx-mat-timepicker-standalone.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker/ngx-mat-timepicker.component.ts","../../../projects/ngx-mat-timepicker/src/lib/directives/ngx-mat-timepicker-toggle-icon.directive.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-toggle/ngx-mat-timepicker-toggle.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-toggle/ngx-mat-timepicker-toggle.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-control/ngx-mat-timepicker-control.component.html","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-field/ngx-mat-timepicker-field.component.ts","../../../projects/ngx-mat-timepicker/src/lib/components/ngx-mat-timepicker-field/ngx-mat-timepicker-field.component.html","../../../projects/ngx-mat-timepicker/src/lib/directives/ngx-mat-timepicker.directive.ts","../../../projects/ngx-mat-timepicker/src/lib/pipes/ngx-mat-timepicker-time-formatter.pipe.ts","../../../projects/ngx-mat-timepicker/src/lib/ngx-mat-timepicker.module.ts","../../../projects/ngx-mat-timepicker/src/public-api.ts","../../../projects/ngx-mat-timepicker/src/ngx-mat-timepicker.ts"],"sourcesContent":["export enum NgxMatTimepickerFormat {\n    TWELVE = \"hh:mm a\",\n    TWELVE_SHORT = \"h:m a\",\n    TWENTY_FOUR = \"HH:mm\",\n    TWENTY_FOUR_SHORT = \"H:m\"\n}\n","export enum NgxMatTimepickerPeriods {\n    AM = \"AM\",\n    PM = \"PM\"\n}\n","import {NgxMatTimepickerFormat} from \"../models/ngx-mat-timepicker-format.enum\";\nimport {NgxMatTimepickerFormatType} from \"../models/ngx-mat-timepicker-format.type\";\nimport {NgxMatTimepickerPeriods} from \"../models/ngx-mat-timepicker-periods.enum\";\nimport {NgxMatTimepickerOptions} from \"../models/ngx-mat-timepicker-options.interface\";\n//\nimport {DateTime, LocaleOptions, NumberingSystem} from \"ts-luxon\";\n\n// @dynamic\nexport class NgxMatTimepickerAdapter {\n\n    static defaultFormat: NgxMatTimepickerFormatType = 12;\n    static defaultLocale: string = \"en-US\";\n    static defaultNumberingSystem: NumberingSystem = \"latn\";\n\n    /***\n     *  Format hour according to time format (12 or 24)\n     */\n    static formatHour(currentHour: number, format: NgxMatTimepickerFormatType, period: NgxMatTimepickerPeriods): number {\n        if (this.isTwentyFour(format)) {\n            return currentHour;\n        }\n        const hour = period === NgxMatTimepickerPeriods.AM ? currentHour : currentHour + 12;\n\n        if (period === NgxMatTimepickerPeriods.AM && hour === 12) {\n            return 0;\n        }\n        else if (period === NgxMatTimepickerPeriods.PM && hour === 24) {\n            return 12;\n        }\n\n        return hour;\n    }\n\n    static formatTime(time: string, opts: NgxMatTimepickerOptions): string {\n        if (!time) {\n            return \"Invalid Time\";\n        }\n        const parsedTime = this.parseTime(time, opts).setLocale(this.defaultLocale);\n        if (!parsedTime.isValid) {\n            return \"Invalid time\";\n        }\n        const isTwelve = !this.isTwentyFour(opts.format as NgxMatTimepickerFormatType);\n        if (isTwelve) {\n            return parsedTime.toLocaleString({\n                ...DateTime.TIME_SIMPLE,\n                hour12: isTwelve\n            }).replace(/\\u200E/g, \"\");\n        }\n\n        return parsedTime.toISOTime({\n            includeOffset: false,\n            suppressMilliseconds: true,\n            suppressSeconds: true\n        }).replace(/\\u200E/g, \"\");\n    }\n\n    static fromDateTimeToString(time: DateTime, format: NgxMatTimepickerFormatType): string {\n\n        return time.reconfigure({\n            numberingSystem: this.defaultNumberingSystem,\n            locale: this.defaultLocale\n        }).toFormat(this.isTwentyFour(format) ? NgxMatTimepickerFormat.TWENTY_FOUR : NgxMatTimepickerFormat.TWELVE);\n    }\n\n    static isBetween(time: DateTime, before: DateTime, after: DateTime, unit: \"hours\" | \"minutes\" = \"minutes\"): boolean {\n        const innerUnit = unit === \"hours\" ? unit : void 0;\n\n        return this.isSameOrBefore(time, after, innerUnit) && this.isSameOrAfter(time, before, innerUnit);\n    }\n\n    static isSameOrAfter(time: DateTime, compareWith: DateTime, unit: \"hours\" | \"minutes\" = \"minutes\"): boolean {\n        if (unit === \"hours\") {\n            return time.hour >= compareWith.hour;\n        }\n\n        return time.hasSame(compareWith, unit) || time.valueOf() > compareWith.valueOf();\n    }\n\n    static isSameOrBefore(time: DateTime, compareWith: DateTime, unit: \"hours\" | \"minutes\" = \"minutes\"): boolean {\n        if (unit === \"hours\") {\n            return time.hour <= compareWith.hour;\n        }\n\n        return time.hasSame(compareWith, unit) || time.valueOf() <= compareWith.valueOf();\n    }\n\n    static isTimeAvailable(time: string,\n                           min?: DateTime,\n                           max?: DateTime,\n                           granularity?: \"hours\" | \"minutes\",\n                           minutesGap?: number | null,\n                           format?: number): boolean {\n        if (!time) {\n            return void 0;\n        }\n\n        const convertedTime = this.parseTime(time, {format});\n        const minutes = convertedTime.minute;\n\n        if (minutesGap && minutes === minutes && minutes % minutesGap !== 0) {\n            throw new Error(`Your minutes - ${minutes} doesn\\'t match your minutesGap - ${minutesGap}`);\n        }\n        const isAfter = (min && !max)\n            && this.isSameOrAfter(convertedTime, min, granularity);\n        const isBefore = (max && !min)\n            && this.isSameOrBefore(convertedTime, max, granularity);\n        const between = (min && max)\n            && this.isBetween(convertedTime, min, max, granularity);\n        const isAvailable = !min && !max;\n\n        return isAfter || isBefore || between || isAvailable;\n    }\n\n    static isTwentyFour(format: NgxMatTimepickerFormatType): boolean {\n        return format === 24;\n    }\n\n    static parseTime(time: string, opts: NgxMatTimepickerOptions): DateTime {\n        const localeOpts = this._getLocaleOptionsByTime(time, opts);\n        let timeMask = NgxMatTimepickerFormat.TWENTY_FOUR_SHORT;\n        // If there's a space, means we have the meridiem. Way faster than splitting text\n        // if (~time.indexOf(\" \")) {\n        // 09/02/2023 it seems that sometimes the space from the formatter is a nnbsp (Chromium >= 110)\n        // which causes the indexOf(\" \") to fail: charCode 32, while nbsp is 8239\n        if (time.match(/\\s/g)) {\n            /*\n             * We translate the meridiem in simple AM or PM letters (instead of A.M.)\n             * because even if we set the locale with NgxMatTimepickerModule.setLocale\n             * the default (en-US) will always be used here\n             */\n            time = time.replace(/\\.\\s*/g, \"\");\n            timeMask = NgxMatTimepickerFormat.TWELVE_SHORT;\n        }\n\n        return DateTime.fromFormat(time.replace(/\\s+/g, \" \"), timeMask, {\n            numberingSystem: localeOpts.numberingSystem,\n            locale: localeOpts.locale\n        });\n    }\n\n    static toLocaleTimeString(time: string, opts: NgxMatTimepickerOptions = {}): string {\n        const {format = this.defaultFormat, locale = this.defaultLocale} = opts;\n        let hourCycle: \"h12\" | \"h23\" = \"h12\";\n        let timeMask = NgxMatTimepickerFormat.TWELVE_SHORT;\n        if (this.isTwentyFour(format as NgxMatTimepickerFormatType)) {\n            hourCycle = \"h23\";\n            timeMask = NgxMatTimepickerFormat.TWENTY_FOUR_SHORT;\n        }\n\n        return DateTime.fromFormat(time, timeMask).reconfigure({\n            locale,\n            numberingSystem: opts.numberingSystem,\n            defaultToEN: opts.defaultToEN,\n            outputCalendar: opts.outputCalendar\n        }).toLocaleString({\n            ...DateTime.TIME_SIMPLE,\n            hourCycle\n        });\n    }\n\n    /**\n     *\n     * @param time\n     * @param opts\n     * @private\n     */\n    private static _getLocaleOptionsByTime(time: string, opts: NgxMatTimepickerOptions): LocaleOptions {\n        const {numberingSystem, locale} = DateTime.now().reconfigure({\n            locale: opts.locale,\n            numberingSystem: opts.numberingSystem,\n            outputCalendar: opts.outputCalendar,\n            defaultToEN: opts.defaultToEN\n        }).resolvedLocaleOptions();\n\n        return isNaN(parseInt(time, 10)) ? {\n            numberingSystem: numberingSystem as NumberingSystem,\n            locale\n        } : {\n            numberingSystem: this.defaultNumberingSystem,\n            locale: this.defaultLocale\n        };\n    }\n}\n","export enum NgxMatTimepickerUnits {\n    HOUR,\n    MINUTE\n}\n","import {InjectionToken, Provider} from \"@angular/core\";\n//\nimport {NgxMatTimepickerConfig} from \"../models/ngx-mat-timepicker-config.interface\";\n\nexport const NGX_MAT_TIMEPICKER_CONFIG = new InjectionToken<NgxMatTimepickerConfig>(\"NGX_MAT_TIMEPICKER_CONFIG\");\n\nexport function provideNgxMatTimepickerOptions(config: NgxMatTimepickerConfig): Provider[] {\n    return [\n        {provide: NGX_MAT_TIMEPICKER_CONFIG, useValue: config},\n    ];\n}\n","import {Injectable} from \"@angular/core\";\n//\nimport {NgxMatTimepickerClockFace} from \"../models/ngx-mat-timepicker-clock-face.interface\";\nimport {NgxMatTimepickerPeriods} from \"../models/ngx-mat-timepicker-periods.enum\";\nimport {NgxMatTimepickerAdapter} from \"./ngx-mat-timepicker-adapter\";\n//\nimport {BehaviorSubject, Observable} from \"rxjs\";\nimport {DateTime} from \"ts-luxon\";\n\nconst DEFAULT_HOUR: NgxMatTimepickerClockFace = {\n    time: 12,\n    angle: 360\n};\nconst DEFAULT_MINUTE: NgxMatTimepickerClockFace = {\n    time: 0,\n    angle: 360\n};\n\n@Injectable({\n    providedIn: \"root\"\n})\nexport class NgxMatTimepickerService {\n\n\n    set hour(hour: NgxMatTimepickerClockFace) {\n        this._hour$.next(hour);\n    }\n\n    set minute(minute: NgxMatTimepickerClockFace) {\n        this._minute$.next(minute);\n    }\n\n    set period(period: NgxMatTimepickerPeriods) {\n        const isPeriodValid = (period === NgxMatTimepickerPeriods.AM) || (period === NgxMatTimepickerPeriods.PM);\n\n        if (isPeriodValid) {\n            this._period$.next(period);\n        }\n    }\n\n    get selectedHour(): Observable<NgxMatTimepickerClockFace> {\n        return this._hour$.asObservable();\n    }\n\n    get selectedMinute(): Observable<NgxMatTimepickerClockFace> {\n        return this._minute$.asObservable();\n    }\n\n    get selectedPeriod(): Observable<NgxMatTimepickerPeriods> {\n        return this._period$.asObservable();\n    }\n\n    private _hour$ = new BehaviorSubject<NgxMatTimepickerClockFace>(DEFAULT_HOUR);\n    private _minute$ = new BehaviorSubject<NgxMatTimepickerClockFace>(DEFAULT_MINUTE);\n    private _period$ = new BehaviorSubject<NgxMatTimepickerPeriods>(NgxMatTimepickerPeriods.AM);\n\n    getFullTime(format: number): string {\n        const selectedHour = this._hour$.getValue().time;\n        const selectedMinute = this._minute$.getValue().time;\n        const hour = selectedHour != null ? selectedHour : DEFAULT_HOUR.time;\n        const minute = selectedMinute != null ? selectedMinute : DEFAULT_MINUTE.time;\n        const period = format === 12 ? this._period$.getValue() : \"\";\n        const time = `${hour}:${minute} ${period}`.trim();\n\n        return NgxMatTimepickerAdapter.formatTime(time, {format});\n    }\n\n\n    setDefaultTimeIfAvailable(time: string, min: DateTime, max: DateTime, format: number, minutesGap?: number) {\n        time || this._resetTime();\n        /* Workaround to double error message*/\n        try {\n            if (NgxMatTimepickerAdapter.isTimeAvailable(time, min, max, \"minutes\", minutesGap)) {\n                this._setDefaultTime(time, format);\n            }\n        }\n        catch (e) {\n            console.error(e);\n        }\n    }\n\n    private _resetTime(): void {\n        this.hour = {...DEFAULT_HOUR};\n        this.minute = {...DEFAULT_MINUTE};\n        this.period = NgxMatTimepickerPeriods.AM;\n    }\n\n    private _setDefaultTime(time: string, format: number) {\n        const defaultDto = NgxMatTimepickerAdapter.parseTime(time, {format});\n\n        if (defaultDto.isValid) {\n            const period = time.substring(time.length - 2).toUpperCase();\n            const hour = defaultDto.hour;\n\n            this.hour = {...DEFAULT_HOUR, time: formatHourByPeriod(hour, period as NgxMatTimepickerPeriods)};\n            this.minute = {...DEFAULT_MINUTE, time: defaultDto.minute};\n            this.period = period as NgxMatTimepickerPeriods;\n\n        }\n        else {\n            this._resetTime();\n        }\n    }\n}\n\n/***\n *  Format hour in 24hours format to meridian (AM or PM) format\n */\nfunction formatHourByPeriod(hour: number, period: NgxMatTimepickerPeriods): number {\n    switch (period) {\n        case NgxMatTimepickerPeriods.AM:\n            return hour === 0 ? 12 : hour;\n        case NgxMatTimepickerPeriods.PM:\n            return hour === 12 ? 12 : hour - 12;\n        default:\n            return hour;\n    }\n}\n","import {Injectable} from \"@angular/core\";\n//\nimport {Observable, Subject} from \"rxjs\";\nimport {shareReplay} from \"rxjs/operators\";\n\n@Injectable({\n    providedIn: \"root\"\n})\nexport class NgxMatTimepickerEventService {\n\n    get backdropClick(): Observable<MouseEvent> {\n        return this._backdropClick$.asObservable().pipe(shareReplay({bufferSize: 1, refCount: true}));\n    }\n\n    get keydownEvent(): Observable<KeyboardEvent> {\n        return this._keydownEvent$.asObservable().pipe(shareReplay({bufferSize: 1, refCount: true}));\n    }\n\n    private _backdropClick$: Subject<MouseEvent> = new Subject();\n    private _keydownEvent$: Subject<KeyboardEvent> = new Subject();\n\n    constructor() {\n    }\n\n    dispatchEvent(event: KeyboardEvent | MouseEvent): void {\n        switch (event.type) {\n            case \"click\":\n                this._backdropClick$.next(event as MouseEvent);\n                break;\n            case \"keydown\":\n                this._keydownEvent$.next(event as KeyboardEvent);\n                break;\n            default:\n                throw new Error(\"no such event type\");\n        }\n    }\n\n}\n","import { InjectionToken } from \"@angular/core\";\n//\nimport { NgxMatTimepickerAdapter } from \"../services/ngx-mat-timepicker-adapter\";\n\nexport const NGX_MAT_TIMEPICKER_LOCALE = new InjectionToken<string>(\"TimeLocale\", {\n    providedIn: \"root\",\n    factory: () => NgxMatTimepickerAdapter.defaultLocale\n});\n","import {Inject, Injectable} from \"@angular/core\";\n//\nimport {NGX_MAT_TIMEPICKER_LOCALE} from \"../tokens/ngx-mat-timepicker-time-locale.token\";\n\n@Injectable({\n    providedIn: \"root\"\n})\nexport class NgxMatTimepickerLocaleService {\n\n    get locale(): string {\n        return this._locale;\n    }\n\n    protected _initialLocale: string;\n    protected _locale;\n\n    constructor(@Inject(NGX_MAT_TIMEPICKER_LOCALE) initialLocale: string) {\n        this._locale = initialLocale;\n    }\n\n    updateLocale(newValue: string): void {\n        this._locale = newValue || this._initialLocale;\n    }\n}\n","import {Directive, HostListener, Inject, Input, OnDestroy, OnInit} from \"@angular/core\";\nimport {ThemePalette} from \"@angular/material/core\";\n//\nimport {NgxMatTimepickerEventService} from \"../services/ngx-mat-timepicker-event.service\";\nimport {NgxMatTimepickerLocaleService} from \"../services/ngx-mat-timepicker-locale.service\";\nimport {NgxMatTimepickerService} from \"../services/ngx-mat-timepicker.service\";\nimport {NgxMatTimepickerAdapter} from \"../services/ngx-mat-timepicker-adapter\";\n//\nimport {NgxMatTimepickerUnits} from \"../models/ngx-mat-timepicker-units.enum\";\nimport {NgxMatTimepickerClockFace} from \"../models/ngx-mat-timepicker-clock-face.interface\";\nimport {NgxMatTimepickerPeriods} from \"../models/ngx-mat-timepicker-periods.enum\";\nimport {NgxMatTimepickerConfig} from \"../models/ngx-mat-timepicker-config.interface\";\nimport {NGX_MAT_TIMEPICKER_CONFIG} from \"../tokens/ngx-mat-timepicker-config.token\";\n//\nimport {Observable, Subject} from \"rxjs\";\nimport {shareReplay, takeUntil} from \"rxjs/operators\";\n\n@Directive({\n    selector: \"[ngxMatTimepickerBase]\",\n    standalone: true\n})\nexport class NgxMatTimepickerBaseDirective implements OnInit, OnDestroy {\n\n    @Input()\n    set color(newValue: ThemePalette) {\n        this._color = newValue;\n    }\n\n    get color(): ThemePalette {\n        return this._color;\n    }\n\n    get defaultTime(): string {\n        return this._defaultTime;\n    }\n\n    @Input()\n    set defaultTime(time: string) {\n        this._defaultTime = time;\n        this._setDefaultTime(time);\n    }\n\n    private get _locale(): string {\n        return this._timepickerLocaleSrv.locale;\n    }\n\n    activeTimeUnit: NgxMatTimepickerUnits = NgxMatTimepickerUnits.HOUR;\n    selectedHour: Observable<NgxMatTimepickerClockFace>;\n    selectedMinute: Observable<NgxMatTimepickerClockFace>;\n    selectedPeriod: Observable<NgxMatTimepickerPeriods>;\n    timeUnit: typeof NgxMatTimepickerUnits = NgxMatTimepickerUnits;\n\n    protected _color: ThemePalette = \"primary\";\n    protected _defaultTime: string;\n    protected _subsCtrl$: Subject<void> = new Subject<void>();\n\n    constructor(protected _timepickerSrv: NgxMatTimepickerService,\n                protected _eventSrv: NgxMatTimepickerEventService,\n                protected _timepickerLocaleSrv: NgxMatTimepickerLocaleService,\n                @Inject(NGX_MAT_TIMEPICKER_CONFIG) public data: NgxMatTimepickerConfig) {\n\n        this.color = data.color;\n        this.defaultTime = data.defaultTime;\n    }\n\n    changePeriod(period: NgxMatTimepickerPeriods): void {\n        this._timepickerSrv.period = period;\n        this._onTimeChange();\n    }\n\n    changeTimeUnit(unit: NgxMatTimepickerUnits): void {\n        this.activeTimeUnit = unit;\n    }\n\n    close(): void {\n        this.data.timepickerBaseRef.close();\n    }\n\n    ngOnDestroy(): void {\n        this._subsCtrl$.next();\n        this._subsCtrl$.complete();\n    }\n\n    ngOnInit(): void {\n        this._defineTime();\n        this.selectedHour = this._timepickerSrv.selectedHour\n            .pipe(shareReplay({bufferSize: 1, refCount: true}));\n        this.selectedMinute = this._timepickerSrv.selectedMinute\n            .pipe(shareReplay({bufferSize: 1, refCount: true}));\n        this.selectedPeriod = this._timepickerSrv.selectedPeriod\n            .pipe(shareReplay({bufferSize: 1, refCount: true}));\n        this.data.timepickerBaseRef.timeUpdated.pipe(takeUntil(this._subsCtrl$))\n            .subscribe({\n                next: (v: string) => {\n                    v && this._setDefaultTime(v);\n                }\n            });\n    }\n\n    onHourChange(hour: NgxMatTimepickerClockFace): void {\n        this._timepickerSrv.hour = hour;\n        this._onTimeChange();\n    }\n\n    onHourSelected(hour: number): void {\n        if (!this.data.hoursOnly) {\n            this.changeTimeUnit(NgxMatTimepickerUnits.MINUTE);\n        }\n        this.data.timepickerBaseRef.hourSelected.next(hour);\n    }\n\n    @HostListener(\"keydown\", [\"$event\"])\n    onKeydown(e: any): void {\n        this._eventSrv.dispatchEvent(e);\n        e.stopPropagation();\n    }\n\n    onMinuteChange(minute: NgxMatTimepickerClockFace): void {\n        this._timepickerSrv.minute = minute;\n        this._onTimeChange();\n    }\n\n    setTime(): void {\n        this.data.timepickerBaseRef.timeSet.emit(this._timepickerSrv.getFullTime(this.data.format));\n        this.close();\n    }\n\n    protected _defineTime(): void {\n        const minTime = this.data.minTime;\n\n        if (minTime && (!this.data.time && !this.data.defaultTime)) {\n            const time = NgxMatTimepickerAdapter.fromDateTimeToString(minTime, this.data.format);\n\n            this._setDefaultTime(time);\n        }\n    }\n\n    protected _onTimeChange(): void {\n        const time = NgxMatTimepickerAdapter.toLocaleTimeString(this._timepickerSrv.getFullTime(this.data.format), {\n            locale: this._locale,\n            format: this.data.format\n        });\n\n        this.data.timepickerBaseRef.timeChanged.emit(time);\n    }\n\n    protected _setDefaultTime(time: string): void {\n        this._timepickerSrv.setDefaultTimeIfAvailable(\n            time, this.data.minTime, this.data.maxTime, this.data.format, this.data.minutesGap);\n    }\n}\n","import {NgxMatTimepickerClockFace} from \"../models/ngx-mat-timepicker-clock-face.interface\";\nimport {NgxMatTimepickerAdapter} from \"../services/ngx-mat-timepicker-adapter\";\nimport {NgxMatTimepickerFormat} from \"../models/ngx-mat-timepicker-format.enum\";\nimport {NgxMatTimepickerDisabledConfig} from \"../models/ngx-mat-timepicker-disabled-config.interface\";\n//\nimport {DateTime} from \"ts-luxon\";\n\n// @dynamic\nexport class NgxMatTimepickerUtils {\n\n    static get DEFAULT_MINUTES_GAP(): number {\n        return 5;\n    }\n\n    static disableHours(hours: NgxMatTimepickerClockFace[], config: NgxMatTimepickerDisabledConfig): NgxMatTimepickerClockFace[] {\n        if (config.min || config.max) {\n\n            return hours.map(value => {\n                const hour = NgxMatTimepickerAdapter.isTwentyFour(config.format)\n                    ? value.time\n                    : NgxMatTimepickerAdapter.formatHour(value.time, config.format, config.period);\n                const currentTime = DateTime.fromObject({hour}).toFormat(NgxMatTimepickerFormat.TWELVE);\n\n                return {\n                    ...value,\n                    disabled: !NgxMatTimepickerAdapter.isTimeAvailable(currentTime, config.min, config.max, \"hours\")\n                };\n            });\n        }\n\n        return hours;\n    }\n\n    static disableMinutes(minutes: NgxMatTimepickerClockFace[], selectedHour: number, config: NgxMatTimepickerDisabledConfig) {\n        if (config.min || config.max) {\n\n            const hour = NgxMatTimepickerAdapter.formatHour(selectedHour, config.format, config.period);\n            let currentTime = DateTime.fromObject({\n                hour,\n                minute: 0\n            });\n\n            return minutes.map(value => {\n                currentTime = currentTime.set({minute: value.time});\n\n                return {\n                    ...value,\n                    disabled: !NgxMatTimepickerAdapter.isTimeAvailable(currentTime.toFormat(NgxMatTimepickerFormat.TWELVE), config.min, config.max, \"minutes\")\n                };\n            });\n        }\n\n        return minutes;\n    }\n\n    static getHours(format: number): NgxMatTimepickerClockFace[] {\n        return Array(format).fill(1).map((v, i) => {\n            const angleStep = 30;\n            const time = v + i;\n            const angle = angleStep * time;\n\n            return {time: time === 24 ? 0 : time, angle};\n        });\n    }\n\n    static getMinutes(gap = 1): NgxMatTimepickerClockFace[] {\n        const minutesCount = 60;\n        const angleStep = 360 / minutesCount;\n        const minutes = [];\n\n        for (let i = 0; i < minutesCount; i++) {\n            const angle = angleStep * i;\n            if (i % gap === 0) {\n                minutes.push({time: i, angle: angle !== 0 ? angle : 360});\n            }\n        }\n\n        return minutes;\n    }\n\n    static isDigit(e: KeyboardEvent) {\n        // Allow: backspace, delete, tab, escape, enter\n        if ([46, 8, 9, 27, 13].some(n => n === e.keyCode) ||\n            // Allow: Ctrl/cmd+A\n            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||\n            // Allow: Ctrl/cmd+C\n            (e.keyCode === 67 && (e.ctrlKey === true || e.metaKey === true)) ||\n            // Allow: Ctrl/cmd+X\n            (e.keyCode === 88 && (e.ctrlKey === true || e.metaKey === true)) ||\n            // Allow: home, end, left, right, up, down\n            (e.keyCode >= 35 && e.keyCode <= 40)) {\n\n            return true;\n        }\n\n        return !((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105));\n    }\n\n\n}\n","export enum NgxMatTimepickerMeasure {\n    hour = \"hour\",\n    minute = \"minute\"\n}\n","import {Pipe, PipeTransform} from \"@angular/core\";\n//\nimport {NgxMatTimepickerLocaleService} from \"../services/ngx-mat-timepicker-locale.service\";\nimport {NgxMatTimepickerUnits} from \"../models/ngx-mat-timepicker-units.enum\";\nimport {NgxMatTimepickerMeasure} from \"../models/ngx-mat-timepicker-measures.enum\";\n//\nimport {DateTime} from \"ts-luxon\";\n\n@Pipe({\n    name: \"timeLocalizer\",\n    standalone: true\n})\nexport class NgxMatTimepickerTimeLocalizerPipe implements PipeTransform {\n\n    private get _locale(): string {\n        return this._timepickerLocaleSrv.locale;\n    }\n\n    constructor(private _timepickerLocaleSrv: NgxMatTimepickerLocaleService) {\n    }\n\n    transform(time: number | string, timeUnit: NgxMatTimepickerUnits, isKeyboardEnabled = false): string {\n        if (time == null || time === \"\") {\n            return \"\";\n        }\n\n        switch (timeUnit) {\n            case NgxMatTimepickerUnits.HOUR: {\n                const format = (time === 0 || isKeyboardEnabled) ? \"HH\" : \"H\";\n\n                return this._formatTime(NgxMatTimepickerMeasure.hour, time, format);\n            }\n            case NgxMatTimepickerUnits.MINUTE:\n                return this._formatTime(NgxMatTimepickerMeasure.minute, time, \"mm\");\n            default:\n                throw new Error(`There is no Time Unit with type ${timeUnit}`);\n        }\n    }\n\n    private _formatTime(timeMeasure: NgxMatTimepickerMeasure, time: string | number, format: string): string {\n        try {\n            return DateTime.fromObject({[timeMeasure]: +time}).setLocale(this._locale).toFormat(format);\n        }\n        catch {\n            throw new Error(`Cannot format provided time - ${time} to locale - ${this._locale}`);\n        }\n    }\n}\n","import {Pipe, PipeTransform} from \"@angular/core\";\nimport {NgxMatTimepickerUtils} from \"../utils/ngx-mat-timepicker.utils\";\n\n@Pipe({\n    name: \"minutesFormatter\",\n    standalone: true\n})\nexport class NgxMatTimepickerMinutesFormatterPipe implements PipeTransform {\n\n    transform(minute: number, gap = NgxMatTimepickerUtils.DEFAULT_MINUTES_GAP): number | string {\n        if (!minute) {\n            return minute;\n        }\n\n        return minute % gap === 0 ? minute : \"\";\n    }\n\n}\n","import {Pipe, PipeTransform} from \"@angular/core\";\nimport {NgxMatTimepickerUtils} from \"../utils/ngx-mat-timepicker.utils\";\n\n@Pipe({\n    name: \"activeMinute\",\n    standalone: true\n})\nexport class NgxMatTimepickerActiveMinutePipe implements PipeTransform {\n\n    transform(minute: number, currentMinute: number, gap: number | void, isClockFaceDisabled: boolean): boolean {\n        if (minute == null || isClockFaceDisabled) {\n            return false;\n        }\n\n        return ((currentMinute === minute) && (minute % (gap || NgxMatTimepickerUtils.DEFAULT_MINUTES_GAP) === 0));\n    }\n\n}\n","import {Pipe, PipeTransform} from \"@angular/core\";\n\n@Pipe({\n    name: \"activeHour\",\n    standalone: true\n})\nexport class NgxMatTimepickerActiveHourPipe implements PipeTransform {\n\n    transform(hour: number, currentHour: number, isClockFaceDisabled: boolean): boolean {\n        if (hour == null || isClockFaceDisabled) {\n            return false;\n        }\n\n        return hour === currentHour;\n    }\n\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnChanges,\n    OnDestroy,\n    Output,\n    SimpleChanges,\n    ViewChild,\n    ViewEncapsulation\n} from \"@angular/core\";\nimport {NgStyle, NgTemplateOutlet, NgClass, SlicePipe} from \"@angular/common\";\nimport {ThemePalette} from \"@angular/material/core\";\nimport {MatToolbarModule} from \"@angular/material/toolbar\";\nimport {MatButtonModule} from \"@angular/material/button\";\n//\nimport {NgxMatTimepickerClockFace} from \"../../models/ngx-mat-timepicker-clock-face.interface\";\nimport {NgxMatTimepickerFormatType} from \"../../models/ngx-mat-timepicker-format.type\";\nimport {NgxMatTimepickerUnits} from \"../../models/ngx-mat-timepicker-units.enum\";\nimport {NgxMatTimepickerAdapter} from \"../../services/ngx-mat-timepicker-adapter\";\nimport {NgxMatTimepickerTimeLocalizerPipe} from \"../../pipes/ngx-mat-timepicker-time-localizer.pipe\";\nimport {NgxMatTimepickerMinutesFormatterPipe} from \"../../pipes/ngx-mat-timepicker-minutes-formatter.pipe\";\nimport {NgxMatTimepickerActiveMinutePipe} from \"../../pipes/ngx-mat-timepicker-active-minute.pipe\";\nimport {NgxMatTimepickerActiveHourPipe} from \"../../pipes/ngx-mat-timepicker-active-hour.pipe\";\n\nfunction roundAngle(angle: number, step: number): number {\n    return Math.round(angle / step) * step;\n}\n\nfunction countAngleByCords(x0: number, y0: number, x: number, y: number, currentAngle: number): number {\n    if (y > y0 && x >= x0) {// II quarter\n        return 180 - currentAngle;\n    }\n    else if (y > y0 && x < x0) {// III quarter\n        return 180 + currentAngle;\n    }\n    else if (y < y0 && x < x0) {// IV quarter\n        return 360 - currentAngle;\n    }\n    else {// I quarter\n        return currentAngle;\n    }\n}\n\nconst CLOCK_HAND_STYLES = {\n    small: {\n        height: \"75px\",\n        top: \"calc(50% - 75px)\"\n    },\n    large: {\n        height: \"103px\",\n        top: \"calc(50% - 103px)\"\n    }\n};\n\n@Component({\n    selector: \"ngx-mat-timepicker-face\",\n    templateUrl: \"./ngx-mat-timepicker-face.component.html\",\n    styleUrls: [\"./ngx-mat-timepicker-face.component.scss\"],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        MatButtonModule,\n        NgStyle,\n        NgTemplateOutlet,\n        MatToolbarModule,\n        NgClass,\n        SlicePipe,\n        NgxMatTimepickerActiveHourPipe,\n        NgxMatTimepickerActiveMinutePipe,\n        NgxMatTimepickerMinutesFormatterPipe,\n        NgxMatTimepickerTimeLocalizerPipe\n    ]\n})\nexport class NgxMatTimepickerFaceComponent implements AfterViewInit, OnChanges, OnDestroy {\n\n    @ViewChild(\"clockFace\", {static: true}) clockFace: ElementRef;\n    @ViewChild(\"clockHand\", {static: true, read: ElementRef}) clockHand: ElementRef;\n\n    @Input() color: ThemePalette = \"primary\";\n    @Input() dottedMinutesInGap: boolean;\n    @Input() faceTime: NgxMatTimepickerClockFace[];\n    @Input() format: NgxMatTimepickerFormatType;\n    innerClockFaceSize = 85;\n    isClockFaceDisabled: boolean;\n    @Input() minutesGap: number;\n    @Input() selectedTime: NgxMatTimepickerClockFace;\n    @Output() timeChange = new EventEmitter<NgxMatTimepickerClockFace>();\n    @Output() timeSelected = new EventEmitter<number>();\n    timeUnit = NgxMatTimepickerUnits;\n    @Input() unit: NgxMatTimepickerUnits;\n\n    private _isStarted: boolean;\n    private _touchEndHandler: (e: any) => any;\n    private _touchStartHandler: (e: any) => any;\n\n    ngAfterViewInit(): void {\n        this._setClockHandPosition();\n        this._addTouchEvents();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        // tslint:disable-next-line:no-string-literal\n        const faceTimeChanges = changes[\"faceTime\"];\n        // tslint:disable-next-line:no-string-literal\n        const selectedTimeChanges = changes[\"selectedTime\"];\n\n        if ((faceTimeChanges && faceTimeChanges.currentValue)\n            && (selectedTimeChanges && selectedTimeChanges.currentValue)) {\n            /* Set time according to pass an input value */\n            this.selectedTime = this.faceTime.find(time => time.time === this.selectedTime.time);\n        }\n        if (selectedTimeChanges && selectedTimeChanges.currentValue) {\n            this._setClockHandPosition();\n        }\n        if (faceTimeChanges && faceTimeChanges.currentValue) {\n            // To avoid an error ExpressionChangedAfterItHasBeenCheckedError\n            setTimeout(() => this._selectAvailableTime());\n        }\n    }\n\n    ngOnDestroy() {\n        this._removeTouchEvents();\n    }\n\n    @HostListener(\"mousedown\", [\"$event\"])\n    onMousedown(e: any) {\n        e.preventDefault();\n        this._isStarted = true;\n    }\n\n    @HostListener(\"mouseup\", [\"$event\"])\n    onMouseup(e: any) {\n        e.preventDefault();\n        this._isStarted = false;\n    }\n\n    @HostListener(\"click\", [\"$event\"])\n    @HostListener(\"touchmove\", [\"$event.changedTouches[0]\"])\n    @HostListener(\"touchend\", [\"$event.changedTouches[0]\"])\n    @HostListener(\"mousemove\", [\"$event\"])\n    selectTime(e: any): void {\n\n        if (!this._isStarted && (e instanceof MouseEvent && e.type !== \"click\")) {\n            return;\n        }\n        const clockFaceCords = this.clockFace.nativeElement.getBoundingClientRect();\n\n        /* Get x0 and y0 of the circle */\n        const centerX = clockFaceCords.left + clockFaceCords.width / 2;\n        const centerY = clockFaceCords.top + clockFaceCords.height / 2;\n        /* Counting the arctangent and convert it to from radian to deg */\n        const arctangent = Math.atan(Math.abs(e.clientX - centerX) / Math.abs(e.clientY - centerY)) * 180 / Math.PI;\n        /* Get angle according to quadrant */\n        const circleAngle = countAngleByCords(centerX, centerY, e.clientX, e.clientY, arctangent);\n        /* Check if selected time from the inner clock face (24 hours format only) */\n        const isInnerClockChosen = this.format && this._isInnerClockFace(centerX, centerY, e.clientX, e.clientY);\n        /* Round angle according to angle step */\n        const angleStep = this.unit === NgxMatTimepickerUnits.MINUTE ? (6 * (this.minutesGap || 1)) : 30;\n        const roundedAngle = roundAngle(circleAngle, angleStep);\n        const angle = (roundedAngle || 360) + (isInnerClockChosen ? 360 : 0);\n\n        const selectedTime = this.faceTime.find(val => val.angle === angle);\n\n        if (selectedTime && !selectedTime.disabled) {\n            this.timeChange.next(selectedTime);\n\n            /* To let know whether user ended interaction with clock face */\n            if (!this._isStarted) {\n                this.timeSelected.next(selectedTime.time);\n            }\n        }\n\n    }\n\n    trackByTime(_item_: any, time: NgxMatTimepickerClockFace): string | number {\n        return time.time;\n    }\n\n    private _addTouchEvents(): void {\n        this._touchStartHandler = this.onMousedown.bind(this);\n        this._touchEndHandler = this.onMouseup.bind(this);\n\n        this.clockFace.nativeElement.addEventListener(\"touchstart\", this._touchStartHandler);\n        this.clockFace.nativeElement.addEventListener(\"touchend\", this._touchEndHandler);\n    }\n\n    private _decreaseClockHand(): void {\n        this.clockHand.nativeElement.style.height = CLOCK_HAND_STYLES.small.height;\n        this.clockHand.nativeElement.style.top = CLOCK_HAND_STYLES.small.top;\n    }\n\n    private _increaseClockHand(): void {\n        this.clockHand.nativeElement.style.height = CLOCK_HAND_STYLES.large.height;\n        this.clockHand.nativeElement.style.top = CLOCK_HAND_STYLES.large.top;\n    }\n\n    private _isInnerClockFace(x0: number, y0: number, x: number, y: number): boolean {\n        /* Detect whether time from the inner clock face or not (24 format only) */\n        return Math.sqrt(Math.pow(x - x0, 2) + Math.pow(y - y0, 2)) < this.innerClockFaceSize;\n    }\n\n    private _removeTouchEvents(): void {\n        this.clockFace.nativeElement.removeEventListener(\"touchstart\", this._touchStartHandler);\n        this.clockFace.nativeElement.removeEventListener(\"touchend\", this._touchEndHandler);\n    }\n\n    private _selectAvailableTime(): void {\n        const currentTime = this.faceTime.find(time => this.selectedTime.time === time.time);\n        this.isClockFaceDisabled = this.faceTime.every(time => time.disabled);\n\n        if ((currentTime && currentTime.disabled) && !this.isClockFaceDisabled) {\n            const availableTime = this.faceTime.find(time => !time.disabled);\n\n            this.timeChange.next(availableTime);\n        }\n    }\n\n    private _setClockHandPosition(): void {\n        if (NgxMatTimepickerAdapter.isTwentyFour(this.format)) {\n            if (this.selectedTime.time > 12 || this.selectedTime.time === 0) {\n                this._decreaseClockHand();\n            }\n            else {\n                this._increaseClockHand();\n            }\n        }\n\n        if (this.selectedTime) {\n            this.clockHand.nativeElement.style.transform = `rotate(${this.selectedTime.angle}deg)`;\n        }\n    }\n}\n","<!-- DEFAULT TEMPLATES - START -->\n<ng-template #hourButton\n  let-time>\n  <button mat-mini-fab\n    disableRipple\n    class=\"mat-elevation-z0\"\n    [color]=\"(time.time | activeHour: selectedTime?.time : isClockFaceDisabled) ? color : undefined\"\n    [ngStyle]=\"{'transform': 'rotateZ(-'+ time.angle +'deg)'}\"\n    [disabled]=\"time.disabled\">\n    {{time.time | timeLocalizer: timeUnit.HOUR}}\n  </button>\n</ng-template>\n<!-- DEFAULT TEMPLATES - END -->\n<div class=\"clock-face\"\n  #clockFace>\n  @if (unit !== timeUnit.MINUTE) {\n    <div\n      class=\"clock-face__container\">\n      @for (time of faceTime | slice: 0 : 12; track trackByTime($index, time)) {\n        <div class=\"clock-face__number clock-face__number--outer\"\n          [ngStyle]=\"{'transform': 'rotateZ('+ time.angle +'deg)'}\"\n          >\n          <ng-content *ngTemplateOutlet=\"hourButton; context: {$implicit: time}\"></ng-content>\n        </div>\n      }\n      @if (faceTime.length > 12) {\n        <div class=\"clock-face__inner\"\n          >\n          @for (time of faceTime | slice: 12 : 24; track trackByTime($index, time)) {\n            <div class=\"clock-face__number clock-face__number--inner\"\n              [style.top]=\"'calc(50% - ' + innerClockFaceSize + 'px)'\"\n              [ngStyle]=\"{'transform': 'rotateZ('+ time.angle +'deg)'}\"\n              [style.height.px]=\"innerClockFaceSize\"\n              >\n              <ng-content *ngTemplateOutlet=\"hourButton; context: {$implicit: time}\"></ng-content>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"clock-face__container\">\n      @for (time of faceTime; track trackByTime($index, time)) {\n        <div class=\"clock-face__number clock-face__number--outer\"\n          [ngStyle]=\"{'transform': 'rotateZ('+ time.angle +'deg)'}\"\n          >\n          <input #current\n            type=\"hidden\"\n            [value]=\"time.time | minutesFormatter: minutesGap | timeLocalizer: timeUnit.MINUTE\" />\n            <button mat-mini-fab\n              disableRipple\n              class=\"mat-elevation-z0\"\n              [class.dot]=\"dottedMinutesInGap && current.value === '' && !(time.time | activeMinute: selectedTime?.time:1:isClockFaceDisabled)\"\n              [color]=\"(time.time | activeMinute: selectedTime?.time:minutesGap:isClockFaceDisabled) ? color : undefined\"\n              [ngStyle]=\"{'transform': 'rotateZ(-'+ time.angle +'deg)'}\"\n              [disabled]=\"time.disabled\">\n              {{current.value}}\n            </button>\n          </div>\n        }\n      </div>\n    }\n    <mat-toolbar class=\"clock-face__clock-hand\"\n      [color]=\"color\"\n      [ngClass]=\"{'clock-face__clock-hand_minute': unit === timeUnit.MINUTE}\"\n      #clockHand\n      [hidden]=\"isClockFaceDisabled\">\n      @if (unit === timeUnit.MINUTE) {\n        <button mat-mini-fab\n          [color]=\"color\">\n          <span class=\"clock-face__clock-hand_minute_dot\"></span>\n        </button>\n      }\n    </mat-toolbar>\n    <mat-toolbar class=\"clock-face__center\"\n    [color]=\"color\"></mat-toolbar>\n  </div>\n","import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from \"@angular/core\";\nimport {ThemePalette} from \"@angular/material/core\";\n//\nimport {NgxMatTimepickerClockFace} from \"../../models/ngx-mat-timepicker-clock-face.interface\";\nimport {NgxMatTimepickerFormatType} from \"../../models/ngx-mat-timepicker-format.type\";\nimport {NgxMatTimepickerUnits} from \"../../models/ngx-mat-timepicker-units.enum\";\nimport {NgxMatTimepickerPeriods} from \"../../models/ngx-mat-timepicker-periods.enum\";\nimport {NgxMatTimepickerUtils} from \"../../utils/ngx-mat-timepicker.utils\";\nimport {NgxMatTimepickerFaceComponent} from \"../ngx-mat-timepicker-face/ngx-mat-timepicker-face.component\";\n//\nimport {DateTime} from \"ts-luxon\";\n\n@Component({\n    selector: \"ngx-mat-timepicker-minutes-face\",\n    templateUrl: \"./ngx-mat-timepicker-minutes-face.component.html\",\n    imports: [NgxMatTimepickerFaceComponent]\n})\nexport class NgxMatTimepickerMinutesFaceComponent implements OnChanges {\n\n    @Input()\n    set color(newValue: ThemePalette) {\n        this._color = newValue;\n    }\n\n    get color(): ThemePalette {\n        return this._color;\n    }\n\n    @Input() dottedMinutesInGap: boolean;\n    @Input() format: NgxMatTimepickerFormatType;\n    @Input() maxTime: DateTime;\n    @Input() minTime: DateTime;\n\n    @Output() minuteChange = new EventEmitter<NgxMatTimepickerClockFace>();\n    @Input() minutesGap: number;\n\n    minutesList: NgxMatTimepickerClockFace[] = [];\n    @Input() period: NgxMatTimepickerPeriods;\n    @Input() selectedHour: number;\n\n    @Input() selectedMinute: NgxMatTimepickerClockFace;\n    timeUnit = NgxMatTimepickerUnits;\n\n    private _color: ThemePalette = \"primary\";\n\n    constructor() {\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        // tslint:disable-next-line:no-string-literal\n        if (changes[\"period\"] && changes[\"period\"].currentValue) {\n            const minutes = NgxMatTimepickerUtils.getMinutes(this.minutesGap);\n            this.minutesList = NgxMatTimepickerUtils.disableMinutes(minutes, this.selectedHour, {\n                min: this.minTime,\n                max: this.maxTime,\n                format: this.format,\n                period: this.period\n            });\n        }\n    }\n}\n\n","<ngx-mat-timepicker-face [color]=\"color\"\n\t\t\t\t\t\t [dottedMinutesInGap]=\"dottedMinutesInGap\"\n\t\t\t\t\t\t [faceTime]=\"minutesList\"\n\t\t\t\t\t\t [selectedTime]=\"selectedMinute\"\n\t\t\t\t\t\t [minutesGap]=\"minutesGap\"\n\t\t\t\t\t\t (timeChange)=\"minuteChange.next($event)\"\n\t\t\t\t\t\t [unit]=\"timeUnit.MINUTE\"></ngx-mat-timepicker-face>\n","import {Directive, EventEmitter, Input, Output} from \"@angular/core\";\nimport {ThemePalette} from \"@angular/material/core\";\n//\nimport {NgxMatTimepickerClockFace} from \"../../models/ngx-mat-timepicker-clock-face.interface\";\nimport {NgxMatTimepickerFormatType} from \"../../models/ngx-mat-timepicker-format.type\";\nimport {NgxMatTimepickerUtils} from \"../../utils/ngx-mat-timepicker.utils\";\n//\nimport {DateTime} from \"ts-luxon\";\n\n@Directive({\n    selector: \"[ngxMatTimepickerHoursFace]\",\n    standalone: true\n})\nexport class NgxMatTimepickerHoursFaceDirective {\n\n    @Input()\n    set color(newValue: ThemePalette) {\n        this._color = newValue;\n    }\n\n    get color(): ThemePalette {\n        return this._color;\n    }\n\n    @Input()\n    set format(newValue: NgxMatTimepickerFormatType) {\n        this._format = newValue;\n        this.hoursList = NgxMatTimepickerUtils.getHours(this._format);\n    }\n\n    get format(): NgxMatTimepickerFormatType {\n        return this._format;\n    }\n\n    @Output() hourChange = new EventEmitter<NgxMatTimepickerClockFace>();\n    @Output() hourSelected = new EventEmitter<number>();\n\n    hoursList: NgxMatTimepickerClockFace[] = [];\n    @Input() maxTime: DateTime;\n    @Input() minTime: DateTime;\n    @Input() selectedHour: NgxMatTimepickerClockFace;\n\n    protected _color: ThemePalette = \"primary\";\n    protected _format: NgxMatTimepickerFormatType = 24;\n\n    constructor() {\n    }\n\n    onTimeSelected(time: number): void {\n        this.hourSelected.next(time);\n    }\n}\n","import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from \"@angular/core\";\n//\nimport {\n    NgxMatTimepickerHoursFaceDirective\n} from \"../ngx-mat-timepicker-hours-face/ngx-mat-timepicker-hours-face.directive\";\nimport {NgxMatTimepickerPeriods} from \"../../models/ngx-mat-timepicker-periods.enum\";\nimport {NgxMatTimepickerUtils} from \"../../utils/ngx-mat-timepicker.utils\";\nimport {NgxMatTimepickerFaceComponent} from \"../ngx-mat-timepicker-face/ngx-mat-timepicker-face.component\";\n\n@Component({\n    selector: \"ngx-mat-timepicker-12-hours-face\",\n    templateUrl: \"ngx-mat-timepicker-12-hours-face.component.html\",\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgxMatTimepickerFaceCo