@onemrvapublic/design-system 21.0.0-develop.11 → 21.0.0-develop.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1296 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { input, output, ChangeDetectionStrategy, Component, EventEmitter, inject, Output, signal, computed, Input, Directive, ChangeDetectorRef, ViewEncapsulation, Renderer2, NgZone, ElementRef, HostBinding, NgModule } from '@angular/core';
3
- import { OnemrvaMatColor, OnemrvaMatSize } from '@onemrvapublic/design-system/utils';
4
- import { MatDialog, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
5
- import { MatToolbar } from '@angular/material/toolbar';
6
- import { MatMiniFabButton, MatButton, MatIconButton } from '@angular/material/button';
7
- import { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';
8
- import { Subject, Subscription, of, merge } from 'rxjs';
9
- import { takeUntil, first } from 'rxjs/operators';
10
- import { coerceBooleanProperty } from '@angular/cdk/coercion';
11
- import { outputToObservable } from '@angular/core/rxjs-interop';
12
- import { MatIcon } from '@angular/material/icon';
13
- import { Validators, NgControl, NgForm, FormGroupDirective } from '@angular/forms';
14
- import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
15
- import { FocusMonitor } from '@angular/cdk/a11y';
16
- import { Platform } from '@angular/cdk/platform';
17
-
18
- function twoDigits(n) {
19
- return n < 10 ? `0${n}` : `${n}`;
20
- }
21
- function addDays(date, days) {
22
- const result = new Date(date);
23
- result.setDate(result.getDate() + days);
24
- return result;
25
- }
26
- function convertHoursForMode(hour) {
27
- const isPm = hour >= 12;
28
- return { hour, isPm };
29
- }
30
- function mod(a, b) {
31
- return a - Math.floor(a / b) * b;
32
- }
33
- function getShortestAngle(from, to) {
34
- const difference = to - from;
35
- return from + mod(difference + 180, 360) - 180;
36
- }
37
- function isDateInRange(minDate, maxDate, current) {
38
- if (!minDate || !maxDate || !current) {
39
- return false;
40
- }
41
- const unixCurrentDate = +current;
42
- return ((!minDate || +minDate <= unixCurrentDate) &&
43
- (!maxDate || unixCurrentDate <= +maxDate));
44
- }
45
- function isTimeInRange(minDate, maxDate, current) {
46
- if (minDate instanceof Date) {
47
- const newMinDate = new Date();
48
- newMinDate.setHours(minDate.getHours());
49
- newMinDate.setMinutes(minDate.getMinutes());
50
- newMinDate.setSeconds(0);
51
- newMinDate.setMilliseconds(0);
52
- minDate = newMinDate;
53
- }
54
- if (maxDate instanceof Date) {
55
- const newMaxDate = new Date();
56
- newMaxDate.setHours(maxDate.getHours());
57
- newMaxDate.setMinutes(maxDate.getMinutes());
58
- newMaxDate.setSeconds(0);
59
- newMaxDate.setMilliseconds(0);
60
- maxDate = newMaxDate;
61
- }
62
- if (current instanceof Date) {
63
- const newCurrent = new Date();
64
- newCurrent.setHours(current.getHours());
65
- newCurrent.setMinutes(current.getMinutes());
66
- newCurrent.setSeconds(0);
67
- newCurrent.setMilliseconds(0);
68
- current = newCurrent;
69
- }
70
- const unixCurrentDate = +current;
71
- return ((!minDate || +minDate <= unixCurrentDate) &&
72
- (!maxDate || unixCurrentDate <= +maxDate));
73
- }
74
- // used when generating the allowed maps
75
- function isAllowed(hour, minutes, minDate, maxDate) {
76
- if (hour > 24 || hour < 0 || minutes > 60 || minutes < 0) {
77
- return false;
78
- }
79
- if (!minDate && !maxDate) {
80
- return true;
81
- }
82
- const checkDate = new Date();
83
- checkDate.setHours(hour);
84
- checkDate.setMinutes(minutes);
85
- checkDate.setSeconds(0);
86
- checkDate.setMilliseconds(0);
87
- return isDateInRange(minDate, maxDate, checkDate);
88
- }
89
- // used by the clock component to visually disable the not allowed values
90
- function getIsAvailabeFn(allowed24HourMap) {
91
- return (value, viewType, h) => {
92
- const isHourCheck = viewType === 'hours';
93
- const [hour, minutes] = isHourCheck ? [value, 0] : [h, value];
94
- if (!allowed24HourMap) {
95
- return true;
96
- }
97
- if (isHourCheck) {
98
- return !!Object.values(allowed24HourMap[hour]).find(v => v === true);
99
- }
100
- return allowed24HourMap[hour][minutes];
101
- };
102
- }
103
-
104
- class ClockComponent {
105
- constructor() {
106
- this.viewType = input('hours', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
107
- this.formattedValue = input(0, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
108
- this.minDate = input.required(...(ngDevMode ? [{ debugName: "minDate" }] : []));
109
- this.maxDate = input.required(...(ngDevMode ? [{ debugName: "maxDate" }] : []));
110
- this.formattedHours = input(0, ...(ngDevMode ? [{ debugName: "formattedHours" }] : []));
111
- this.minutes = input.required(...(ngDevMode ? [{ debugName: "minutes" }] : []));
112
- this.changeEvent = output();
113
- this.unavailableSelection = output();
114
- this.invalidSelection = output();
115
- this.allowed24HourMap = input.required(...(ngDevMode ? [{ debugName: "allowed24HourMap" }] : []));
116
- this.isFormattedValueAllowed = true;
117
- this.touching = false;
118
- this.numbers = [];
119
- this.secondaryNumbers = [];
120
- this.minuteDots = [];
121
- this.invalidMeridiemEmitted = true;
122
- this.handleTouchMove = (e) => {
123
- e.preventDefault(); // prevent scrolling behind the clock on iOS
124
- const rect = e.target.getBoundingClientRect();
125
- this.movePointer(e.changedTouches[0].clientX - rect.left, e.changedTouches[0].clientY - rect.top);
126
- };
127
- }
128
- initIsAllowedFn() {
129
- const allowed24HourMap = this.allowed24HourMap();
130
- if (!allowed24HourMap) {
131
- return;
132
- }
133
- this.isAvailableFn = getIsAvailabeFn(allowed24HourMap);
134
- }
135
- isAvailable(value) {
136
- return this.isAvailableFn
137
- ? this.isAvailableFn(value, this.viewType(), this.formattedHours())
138
- : true;
139
- }
140
- ngOnChanges(simpleChanges) {
141
- if (simpleChanges['allowed24HourMap'] ||
142
- (simpleChanges['mode'] && !simpleChanges['mode'].firstChange)) {
143
- this.initIsAllowedFn();
144
- }
145
- this.calculateAngule();
146
- this.setNumbers();
147
- if (simpleChanges['formattedValue'] && this.allowed24HourMap()) {
148
- this.isFormattedValueAllowed = this.isAvailable(this.formattedValue());
149
- }
150
- const isSelectedTimeAvailable = this.isAvailableFn
151
- ? this.isAvailableFn(this.formattedValue(), 'minutes', this.formattedHours())
152
- : true;
153
- if (this.viewType() === 'minutes' && this.isAvailableFn) {
154
- const areMinitesAvailable = this.isAvailableFn(this.minutes(), 'minutes', this.formattedHours());
155
- if (!areMinitesAvailable) {
156
- const minDate = this.minDate();
157
- if (minDate && minDate.getMinutes() > this.minutes()) {
158
- setTimeout(() => {
159
- this.changeEvent.emit({
160
- value: this.minDate().getMinutes(),
161
- type: 'minutes',
162
- });
163
- });
164
- }
165
- else {
166
- setTimeout(() => {
167
- this.changeEvent.emit({
168
- value: this.maxDate().getMinutes(),
169
- type: 'minutes',
170
- });
171
- });
172
- }
173
- }
174
- }
175
- if (isSelectedTimeAvailable && this.invalidMeridiemEmitted) {
176
- this.invalidMeridiemEmitted = false;
177
- }
178
- this.invalidSelection.emit(!isSelectedTimeAvailable);
179
- }
180
- calculateAngule() {
181
- this.angle = this.getPointerAngle(this.formattedValue(), this.viewType());
182
- }
183
- setNumbers() {
184
- if (this.viewType() === 'hours') {
185
- // if (this.mode === '12h') {
186
- // const meridiem : string = this.isPm ? 'pm' : 'am';
187
- // const isAllowedFn = this.allowed12HourMap ? (num : number) => this.allowed12HourMap[meridiem][num + 1][0] : undefined;
188
- // this.numbers = this.getNumbers(12, { size: 256 }, isAllowedFn);
189
- // this.secondaryNumbers = [];
190
- // this.minuteDots = [];
191
- // } else if (this.mode === '24h') {
192
- const isAllowedFn = this.allowed24HourMap()
193
- ? (num) => this.allowed24HourMap()[num][0]
194
- : undefined;
195
- this.numbers = this.getNumbers(12, { size: 256 }, isAllowedFn);
196
- this.secondaryNumbers = this.getNumbers(12, { size: 256 - 64, start: 13 }, isAllowedFn);
197
- this.minuteDots = [];
198
- //}
199
- }
200
- else {
201
- //const meridiem : string = this.isPm ? 'pm' : 'am';
202
- const isAllowedFn =
203
- // !!this.allowed12HourMap ? (num : number) => this.allowed12HourMap[meridiem][this.formattedHours][num] :
204
- this.allowed24HourMap()
205
- ? (num) => this.allowed24HourMap()[this.formattedHours()][num]
206
- : undefined;
207
- this.numbers = this.getNumbers(12, { size: 256, start: 5, step: 5 }, isAllowedFn);
208
- this.minuteDots = this.getNumbers(60, { size: 256, start: 13 }).map(digit => {
209
- if (digit.display <= 59) {
210
- digit.allowed = isAllowedFn ? isAllowedFn(digit.display) : true;
211
- return digit;
212
- }
213
- digit.display = digit.display - 60;
214
- digit.allowed = isAllowedFn ? isAllowedFn(digit.display) : true;
215
- return digit;
216
- });
217
- this.secondaryNumbers = [];
218
- }
219
- }
220
- disableAnimatedPointer() {
221
- this.touching = true;
222
- }
223
- enableAnimatedPointer() {
224
- this.touching = false;
225
- }
226
- handleTouchEnd(e) {
227
- this.handleTouchMove(e);
228
- this.enableAnimatedPointer();
229
- }
230
- handleMouseMove(e) {
231
- // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari
232
- if (e.buttons === 1 || e.which === 1) {
233
- const rect = e.target.getBoundingClientRect();
234
- this.movePointer(e.clientX - rect.left, e.clientY - rect.top);
235
- }
236
- }
237
- handleClick(e) {
238
- const rect = e.target.getBoundingClientRect();
239
- this.movePointer(e.clientX - rect.left, e.clientY - rect.top);
240
- }
241
- movePointer(x, y) {
242
- const value = this.getPointerValue(x, y, 256);
243
- if (!this.isAvailable(value)) {
244
- this.unavailableSelection.emit(undefined);
245
- return;
246
- }
247
- if (value !== this.formattedValue()) {
248
- const viewType = this.viewType();
249
- this.changeEvent.emit({
250
- value,
251
- type: viewType !== 'minutes' ? 'hours' : 'minutes',
252
- });
253
- if (viewType !== 'minutes') {
254
- if (!this.isAvailable(value)) {
255
- const minDate = this.minDate();
256
- const maxDate = this.maxDate();
257
- if (minDate && this.isAvailable(value)) {
258
- this.changeEvent.emit({
259
- value: minDate.getMinutes(),
260
- type: 'minutes',
261
- });
262
- }
263
- else if (maxDate && this.isAvailable(value)) {
264
- this.changeEvent.emit({
265
- value: maxDate.getMinutes(),
266
- type: 'minutes',
267
- });
268
- }
269
- }
270
- }
271
- }
272
- }
273
- getNumbers(count, { size = 0, start = 1, step = 1 }, isAllowedFn) {
274
- // eslint-disable-next-line
275
- return Array.apply(null, Array(count)).map((_, i) => ({
276
- display: i * step + start,
277
- translateX: (size / 2 - 20) * Math.cos((2 * Math.PI * (i - 2)) / count),
278
- translateY: (size / 2 - 20) * Math.sin((2 * Math.PI * (i - 2)) / count),
279
- allowed: isAllowedFn ? isAllowedFn(i) : true,
280
- }));
281
- }
282
- getPointerAngle(value, _mode) {
283
- if (this.viewType() === 'hours') {
284
- return (360 / 12) * ((value % 12) - 3);
285
- }
286
- return (360 / 60) * (value - 15);
287
- }
288
- getPointerValue(x, y, size) {
289
- let value;
290
- let angle = (Math.atan2(size / 2 - x, size / 2 - y) / Math.PI) * 180;
291
- if (angle < 0) {
292
- angle = 360 + angle;
293
- }
294
- if (this.viewType() === 'hours') {
295
- const radius = Math.sqrt(Math.pow(size / 2 - x, 2) + Math.pow(size / 2 - y, 2));
296
- value = 12 - Math.round((angle * 12) / 360);
297
- if (value === 0) {
298
- value = 12;
299
- }
300
- if (radius < size / 2 - 32) {
301
- value = value === 12 ? 0 : value + 12;
302
- }
303
- return value;
304
- }
305
- value = Math.round(60 - (60 * angle) / 360);
306
- return value === 60 ? 0 : value;
307
- }
308
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
309
- 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 }); }
310
- }
311
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ClockComponent, decorators: [{
312
- type: Component,
313
- 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"] }]
314
- }], 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 }] }] } });
315
-
316
- class MatTimepickerComponentDialogComponent {
317
- set value(value) {
318
- value = value || this.minDate || this.maxDate || new Date();
319
- this.hours = value.getHours();
320
- this.minutes = value.getMinutes();
321
- this._value = value;
322
- }
323
- get value() {
324
- return this._value;
325
- }
326
- set hours(value) {
327
- this._hours = value;
328
- this._formattedHour = convertHoursForMode(this.hours).hour;
329
- }
330
- get hours() {
331
- return this._hours;
332
- }
333
- get formattedHours() {
334
- return this._formattedHour;
335
- }
336
- bindData(data) {
337
- this.okLabel = data.okLabel;
338
- this.cancelLabel = data.cancelLabel;
339
- this.color = data.color;
340
- this.minDate = data.minDate;
341
- this.maxDate = data.maxDate;
342
- this.allowed24HourMap = data.allowed24HourMap;
343
- }
344
- constructor() {
345
- this.twoDigits = twoDigits;
346
- this.changeEvent = new EventEmitter();
347
- this.okClickEvent = new EventEmitter();
348
- this.cancelClickEvent = new EventEmitter();
349
- this.invalidSelection = false;
350
- this.okLabel = '';
351
- this.cancelLabel = '';
352
- this.viewType = 'hours';
353
- this.color = 'primary';
354
- this.isPm = false;
355
- this.skipMinuteAutoSwitch = false;
356
- this.editHoursClicked = false;
357
- this.isClosing = false;
358
- this.dialog = inject(MatDialog);
359
- this.data = inject(MAT_DIALOG_DATA);
360
- this.isPm = this.data.isPm;
361
- this.bindData(this.data);
362
- // keep this always at the bottom
363
- this.value = this.data.value;
364
- }
365
- ngDoCheck() {
366
- this.bindData(this.data);
367
- }
368
- handleClockChange({ value, type, }) {
369
- if ((type && type === 'hours') || (!type && this.viewType === 'hours')) {
370
- this.hours = value;
371
- }
372
- else if ((type && type === 'minutes') ||
373
- (!type && this.viewType === 'minutes')) {
374
- this.minutes = value;
375
- }
376
- const newValue = new Date();
377
- const hours = this.hours;
378
- // newValue.setFullYear(0);
379
- // newValue.setMonth(0);
380
- // newValue.setDate(0);
381
- newValue.setHours(hours);
382
- newValue.setMinutes(this.minutes);
383
- newValue.setSeconds(0);
384
- newValue.setMilliseconds(0);
385
- this.value = newValue;
386
- this.changeEvent.emit(newValue);
387
- }
388
- handleUnavailableSelection() {
389
- clearTimeout(this.autoSwitchID);
390
- }
391
- handleClockChangeDone(e) {
392
- e.preventDefault(); // prevent mouseUp after touchEnd
393
- if (this.viewType === 'hours' && !this.skipMinuteAutoSwitch) {
394
- this.autoSwitchID = setTimeout(() => {
395
- this.editMinutes();
396
- this.autoSwitchID = null;
397
- }, 300);
398
- }
399
- }
400
- editHours() {
401
- this.viewType = 'hours';
402
- this.editHoursClicked = true;
403
- setTimeout(() => {
404
- this.editHoursClicked = false;
405
- }, 0);
406
- }
407
- editMinutes() {
408
- this.viewType = 'minutes';
409
- }
410
- invalidSelectionHandler(value) {
411
- this.invalidSelection = value;
412
- }
413
- okClickHandler() {
414
- this.okClickEvent.emit();
415
- }
416
- cancelClickHandler() {
417
- this.cancelClickEvent.emit();
418
- }
419
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerComponentDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
420
- 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"] }] }); }
421
- }
422
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerComponentDialogComponent, decorators: [{
423
- type: Component,
424
- args: [{ selector: 'mat-timepicker-dialog', standalone: true, imports: [
425
- MatDialogContent,
426
- MatToolbar,
427
- ClockComponent,
428
- MatDialogActions,
429
- MatButton,
430
- OnemRvaColorDirective,
431
- ], 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"] }]
432
- }], ctorParameters: () => [], propDecorators: { changeEvent: [{
433
- type: Output
434
- }], okClickEvent: [{
435
- type: Output
436
- }], cancelClickEvent: [{
437
- type: Output
438
- }] } });
439
-
440
- let NEXT_ID = 0;
441
- class OnemrvaMatTimepickerComponent {
442
- constructor() {
443
- this.isAlive = new Subject();
444
- this.dialog = inject(MatDialog);
445
- this.opened = false;
446
- /** Emits when the timepicker's state changes. */
447
- this.stateChanges = new Subject();
448
- // eslint-disable-next-line @angular-eslint/no-output-rename
449
- this.openedStream = output({ alias: 'opened' });
450
- // eslint-disable-next-line @angular-eslint/no-output-rename
451
- this.closedStream = output({ alias: 'closed' });
452
- /**
453
- * Returns the `aria-label` attribute of the element.
454
- *
455
- * @example
456
- * ```typescript
457
- * let timepickerLabel = this.timepicker.ariaLabel;
458
- * ```
459
- *
460
- */
461
- this.ariaLabel = signal('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
462
- this.dialogLabel = input('Pick a Time', ...(ngDevMode ? [{ debugName: "dialogLabel" }] : []));
463
- /**
464
- * Returns the `role` attribute of the element.
465
- *
466
- * @example
467
- * ```typescript
468
- * let timepickerRole = this.timepicker.role;
469
- * ```
470
- */
471
- this.role = signal('', ...(ngDevMode ? [{ debugName: "role" }] : []));
472
- /**
473
- * Sets the `id` of the element. If not set, the first component instance will have `id` = `"onemrva-mat-timepicker-0"`.
474
- *
475
- * @example
476
- * ```html
477
- * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
478
- * ```
479
- */
480
- this.id = input(`onemrva-mat-timepicker-${NEXT_ID++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
481
- /**
482
- * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-timepicker-0"`.
483
- *
484
- * @example
485
- * ```html
486
- * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
487
- * ```
488
- */
489
- this.dataCy = input(`onemrva-mat-timepicker-${NEXT_ID++}`, ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
490
- /**
491
- * @hidden
492
- * @internal
493
- */
494
- this._color = 'primary';
495
- /** @hidden @internal */
496
- this._isPrimary = computed(() => this.color === OnemrvaMatColor.PRIMARY, ...(ngDevMode ? [{ debugName: "_isPrimary" }] : []));
497
- /** @hidden @internal */
498
- this._isAccent = computed(() => this.color === OnemrvaMatColor.ACCENT, ...(ngDevMode ? [{ debugName: "_isAccent" }] : []));
499
- /**
500
- * @hidden
501
- * @internal
502
- */
503
- this._size = OnemrvaMatSize.SMALL;
504
- this.handleChange = (newValue) => {
505
- if (!(newValue instanceof Date)) {
506
- return;
507
- }
508
- const v = this.value instanceof Date ? new Date(this.value.getTime()) : new Date();
509
- v.setHours(newValue.getHours());
510
- v.setMinutes(newValue.getMinutes());
511
- v.setSeconds(0);
512
- v.setMilliseconds(0);
513
- this.value = v;
514
- };
515
- this.handleOk = () => {
516
- if (this.onChangeFn) {
517
- this.onChangeFn(this.value);
518
- }
519
- this.timepickerInput.value = this.value;
520
- this.modalRef.close();
521
- };
522
- this.handleCancel = () => {
523
- this.modalRef.close();
524
- };
525
- }
526
- get value() {
527
- return this._value;
528
- }
529
- set value(value) {
530
- this._value = value;
531
- }
532
- setTimepickerInput(t) {
533
- this.timepickerInput = t;
534
- }
535
- /**
536
- * Returns the color of the element.
537
- *
538
- * @example
539
- * ```typescript
540
- * let color = this.timepicker.color;
541
- * ```
542
- */
543
- get color() {
544
- return this._color;
545
- }
546
- /**
547
- * Sets the size of the element.
548
- * By default, the color is `"primary"`.
549
- *
550
- * @example
551
- * ```html
552
- * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
553
- * ```
554
- */
555
- set color(value) {
556
- switch (value) {
557
- case OnemrvaMatColor.PRIMARY:
558
- case OnemrvaMatColor.ACCENT:
559
- case OnemrvaMatColor.WARN:
560
- this._color = value;
561
- break;
562
- default:
563
- this._color = OnemrvaMatColor.PRIMARY;
564
- }
565
- }
566
- /**
567
- * Returns the size of the element.
568
- *
569
- * @example
570
- * ```typescript
571
- * let timepickerSize = this.timepicker.size;
572
- * ```
573
- */
574
- get size() {
575
- return this._size;
576
- }
577
- /**
578
- * Sets the size of the element.
579
- * By default, the size is `"medium"`.
580
- *
581
- * @example
582
- * ```html
583
- * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
584
- * ```
585
- */
586
- set size(value) {
587
- switch (value) {
588
- case OnemrvaMatSize.XSMALL:
589
- case OnemrvaMatSize.SMALL:
590
- case OnemrvaMatSize.MEDIUM:
591
- case OnemrvaMatSize.LARGE:
592
- case OnemrvaMatSize.XLARGE:
593
- this._size = value;
594
- break;
595
- default:
596
- this._size = OnemrvaMatSize.MEDIUM;
597
- }
598
- }
599
- open() {
600
- if (this.timepickerInput.disabled) {
601
- return;
602
- }
603
- this.value = this.timepickerInput.currentValue;
604
- if (this.value === undefined || this.value === null) {
605
- this.value = new Date();
606
- }
607
- this.modalRef = this.dialog.open(MatTimepickerComponentDialogComponent, {
608
- ariaLabel: this.dialogLabel(),
609
- autoFocus: false,
610
- data: {
611
- value: this.timepickerInput.currentValue,
612
- okLabel: this.timepickerInput.okLabel,
613
- cancelLabel: this.timepickerInput.cancelLabel,
614
- color: this.color,
615
- minDate: this.timepickerInput.minDate,
616
- maxDate: this.timepickerInput.maxDate,
617
- allowed24HourMap: this.timepickerInput.allowed24HourMap,
618
- },
619
- });
620
- const instance = this.modalRef.componentInstance;
621
- instance.changeEvent
622
- .pipe(takeUntil(this.isAlive))
623
- .subscribe(this.handleChange);
624
- instance.okClickEvent
625
- .pipe(takeUntil(this.isAlive))
626
- .subscribe(this.handleOk);
627
- instance.cancelClickEvent
628
- .pipe(takeUntil(this.isAlive))
629
- .subscribe(this.handleCancel);
630
- this.modalRef
631
- .beforeClosed()
632
- .pipe(first())
633
- .subscribe(() => (instance.isClosing = true));
634
- this.modalRef
635
- .afterClosed()
636
- .pipe(first())
637
- .subscribe(() => {
638
- if (this.timepickerInput.onTouchedFn) {
639
- this.timepickerInput.onTouchedFn();
640
- }
641
- //this.modalRef = null;
642
- this.timepickerInput.elRef.nativeElement.focus();
643
- });
644
- this.timepickerInput.currentValue = this.value;
645
- }
646
- ngOnDestroy() {
647
- this.isAlive.next('0');
648
- this.isAlive.complete();
649
- this.stateChanges.complete();
650
- // if (this._platform.isBrowser) {
651
- // this.fm.stopMonitoring(this.elRef.nativeElement);
652
- // }
653
- //
654
- // this.listeners.forEach(l => l());
655
- }
656
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
657
- 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: "" }); }
658
- }
659
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerComponent, decorators: [{
660
- type: Component,
661
- args: [{ selector: 'mat-timepicker', host: {
662
- 'class.onemrva-mat-timepicker': 'true',
663
- '[attr.aria-label]': 'ariaLabel()',
664
- '[attr.role]': 'role()',
665
- '[attr.id]': 'id()',
666
- '[attr.data-cy]': 'dataCy()',
667
- '[class.mat-primary]': '_isPrimary()',
668
- '[class.mat-accent]': '_isAccent()',
669
- }, template: "" }]
670
- }], 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: [{
671
- type: Input
672
- }], size: [{
673
- type: Input
674
- }] } });
675
-
676
- /**
677
- * @license
678
- * Copyright Google LLC All Rights Reserved.
679
- *
680
- * Use of this source code is governed by an MIT-style license that can be
681
- * found in the LICENSE file at https://angular.io/license
682
- */
683
- /** Can be used to override the icon of a `matDatepickerToggle`. */
684
- class MatTimepickerToggleIconDirective {
685
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
686
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MatTimepickerToggleIconDirective, isStandalone: true, selector: "[matDatepickerToggleIcon]", ngImport: i0 }); }
687
- }
688
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerToggleIconDirective, decorators: [{
689
- type: Directive,
690
- args: [{
691
- selector: '[matDatepickerToggleIcon]',
692
- }]
693
- }] });
694
- class MatTimePickerToggle {
695
- /** Whether the toggle button is disabled. */
696
- get disabled() {
697
- const timepicker = this.timepicker();
698
- if (timepicker) {
699
- return timepicker.timepickerInput._disabled;
700
- }
701
- return this._disabled;
702
- }
703
- set disabled(value) {
704
- this._disabled = coerceBooleanProperty(value);
705
- }
706
- constructor() {
707
- this._stateChanges = Subscription.EMPTY;
708
- /** Datepicker instance that the button will toggle. */
709
- // eslint-disable-next-line @angular-eslint/no-input-rename
710
- this.timepicker = input.required({ ...(ngDevMode ? { debugName: "timepicker" } : {}), alias: 'for' });
711
- /** Tabindex for the toggle. */
712
- this.tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
713
- /** Screenreader label for the button. */
714
- this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
715
- this._disabled = false;
716
- /** Whether ripples on the toggle should be disabled. */
717
- this.disableRipple = input(false, ...(ngDevMode ? [{ debugName: "disableRipple" }] : []));
718
- this.$event = new Event('abrupt');
719
- /** Underlying button element. */
720
- //@ViewChild('button') _button: MatButton;
721
- this._changeDetectorRef = inject(ChangeDetectorRef);
722
- // TODO: Fix this index
723
- // const defaultTabIndex = inject(new HostAttributeToken('tabindex'), {
724
- // optional: true,
725
- // });
726
- // const parsedTabIndex = Number(defaultTabIndex);
727
- // this.tabIndex =
728
- // parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
729
- }
730
- ngOnChanges(changes) {
731
- if (changes['timepicker']) {
732
- this._watchStateChanges();
733
- }
734
- }
735
- ngOnDestroy() {
736
- this._stateChanges.unsubscribe();
737
- }
738
- ngAfterContentInit() {
739
- this._watchStateChanges();
740
- }
741
- _open(event) {
742
- const timepicker = this.timepicker();
743
- if (timepicker && !this.disabled) {
744
- timepicker.open();
745
- event.stopPropagation();
746
- }
747
- }
748
- _watchStateChanges() {
749
- const timepicker = this.timepicker();
750
- const datepickerStateChanged = timepicker
751
- ? timepicker.stateChanges
752
- : of();
753
- const timepickerValue = this.timepicker();
754
- const inputStateChanged = timepickerValue && timepickerValue.timepickerInput
755
- ? timepickerValue.timepickerInput.stateChanges
756
- : of();
757
- const timepickerVal = this.timepicker();
758
- const datepickerToggled = timepickerVal
759
- ? merge(outputToObservable(timepickerVal.openedStream), outputToObservable(timepickerVal.closedStream))
760
- : of();
761
- this._stateChanges.unsubscribe();
762
- this._stateChanges = merge(datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
763
- }
764
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimePickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
765
- 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 }); }
766
- }
767
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimePickerToggle, decorators: [{
768
- type: Component,
769
- args: [{ selector: 'mat-timepicker-toggle', host: {
770
- class: 'mat-timepicker-toggle',
771
- '[attr.tabindex]': 'null',
772
- '[class.mat-timepicker-toggle-active]': 'timepicker() && timepicker().opened',
773
- '[class.mat-accent]': 'timepicker() && timepicker().color === "accent"',
774
- '[class.mat-warn]': 'timepicker() && timepicker().color === "warn"',
775
- // Used by the test harness to tie this toggle to its timepicker.
776
- '[attr.data-mat-calendar]': 'timepicker() ? timepicker().id() : null',
777
- // Bind the `click` on the host, rather than the inner `button`, so that we can call
778
- // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
779
- // it so that the input doesn't get focused automatically by the form field (See #21836).
780
- '(click)': '_open($event)',
781
- }, 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"] }]
782
- }], 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: [{
783
- type: Input
784
- }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }] } });
785
-
786
- class MatTimepickerDirective {
787
- static { this.nextId = 0; }
788
- /** The datepicker that this input is associated with. */
789
- set matTimepicker(timepicker) {
790
- if (timepicker) {
791
- this._timepicker = timepicker;
792
- this._timepicker.setTimepickerInput(this);
793
- // this._closedSubscription = timepicker.closedStream.subscribe(() =>
794
- // this._onTouched(),
795
- // );
796
- //this._registerModel(datepicker.registerInput(this));
797
- }
798
- }
799
- get errorState() {
800
- const oldState = this._errorState;
801
- const parent = this._parentFormGroup || this._parentForm;
802
- const control = this.ngControl
803
- ? this.ngControl.control
804
- : null;
805
- const errorStateMatcher = this.errorStateMatcher();
806
- const newState = errorStateMatcher
807
- ? errorStateMatcher.isErrorState(control, parent)
808
- : oldState;
809
- if (newState !== oldState) {
810
- this._errorState = newState;
811
- this.stateChanges.next();
812
- }
813
- return newState;
814
- }
815
- get disabled() {
816
- if (this.ngControl && this.ngControl.disabled !== null) {
817
- return this.ngControl.disabled;
818
- }
819
- return this._disabled;
820
- }
821
- set disabled(value) {
822
- this._disabled = coerceBooleanProperty(value);
823
- // Browsers may not fire the blur event if the input is disabled too quickly.
824
- // Reset from here to ensure that the element doesn't become stuck.
825
- if (this.focused) {
826
- this.focused = false;
827
- }
828
- this.stateChanges.next();
829
- }
830
- get id() {
831
- return this._id;
832
- }
833
- set id(value) {
834
- this._id = value || this._uid;
835
- }
836
- get readonly() {
837
- return this._readonly;
838
- }
839
- set readonly(value) {
840
- this._readonly = coerceBooleanProperty(value);
841
- }
842
- get shouldLabelFloat() {
843
- return this.focused || !this.empty;
844
- }
845
- get required() {
846
- if (this.ngControl?.control) {
847
- return this.ngControl.control.hasValidator(Validators.required);
848
- }
849
- return this._required;
850
- }
851
- set required(req) {
852
- this._required = coerceBooleanProperty(req);
853
- this.stateChanges.next();
854
- }
855
- get placeholder() {
856
- return this._placeholder;
857
- }
858
- set placeholder(plh) {
859
- this._placeholder = plh;
860
- this.stateChanges.next();
861
- }
862
- set value(value) {
863
- if (value === this._value) {
864
- return;
865
- }
866
- this._value = value;
867
- if (!value) {
868
- this._formattedValueString = '';
869
- this.setInputElementValue(value);
870
- this.currentValue = value ?? new Date();
871
- return;
872
- }
873
- this._formattedValueString = `${twoDigits(value.getHours())}:${twoDigits(value.getMinutes())}`;
874
- if (!this.isInputFocused) {
875
- this.setInputElementValue(this.formattedValueString);
876
- }
877
- this.currentValue = value;
878
- this.stateChanges.next();
879
- if (this._skipValueChangeEmission) {
880
- return;
881
- }
882
- this.timeChange.emit(this.currentValue);
883
- if (this.onChangeFn)
884
- this.onChangeFn(this.value);
885
- }
886
- get value() {
887
- return this._value;
888
- }
889
- get empty() {
890
- return !(this.currentValue instanceof Date);
891
- }
892
- get formattedValueString() {
893
- return this._formattedValueString;
894
- }
895
- inputHandler() {
896
- const value = this.elRef.nativeElement.value;
897
- const length = value.length;
898
- if (length === 0) {
899
- this.writeValue(null, true);
900
- this._value = null;
901
- this._skipValueChangeEmission = true;
902
- Promise.resolve().then(() => (this._skipValueChangeEmission = false));
903
- if (this.onChangeFn) {
904
- this.onChangeFn(null);
905
- }
906
- return;
907
- }
908
- const valueHasColumn = value.includes(':');
909
- let [hours, minutes] = length === 1
910
- ? [value, 0]
911
- : length === 2 && !valueHasColumn
912
- ? [value, 0]
913
- : valueHasColumn
914
- ? value.split(':')
915
- : value.split(/(\d\d)/).filter(v => v);
916
- hours = +hours;
917
- if (/\s/.test(minutes)) {
918
- let other;
919
- [minutes, other] = minutes.split(/\s/);
920
- if (other === 'pm' && !isNaN(hours) && hours < 12) {
921
- hours += 12;
922
- }
923
- }
924
- minutes = +minutes;
925
- if (isNaN(hours) || isNaN(minutes)) {
926
- //this.writeValue(null, true);
927
- this._skipValueChangeEmission = true;
928
- Promise.resolve().then(() => (this._skipValueChangeEmission = false));
929
- return;
930
- }
931
- if (+hours > 24) {
932
- hours = '24';
933
- }
934
- else if (+hours < 0) {
935
- hours = '0';
936
- }
937
- if (+minutes > 59) {
938
- minutes = '59';
939
- }
940
- else if (+minutes < 0) {
941
- minutes = '0';
942
- }
943
- const d = this.value ? new Date(this.value.getTime()) : new Date();
944
- d.setHours(+hours);
945
- d.setMinutes(+minutes);
946
- d.setSeconds(0);
947
- d.setMilliseconds(0);
948
- const isValueInRange = isDateInRange(this.minDate(), this.maxDate(), d);
949
- if (!isValueInRange) {
950
- this.invalidInput.emit(undefined);
951
- }
952
- this.writeValue(d, true);
953
- if (this.onChangeFn) {
954
- this.onChangeFn(d);
955
- }
956
- }
957
- keydownHandler(event) {
958
- const e = event;
959
- const allowedKey = [
960
- '0',
961
- '1',
962
- '2',
963
- '3',
964
- '4',
965
- '5',
966
- '6',
967
- '7',
968
- '8',
969
- '9',
970
- ':',
971
- 'Backspace',
972
- 'Delete',
973
- 'Tab',
974
- 'Enter',
975
- 'ArrowLeft',
976
- 'ArrowRight',
977
- 'ArrowUp',
978
- 'ArrowDown',
979
- 'Home',
980
- 'End',
981
- ];
982
- if (allowedKey.indexOf(e.key) >= 0)
983
- return;
984
- const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
985
- if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0)
986
- return;
987
- if (event.metaKey || event.ctrlKey || event.altKey) {
988
- this.combination = this.combination.concat(event.code);
989
- return;
990
- }
991
- const target = event.target;
992
- const tValue = target.value;
993
- const value = `${tValue.slice(0, target.selectionStart)}${event.key}${tValue.slice(target.selectionEnd)}`;
994
- if (value.match(this.pattern) || this.combination.length > 0) {
995
- return true;
996
- }
997
- event.preventDefault();
998
- event.stopImmediatePropagation();
999
- return;
1000
- }
1001
- keyupHandler(event) {
1002
- this.combination = this.combination.filter(v => v !== event.code);
1003
- }
1004
- focusHandler() {
1005
- this.isInputFocused = true;
1006
- }
1007
- focusoutHandler() {
1008
- this.isInputFocused = false;
1009
- this.setInputElementValue(this.formattedValueString);
1010
- if (this.onTouchedFn && !this._timepicker.modalRef) {
1011
- this.onTouchedFn();
1012
- }
1013
- }
1014
- // private readonly _defaultErrorStateMatcher = inject(ErrorStateMatcher);
1015
- constructor() {
1016
- this._closedSubscription = Subscription.EMPTY;
1017
- this._errorState = false;
1018
- // eslint-disable-next-line @typescript-eslint/no-empty-function
1019
- this._onTouched = () => { };
1020
- this._disabled = false;
1021
- this._id = '0';
1022
- this._readonly = false;
1023
- this.stateChanges = new Subject();
1024
- this._uid = `mat-input-${MatTimepickerDirective.nextId++}`;
1025
- this.describedBy = '';
1026
- this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
1027
- this._required = false;
1028
- this._placeholder = '';
1029
- this.focused = false;
1030
- this.pattern = new RegExp('[0-2]?[0-9]:[0-6]?[0-9]');
1031
- this.allowed24HourMap = this.generateAllowedMap();
1032
- this.isInputFocused = false;
1033
- /** Override the label of the ok button. */
1034
- this.okLabel = input('Ok', ...(ngDevMode ? [{ debugName: "okLabel" }] : []));
1035
- /** Override the label of the cancel button. */
1036
- this.cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
1037
- /** Sets the clock mode, 12-hour or 24-hour clocks are supported. */
1038
- this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
1039
- this.disableDialogOpenOnClick = input(false, ...(ngDevMode ? [{ debugName: "disableDialogOpenOnClick" }] : []));
1040
- this.strict = input(true, ...(ngDevMode ? [{ debugName: "strict" }] : []));
1041
- this.controlType = 'angular-material-timepicker';
1042
- this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
1043
- this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
1044
- this._value = null;
1045
- this._formattedValueString = '';
1046
- this._skipValueChangeEmission = true;
1047
- this.combination = [];
1048
- this.timeChange = output();
1049
- this.invalidInput = output();
1050
- this.ngControl = inject(NgControl, { optional: true, self: true });
1051
- this.renderer = inject(Renderer2);
1052
- this.zone = inject(NgZone);
1053
- this.fm = inject(FocusMonitor);
1054
- this.elRef = inject((ElementRef));
1055
- this.ngZone = inject(NgZone);
1056
- this._platform = inject(Platform);
1057
- this._parentForm = inject(NgForm, { optional: true });
1058
- this._matFormFiled = inject(MatFormField, { optional: true });
1059
- this._parentFormGroup = inject(FormGroupDirective, {
1060
- optional: true,
1061
- });
1062
- // TODO: fix this error matcher state
1063
- // this.errorStateMatcher = this._defaultErrorStateMatcher;
1064
- if (this.ngControl != null) {
1065
- this.ngControl.valueAccessor = this;
1066
- }
1067
- if (this._platform.IOS) {
1068
- this.ngZone.runOutsideAngular(() => {
1069
- this.elRef.nativeElement.addEventListener('keyup', (event) => {
1070
- const el = event.target;
1071
- if (!el.value && !el.selectionStart && !el.selectionEnd) {
1072
- // Note: Just setting `0, 0` doesn't fix the issue. Setting
1073
- // `1, 1` fixes it for the first time that you type text and
1074
- // then hold delete. Toggling to `1, 1` and then back to
1075
- // `0, 0` seems to completely fix it.
1076
- el.setSelectionRange(1, 1);
1077
- el.setSelectionRange(0, 0);
1078
- }
1079
- });
1080
- });
1081
- }
1082
- this._isServer = !this._platform.isBrowser;
1083
- }
1084
- setDescribedByIds(ids) {
1085
- this.describedBy = ids.join(' ');
1086
- }
1087
- onContainerClick(event) {
1088
- if (event.target.tagName.toLowerCase() !== 'input') {
1089
- this.elRef.nativeElement.focus();
1090
- }
1091
- }
1092
- setInputElementValue(value) {
1093
- Promise.resolve().then(() => {
1094
- this.zone.runOutsideAngular(() => {
1095
- this.renderer.setProperty(this.elRef.nativeElement, 'value', value);
1096
- });
1097
- });
1098
- }
1099
- validate() {
1100
- const isValueInRange = this.strict()
1101
- ? isDateInRange(this.minDate(), this.maxDate(), this.currentValue)
1102
- : isTimeInRange(this.minDate(), this.maxDate(), this.currentValue);
1103
- return isValueInRange ? null : { dateRange: true };
1104
- }
1105
- ngOnInit() {
1106
- if (this._platform.isBrowser) {
1107
- this.fm.monitor(this.elRef.nativeElement, true).subscribe(origin => {
1108
- this.focused = !!origin;
1109
- this.stateChanges.next();
1110
- });
1111
- }
1112
- if (!this.value) {
1113
- const hasMaxDate = !!this.maxDate();
1114
- const hasMinDate = !!this.minDate();
1115
- //if (hasMinDate || hasMaxDate) {
1116
- if (hasMinDate) {
1117
- this.minDate().setSeconds(0);
1118
- this.minDate().setMilliseconds(0);
1119
- }
1120
- if (hasMaxDate) {
1121
- this.maxDate().setSeconds(0);
1122
- this.maxDate().setMilliseconds(0);
1123
- }
1124
- if (!this.ngControl._rawValidators.find((v) => v === this)) {
1125
- this.ngControl._rawValidators.push(this);
1126
- }
1127
- //}
1128
- }
1129
- this._skipValueChangeEmission = false;
1130
- }
1131
- generateAllowedMap() {
1132
- const isStrictMode = this.strict() && this.value instanceof Date;
1133
- const a24hm = {};
1134
- for (let h = 0; h < 24; h++) {
1135
- for (let m = 0; m < 60; m++) {
1136
- const hourMap = a24hm[h] || {};
1137
- if (isStrictMode && this.value) {
1138
- const currentDate = new Date(this.value.getTime());
1139
- currentDate.setHours(h);
1140
- currentDate.setMinutes(m);
1141
- currentDate.setSeconds(0);
1142
- currentDate.setMilliseconds(0);
1143
- hourMap[m] = isDateInRange(this.minDate(), this.maxDate(), currentDate);
1144
- }
1145
- else {
1146
- hourMap[m] = isAllowed(h, m, this.minDate(), this.maxDate());
1147
- }
1148
- a24hm[h] = hourMap;
1149
- }
1150
- }
1151
- return a24hm;
1152
- }
1153
- ngOnChanges() {
1154
- this.pattern = /^[0-9]{1,2}:?([0-9]{1,2})?$/;
1155
- if (!this._timepicker.modalRef ||
1156
- !this._timepicker.modalRef.componentInstance) {
1157
- return;
1158
- }
1159
- this._timepicker.modalRef.componentInstance.data = {
1160
- value: this.currentValue,
1161
- okLabel: this.okLabel(),
1162
- cancelLabel: this.cancelLabel(),
1163
- color: this.color(),
1164
- minDate: this.minDate(),
1165
- maxDate: this.maxDate(),
1166
- allowed24HourMap: this.allowed24HourMap,
1167
- };
1168
- }
1169
- checkValidity(value) {
1170
- if (!value) {
1171
- return false;
1172
- }
1173
- const hour = value.getHours();
1174
- const minutes = value.getMinutes();
1175
- return isAllowed(hour, minutes, this.minDate(), this.maxDate());
1176
- }
1177
- writeValue(value, isInnerCall = false) {
1178
- if (!isInnerCall) {
1179
- this._skipValueChangeEmission = true;
1180
- Promise.resolve().then(() => (this._skipValueChangeEmission = false));
1181
- }
1182
- if (value) {
1183
- value.setSeconds(0);
1184
- value.setMilliseconds(0);
1185
- }
1186
- if (this.value && +this.value === +(value ?? 0)) {
1187
- return;
1188
- }
1189
- else {
1190
- this.value = value;
1191
- }
1192
- }
1193
- registerOnChange(fn) {
1194
- this.onChangeFn = fn;
1195
- }
1196
- registerOnTouched(fn) {
1197
- this.onTouchedFn = fn;
1198
- }
1199
- setDisabledState(isDisabled) {
1200
- this.disabled = isDisabled;
1201
- this.stateChanges.next();
1202
- }
1203
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1204
- 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: [
1205
- { provide: MatFormFieldControl, useExisting: MatTimepickerDirective },
1206
- ], exportAs: ["matTimepicker"], usesOnChanges: true, ngImport: i0 }); }
1207
- }
1208
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatTimepickerDirective, decorators: [{
1209
- type: Directive,
1210
- args: [{
1211
- selector: 'input[matTimepicker]',
1212
- providers: [
1213
- { provide: MatFormFieldControl, useExisting: MatTimepickerDirective },
1214
- ],
1215
- host: {
1216
- class: 'mat-input-element mat-form-field-autofill-control',
1217
- '[class.mat-input-server]': '_isServer',
1218
- // Native input properties that are overwritten by Angular inputs need to be synced with
1219
- // the native input element. Otherwise property bindings for those don't work.
1220
- '[attr.id]': 'id',
1221
- '[attr.placeholder]': 'placeholder',
1222
- '[disabled]': 'disabled',
1223
- '[required]': 'required',
1224
- '[attr.readonly]': 'readonly || null',
1225
- '[attr.aria-invalid]': 'errorState',
1226
- '[attr.aria-required]': 'required.toString()',
1227
- '(input)': 'inputHandler()',
1228
- '(keydown)': 'keydownHandler($event)',
1229
- '(keyup)': 'keyupHandler($event)',
1230
- '(focus)': 'focusHandler()',
1231
- '(focusout)': 'focusoutHandler()',
1232
- },
1233
- exportAs: 'matTimepicker',
1234
- standalone: true,
1235
- }]
1236
- }], ctorParameters: () => [], propDecorators: { matTimepicker: [{
1237
- type: Input
1238
- }], disabled: [{
1239
- type: Input
1240
- }], id: [{
1241
- type: Input
1242
- }], readonly: [{
1243
- type: Input
1244
- }], shouldLabelFloat: [{
1245
- type: HostBinding,
1246
- args: ['class.floating']
1247
- }], describedBy: [{
1248
- type: HostBinding,
1249
- args: ['attr.aria-describedby']
1250
- }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], required: [{
1251
- type: Input
1252
- }], placeholder: [{
1253
- type: Input
1254
- }], 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: [{
1255
- type: Input
1256
- }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], invalidInput: [{ type: i0.Output, args: ["invalidInput"] }] } });
1257
-
1258
- class OnemrvaMatTimepickerModule {
1259
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1260
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
1261
- MatTimepickerDirective,
1262
- MatTimepickerComponentDialogComponent,
1263
- MatTimepickerToggleIconDirective,
1264
- MatTimePickerToggle,
1265
- OnemrvaMatTimepickerComponent], exports: [MatTimepickerDirective,
1266
- MatTimePickerToggle,
1267
- OnemrvaMatTimepickerComponent] }); }
1268
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, imports: [ClockComponent,
1269
- MatTimepickerComponentDialogComponent,
1270
- MatTimePickerToggle] }); }
1271
- }
1272
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatTimepickerModule, decorators: [{
1273
- type: NgModule,
1274
- args: [{
1275
- imports: [
1276
- ClockComponent,
1277
- MatTimepickerDirective,
1278
- MatTimepickerComponentDialogComponent,
1279
- MatTimepickerToggleIconDirective,
1280
- MatTimePickerToggle,
1281
- OnemrvaMatTimepickerComponent,
1282
- ],
1283
- exports: [
1284
- MatTimepickerDirective,
1285
- MatTimePickerToggle,
1286
- OnemrvaMatTimepickerComponent,
1287
- ],
1288
- }]
1289
- }] });
1290
-
1291
- /**
1292
- * Generated bundle index. Do not edit.
1293
- */
1294
-
1295
- export { ClockComponent, MatTimePickerToggle, MatTimepickerComponentDialogComponent, MatTimepickerDirective, MatTimepickerToggleIconDirective, OnemrvaMatTimepickerComponent, OnemrvaMatTimepickerModule };
1296
- //# sourceMappingURL=onemrvapublic-design-system-mat-timepicker.mjs.map