@onemrvapublic/design-system 18.3.0-develop.1 → 18.3.0-develop.2

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

@@ -1,26 +1,21 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Inject, HostBinding, Directive, ViewEncapsulation, Attribute, Optional, Self, HostListener, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { OnemrvaMatSize, OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
-import * as i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { MatToolbar } from '@angular/material/toolbar';
+import { NgClass, NgIf, NgForOf } from '@angular/common';
+import { MatMiniFabButton, MatButton, MatIconButton } from '@angular/material/button';
 import { Subject, Subscription, of, merge } from 'rxjs';
 import { takeUntil, first } from 'rxjs/operators';
-import * as i2$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1$2 from '@angular/forms';
+import { MatIcon } from '@angular/material/icon';
+import * as i1$1 from '@angular/forms';
 import { Validators } from '@angular/forms';
 import * as i4 from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
-import * as i2$2 from '@angular/cdk/a11y';
-import * as i3$1 from '@angular/cdk/platform';
+import * as i2 from '@angular/cdk/a11y';
+import * as i3 from '@angular/cdk/platform';
 import * as i5 from '@angular/material/core';
 
 function twoDigits(n) {
@@ -302,12 +297,12 @@ class ClockComponent {
         value = Math.round(60 - (60 * angle) / 360);
         return value === 60 ? 0 : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ClockComponent, selector: "mat-clock", inputs: { viewType: "viewType", color: "color", 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]=\"color\"\n        class=\"inner-dot\"\n        aria-label=\"Inner Dot\"\n      ></button>\n      <mat-toolbar [color]=\"color\" class=\"pointer\">\n        <button\n          mat-mini-fab\n          [color]=\"color\"\n          class=\"outer-dot\"\n          aria-label=\"Outer dot\"\n          [ngClass]=\"{\n            'outer-dot-odd': viewType === 'minutes' && formattedValue % 5 !== 0,\n          }\"\n        >\n          <ng-container\n            *ngIf=\"viewType === 'minutes' && formattedValue % 5 !== 0\"\n            >\u00B7</ng-container\n          >\n        </button>\n      </mat-toolbar>\n    </div>\n    <ng-container *ngFor=\"let digit of minuteDots\">\n      <button\n        mat-mini-fab\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        <ng-container *ngIf=\"digit.display % 5 !== 0\">\u00B7</ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of numbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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        <ng-container\n          *ngIf=\"\n            viewType === 'minutes';\n            then minutesTemplate;\n            else hoursTemplate\n          \"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of secondaryNumbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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    </ng-container>\n  </div>\n</div>\n", styles: [".root{width:256px;height:256px;cursor:default}.circle{width:256px;height:256px;border-radius:50%;position:relative;background:#ededed;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}.mat-mdc-mini-fab.number.disabled{color:#0101011a}.mat-mdc-mini-fab.number:not(.selected):not(.disabled){color:#000000de}.mat-mdc-mini-fab.number:not(.disabled).minute-dot{color:#010101b3}.mat-mdc-mini-fab.number:not(.disabled).minute-dot.selected{color:transparent}.small-number{font-size:12px}.small-number:not(.selected):not(.disabled){color:#000000ab}.pointer-container{width:calc(50% - 20px);height:2;position:absolute;left:50%;top:calc(50% - 1px);transform-origin:left center;pointer-events:none}.pointer-container.disabled *{background-color:transparent}.pointer{height:1px}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: ClockComponent, isStandalone: true, selector: "mat-clock", inputs: { viewType: "viewType", color: "color", 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]=\"color\"\n        class=\"inner-dot\"\n        aria-label=\"Inner Dot\"\n      ></button>\n      <mat-toolbar [color]=\"color\" class=\"pointer\">\n        <button\n          mat-mini-fab\n          [color]=\"color\"\n          class=\"outer-dot\"\n          aria-label=\"Outer dot\"\n          [ngClass]=\"{\n            'outer-dot-odd': viewType === 'minutes' && formattedValue % 5 !== 0,\n          }\"\n        >\n          <ng-container\n            *ngIf=\"viewType === 'minutes' && formattedValue % 5 !== 0\"\n            >\u00B7</ng-container\n          >\n        </button>\n      </mat-toolbar>\n    </div>\n    <ng-container *ngFor=\"let digit of minuteDots\">\n      <button\n        mat-mini-fab\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        <ng-container *ngIf=\"digit.display % 5 !== 0\">\u00B7</ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of numbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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        <ng-container\n          *ngIf=\"\n            viewType === 'minutes';\n            then minutesTemplate;\n            else hoursTemplate\n          \"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of secondaryNumbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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    </ng-container>\n  </div>\n</div>\n", styles: [".root{width:256px;height:256px;cursor:default}.circle{width:256px;height:256px;border-radius:50%;position:relative;background:#ededed;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}.mat-mdc-mini-fab.number.disabled{color:#0101011a}.mat-mdc-mini-fab.number:not(.selected):not(.disabled){color:#000000de}.mat-mdc-mini-fab.number:not(.disabled).minute-dot{color:#010101b3}.mat-mdc-mini-fab.number:not(.disabled).minute-dot.selected{color:transparent}.small-number{font-size:12px}.small-number:not(.selected):not(.disabled){color:#000000ab}.pointer-container{width:calc(50% - 20px);height:2;position:absolute;left:50%;top:calc(50% - 1px);transform-origin:left center;pointer-events:none}.pointer-container.disabled *{background-color:transparent}.pointer{height:1px}.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]", exportAs: ["matButton"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-clock', changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"color\"\n        class=\"inner-dot\"\n        aria-label=\"Inner Dot\"\n      ></button>\n      <mat-toolbar [color]=\"color\" class=\"pointer\">\n        <button\n          mat-mini-fab\n          [color]=\"color\"\n          class=\"outer-dot\"\n          aria-label=\"Outer dot\"\n          [ngClass]=\"{\n            'outer-dot-odd': viewType === 'minutes' && formattedValue % 5 !== 0,\n          }\"\n        >\n          <ng-container\n            *ngIf=\"viewType === 'minutes' && formattedValue % 5 !== 0\"\n            >\u00B7</ng-container\n          >\n        </button>\n      </mat-toolbar>\n    </div>\n    <ng-container *ngFor=\"let digit of minuteDots\">\n      <button\n        mat-mini-fab\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        <ng-container *ngIf=\"digit.display % 5 !== 0\">\u00B7</ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of numbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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        <ng-container\n          *ngIf=\"\n            viewType === 'minutes';\n            then minutesTemplate;\n            else hoursTemplate\n          \"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of secondaryNumbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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    </ng-container>\n  </div>\n</div>\n", styles: [".root{width:256px;height:256px;cursor:default}.circle{width:256px;height:256px;border-radius:50%;position:relative;background:#ededed;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}.mat-mdc-mini-fab.number.disabled{color:#0101011a}.mat-mdc-mini-fab.number:not(.selected):not(.disabled){color:#000000de}.mat-mdc-mini-fab.number:not(.disabled).minute-dot{color:#010101b3}.mat-mdc-mini-fab.number:not(.disabled).minute-dot.selected{color:transparent}.small-number{font-size:12px}.small-number:not(.selected):not(.disabled){color:#000000ab}.pointer-container{width:calc(50% - 20px);height:2;position:absolute;left:50%;top:calc(50% - 1px);transform-origin:left center;pointer-events:none}.pointer-container.disabled *{background-color:transparent}.pointer{height:1px}.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"] }]
+            args: [{ selector: 'mat-clock', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatMiniFabButton, MatToolbar, NgIf, NgForOf], 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]=\"color\"\n        class=\"inner-dot\"\n        aria-label=\"Inner Dot\"\n      ></button>\n      <mat-toolbar [color]=\"color\" class=\"pointer\">\n        <button\n          mat-mini-fab\n          [color]=\"color\"\n          class=\"outer-dot\"\n          aria-label=\"Outer dot\"\n          [ngClass]=\"{\n            'outer-dot-odd': viewType === 'minutes' && formattedValue % 5 !== 0,\n          }\"\n        >\n          <ng-container\n            *ngIf=\"viewType === 'minutes' && formattedValue % 5 !== 0\"\n            >\u00B7</ng-container\n          >\n        </button>\n      </mat-toolbar>\n    </div>\n    <ng-container *ngFor=\"let digit of minuteDots\">\n      <button\n        mat-mini-fab\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        <ng-container *ngIf=\"digit.display % 5 !== 0\">\u00B7</ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of numbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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        <ng-container\n          *ngIf=\"\n            viewType === 'minutes';\n            then minutesTemplate;\n            else hoursTemplate\n          \"\n        ></ng-container>\n      </button>\n    </ng-container>\n    <ng-container *ngFor=\"let digit of secondaryNumbers\">\n      <button\n        mat-mini-fab\n        [color]=\"color\"\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    </ng-container>\n  </div>\n</div>\n", styles: [".root{width:256px;height:256px;cursor:default}.circle{width:256px;height:256px;border-radius:50%;position:relative;background:#ededed;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}.mat-mdc-mini-fab.number.disabled{color:#0101011a}.mat-mdc-mini-fab.number:not(.selected):not(.disabled){color:#000000de}.mat-mdc-mini-fab.number:not(.disabled).minute-dot{color:#010101b3}.mat-mdc-mini-fab.number:not(.disabled).minute-dot.selected{color:transparent}.small-number{font-size:12px}.small-number:not(.selected):not(.disabled){color:#000000ab}.pointer-container{width:calc(50% - 20px);height:2;position:absolute;left:50%;top:calc(50% - 1px);transform-origin:left center;pointer-events:none}.pointer-container.disabled *{background-color:transparent}.pointer{height:1px}.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
             }], color: [{
@@ -435,16 +430,23 @@ class MatTimepickerComponentDialogComponent {
     cancelClickHandler() {
         this.cancelClickEvent.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTimepickerComponentDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MatTimepickerComponentDialogComponent, 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]=\"color\" class=\"header\">\n      <div class=\"time-frame\">\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: this.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: this.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        [color]=\"color\"\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}.select{color:#fff}.body{padding:24px 16px 20px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: ClockComponent, selector: "mat-clock", inputs: ["viewType", "color", "formattedValue", "minDate", "maxDate", "formattedHours", "minutes", "allowed24HourMap"], outputs: ["changeEvent", "unavailableSelection", "invalidSelection"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MatTimepickerComponentDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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]=\"color\" class=\"header\">\n      <div class=\"time-frame\">\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: this.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: this.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        [color]=\"color\"\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}.select{color:#fff}.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", "color", "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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTimepickerComponentDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MatTimepickerComponentDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-timepicker-dialog', template: "<mat-dialog-content>\n  <div class=\"root\">\n    <mat-toolbar [color]=\"color\" class=\"header\">\n      <div class=\"time-frame\">\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: this.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: this.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        [color]=\"color\"\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}.select{color:#fff}.body{padding:24px 16px 20px;display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'mat-timepicker-dialog', standalone: true, imports: [
+                        MatDialogContent,
+                        MatToolbar,
+                        NgClass,
+                        ClockComponent,
+                        MatDialogActions,
+                        MatButton,
+                    ], template: "<mat-dialog-content>\n  <div class=\"root\">\n    <mat-toolbar [color]=\"color\" class=\"header\">\n      <div class=\"time-frame\">\n        <span\n          class=\"time fixed-font-size\"\n          [ngClass]=\"{ select: this.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: this.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        [color]=\"color\"\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}.select{color:#fff}.body{padding:24px 16px 20px;display:flex;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$1.MatDialog }], propDecorators: { changeEvent: [{
+                }] }, { type: i1.MatDialog }], propDecorators: { changeEvent: [{
                 type: Output
             }], okClickEvent: [{
                 type: Output
@@ -679,13 +681,13 @@ class OnemrvaMatTimepickerComponent {
         //
         // this.listeners.forEach(l => l());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatTimepickerComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OnemrvaMatTimepickerComponent, 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: "19.0.6", ngImport: i0, type: OnemrvaMatTimepickerComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: OnemrvaMatTimepickerComponent, isStandalone: true, selector: "mat-timepicker", inputs: { dialogLabel: "dialogLabel", id: "id", dataCy: "dataCy", color: "color", size: "size" }, outputs: { openedStream: "opened", closedStream: "closed" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.onemrva-mat-timepicker": "this.cssClass", "attr.id": "this.id", "attr.data-cy": "this.dataCy", "class.mat-primary": "this._isPrimary", "class.mat-accent": "this._isAccent" } }, ngImport: i0, template: "" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-timepicker', template: "" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { openedStream: [{
+        }], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { openedStream: [{
                 type: Output,
                 args: ['opened']
             }], closedStream: [{
@@ -733,10 +735,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  */
 /** Can be used to override the icon of a `matDatepickerToggle`. */
 class MatTimepickerToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatTimepickerToggleIconDirective, selector: "[matDatepickerToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MatTimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: MatTimepickerToggleIconDirective, isStandalone: true, selector: "[matDatepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTimepickerToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MatTimepickerToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matDatepickerToggleIcon]',
@@ -799,10 +801,10 @@ class MatTimePickerToggle {
         this._stateChanges.unsubscribe();
         this._stateChanges = merge(datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTimePickerToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MatTimePickerToggle, 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: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.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: "19.0.6", ngImport: i0, type: MatTimePickerToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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]", exportAs: ["matButton"] }, { 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: "18.2.13", ngImport: i0, type: MatTimePickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MatTimePickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mat-timepicker-toggle', host: {
                         class: 'mat-timepicker-toggle',
@@ -816,7 +818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         // `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, 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"] }]
+                    }, 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: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
@@ -1239,12 +1241,12 @@ class MatTimepickerDirective {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTimepickerDirective, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2$2.FocusMonitor }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.Platform }, { token: i1$2.NgForm, optional: true }, { token: i4.MatFormField, optional: true }, { token: i1$2.FormGroupDirective, optional: true }, { token: i5.ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MatTimepickerDirective, 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: "19.0.6", ngImport: i0, type: MatTimepickerDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.FocusMonitor }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.Platform }, { token: i1$1.NgForm, optional: true }, { token: i4.MatFormField, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i5.ErrorStateMatcher }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: MatTimepickerDirective, isStandalone: true, selector: "input[matTimepicker]", inputs: { matTimepicker: "matTimepicker", disabled: "disabled", id: "id", readonly: "readonly", errorStateMatcher: "errorStateMatcher", required: "required", placeholder: "placeholder", okLabel: "okLabel", cancelLabel: "cancelLabel", color: "color", disableDialogOpenOnClick: "disableDialogOpenOnClick", strict: "strict", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { timeChange: "timeChange", invalidInput: "invalidInput" }, host: { listeners: { "input": "inputHandler()", "keydown": "keydownHandler($event)", "keyup": "keyupHandler($event)", "focus": "focusHandler()", "focusout": "focusoutHandler()" }, properties: { "class.mat-input-server": "_isServer", "attr.id": "id", "attr.placeholder": "placeholder", "disabled": "disabled", "required": "required", "attr.readonly": "readonly || null", "attr.aria-invalid": "errorState", "attr.aria-required": "required.toString()", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" }, classAttribute: "mat-input-element mat-form-field-autofill-control" }, providers: [
             { provide: MatFormFieldControl, useExisting: MatTimepickerDirective },
         ], exportAs: ["matTimepicker"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatTimepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MatTimepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[matTimepicker]',
@@ -1265,16 +1267,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[attr.aria-required]': 'required.toString()',
                     },
                     exportAs: 'matTimepicker',
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2$2.FocusMonitor }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3$1.Platform }, { type: i1$2.NgForm, decorators: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.FocusMonitor }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.Platform }, { type: i1$1.NgForm, decorators: [{
                     type: Optional
                 }] }, { type: i4.MatFormField, decorators: [{
                     type: Optional
-                }] }, { type: i1$2.FormGroupDirective, decorators: [{
+                }] }, { type: i1$1.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: i5.ErrorStateMatcher }], propDecorators: { matTimepicker: [{
                 type: Input
@@ -1334,31 +1337,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class OnemrvaMatTimepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatTimepickerModule, declarations: [ClockComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
             MatTimepickerDirective,
             MatTimepickerComponentDialogComponent,
             MatTimepickerToggleIconDirective,
             MatTimePickerToggle,
-            OnemrvaMatTimepickerComponent], imports: [CommonModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatToolbarModule,
-            MatIconModule,
-            MatInputModule], exports: [MatTimepickerDirective,
+            OnemrvaMatTimepickerComponent], exports: [MatTimepickerDirective,
             MatTimePickerToggle,
             OnemrvaMatTimepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [CommonModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatToolbarModule,
-            MatIconModule,
-            MatInputModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
+            MatTimepickerComponentDialogComponent,
+            MatTimePickerToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatTimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         ClockComponent,
                         MatTimepickerDirective,
                         MatTimepickerComponentDialogComponent,
@@ -1366,14 +1361,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatTimePickerToggle,
                         OnemrvaMatTimepickerComponent,
                     ],
-                    imports: [
-                        CommonModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatToolbarModule,
-                        MatIconModule,
-                        MatInputModule,
-                    ],
                     exports: [
                         MatTimepickerDirective,
                         MatTimePickerToggle,