@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

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

@@ -1,19 +1,18 @@
 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 { input, output, ChangeDetectionStrategy, Component, EventEmitter, inject, Output, signal, computed, Input, Directive, ChangeDetectorRef, ViewEncapsulation, Renderer2, NgZone, ElementRef, HostBinding, NgModule } from '@angular/core';
+import { OnemrvaMatColor, OnemrvaMatSize } 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 { outputToObservable } from '@angular/core/rxjs-interop';
 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) {
@@ -36,6 +35,9 @@ function getShortestAngle(from, to) {
     return from + mod(difference + 180, 360) - 180;
 }
 function isDateInRange(minDate, maxDate, current) {
+    if (!minDate || !maxDate || !current) {
+        return false;
+    }
     const unixCurrentDate = +current;
     return ((!minDate || +minDate <= unixCurrentDate) &&
         (!maxDate || unixCurrentDate <= +maxDate));
@@ -101,12 +103,16 @@ function getIsAvailabeFn(allowed24HourMap) {
 
 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.viewType = input('hours', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+        this.formattedValue = input(0, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
+        this.minDate = input.required(...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        this.maxDate = input.required(...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.formattedHours = input(0, ...(ngDevMode ? [{ debugName: "formattedHours" }] : []));
+        this.minutes = input.required(...(ngDevMode ? [{ debugName: "minutes" }] : []));
+        this.changeEvent = output();
+        this.unavailableSelection = output();
+        this.invalidSelection = output();
+        this.allowed24HourMap = input.required(...(ngDevMode ? [{ debugName: "allowed24HourMap" }] : []));
         this.isFormattedValueAllowed = true;
         this.touching = false;
         this.numbers = [];
@@ -120,14 +126,15 @@ class ClockComponent {
         };
     }
     initIsAllowedFn() {
-        if (!this.allowed24HourMap) {
+        const allowed24HourMap = this.allowed24HourMap();
+        if (!allowed24HourMap) {
             return;
         }
-        this.isAvailableFn = getIsAvailabeFn(this.allowed24HourMap);
+        this.isAvailableFn = getIsAvailabeFn(allowed24HourMap);
     }
     isAvailable(value) {
         return this.isAvailableFn
-            ? this.isAvailableFn(value, this.viewType, this.formattedHours)
+            ? this.isAvailableFn(value, this.viewType(), this.formattedHours())
             : true;
     }
     ngOnChanges(simpleChanges) {
@@ -137,19 +144,20 @@ class ClockComponent {
         }
         this.calculateAngule();
         this.setNumbers();
-        if (simpleChanges['formattedValue'] && this.allowed24HourMap) {
-            this.isFormattedValueAllowed = this.isAvailable(this.formattedValue);
+        if (simpleChanges['formattedValue'] && this.allowed24HourMap()) {
+            this.isFormattedValueAllowed = this.isAvailable(this.formattedValue());
         }
         const isSelectedTimeAvailable = this.isAvailableFn
-            ? this.isAvailableFn(this.formattedValue, 'minutes', this.formattedHours)
+            ? this.isAvailableFn(this.formattedValue(), 'minutes', this.formattedHours())
             : true;
-        if (this.viewType === 'minutes' && this.isAvailableFn) {
-            const areMinitesAvailable = this.isAvailableFn(this.minutes, 'minutes', this.formattedHours);
+        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) {
+                const minDate = this.minDate();
+                if (minDate && minDate.getMinutes() > this.minutes()) {
                     setTimeout(() => {
                         this.changeEvent.emit({
-                            value: this.minDate.getMinutes(),
+                            value: this.minDate().getMinutes(),
                             type: 'minutes',
                         });
                     });
@@ -157,7 +165,7 @@ class ClockComponent {
                 else {
                     setTimeout(() => {
                         this.changeEvent.emit({
-                            value: this.maxDate.getMinutes(),
+                            value: this.maxDate().getMinutes(),
                             type: 'minutes',
                         });
                     });
@@ -170,10 +178,10 @@ class ClockComponent {
         this.invalidSelection.emit(!isSelectedTimeAvailable);
     }
     calculateAngule() {
-        this.angle = this.getPointerAngle(this.formattedValue, this.viewType);
+        this.angle = this.getPointerAngle(this.formattedValue(), this.viewType());
     }
     setNumbers() {
-        if (this.viewType === 'hours') {
+        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;
@@ -181,8 +189,8 @@ class ClockComponent {
             //   this.secondaryNumbers = [];
             //   this.minuteDots = [];
             // } else if (this.mode === '24h') {
-            const isAllowedFn = this.allowed24HourMap
-                ? (num) => this.allowed24HourMap[num][0]
+            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);
@@ -193,8 +201,8 @@ class ClockComponent {
             //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]
+            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 => {
@@ -233,25 +241,28 @@ class ClockComponent {
     movePointer(x, y) {
         const value = this.getPointerValue(x, y, 256);
         if (!this.isAvailable(value)) {
-            this.unavailableSelection.emit();
+            this.unavailableSelection.emit(undefined);
             return;
         }
-        if (value !== this.formattedValue) {
+        if (value !== this.formattedValue()) {
+            const viewType = this.viewType();
             this.changeEvent.emit({
                 value,
-                type: this.viewType !== 'minutes' ? 'hours' : 'minutes',
+                type: viewType !== 'minutes' ? 'hours' : 'minutes',
             });
-            if (this.viewType !== 'minutes') {
+            if (viewType !== 'minutes') {
                 if (!this.isAvailable(value)) {
-                    if (this.minDate && this.isAvailable(value)) {
+                    const minDate = this.minDate();
+                    const maxDate = this.maxDate();
+                    if (minDate && this.isAvailable(value)) {
                         this.changeEvent.emit({
-                            value: this.minDate.getMinutes(),
+                            value: minDate.getMinutes(),
                             type: 'minutes',
                         });
                     }
-                    else if (this.maxDate && this.isAvailable(value)) {
+                    else if (maxDate && this.isAvailable(value)) {
                         this.changeEvent.emit({
-                            value: this.maxDate.getMinutes(),
+                            value: maxDate.getMinutes(),
                             type: 'minutes',
                         });
                     }
@@ -269,7 +280,7 @@ class ClockComponent {
         }));
     }
     getPointerAngle(value, _mode) {
-        if (this.viewType === 'hours') {
+        if (this.viewType() === 'hours') {
             return (360 / 12) * ((value % 12) - 3);
         }
         return (360 / 60) * (value - 15);
@@ -280,7 +291,7 @@ class ClockComponent {
         if (angle < 0) {
             angle = 360 + angle;
         }
-        if (this.viewType === 'hours') {
+        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) {
@@ -294,33 +305,13 @@ class ClockComponent {
         value = Math.round(60 - (60 * angle) / 360);
         return value === 60 ? 0 : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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]mat-hint[color],", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ClockComponent, isStandalone: true, selector: "mat-clock", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, formattedValue: { classPropertyName: "formattedValue", publicName: "formattedValue", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: true, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: true, transformFunction: null }, formattedHours: { classPropertyName: "formattedHours", publicName: "formattedHours", isSignal: true, isRequired: false, transformFunction: null }, minutes: { classPropertyName: "minutes", publicName: "minutes", isSignal: true, isRequired: true, transformFunction: null }, allowed24HourMap: { classPropertyName: "allowed24HourMap", publicName: "allowed24HourMap", isSignal: true, isRequired: true, transformFunction: null } }, 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      [class]=\"{\n        'small-pointer':\n          viewType() === 'hours' &&\n          (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          [class.outer-dot-odd]=\"\n            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        [class]=\"{\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        [class]=\"{\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        [class]=\"{\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: "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]mat-hint[color],", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", 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
-            }] } });
+            args: [{ selector: 'mat-clock', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [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      [class]=\"{\n        'small-pointer':\n          viewType() === 'hours' &&\n          (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          [class.outer-dot-odd]=\"\n            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        [class]=\"{\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        [class]=\"{\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        [class]=\"{\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: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], formattedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formattedValue", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: true }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: true }] }], formattedHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "formattedHours", required: false }] }], minutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutes", required: true }] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], unavailableSelection: [{ type: i0.Output, args: ["unavailableSelection"] }], invalidSelection: [{ type: i0.Output, args: ["invalidSelection"] }], allowed24HourMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowed24HourMap", required: true }] }] } });
 
 class MatTimepickerComponentDialogComponent {
     set value(value) {
@@ -425,20 +416,19 @@ class MatTimepickerComponentDialogComponent {
     cancelClickHandler() {
         this.cancelClickEvent.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerComponentDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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]mat-hint[color],", inputs: ["color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerComponentDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", 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          [class.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          [class.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      />\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: "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]mat-hint[color],", inputs: ["color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerComponentDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", 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"] }]
+                    ], 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          [class.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          [class.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      />\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: [{
@@ -456,9 +446,9 @@ class OnemrvaMatTimepickerComponent {
         /** Emits when the timepicker's state changes. */
         this.stateChanges = new Subject();
         // eslint-disable-next-line @angular-eslint/no-output-rename
-        this.openedStream = new EventEmitter();
+        this.openedStream = output({ alias: 'opened' });
         // eslint-disable-next-line @angular-eslint/no-output-rename
-        this.closedStream = new EventEmitter();
+        this.closedStream = output({ alias: 'closed' });
         /**
          * Returns the `aria-label` attribute of the element.
          *
@@ -468,8 +458,8 @@ class OnemrvaMatTimepickerComponent {
          * ```
          *
          */
-        this.ariaLabel = '';
-        this.dialogLabel = 'Pick a Time';
+        this.ariaLabel = signal('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        this.dialogLabel = input('Pick a Time', ...(ngDevMode ? [{ debugName: "dialogLabel" }] : []));
         /**
          * Returns the `role` attribute of the element.
          *
@@ -478,14 +468,7 @@ class OnemrvaMatTimepickerComponent {
          * let timepickerRole = this.timepicker.role;
          * ```
          */
-        this.role = '';
-        /**
-         * Host `class.onemrva-mat-timepicker` binding.
-         *
-         * @hidden
-         * @internal
-         */
-        this.cssClass = 'onemrva-mat-timepicker';
+        this.role = signal('', ...(ngDevMode ? [{ debugName: "role" }] : []));
         /**
          * Sets the `id` of the element. If not set, the first component instance will have `id` = `"onemrva-mat-timepicker-0"`.
          *
@@ -494,7 +477,7 @@ class OnemrvaMatTimepickerComponent {
          * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
          * ```
          */
-        this.id = `onemrva-mat-timepicker-${NEXT_ID++}`;
+        this.id = input(`onemrva-mat-timepicker-${NEXT_ID++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
         /**
          * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-timepicker-0"`.
          *
@@ -503,12 +486,16 @@ class OnemrvaMatTimepickerComponent {
          * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
          * ```
          */
-        this.dataCy = `onemrva-mat-timepicker-${NEXT_ID++}`;
+        this.dataCy = input(`onemrva-mat-timepicker-${NEXT_ID++}`, ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
         /**
          * @hidden
          * @internal
          */
         this._color = 'primary';
+        /** @hidden @internal */
+        this._isPrimary = computed(() => this.color === OnemrvaMatColor.PRIMARY, ...(ngDevMode ? [{ debugName: "_isPrimary" }] : []));
+        /** @hidden @internal */
+        this._isAccent = computed(() => this.color === OnemrvaMatColor.ACCENT, ...(ngDevMode ? [{ debugName: "_isAccent" }] : []));
         /**
          * @hidden
          * @internal
@@ -576,14 +563,6 @@ class OnemrvaMatTimepickerComponent {
                 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.
      *
@@ -626,7 +605,7 @@ class OnemrvaMatTimepickerComponent {
             this.value = new Date();
         }
         this.modalRef = this.dialog.open(MatTimepickerComponentDialogComponent, {
-            ariaLabel: this.dialogLabel,
+            ariaLabel: this.dialogLabel(),
             autoFocus: false,
             data: {
                 value: this.timepickerInput.currentValue,
@@ -674,47 +653,22 @@ class OnemrvaMatTimepickerComponent {
         //
         // this.listeners.forEach(l => l());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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: "" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: OnemrvaMatTimepickerComponent, isStandalone: true, selector: "mat-timepicker", inputs: { dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openedStream: "opened", closedStream: "closed" }, host: { attributes: { "class.onemrva-mat-timepicker": "true" }, properties: { "attr.aria-label": "ariaLabel()", "attr.role": "role()", "attr.id": "id()", "attr.data-cy": "dataCy()", "class.mat-primary": "_isPrimary()", "class.mat-accent": "_isAccent()" } }, ngImport: i0, template: "" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", 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']
-            }, {
+            args: [{ selector: 'mat-timepicker', host: {
+                        'class.onemrva-mat-timepicker': 'true',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.role]': 'role()',
+                        '[attr.id]': 'id()',
+                        '[attr.data-cy]': 'dataCy()',
+                        '[class.mat-primary]': '_isPrimary()',
+                        '[class.mat-accent]': '_isAccent()',
+                    }, template: "" }]
+        }], propDecorators: { openedStream: [{ type: i0.Output, args: ["opened"] }], closedStream: [{ type: i0.Output, args: ["closed"] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], color: [{
                 type: Input
-            }], color: [{
-                type: Input
-            }], _isPrimary: [{
-                type: HostBinding,
-                args: ['class.mat-primary']
-            }], _isAccent: [{
-                type: HostBinding,
-                args: ['class.mat-accent']
             }], size: [{
                 type: Input
             }] } });
@@ -728,10 +682,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 /** Can be used to override the icon of a `matDatepickerToggle`. */
 class MatTimepickerToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerToggleIconDirective, isStandalone: true, selector: "[matDatepickerToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MatTimepickerToggleIconDirective, isStandalone: true, selector: "[matDatepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matDatepickerToggleIcon]',
@@ -740,8 +694,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class MatTimePickerToggle {
     /** Whether the toggle button is disabled. */
     get disabled() {
-        if (this.timepicker) {
-            return this.timepicker.timepickerInput._disabled;
+        const timepicker = this.timepicker();
+        if (timepicker) {
+            return timepicker.timepickerInput._disabled;
         }
         return this._disabled;
     }
@@ -750,21 +705,27 @@ class MatTimePickerToggle {
     }
     constructor() {
         this._stateChanges = Subscription.EMPTY;
+        /** Datepicker instance that the button will toggle. */
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.timepicker = input.required({ ...(ngDevMode ? { debugName: "timepicker" } : {}), alias: 'for' });
+        /** Tabindex for the toggle. */
+        this.tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
         /** Screenreader label for the button. */
-        this.ariaLabel = '';
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
         this._disabled = false;
         /** Whether ripples on the toggle should be disabled. */
-        this.disableRipple = false;
+        this.disableRipple = input(false, ...(ngDevMode ? [{ debugName: "disableRipple" }] : []));
         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;
+        // TODO: Fix this index
+        // const defaultTabIndex = inject(new HostAttributeToken('tabindex'), {
+        //   optional: true,
+        // });
+        // const parsedTabIndex = Number(defaultTabIndex);
+        // this.tabIndex =
+        //   parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
     }
     ngOnChanges(changes) {
         if (changes['timepicker']) {
@@ -778,54 +739,49 @@ class MatTimePickerToggle {
         this._watchStateChanges();
     }
     _open(event) {
-        if (this.timepicker && !this.disabled) {
-            this.timepicker.open();
+        const timepicker = this.timepicker();
+        if (timepicker && !this.disabled) {
+            timepicker.open();
             event.stopPropagation();
         }
     }
     _watchStateChanges() {
-        const datepickerStateChanged = this.timepicker
-            ? this.timepicker.stateChanges
+        const timepicker = this.timepicker();
+        const datepickerStateChanged = timepicker
+            ? timepicker.stateChanges
             : of();
-        const inputStateChanged = this.timepicker && this.timepicker.timepickerInput
-            ? this.timepicker.timepickerInput.stateChanges
+        const timepickerValue = this.timepicker();
+        const inputStateChanged = timepickerValue && timepickerValue.timepickerInput
+            ? timepickerValue.timepickerInput.stateChanges
             : of();
-        const datepickerToggled = this.timepicker
-            ? merge(this.timepicker.openedStream, this.timepicker.closedStream)
+        const timepickerVal = this.timepicker();
+        const datepickerToggled = timepickerVal
+            ? merge(outputToObservable(timepickerVal.openedStream), outputToObservable(timepickerVal.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.3.15", ngImport: i0, type: MatTimePickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimePickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: MatTimePickerToggle, isStandalone: true, selector: "mat-timepicker-toggle", inputs: { timepicker: { classPropertyName: "timepicker", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null } }, 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]\" />\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.3.15", ngImport: i0, type: MatTimePickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", 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"',
+                        '[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',
+                        '[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: [{
+                    }, 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]\" />\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: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{
                 type: Input
-            }] } });
+            }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }] } });
 
 class MatTimepickerDirective {
     static { this.nextId = 0; }
@@ -834,7 +790,9 @@ class MatTimepickerDirective {
         if (timepicker) {
             this._timepicker = timepicker;
             this._timepicker.setTimepickerInput(this);
-            this._closedSubscription = timepicker.closedStream.subscribe(() => this._onTouched());
+            // this._closedSubscription = timepicker.closedStream.subscribe(() =>
+            //   this._onTouched(),
+            // );
             //this._registerModel(datepicker.registerInput(this));
         }
     }
@@ -844,8 +802,9 @@ class MatTimepickerDirective {
         const control = this.ngControl
             ? this.ngControl.control
             : null;
-        const newState = this.errorStateMatcher
-            ? this.errorStateMatcher.isErrorState(control, parent)
+        const errorStateMatcher = this.errorStateMatcher();
+        const newState = errorStateMatcher
+            ? errorStateMatcher.isErrorState(control, parent)
             : oldState;
         if (newState !== oldState) {
             this._errorState = newState;
@@ -986,9 +945,9 @@ class MatTimepickerDirective {
         d.setMinutes(+minutes);
         d.setSeconds(0);
         d.setMilliseconds(0);
-        const isValueInRange = isDateInRange(this.minDate, this.maxDate, d);
+        const isValueInRange = isDateInRange(this.minDate(), this.maxDate(), d);
         if (!isValueInRange) {
-            this.invalidInput.emit();
+            this.invalidInput.emit(undefined);
         }
         this.writeValue(d, true);
         if (this.onChangeFn) {
@@ -1052,6 +1011,7 @@ class MatTimepickerDirective {
             this.onTouchedFn();
         }
     }
+    // private readonly _defaultErrorStateMatcher = inject(ErrorStateMatcher);
     constructor() {
         this._closedSubscription = Subscription.EMPTY;
         this._errorState = false;
@@ -1063,6 +1023,7 @@ class MatTimepickerDirective {
         this.stateChanges = new Subject();
         this._uid = `mat-input-${MatTimepickerDirective.nextId++}`;
         this.describedBy = '';
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
         this._required = false;
         this._placeholder = '';
         this.focused = false;
@@ -1070,20 +1031,22 @@ class MatTimepickerDirective {
         this.allowed24HourMap = this.generateAllowedMap();
         this.isInputFocused = false;
         /** Override the label of the ok button. */
-        this.okLabel = 'Ok';
+        this.okLabel = input('Ok', ...(ngDevMode ? [{ debugName: "okLabel" }] : []));
         /** Override the label of the cancel button. */
-        this.cancelLabel = 'Cancel';
+        this.cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
         /** Sets the clock mode, 12-hour or 24-hour clocks are supported. */
-        this.color = 'primary';
-        this.disableDialogOpenOnClick = false;
-        this.strict = true;
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.disableDialogOpenOnClick = input(false, ...(ngDevMode ? [{ debugName: "disableDialogOpenOnClick" }] : []));
+        this.strict = input(true, ...(ngDevMode ? [{ debugName: "strict" }] : []));
         this.controlType = 'angular-material-timepicker';
+        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
+        this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
         this._value = null;
         this._formattedValueString = '';
         this._skipValueChangeEmission = true;
         this.combination = [];
-        this.timeChange = new EventEmitter();
-        this.invalidInput = new EventEmitter();
+        this.timeChange = output();
+        this.invalidInput = output();
         this.ngControl = inject(NgControl, { optional: true, self: true });
         this.renderer = inject(Renderer2);
         this.zone = inject(NgZone);
@@ -1096,8 +1059,8 @@ class MatTimepickerDirective {
         this._parentFormGroup = inject(FormGroupDirective, {
             optional: true,
         });
-        this._defaultErrorStateMatcher = inject(ErrorStateMatcher);
-        this.errorStateMatcher = this._defaultErrorStateMatcher;
+        // TODO: fix this error matcher state
+        // this.errorStateMatcher = this._defaultErrorStateMatcher;
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
@@ -1134,9 +1097,9 @@ class MatTimepickerDirective {
         });
     }
     validate() {
-        const isValueInRange = this.strict
-            ? isDateInRange(this.minDate, this.maxDate, this.currentValue)
-            : isTimeInRange(this.minDate, this.maxDate, this.currentValue);
+        const isValueInRange = this.strict()
+            ? isDateInRange(this.minDate(), this.maxDate(), this.currentValue)
+            : isTimeInRange(this.minDate(), this.maxDate(), this.currentValue);
         return isValueInRange ? null : { dateRange: true };
     }
     ngOnInit() {
@@ -1147,16 +1110,16 @@ class MatTimepickerDirective {
             });
         }
         if (!this.value) {
-            const hasMaxDate = !!this.maxDate;
-            const hasMinDate = !!this.minDate;
+            const hasMaxDate = !!this.maxDate();
+            const hasMinDate = !!this.minDate();
             //if (hasMinDate || hasMaxDate) {
             if (hasMinDate) {
-                this.minDate.setSeconds(0);
-                this.minDate.setMilliseconds(0);
+                this.minDate().setSeconds(0);
+                this.minDate().setMilliseconds(0);
             }
             if (hasMaxDate) {
-                this.maxDate.setSeconds(0);
-                this.maxDate.setMilliseconds(0);
+                this.maxDate().setSeconds(0);
+                this.maxDate().setMilliseconds(0);
             }
             if (!this.ngControl._rawValidators.find((v) => v === this)) {
                 this.ngControl._rawValidators.push(this);
@@ -1166,7 +1129,7 @@ class MatTimepickerDirective {
         this._skipValueChangeEmission = false;
     }
     generateAllowedMap() {
-        const isStrictMode = this.strict && this.value instanceof Date;
+        const isStrictMode = this.strict() && this.value instanceof Date;
         const a24hm = {};
         for (let h = 0; h < 24; h++) {
             for (let m = 0; m < 60; m++) {
@@ -1177,10 +1140,10 @@ class MatTimepickerDirective {
                     currentDate.setMinutes(m);
                     currentDate.setSeconds(0);
                     currentDate.setMilliseconds(0);
-                    hourMap[m] = isDateInRange(this.minDate, this.maxDate, currentDate);
+                    hourMap[m] = isDateInRange(this.minDate(), this.maxDate(), currentDate);
                 }
                 else {
-                    hourMap[m] = isAllowed(h, m, this.minDate, this.maxDate);
+                    hourMap[m] = isAllowed(h, m, this.minDate(), this.maxDate());
                 }
                 a24hm[h] = hourMap;
             }
@@ -1195,11 +1158,11 @@ class MatTimepickerDirective {
         }
         this._timepicker.modalRef.componentInstance.data = {
             value: this.currentValue,
-            okLabel: this.okLabel,
-            cancelLabel: this.cancelLabel,
-            color: this.color,
-            minDate: this.minDate,
-            maxDate: this.maxDate,
+            okLabel: this.okLabel(),
+            cancelLabel: this.cancelLabel(),
+            color: this.color(),
+            minDate: this.minDate(),
+            maxDate: this.maxDate(),
             allowed24HourMap: this.allowed24HourMap,
         };
     }
@@ -1209,7 +1172,7 @@ class MatTimepickerDirective {
         }
         const hour = value.getHours();
         const minutes = value.getMinutes();
-        return isAllowed(hour, minutes, this.minDate, this.maxDate);
+        return isAllowed(hour, minutes, this.minDate(), this.maxDate());
     }
     writeValue(value, isInnerCall = false) {
         if (!isInnerCall) {
@@ -1237,12 +1200,12 @@ class MatTimepickerDirective {
         this.disabled = isDisabled;
         this.stateChanges.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: MatTimepickerDirective, isStandalone: true, selector: "input[matTimepicker]", inputs: { matTimepicker: { classPropertyName: "matTimepicker", publicName: "matTimepicker", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disableDialogOpenOnClick: { classPropertyName: "disableDialogOpenOnClick", publicName: "disableDialogOpenOnClick", isSignal: true, isRequired: false, transformFunction: null }, strict: { classPropertyName: "strict", publicName: "strict", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, 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.3.15", ngImport: i0, type: MatTimepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[matTimepicker]',
@@ -1261,6 +1224,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.readonly]': 'readonly || null',
                         '[attr.aria-invalid]': 'errorState',
                         '[attr.aria-required]': 'required.toString()',
+                        '(input)': 'inputHandler()',
+                        '(keydown)': 'keydownHandler($event)',
+                        '(keyup)': 'keyupHandler($event)',
+                        '(focus)': 'focusHandler()',
+                        '(focusout)': 'focusoutHandler()',
                     },
                     exportAs: 'matTimepicker',
                     standalone: true,
@@ -1279,52 +1247,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], describedBy: [{
                 type: HostBinding,
                 args: ['attr.aria-describedby']
-            }], errorStateMatcher: [{
-                type: Input
-            }], required: [{
+            }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], required: [{
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], okLabel: [{
-                type: Input
-            }], cancelLabel: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], disableDialogOpenOnClick: [{
-                type: Input
-            }], strict: [{
+            }], okLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "okLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disableDialogOpenOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDialogOpenOnClick", required: false }] }], strict: [{ type: i0.Input, args: [{ isSignal: true, alias: "strict", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], value: [{
                 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']
-            }] } });
+            }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], invalidInput: [{ type: i0.Output, args: ["invalidInput"] }] } });
 
 class OnemrvaMatTimepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
             MatTimepickerDirective,
             MatTimepickerComponentDialogComponent,
             MatTimepickerToggleIconDirective,
@@ -1332,11 +1265,11 @@ class OnemrvaMatTimepickerModule {
             OnemrvaMatTimepickerComponent], exports: [MatTimepickerDirective,
             MatTimePickerToggle,
             OnemrvaMatTimepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
             MatTimepickerComponentDialogComponent,
             MatTimePickerToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatTimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [