@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/fesm2022/onemrvapublic-design-system-mat-timepicker.mjs

@@ -0,0 +1,1363 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Input, Output, ChangeDetectionStrategy, Component, inject, HostBinding, Directive, ChangeDetectorRef, HostAttributeToken, ViewEncapsulation, Renderer2, NgZone, ElementRef, HostListener, NgModule } from '@angular/core';
+import { OnemrvaMatSize, OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+import { MatDialog, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { MatToolbar } from '@angular/material/toolbar';
+import { NgClass } from '@angular/common';
+import { MatMiniFabButton, MatButton, MatIconButton } from '@angular/material/button';
+import { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';
+import { Subject, Subscription, of, merge } from 'rxjs';
+import { takeUntil, first } from 'rxjs/operators';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MatIcon } from '@angular/material/icon';
+import { Validators, NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { Platform } from '@angular/cdk/platform';
+
+function twoDigits(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+function addDays(date, days) {
+    const result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+}
+function convertHoursForMode(hour) {
+    const isPm = hour >= 12;
+    return { hour, isPm };
+}
+function mod(a, b) {
+    return a - Math.floor(a / b) * b;
+}
+function getShortestAngle(from, to) {
+    const difference = to - from;
+    return from + mod(difference + 180, 360) - 180;
+}
+function isDateInRange(minDate, maxDate, current) {
+    const unixCurrentDate = +current;
+    return ((!minDate || +minDate <= unixCurrentDate) &&
+        (!maxDate || unixCurrentDate <= +maxDate));
+}
+function isTimeInRange(minDate, maxDate, current) {
+    if (minDate instanceof Date) {
+        const newMinDate = new Date();
+        newMinDate.setHours(minDate.getHours());
+        newMinDate.setMinutes(minDate.getMinutes());
+        newMinDate.setSeconds(0);
+        newMinDate.setMilliseconds(0);
+        minDate = newMinDate;
+    }
+    if (maxDate instanceof Date) {
+        const newMaxDate = new Date();
+        newMaxDate.setHours(maxDate.getHours());
+        newMaxDate.setMinutes(maxDate.getMinutes());
+        newMaxDate.setSeconds(0);
+        newMaxDate.setMilliseconds(0);
+        maxDate = newMaxDate;
+    }
+    if (current instanceof Date) {
+        const newCurrent = new Date();
+        newCurrent.setHours(current.getHours());
+        newCurrent.setMinutes(current.getMinutes());
+        newCurrent.setSeconds(0);
+        newCurrent.setMilliseconds(0);
+        current = newCurrent;
+    }
+    const unixCurrentDate = +current;
+    return ((!minDate || +minDate <= unixCurrentDate) &&
+        (!maxDate || unixCurrentDate <= +maxDate));
+}
+// used when generating the allowed maps
+function isAllowed(hour, minutes, minDate, maxDate) {
+    if (hour > 24 || hour < 0 || minutes > 60 || minutes < 0) {
+        return false;
+    }
+    if (!minDate && !maxDate) {
+        return true;
+    }
+    const checkDate = new Date();
+    checkDate.setHours(hour);
+    checkDate.setMinutes(minutes);
+    checkDate.setSeconds(0);
+    checkDate.setMilliseconds(0);
+    return isDateInRange(minDate, maxDate, checkDate);
+}
+// used by the clock component to visually disable the not allowed values
+function getIsAvailabeFn(allowed24HourMap) {
+    return (value, viewType, h) => {
+        const isHourCheck = viewType === 'hours';
+        const [hour, minutes] = isHourCheck ? [value, 0] : [h, value];
+        if (!allowed24HourMap) {
+            return true;
+        }
+        if (isHourCheck) {
+            return !!Object.values(allowed24HourMap[hour]).find(v => v === true);
+        }
+        return allowed24HourMap[hour][minutes];
+    };
+}
+
+class ClockComponent {
+    constructor() {
+        this.viewType = 'hours';
+        this.formattedValue = 0;
+        this.formattedHours = 0;
+        this.changeEvent = new EventEmitter();
+        this.unavailableSelection = new EventEmitter();
+        this.invalidSelection = new EventEmitter();
+        this.isFormattedValueAllowed = true;
+        this.touching = false;
+        this.numbers = [];
+        this.secondaryNumbers = [];
+        this.minuteDots = [];
+        this.invalidMeridiemEmitted = true;
+        this.handleTouchMove = (e) => {
+            e.preventDefault(); // prevent scrolling behind the clock on iOS
+            const rect = e.target.getBoundingClientRect();
+            this.movePointer(e.changedTouches[0].clientX - rect.left, e.changedTouches[0].clientY - rect.top);
+        };
+    }
+    initIsAllowedFn() {
+        if (!this.allowed24HourMap) {
+            return;
+        }
+        this.isAvailableFn = getIsAvailabeFn(this.allowed24HourMap);
+    }
+    isAvailable(value) {
+        return this.isAvailableFn
+            ? this.isAvailableFn(value, this.viewType, this.formattedHours)
+            : true;
+    }
+    ngOnChanges(simpleChanges) {
+        if (simpleChanges['allowed24HourMap'] ||
+            (simpleChanges['mode'] && !simpleChanges['mode'].firstChange)) {
+            this.initIsAllowedFn();
+        }
+        this.calculateAngule();
+        this.setNumbers();
+        if (simpleChanges['formattedValue'] && this.allowed24HourMap) {
+            this.isFormattedValueAllowed = this.isAvailable(this.formattedValue);
+        }
+        const isSelectedTimeAvailable = this.isAvailableFn
+            ? this.isAvailableFn(this.formattedValue, 'minutes', this.formattedHours)
+            : true;
+        if (this.viewType === 'minutes' && this.isAvailableFn) {
+            const areMinitesAvailable = this.isAvailableFn(this.minutes, 'minutes', this.formattedHours);
+            if (!areMinitesAvailable) {
+                if (this.minDate && this.minDate.getMinutes() > this.minutes) {
+                    setTimeout(() => {
+                        this.changeEvent.emit({
+                            value: this.minDate.getMinutes(),
+                            type: 'minutes',
+                        });
+                    });
+                }
+                else {
+                    setTimeout(() => {
+                        this.changeEvent.emit({
+                            value: this.maxDate.getMinutes(),
+                            type: 'minutes',
+                        });
+                    });
+                }
+            }
+        }
+        if (isSelectedTimeAvailable && this.invalidMeridiemEmitted) {
+            this.invalidMeridiemEmitted = false;
+        }
+        this.invalidSelection.emit(!isSelectedTimeAvailable);
+    }
+    calculateAngule() {
+        this.angle = this.getPointerAngle(this.formattedValue, this.viewType);
+    }
+    setNumbers() {
+        if (this.viewType === 'hours') {
+            // if (this.mode === '12h') {
+            //   const meridiem : string = this.isPm ? 'pm' : 'am';
+            //   const isAllowedFn = this.allowed12HourMap ? (num : number) => this.allowed12HourMap[meridiem][num + 1][0] : undefined;
+            //   this.numbers = this.getNumbers(12, { size: 256 }, isAllowedFn);
+            //   this.secondaryNumbers = [];
+            //   this.minuteDots = [];
+            // } else if (this.mode === '24h') {
+            const isAllowedFn = this.allowed24HourMap
+                ? (num) => this.allowed24HourMap[num][0]
+                : undefined;
+            this.numbers = this.getNumbers(12, { size: 256 }, isAllowedFn);
+            this.secondaryNumbers = this.getNumbers(12, { size: 256 - 64, start: 13 }, isAllowedFn);
+            this.minuteDots = [];
+            //}
+        }
+        else {
+            //const meridiem : string = this.isPm ? 'pm' : 'am';
+            const isAllowedFn = 
+            // !!this.allowed12HourMap ? (num : number) => this.allowed12HourMap[meridiem][this.formattedHours][num] :
+            this.allowed24HourMap
+                ? (num) => this.allowed24HourMap[this.formattedHours][num]
+                : undefined;
+            this.numbers = this.getNumbers(12, { size: 256, start: 5, step: 5 }, isAllowedFn);
+            this.minuteDots = this.getNumbers(60, { size: 256, start: 13 }).map(digit => {
+                if (digit.display <= 59) {
+                    digit.allowed = isAllowedFn ? isAllowedFn(digit.display) : true;
+                    return digit;
+                }
+                digit.display = digit.display - 60;
+                digit.allowed = isAllowedFn ? isAllowedFn(digit.display) : true;
+                return digit;
+            });
+            this.secondaryNumbers = [];
+        }
+    }
+    disableAnimatedPointer() {
+        this.touching = true;
+    }
+    enableAnimatedPointer() {
+        this.touching = false;
+    }
+    handleTouchEnd(e) {
+        this.handleTouchMove(e);
+        this.enableAnimatedPointer();
+    }
+    handleMouseMove(e) {
+        // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari
+        if (e.buttons === 1 || e.which === 1) {
+            const rect = e.target.getBoundingClientRect();
+            this.movePointer(e.clientX - rect.left, e.clientY - rect.top);
+        }
+    }
+    handleClick(e) {
+        const rect = e.target.getBoundingClientRect();
+        this.movePointer(e.clientX - rect.left, e.clientY - rect.top);
+    }
+    movePointer(x, y) {
+        const value = this.getPointerValue(x, y, 256);
+        if (!this.isAvailable(value)) {
+            this.unavailableSelection.emit();
+            return;
+        }
+        if (value !== this.formattedValue) {
+            this.changeEvent.emit({
+                value,
+                type: this.viewType !== 'minutes' ? 'hours' : 'minutes',
+            });
+            if (this.viewType !== 'minutes') {
+                if (!this.isAvailable(value)) {
+                    if (this.minDate && this.isAvailable(value)) {
+                        this.changeEvent.emit({
+                            value: this.minDate.getMinutes(),
+                            type: 'minutes',
+                        });
+                    }
+                    else if (this.maxDate && this.isAvailable(value)) {
+                        this.changeEvent.emit({
+                            value: this.maxDate.getMinutes(),
+                            type: 'minutes',
+                        });
+                    }
+                }
+            }
+        }
+    }
+    getNumbers(count, { size = 0, start = 1, step = 1 }, isAllowedFn) {
+        // eslint-disable-next-line
+        return Array.apply(null, Array(count)).map((_, i) => ({
+            display: i * step + start,
+            translateX: (size / 2 - 20) * Math.cos((2 * Math.PI * (i - 2)) / count),
+            translateY: (size / 2 - 20) * Math.sin((2 * Math.PI * (i - 2)) / count),
+            allowed: isAllowedFn ? isAllowedFn(i) : true,
+        }));
+    }
+    getPointerAngle(value, _mode) {
+        if (this.viewType === 'hours') {
+            return (360 / 12) * ((value % 12) - 3);
+        }
+        return (360 / 60) * (value - 15);
+    }
+    getPointerValue(x, y, size) {
+        let value;
+        let angle = (Math.atan2(size / 2 - x, size / 2 - y) / Math.PI) * 180;
+        if (angle < 0) {
+            angle = 360 + angle;
+        }
+        if (this.viewType === 'hours') {
+            const radius = Math.sqrt(Math.pow(size / 2 - x, 2) + Math.pow(size / 2 - y, 2));
+            value = 12 - Math.round((angle * 12) / 360);
+            if (value === 0) {
+                value = 12;
+            }
+            if (radius < size / 2 - 32) {
+                value = value === 12 ? 0 : value + 12;
+            }
+            return value;
+        }
+        value = Math.round(60 - (60 * angle) / 360);
+        return value === 60 ? 0 : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ClockComponent, isStandalone: true, selector: "mat-clock", inputs: { viewType: "viewType", formattedValue: "formattedValue", minDate: "minDate", maxDate: "maxDate", formattedHours: "formattedHours", minutes: "minutes", allowed24HourMap: "allowed24HourMap" }, outputs: { changeEvent: "changeEvent", unavailableSelection: "unavailableSelection", invalidSelection: "invalidSelection" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"root\">\n  <div\n    class=\"circle\"\n    tabindex=\"1\"\n    (touchmove)=\"handleTouchMove($event)\"\n    (mousemove)=\"handleMouseMove($event)\"\n    (touchstart)=\"disableAnimatedPointer()\"\n    (mousedown)=\"disableAnimatedPointer()\"\n    (touchend)=\"handleTouchEnd($event)\"\n    (mouseup)=\"enableAnimatedPointer()\"\n    (click)=\"handleClick($event)\"\n  >\n    <div\n      class=\"pointer-container\"\n      [ngClass]=\"{\n        'small-pointer':\n          viewType === 'hours' && (formattedValue === 0 || formattedValue > 12),\n        'animated-pointer': !touching,\n      }\"\n      [style.transform]=\"'rotate(' + angle + 'deg)'\"\n    >\n      <button\n        aria-disabled=\"true\"\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"inner-dot\"\n        aria-label=\"Inner Dot\"\n      ></button>\n      <mat-toolbar color=\"accent\" class=\"pointer\">\n        <button\n          mat-mini-fab\n          color=\"neutral\"\n          class=\"outer-dot\"\n          aria-label=\"Outer dot\"\n          [ngClass]=\"{\n            'outer-dot-odd': viewType === 'minutes' && formattedValue % 5 !== 0,\n          }\"\n        >\n          @if (viewType === 'minutes' && formattedValue % 5 !== 0) {\n            <ng-container>\u00B7</ng-container>\n          }\n        </button>\n      </mat-toolbar>\n    </div>\n    @for (digit of minuteDots; track digit.display) {\n      <button\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"number minute-dot\"\n        [ngClass]=\"{\n          selected:\n            formattedValue === digit.display ||\n            (digit.display === 0 && formattedValue === 0),\n          disabled: !isAvailable(digit.display === 60 ? 0 : digit.display),\n        }\"\n        [style.transform]=\"\n          'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'\n        \"\n      >\n        @if (digit.display % 5 !== 0) {\n          <ng-container>\u00B7</ng-container>\n        }\n      </button>\n    }\n    @for (digit of numbers; track digit.display) {\n      <button\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"number\"\n        [ngClass]=\"{\n          selected:\n            formattedValue === digit.display ||\n            (digit.display === 60 && formattedValue === 0),\n          disabled: !isAvailable(digit.display === 60 ? 0 : digit.display),\n        }\"\n        [style.transform]=\"\n          'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'\n        \"\n      >\n        <ng-template #hoursTemplate>{{ digit.display }}</ng-template>\n        <ng-template #minutesTemplate>{{\n          digit.display === 60 ? '00' : digit.display\n        }}</ng-template>\n        @if (viewType === 'minutes') {\n          {{ digit.display === 60 ? '00' : digit.display }}\n        } @else {\n          {{ digit.display }}\n        }\n      </button>\n    }\n    @for (digit of secondaryNumbers; track digit.display) {\n      <button\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"number small-number\"\n        [ngClass]=\"{\n          selected:\n            formattedValue === digit.display ||\n            (digit.display === 24 && formattedValue === 0),\n          disabled: !isAvailable(digit.display === 24 ? 0 : digit.display),\n        }\"\n        [style.transform]=\"\n          'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'\n        \"\n      >\n        {{ digit.display === 24 ? '00' : digit.display }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".root{width:256px;height:256px;cursor:default}.circle{width:256px;height:256px;border-radius:50%;position:relative;background:var(--mat-sys-surface-container-high);cursor:pointer}.mat-mdc-mini-fab.number{width:32px;height:32px;left:calc(50% - 16px);top:calc(50% - 16px);position:absolute;text-align:center;line-height:32px;cursor:pointer;font-size:14px;pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:transparent;box-shadow:none;color:var(--mat-sys-on-surface)}.mat-mdc-mini-fab.number.selected{background:var(--background-gradient);color:var(--on-background-gradient)}.mat-mdc-mini-fab.number.disabled{opacity:.1}.mat-mdc-mini-fab.number:not(.selected):not(.disabled){color:var(--mat-sys-on-surface)}.small-number{font-size:12px}.small-number:not(.selected):not(.disabled){color:var(--mat-sys-on-surface-variant)}.pointer-container{width:calc(50% - 20px);height:2px;position:absolute;left:50%;top:calc(50% - 1px);transform-origin:left center;pointer-events:none}.pointer-container.disabled *{background-color:transparent}.pointer{height:1px;background-color:var(--mat-sys-on-surface)}.animated-pointer{transition:all .2s ease-out}.pointer-container.small-pointer{width:calc(50% - 52px)}.pointer-container.small-pointer mat-toolbar{padding:0 16px}.pointer-container mat-toolbar{padding:0 54px}.inner-dot{position:absolute;top:-3px;left:-4px;width:8px;height:8px;border-radius:50%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.outer-dot{width:32px;height:32px;position:absolute;right:-16px;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;border-radius:50%;box-sizing:content-box}.outer-dot-odd{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: OnemRvaColorDirective, selector: "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ClockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-clock', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatMiniFabButton, MatToolbar, OnemRvaColorDirective], template: "<div class=\"root\">\n  <div\n    class=\"circle\"\n    tabindex=\"1\"\n    (touchmove)=\"handleTouchMove($event)\"\n    (mousemove)=\"handleMouseMove($event)\"\n    (touchstart)=\"disableAnimatedPointer()\"\n    (mousedown)=\"disableAnimatedPointer()\"\n    (touchend)=\"handleTouchEnd($event)\"\n    (mouseup)=\"enableAnimatedPointer()\"\n    (click)=\"handleClick($event)\"\n  >\n    <div\n      class=\"pointer-container\"\n      [ngClass]=\"{\n        'small-pointer':\n          viewType === 'hours' && (formattedValue === 0 || formattedValue > 12),\n        'animated-pointer': !touching,\n      }\"\n      [style.transform]=\"'rotate(' + angle + 'deg)'\"\n    >\n      <button\n        aria-disabled=\"true\"\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"inner-dot\"\n        aria-label=\"Inner Dot\"\n      ></button>\n      <mat-toolbar color=\"accent\" class=\"pointer\">\n        <button\n          mat-mini-fab\n          color=\"neutral\"\n          class=\"outer-dot\"\n          aria-label=\"Outer dot\"\n          [ngClass]=\"{\n            'outer-dot-odd': viewType === 'minutes' && formattedValue % 5 !== 0,\n          }\"\n        >\n          @if (viewType === 'minutes' && formattedValue % 5 !== 0) {\n            <ng-container>\u00B7</ng-container>\n          }\n        </button>\n      </mat-toolbar>\n    </div>\n    @for (digit of minuteDots; track digit.display) {\n      <button\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"number minute-dot\"\n        [ngClass]=\"{\n          selected:\n            formattedValue === digit.display ||\n            (digit.display === 0 && formattedValue === 0),\n          disabled: !isAvailable(digit.display === 60 ? 0 : digit.display),\n        }\"\n        [style.transform]=\"\n          'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'\n        \"\n      >\n        @if (digit.display % 5 !== 0) {\n          <ng-container>\u00B7</ng-container>\n        }\n      </button>\n    }\n    @for (digit of numbers; track digit.display) {\n      <button\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"number\"\n        [ngClass]=\"{\n          selected:\n            formattedValue === digit.display ||\n            (digit.display === 60 && formattedValue === 0),\n          disabled: !isAvailable(digit.display === 60 ? 0 : digit.display),\n        }\"\n        [style.transform]=\"\n          'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'\n        \"\n      >\n        <ng-template #hoursTemplate>{{ digit.display }}</ng-template>\n        <ng-template #minutesTemplate>{{\n          digit.display === 60 ? '00' : digit.display\n        }}</ng-template>\n        @if (viewType === 'minutes') {\n          {{ digit.display === 60 ? '00' : digit.display }}\n        } @else {\n          {{ digit.display }}\n        }\n      </button>\n    }\n    @for (digit of secondaryNumbers; track digit.display) {\n      <button\n        mat-mini-fab\n        color=\"neutral\"\n        class=\"number small-number\"\n        [ngClass]=\"{\n          selected:\n            formattedValue === digit.display ||\n            (digit.display === 24 && formattedValue === 0),\n          disabled: !isAvailable(digit.display === 24 ? 0 : digit.display),\n        }\"\n        [style.transform]=\"\n          'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'\n        \"\n      >\n        {{ digit.display === 24 ? '00' : digit.display }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".root{width:256px;height:256px;cursor:default}.circle{width:256px;height:256px;border-radius:50%;position:relative;background:var(--mat-sys-surface-container-high);cursor:pointer}.mat-mdc-mini-fab.number{width:32px;height:32px;left:calc(50% - 16px);top:calc(50% - 16px);position:absolute;text-align:center;line-height:32px;cursor:pointer;font-size:14px;pointer-events:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:transparent;box-shadow:none;color:var(--mat-sys-on-surface)}.mat-mdc-mini-fab.number.selected{background:var(--background-gradient);color:var(--on-background-gradient)}.mat-mdc-mini-fab.number.disabled{opacity:.1}.mat-mdc-mini-fab.number:not(.selected):not(.disabled){color:var(--mat-sys-on-surface)}.small-number{font-size:12px}.small-number:not(.selected):not(.disabled){color:var(--mat-sys-on-surface-variant)}.pointer-container{width:calc(50% - 20px);height:2px;position:absolute;left:50%;top:calc(50% - 1px);transform-origin:left center;pointer-events:none}.pointer-container.disabled *{background-color:transparent}.pointer{height:1px;background-color:var(--mat-sys-on-surface)}.animated-pointer{transition:all .2s ease-out}.pointer-container.small-pointer{width:calc(50% - 52px)}.pointer-container.small-pointer mat-toolbar{padding:0 16px}.pointer-container mat-toolbar{padding:0 54px}.inner-dot{position:absolute;top:-3px;left:-4px;width:8px;height:8px;border-radius:50%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.outer-dot{width:32px;height:32px;position:absolute;right:-16px;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;border-radius:50%;box-sizing:content-box}.outer-dot-odd{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-direction:column}\n"] }]
+        }], propDecorators: { viewType: [{
+                type: Input
+            }], formattedValue: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], formattedHours: [{
+                type: Input
+            }], minutes: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
+            }], unavailableSelection: [{
+                type: Output
+            }], invalidSelection: [{
+                type: Output
+            }], allowed24HourMap: [{
+                type: Input
+            }] } });
+
+class MatTimepickerComponentDialogComponent {
+    set value(value) {
+        value = value || this.minDate || this.maxDate || new Date();
+        this.hours = value.getHours();
+        this.minutes = value.getMinutes();
+        this._value = value;
+    }
+    get value() {
+        return this._value;
+    }
+    set hours(value) {
+        this._hours = value;
+        this._formattedHour = convertHoursForMode(this.hours).hour;
+    }
+    get hours() {
+        return this._hours;
+    }
+    get formattedHours() {
+        return this._formattedHour;
+    }
+    bindData(data) {
+        this.okLabel = data.okLabel;
+        this.cancelLabel = data.cancelLabel;
+        this.color = data.color;
+        this.minDate = data.minDate;
+        this.maxDate = data.maxDate;
+        this.allowed24HourMap = data.allowed24HourMap;
+    }
+    constructor() {
+        this.twoDigits = twoDigits;
+        this.changeEvent = new EventEmitter();
+        this.okClickEvent = new EventEmitter();
+        this.cancelClickEvent = new EventEmitter();
+        this.invalidSelection = false;
+        this.okLabel = '';
+        this.cancelLabel = '';
+        this.viewType = 'hours';
+        this.color = 'primary';
+        this.isPm = false;
+        this.skipMinuteAutoSwitch = false;
+        this.editHoursClicked = false;
+        this.isClosing = false;
+        this.dialog = inject(MatDialog);
+        this.data = inject(MAT_DIALOG_DATA);
+        this.isPm = this.data.isPm;
+        this.bindData(this.data);
+        // keep this always at the bottom
+        this.value = this.data.value;
+    }
+    ngDoCheck() {
+        this.bindData(this.data);
+    }
+    handleClockChange({ value, type, }) {
+        if ((type && type === 'hours') || (!type && this.viewType === 'hours')) {
+            this.hours = value;
+        }
+        else if ((type && type === 'minutes') ||
+            (!type && this.viewType === 'minutes')) {
+            this.minutes = value;
+        }
+        const newValue = new Date();
+        const hours = this.hours;
+        // newValue.setFullYear(0);
+        // newValue.setMonth(0);
+        // newValue.setDate(0);
+        newValue.setHours(hours);
+        newValue.setMinutes(this.minutes);
+        newValue.setSeconds(0);
+        newValue.setMilliseconds(0);
+        this.value = newValue;
+        this.changeEvent.emit(newValue);
+    }
+    handleUnavailableSelection() {
+        clearTimeout(this.autoSwitchID);
+    }
+    handleClockChangeDone(e) {
+        e.preventDefault(); // prevent mouseUp after touchEnd
+        if (this.viewType === 'hours' && !this.skipMinuteAutoSwitch) {
+            this.autoSwitchID = setTimeout(() => {
+                this.editMinutes();
+                this.autoSwitchID = null;
+            }, 300);
+        }
+    }
+    editHours() {
+        this.viewType = 'hours';
+        this.editHoursClicked = true;
+        setTimeout(() => {
+            this.editHoursClicked = false;
+        }, 0);
+    }
+    editMinutes() {
+        this.viewType = 'minutes';
+    }
+    invalidSelectionHandler(value) {
+        this.invalidSelection = value;
+    }
+    okClickHandler() {
+        this.okClickEvent.emit();
+    }
+    cancelClickHandler() {
+        this.cancelClickEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimepickerComponentDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: MatTimepickerComponentDialogComponent, isStandalone: true, selector: "mat-timepicker-dialog", outputs: { changeEvent: "changeEvent", okClickEvent: "okClickEvent", cancelClickEvent: "cancelClickEvent" }, ngImport: i0, template: "<mat-dialog-content>\n  <div class=\"root\">\n    <mat-toolbar color=\"accent\" class=\"header\">\n      <div class=\"time-frame\">\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: viewType === 'hours' && 'active' }\"\n          (click)=\"editHours()\"\n          role=\"button\"\n          tabindex=\"0\"\n        >\n          {{ twoDigits(formattedHours) }}\n        </span>\n        <span class=\"fixed-font-size\">:</span>\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: viewType === 'minutes' && 'active' }\"\n          (click)=\"editMinutes()\"\n          tabindex=\"1\"\n          role=\"button\"\n        >\n          {{ twoDigits(minutes) }}\n        </span>\n      </div>\n    </mat-toolbar>\n    <div class=\"body\">\n      <mat-clock\n        [allowed24HourMap]=\"allowed24HourMap\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [viewType]=\"viewType\"\n        [formattedHours]=\"formattedHours\"\n        [minutes]=\"minutes\"\n        (changeEvent)=\"handleClockChange($event)\"\n        (unavailableSelection)=\"handleUnavailableSelection()\"\n        [formattedValue]=\"viewType === 'minutes' ? minutes : formattedHours\"\n        (mouseup)=\"handleClockChangeDone($event)\"\n        (touchend)=\"handleClockChangeDone($event)\"\n        (invalidSelection)=\"invalidSelectionHandler($event)\"\n      ></mat-clock>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button color=\"primary\" (click)=\"cancelClickHandler()\">\n    {{ cancelLabel }}\n  </button>\n  <button\n    mat-flat-button\n    [disabled]=\"invalidSelection\"\n    [color]=\"color\"\n    (click)=\"okClickHandler()\"\n  >\n    {{ okLabel }}\n  </button>\n</mat-dialog-actions>\n", styles: [".mdc-dialog__content{min-height:395px;padding:0!important;overflow:hidden}mat-dialog-actions{justify-content:flex-end;margin:0}.root{min-width:282px}.header{border-top-left-radius:2px;border-top-right-radius:2px;padding:20px 0;line-height:58px;font-size:58px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;height:98px}.header .fixed-font-size{font-size:58px}.header .time-frame{height:60px}.time{transition:all .2s ease-out;cursor:pointer}.time:not(.select){opacity:.6}.placeholder{flex:1}.ampm{display:flex;flex-direction:column-reverse;flex:1;font-size:14px;line-height:20px;margin-left:16px;font-weight:700}.body{padding:24px 16px 20px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ClockComponent, selector: "mat-clock", inputs: ["viewType", "formattedValue", "minDate", "maxDate", "formattedHours", "minutes", "allowed24HourMap"], outputs: ["changeEvent", "unavailableSelection", "invalidSelection"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: OnemRvaColorDirective, selector: "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]", inputs: ["color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimepickerComponentDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-timepicker-dialog', standalone: true, imports: [
+                        MatDialogContent,
+                        MatToolbar,
+                        NgClass,
+                        ClockComponent,
+                        MatDialogActions,
+                        MatButton,
+                        OnemRvaColorDirective,
+                    ], template: "<mat-dialog-content>\n  <div class=\"root\">\n    <mat-toolbar color=\"accent\" class=\"header\">\n      <div class=\"time-frame\">\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: viewType === 'hours' && 'active' }\"\n          (click)=\"editHours()\"\n          role=\"button\"\n          tabindex=\"0\"\n        >\n          {{ twoDigits(formattedHours) }}\n        </span>\n        <span class=\"fixed-font-size\">:</span>\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: viewType === 'minutes' && 'active' }\"\n          (click)=\"editMinutes()\"\n          tabindex=\"1\"\n          role=\"button\"\n        >\n          {{ twoDigits(minutes) }}\n        </span>\n      </div>\n    </mat-toolbar>\n    <div class=\"body\">\n      <mat-clock\n        [allowed24HourMap]=\"allowed24HourMap\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [viewType]=\"viewType\"\n        [formattedHours]=\"formattedHours\"\n        [minutes]=\"minutes\"\n        (changeEvent)=\"handleClockChange($event)\"\n        (unavailableSelection)=\"handleUnavailableSelection()\"\n        [formattedValue]=\"viewType === 'minutes' ? minutes : formattedHours\"\n        (mouseup)=\"handleClockChangeDone($event)\"\n        (touchend)=\"handleClockChangeDone($event)\"\n        (invalidSelection)=\"invalidSelectionHandler($event)\"\n      ></mat-clock>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button color=\"primary\" (click)=\"cancelClickHandler()\">\n    {{ cancelLabel }}\n  </button>\n  <button\n    mat-flat-button\n    [disabled]=\"invalidSelection\"\n    [color]=\"color\"\n    (click)=\"okClickHandler()\"\n  >\n    {{ okLabel }}\n  </button>\n</mat-dialog-actions>\n", styles: [".mdc-dialog__content{min-height:395px;padding:0!important;overflow:hidden}mat-dialog-actions{justify-content:flex-end;margin:0}.root{min-width:282px}.header{border-top-left-radius:2px;border-top-right-radius:2px;padding:20px 0;line-height:58px;font-size:58px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;height:98px}.header .fixed-font-size{font-size:58px}.header .time-frame{height:60px}.time{transition:all .2s ease-out;cursor:pointer}.time:not(.select){opacity:.6}.placeholder{flex:1}.ampm{display:flex;flex-direction:column-reverse;flex:1;font-size:14px;line-height:20px;margin-left:16px;font-weight:700}.body{padding:24px 16px 20px;display:flex;justify-content:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { changeEvent: [{
+                type: Output
+            }], okClickEvent: [{
+                type: Output
+            }], cancelClickEvent: [{
+                type: Output
+            }] } });
+
+let NEXT_ID = 0;
+class OnemrvaMatTimepickerComponent {
+    constructor() {
+        this.isAlive = new Subject();
+        this.dialog = inject(MatDialog);
+        this.opened = false;
+        /** Emits when the timepicker's state changes. */
+        this.stateChanges = new Subject();
+        // eslint-disable-next-line @angular-eslint/no-output-rename
+        this.openedStream = new EventEmitter();
+        // eslint-disable-next-line @angular-eslint/no-output-rename
+        this.closedStream = new EventEmitter();
+        /**
+         * Returns the `aria-label` attribute of the element.
+         *
+         * @example
+         * ```typescript
+         * let timepickerLabel = this.timepicker.ariaLabel;
+         * ```
+         *
+         */
+        this.ariaLabel = '';
+        this.dialogLabel = 'Pick a Time';
+        /**
+         * Returns the `role` attribute of the element.
+         *
+         * @example
+         * ```typescript
+         * let timepickerRole = this.timepicker.role;
+         * ```
+         */
+        this.role = '';
+        /**
+         * Host `class.onemrva-mat-timepicker` binding.
+         *
+         * @hidden
+         * @internal
+         */
+        this.cssClass = 'onemrva-mat-timepicker';
+        /**
+         * Sets the `id` of the element. If not set, the first component instance will have `id` = `"onemrva-mat-timepicker-0"`.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
+         * ```
+         */
+        this.id = `onemrva-mat-timepicker-${NEXT_ID++}`;
+        /**
+         * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-timepicker-0"`.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
+         * ```
+         */
+        this.dataCy = `onemrva-mat-timepicker-${NEXT_ID++}`;
+        /**
+         * @hidden
+         * @internal
+         */
+        this._color = 'primary';
+        /**
+         * @hidden
+         * @internal
+         */
+        this._size = OnemrvaMatSize.SMALL;
+        this.handleChange = (newValue) => {
+            if (!(newValue instanceof Date)) {
+                return;
+            }
+            const v = this.value instanceof Date ? new Date(this.value.getTime()) : new Date();
+            v.setHours(newValue.getHours());
+            v.setMinutes(newValue.getMinutes());
+            v.setSeconds(0);
+            v.setMilliseconds(0);
+            this.value = v;
+        };
+        this.handleOk = () => {
+            if (this.onChangeFn) {
+                this.onChangeFn(this.value);
+            }
+            this.timepickerInput.value = this.value;
+            this.modalRef.close();
+        };
+        this.handleCancel = () => {
+            this.modalRef.close();
+        };
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+    }
+    setTimepickerInput(t) {
+        this.timepickerInput = t;
+    }
+    /**
+     * Returns the color of the element.
+     *
+     * @example
+     * ```typescript
+     * let color = this.timepicker.color;
+     * ```
+     */
+    get color() {
+        return this._color;
+    }
+    /**
+     * Sets the size  of the element.
+     * By default, the color is `"primary"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
+     * ```
+     */
+    set color(value) {
+        switch (value) {
+            case OnemrvaMatColor.PRIMARY:
+            case OnemrvaMatColor.ACCENT:
+            case OnemrvaMatColor.WARN:
+                this._color = value;
+                break;
+            default:
+                this._color = OnemrvaMatColor.PRIMARY;
+        }
+    }
+    /** @hidden @internal */
+    get _isPrimary() {
+        return this.color === OnemrvaMatColor.PRIMARY;
+    }
+    /** @hidden @internal */
+    get _isAccent() {
+        return this.color === OnemrvaMatColor.ACCENT;
+    }
+    /**
+     * Returns the size of the element.
+     *
+     * @example
+     * ```typescript
+     * let timepickerSize = this.timepicker.size;
+     * ```
+     */
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the size  of the element.
+     * By default, the size is `"medium"`.
+     *
+     * @example
+     * ```html
+     * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
+     * ```
+     */
+    set size(value) {
+        switch (value) {
+            case OnemrvaMatSize.XSMALL:
+            case OnemrvaMatSize.SMALL:
+            case OnemrvaMatSize.MEDIUM:
+            case OnemrvaMatSize.LARGE:
+            case OnemrvaMatSize.XLARGE:
+                this._size = value;
+                break;
+            default:
+                this._size = OnemrvaMatSize.MEDIUM;
+        }
+    }
+    open() {
+        if (this.timepickerInput.disabled) {
+            return;
+        }
+        this.value = this.timepickerInput.currentValue;
+        if (this.value === undefined || this.value === null) {
+            this.value = new Date();
+        }
+        this.modalRef = this.dialog.open(MatTimepickerComponentDialogComponent, {
+            ariaLabel: this.dialogLabel,
+            autoFocus: false,
+            data: {
+                value: this.timepickerInput.currentValue,
+                okLabel: this.timepickerInput.okLabel,
+                cancelLabel: this.timepickerInput.cancelLabel,
+                color: this.color,
+                minDate: this.timepickerInput.minDate,
+                maxDate: this.timepickerInput.maxDate,
+                allowed24HourMap: this.timepickerInput.allowed24HourMap,
+            },
+        });
+        const instance = this.modalRef.componentInstance;
+        instance.changeEvent
+            .pipe(takeUntil(this.isAlive))
+            .subscribe(this.handleChange);
+        instance.okClickEvent
+            .pipe(takeUntil(this.isAlive))
+            .subscribe(this.handleOk);
+        instance.cancelClickEvent
+            .pipe(takeUntil(this.isAlive))
+            .subscribe(this.handleCancel);
+        this.modalRef
+            .beforeClosed()
+            .pipe(first())
+            .subscribe(() => (instance.isClosing = true));
+        this.modalRef
+            .afterClosed()
+            .pipe(first())
+            .subscribe(() => {
+            if (this.timepickerInput.onTouchedFn) {
+                this.timepickerInput.onTouchedFn();
+            }
+            //this.modalRef = null;
+            this.timepickerInput.elRef.nativeElement.focus();
+        });
+        this.timepickerInput.currentValue = this.value;
+    }
+    ngOnDestroy() {
+        this.isAlive.next('0');
+        this.isAlive.complete();
+        this.stateChanges.complete();
+        // if (this._platform.isBrowser) {
+        //     this.fm.stopMonitoring(this.elRef.nativeElement);
+        // }
+        //
+        // this.listeners.forEach(l => l());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: OnemrvaMatTimepickerComponent, isStandalone: true, selector: "mat-timepicker", inputs: { dialogLabel: "dialogLabel", id: "id", dataCy: "dataCy", color: "color", size: "size" }, outputs: { openedStream: "opened", closedStream: "closed" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.onemrva-mat-timepicker": "this.cssClass", "attr.id": "this.id", "attr.data-cy": "this.dataCy", "class.mat-primary": "this._isPrimary", "class.mat-accent": "this._isAccent" } }, ngImport: i0, template: "" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-timepicker', template: "" }]
+        }], propDecorators: { openedStream: [{
+                type: Output,
+                args: ['opened']
+            }], closedStream: [{
+                type: Output,
+                args: ['closed']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], dialogLabel: [{
+                type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class.onemrva-mat-timepicker']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], dataCy: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }, {
+                type: Input
+            }], color: [{
+                type: Input
+            }], _isPrimary: [{
+                type: HostBinding,
+                args: ['class.mat-primary']
+            }], _isAccent: [{
+                type: HostBinding,
+                args: ['class.mat-accent']
+            }], size: [{
+                type: Input
+            }] } });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/** Can be used to override the icon of a `matDatepickerToggle`. */
+class MatTimepickerToggleIconDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: MatTimepickerToggleIconDirective, isStandalone: true, selector: "[matDatepickerToggleIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimepickerToggleIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[matDatepickerToggleIcon]',
+                }]
+        }] });
+class MatTimePickerToggle {
+    /** Whether the toggle button is disabled. */
+    get disabled() {
+        if (this.timepicker) {
+            return this.timepicker.timepickerInput._disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    constructor() {
+        this._stateChanges = Subscription.EMPTY;
+        /** Screenreader label for the button. */
+        this.ariaLabel = '';
+        this._disabled = false;
+        /** Whether ripples on the toggle should be disabled. */
+        this.disableRipple = false;
+        this.$event = new Event('abrupt');
+        /** Underlying button element. */
+        //@ViewChild('button') _button: MatButton;
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        const defaultTabIndex = inject(new HostAttributeToken('tabindex'), {
+            optional: true,
+        });
+        const parsedTabIndex = Number(defaultTabIndex);
+        this.tabIndex =
+            parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
+    }
+    ngOnChanges(changes) {
+        if (changes['timepicker']) {
+            this._watchStateChanges();
+        }
+    }
+    ngOnDestroy() {
+        this._stateChanges.unsubscribe();
+    }
+    ngAfterContentInit() {
+        this._watchStateChanges();
+    }
+    _open(event) {
+        if (this.timepicker && !this.disabled) {
+            this.timepicker.open();
+            event.stopPropagation();
+        }
+    }
+    _watchStateChanges() {
+        const datepickerStateChanged = this.timepicker
+            ? this.timepicker.stateChanges
+            : of();
+        const inputStateChanged = this.timepicker && this.timepicker.timepickerInput
+            ? this.timepicker.timepickerInput.stateChanges
+            : of();
+        const datepickerToggled = this.timepicker
+            ? merge(this.timepicker.openedStream, this.timepicker.closedStream)
+            : of();
+        this._stateChanges.unsubscribe();
+        this._stateChanges = merge(datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimePickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: MatTimePickerToggle, isStandalone: true, selector: "mat-timepicker-toggle", inputs: { timepicker: ["for", "timepicker"], tabIndex: "tabIndex", ariaLabel: "ariaLabel", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mat-timepicker-toggle-active": "timepicker && timepicker.opened", "class.mat-accent": "timepicker && timepicker.color === \"accent\"", "class.mat-warn": "timepicker && timepicker.color === \"warn\"", "attr.data-mat-calendar": "timepicker ? timepicker.id : null" }, classAttribute: "mat-timepicker-toggle" }, exportAs: ["matDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"timepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  <mat-icon>schedule</mat-icon>\n\n  <ng-content select=\"[mattimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimePickerToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-timepicker-toggle', host: {
+                        class: 'mat-timepicker-toggle',
+                        '[attr.tabindex]': 'null',
+                        '[class.mat-timepicker-toggle-active]': 'timepicker && timepicker.opened',
+                        '[class.mat-accent]': 'timepicker && timepicker.color === "accent"',
+                        '[class.mat-warn]': 'timepicker && timepicker.color === "warn"',
+                        // Used by the test harness to tie this toggle to its timepicker.
+                        '[attr.data-mat-calendar]': 'timepicker ? timepicker.id : null',
+                        // Bind the `click` on the host, rather than the inner `button`, so that we can call
+                        // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
+                        // it so that the input doesn't get focused automatically by the form field (See #21836).
+                        '(click)': '_open($event)',
+                    }, exportAs: 'matDatepickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconButton, MatIcon], template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"timepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  <mat-icon>schedule</mat-icon>\n\n  <ng-content select=\"[mattimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-datepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-datepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon{margin:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { timepicker: [{
+                type: Input,
+                args: ['for']
+            }], tabIndex: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], disableRipple: [{
+                type: Input
+            }] } });
+
+class MatTimepickerDirective {
+    static { this.nextId = 0; }
+    /** The datepicker that this input is associated with. */
+    set matTimepicker(timepicker) {
+        if (timepicker) {
+            this._timepicker = timepicker;
+            this._timepicker.setTimepickerInput(this);
+            this._closedSubscription = timepicker.closedStream.subscribe(() => this._onTouched());
+            //this._registerModel(datepicker.registerInput(this));
+        }
+    }
+    get errorState() {
+        const oldState = this._errorState;
+        const parent = this._parentFormGroup || this._parentForm;
+        const control = this.ngControl
+            ? this.ngControl.control
+            : null;
+        const newState = this.errorStateMatcher
+            ? this.errorStateMatcher.isErrorState(control, parent)
+            : oldState;
+        if (newState !== oldState) {
+            this._errorState = newState;
+            this.stateChanges.next();
+        }
+        return newState;
+    }
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        // Browsers may not fire the blur event if the input is disabled too quickly.
+        // Reset from here to ensure that the element doesn't become stuck.
+        if (this.focused) {
+            this.focused = false;
+        }
+        this.stateChanges.next();
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        this._readonly = coerceBooleanProperty(value);
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        if (this.ngControl?.control) {
+            return this.ngControl.control.hasValidator(Validators.required);
+        }
+        return this._required;
+    }
+    set required(req) {
+        this._required = coerceBooleanProperty(req);
+        this.stateChanges.next();
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(plh) {
+        this._placeholder = plh;
+        this.stateChanges.next();
+    }
+    set value(value) {
+        if (value === this._value) {
+            return;
+        }
+        this._value = value;
+        if (!value) {
+            this._formattedValueString = '';
+            this.setInputElementValue(value);
+            this.currentValue = value ?? new Date();
+            return;
+        }
+        this._formattedValueString = `${twoDigits(value.getHours())}:${twoDigits(value.getMinutes())}`;
+        if (!this.isInputFocused) {
+            this.setInputElementValue(this.formattedValueString);
+        }
+        this.currentValue = value;
+        this.stateChanges.next();
+        if (this._skipValueChangeEmission) {
+            return;
+        }
+        this.timeChange.emit(this.currentValue);
+        if (this.onChangeFn)
+            this.onChangeFn(this.value);
+    }
+    get value() {
+        return this._value;
+    }
+    get empty() {
+        return !(this.currentValue instanceof Date);
+    }
+    get formattedValueString() {
+        return this._formattedValueString;
+    }
+    inputHandler() {
+        const value = this.elRef.nativeElement.value;
+        const length = value.length;
+        if (length === 0) {
+            this.writeValue(null, true);
+            this._value = null;
+            this._skipValueChangeEmission = true;
+            Promise.resolve().then(() => (this._skipValueChangeEmission = false));
+            if (this.onChangeFn) {
+                this.onChangeFn(null);
+            }
+            return;
+        }
+        const valueHasColumn = value.includes(':');
+        let [hours, minutes] = length === 1
+            ? [value, 0]
+            : length === 2 && !valueHasColumn
+                ? [value, 0]
+                : valueHasColumn
+                    ? value.split(':')
+                    : value.split(/(\d\d)/).filter(v => v);
+        hours = +hours;
+        if (/\s/.test(minutes)) {
+            let other;
+            [minutes, other] = minutes.split(/\s/);
+            if (other === 'pm' && !isNaN(hours) && hours < 12) {
+                hours += 12;
+            }
+        }
+        minutes = +minutes;
+        if (isNaN(hours) || isNaN(minutes)) {
+            //this.writeValue(null, true);
+            this._skipValueChangeEmission = true;
+            Promise.resolve().then(() => (this._skipValueChangeEmission = false));
+            return;
+        }
+        if (+hours > 24) {
+            hours = '24';
+        }
+        else if (+hours < 0) {
+            hours = '0';
+        }
+        if (+minutes > 59) {
+            minutes = '59';
+        }
+        else if (+minutes < 0) {
+            minutes = '0';
+        }
+        const d = this.value ? new Date(this.value.getTime()) : new Date();
+        d.setHours(+hours);
+        d.setMinutes(+minutes);
+        d.setSeconds(0);
+        d.setMilliseconds(0);
+        const isValueInRange = isDateInRange(this.minDate, this.maxDate, d);
+        if (!isValueInRange) {
+            this.invalidInput.emit();
+        }
+        this.writeValue(d, true);
+        if (this.onChangeFn) {
+            this.onChangeFn(d);
+        }
+    }
+    keydownHandler(event) {
+        const e = event;
+        const allowedKey = [
+            '0',
+            '1',
+            '2',
+            '3',
+            '4',
+            '5',
+            '6',
+            '7',
+            '8',
+            '9',
+            ':',
+            'Backspace',
+            'Delete',
+            'Tab',
+            'Enter',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+        ];
+        if (allowedKey.indexOf(e.key) >= 0)
+            return;
+        const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
+        if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0)
+            return;
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            this.combination = this.combination.concat(event.code);
+            return;
+        }
+        const target = event.target;
+        const tValue = target.value;
+        const value = `${tValue.slice(0, target.selectionStart)}${event.key}${tValue.slice(target.selectionEnd)}`;
+        if (value.match(this.pattern) || this.combination.length > 0) {
+            return true;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
+    }
+    keyupHandler(event) {
+        this.combination = this.combination.filter(v => v !== event.code);
+    }
+    focusHandler() {
+        this.isInputFocused = true;
+    }
+    focusoutHandler() {
+        this.isInputFocused = false;
+        this.setInputElementValue(this.formattedValueString);
+        if (this.onTouchedFn && !this._timepicker.modalRef) {
+            this.onTouchedFn();
+        }
+    }
+    constructor() {
+        this._closedSubscription = Subscription.EMPTY;
+        this._errorState = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouched = () => { };
+        this._disabled = false;
+        this._id = '0';
+        this._readonly = false;
+        this.stateChanges = new Subject();
+        this._uid = `mat-input-${MatTimepickerDirective.nextId++}`;
+        this.describedBy = '';
+        this._required = false;
+        this._placeholder = '';
+        this.focused = false;
+        this.pattern = new RegExp('[0-2]?[0-9]:[0-6]?[0-9]');
+        this.allowed24HourMap = this.generateAllowedMap();
+        this.isInputFocused = false;
+        /** Override the label of the ok button. */
+        this.okLabel = 'Ok';
+        /** Override the label of the cancel button. */
+        this.cancelLabel = 'Cancel';
+        /** Sets the clock mode, 12-hour or 24-hour clocks are supported. */
+        this.color = 'primary';
+        this.disableDialogOpenOnClick = false;
+        this.strict = true;
+        this.controlType = 'angular-material-timepicker';
+        this._value = null;
+        this._formattedValueString = '';
+        this._skipValueChangeEmission = true;
+        this.combination = [];
+        this.timeChange = new EventEmitter();
+        this.invalidInput = new EventEmitter();
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.fm = inject(FocusMonitor);
+        this.elRef = inject((ElementRef));
+        this.ngZone = inject(NgZone);
+        this._platform = inject(Platform);
+        this._parentForm = inject(NgForm, { optional: true });
+        this._matFormFiled = inject(MatFormField, { optional: true });
+        this._parentFormGroup = inject(FormGroupDirective, {
+            optional: true,
+        });
+        this._defaultErrorStateMatcher = inject(ErrorStateMatcher);
+        this.errorStateMatcher = this._defaultErrorStateMatcher;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+        if (this._platform.IOS) {
+            this.ngZone.runOutsideAngular(() => {
+                this.elRef.nativeElement.addEventListener('keyup', (event) => {
+                    const el = event.target;
+                    if (!el.value && !el.selectionStart && !el.selectionEnd) {
+                        // Note: Just setting `0, 0` doesn't fix the issue. Setting
+                        // `1, 1` fixes it for the first time that you type text and
+                        // then hold delete. Toggling to `1, 1` and then back to
+                        // `0, 0` seems to completely fix it.
+                        el.setSelectionRange(1, 1);
+                        el.setSelectionRange(0, 0);
+                    }
+                });
+            });
+        }
+        this._isServer = !this._platform.isBrowser;
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick(event) {
+        if (event.target.tagName.toLowerCase() !== 'input') {
+            this.elRef.nativeElement.focus();
+        }
+    }
+    setInputElementValue(value) {
+        Promise.resolve().then(() => {
+            this.zone.runOutsideAngular(() => {
+                this.renderer.setProperty(this.elRef.nativeElement, 'value', value);
+            });
+        });
+    }
+    validate() {
+        const isValueInRange = this.strict
+            ? isDateInRange(this.minDate, this.maxDate, this.currentValue)
+            : isTimeInRange(this.minDate, this.maxDate, this.currentValue);
+        return isValueInRange ? null : { dateRange: true };
+    }
+    ngOnInit() {
+        if (this._platform.isBrowser) {
+            this.fm.monitor(this.elRef.nativeElement, true).subscribe(origin => {
+                this.focused = !!origin;
+                this.stateChanges.next();
+            });
+        }
+        if (!this.value) {
+            const hasMaxDate = !!this.maxDate;
+            const hasMinDate = !!this.minDate;
+            //if (hasMinDate || hasMaxDate) {
+            if (hasMinDate) {
+                this.minDate.setSeconds(0);
+                this.minDate.setMilliseconds(0);
+            }
+            if (hasMaxDate) {
+                this.maxDate.setSeconds(0);
+                this.maxDate.setMilliseconds(0);
+            }
+            if (!this.ngControl._rawValidators.find((v) => v === this)) {
+                this.ngControl._rawValidators.push(this);
+            }
+            //}
+        }
+        this._skipValueChangeEmission = false;
+    }
+    generateAllowedMap() {
+        const isStrictMode = this.strict && this.value instanceof Date;
+        const a24hm = {};
+        for (let h = 0; h < 24; h++) {
+            for (let m = 0; m < 60; m++) {
+                const hourMap = a24hm[h] || {};
+                if (isStrictMode && this.value) {
+                    const currentDate = new Date(this.value.getTime());
+                    currentDate.setHours(h);
+                    currentDate.setMinutes(m);
+                    currentDate.setSeconds(0);
+                    currentDate.setMilliseconds(0);
+                    hourMap[m] = isDateInRange(this.minDate, this.maxDate, currentDate);
+                }
+                else {
+                    hourMap[m] = isAllowed(h, m, this.minDate, this.maxDate);
+                }
+                a24hm[h] = hourMap;
+            }
+        }
+        return a24hm;
+    }
+    ngOnChanges() {
+        this.pattern = /^[0-9]{1,2}:?([0-9]{1,2})?$/;
+        if (!this._timepicker.modalRef ||
+            !this._timepicker.modalRef.componentInstance) {
+            return;
+        }
+        this._timepicker.modalRef.componentInstance.data = {
+            value: this.currentValue,
+            okLabel: this.okLabel,
+            cancelLabel: this.cancelLabel,
+            color: this.color,
+            minDate: this.minDate,
+            maxDate: this.maxDate,
+            allowed24HourMap: this.allowed24HourMap,
+        };
+    }
+    checkValidity(value) {
+        if (!value) {
+            return false;
+        }
+        const hour = value.getHours();
+        const minutes = value.getMinutes();
+        return isAllowed(hour, minutes, this.minDate, this.maxDate);
+    }
+    writeValue(value, isInnerCall = false) {
+        if (!isInnerCall) {
+            this._skipValueChangeEmission = true;
+            Promise.resolve().then(() => (this._skipValueChangeEmission = false));
+        }
+        if (value) {
+            value.setSeconds(0);
+            value.setMilliseconds(0);
+        }
+        if (this.value && +this.value === +(value ?? 0)) {
+            return;
+        }
+        else {
+            this.value = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.stateChanges.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimepickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: MatTimepickerDirective, isStandalone: true, selector: "input[matTimepicker]", inputs: { matTimepicker: "matTimepicker", disabled: "disabled", id: "id", readonly: "readonly", errorStateMatcher: "errorStateMatcher", required: "required", placeholder: "placeholder", okLabel: "okLabel", cancelLabel: "cancelLabel", color: "color", disableDialogOpenOnClick: "disableDialogOpenOnClick", strict: "strict", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { timeChange: "timeChange", invalidInput: "invalidInput" }, host: { listeners: { "input": "inputHandler()", "keydown": "keydownHandler($event)", "keyup": "keyupHandler($event)", "focus": "focusHandler()", "focusout": "focusoutHandler()" }, properties: { "class.mat-input-server": "_isServer", "attr.id": "id", "attr.placeholder": "placeholder", "disabled": "disabled", "required": "required", "attr.readonly": "readonly || null", "attr.aria-invalid": "errorState", "attr.aria-required": "required.toString()", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" }, classAttribute: "mat-input-element mat-form-field-autofill-control" }, providers: [
+            { provide: MatFormFieldControl, useExisting: MatTimepickerDirective },
+        ], exportAs: ["matTimepicker"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatTimepickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[matTimepicker]',
+                    providers: [
+                        { provide: MatFormFieldControl, useExisting: MatTimepickerDirective },
+                    ],
+                    host: {
+                        class: 'mat-input-element mat-form-field-autofill-control',
+                        '[class.mat-input-server]': '_isServer',
+                        // Native input properties that are overwritten by Angular inputs need to be synced with
+                        // the native input element. Otherwise property bindings for those don't work.
+                        '[attr.id]': 'id',
+                        '[attr.placeholder]': 'placeholder',
+                        '[disabled]': 'disabled',
+                        '[required]': 'required',
+                        '[attr.readonly]': 'readonly || null',
+                        '[attr.aria-invalid]': 'errorState',
+                        '[attr.aria-required]': 'required.toString()',
+                    },
+                    exportAs: 'matTimepicker',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { matTimepicker: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
+            }], describedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], errorStateMatcher: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], okLabel: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], disableDialogOpenOnClick: [{
+                type: Input
+            }], strict: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], timeChange: [{
+                type: Output
+            }], invalidInput: [{
+                type: Output
+            }], inputHandler: [{
+                type: HostListener,
+                args: ['input']
+            }], keydownHandler: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], keyupHandler: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focus']
+            }], focusoutHandler: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+class OnemrvaMatTimepickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
+            MatTimepickerDirective,
+            MatTimepickerComponentDialogComponent,
+            MatTimepickerToggleIconDirective,
+            MatTimePickerToggle,
+            OnemrvaMatTimepickerComponent], exports: [MatTimepickerDirective,
+            MatTimePickerToggle,
+            OnemrvaMatTimepickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
+            MatTimepickerComponentDialogComponent,
+            MatTimePickerToggle] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatTimepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ClockComponent,
+                        MatTimepickerDirective,
+                        MatTimepickerComponentDialogComponent,
+                        MatTimepickerToggleIconDirective,
+                        MatTimePickerToggle,
+                        OnemrvaMatTimepickerComponent,
+                    ],
+                    exports: [
+                        MatTimepickerDirective,
+                        MatTimePickerToggle,
+                        OnemrvaMatTimepickerComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClockComponent, MatTimePickerToggle, MatTimepickerComponentDialogComponent, MatTimepickerDirective, MatTimepickerToggleIconDirective, OnemrvaMatTimepickerComponent, OnemrvaMatTimepickerModule };
+//# sourceMappingURL=onemrvapublic-design-system-mat-timepicker.mjs.map