@dhutaryan/ngx-mat-timepicker 19.2.0 → 20.1.0
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.
- package/README.md +2 -0
- package/fesm2022/dhutaryan-ngx-mat-timepicker.mjs +169 -177
- package/fesm2022/dhutaryan-ngx-mat-timepicker.mjs.map +1 -1
- package/index.d.ts +1094 -3
- package/package.json +4 -4
- package/themes/m2/_tokens.scss +1 -0
- package/themes/m3/_tokens.scss +1 -0
- package/lib/adapter/index.d.ts +0 -16
- package/lib/adapter/native-date-time-adapter.d.ts +0 -45
- package/lib/adapter/time-adapter.d.ts +0 -135
- package/lib/clock-dial-adnimation.d.ts +0 -1
- package/lib/clock-dials.d.ts +0 -36
- package/lib/clock-size.d.ts +0 -5
- package/lib/hours-clock-dial.d.ts +0 -60
- package/lib/minutes-clock-dial.d.ts +0 -46
- package/lib/orientation.d.ts +0 -2
- package/lib/time-face-base.d.ts +0 -93
- package/lib/time-input-base.d.ts +0 -31
- package/lib/time-inputs.d.ts +0 -45
- package/lib/time-period.d.ts +0 -24
- package/lib/time-selection-model.d.ts +0 -62
- package/lib/timepicker-actions-default.d.ts +0 -3
- package/lib/timepicker-actions.d.ts +0 -48
- package/lib/timepicker-animations.d.ts +0 -6
- package/lib/timepicker-base.d.ts +0 -196
- package/lib/timepicker-content-layout.d.ts +0 -10
- package/lib/timepicker-content.d.ts +0 -75
- package/lib/timepicker-input-base.d.ts +0 -112
- package/lib/timepicker-input.d.ts +0 -47
- package/lib/timepicker-intl.d.ts +0 -31
- package/lib/timepicker-scroll-strategy.d.ts +0 -12
- package/lib/timepicker-toggle.d.ts +0 -36
- package/lib/timepicker.d.ts +0 -6
- package/lib/timepicker.module.d.ts +0 -21
- package/public-api.d.ts +0 -20
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Injectable, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, ContentChild, EventEmitter, Inject, Output, inject, LOCALE_ID, Optional, NgModule, HostListener, SkipSelf, ViewChild, booleanAttribute, forwardRef, TemplateRef
|
|
2
|
+
import { InjectionToken, Injectable, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, ContentChild, EventEmitter, DOCUMENT, Inject, Output, inject, LOCALE_ID, Optional, NgModule, HostListener, signal, SkipSelf, ElementRef, NgZone, Renderer2, ViewChild, booleanAttribute, forwardRef, TemplateRef } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
4
4
|
import { Overlay, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i2$2 from '@angular/cdk/portal';
|
|
6
6
|
import { PortalModule, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
7
7
|
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i3$2 from '@angular/cdk/a11y';
|
|
9
9
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
10
10
|
import * as i2 from '@angular/material/button';
|
|
11
11
|
import { MatButtonModule, MAT_FAB_DEFAULT_OPTIONS } from '@angular/material/button';
|
|
12
|
-
import * as i1 from '@angular/common';
|
|
13
|
-
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
14
12
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
15
13
|
import { Subject, Subscription, of, merge, fromEvent, debounceTime, take, BehaviorSubject, first, filter } from 'rxjs';
|
|
16
14
|
import { PlatformModule, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
|
|
17
15
|
import { DOWN_ARROW, UP_ARROW, PAGE_UP, PAGE_DOWN, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
18
|
-
import
|
|
16
|
+
import * as i3 from '@angular/material/core';
|
|
17
|
+
import { MatRippleModule, MATERIAL_ANIMATIONS } from '@angular/material/core';
|
|
18
|
+
import * as i1 from '@angular/common';
|
|
19
|
+
import { CommonModule } from '@angular/common';
|
|
19
20
|
import * as i2$1 from '@angular/material/divider';
|
|
20
21
|
import { MatDividerModule } from '@angular/material/divider';
|
|
21
|
-
import * as i3 from '@angular/material/
|
|
22
|
-
import { MatRippleModule } from '@angular/material/core';
|
|
23
|
-
import * as i4 from '@angular/material/form-field';
|
|
22
|
+
import * as i3$1 from '@angular/material/form-field';
|
|
24
23
|
import { MatFormFieldModule, MAT_FORM_FIELD } from '@angular/material/form-field';
|
|
25
|
-
import * as
|
|
24
|
+
import * as i4 from '@angular/material/input';
|
|
26
25
|
import { MatInputModule, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
|
|
27
26
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
|
|
28
27
|
|
|
@@ -67,19 +66,19 @@ class MatTimepickerIntl {
|
|
|
67
66
|
/** A label for am text. */
|
|
68
67
|
this.pm = 'PM';
|
|
69
68
|
}
|
|
70
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
71
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
69
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
70
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerIntl, providedIn: 'root' }); }
|
|
72
71
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerIntl, decorators: [{
|
|
74
73
|
type: Injectable,
|
|
75
74
|
args: [{ providedIn: 'root' }]
|
|
76
75
|
}] });
|
|
77
76
|
|
|
78
77
|
class MatTimepickerToggleIcon {
|
|
79
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
80
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
78
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
79
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerToggleIcon, isStandalone: true, selector: "[matTimepickerToggleIcon]", ngImport: i0 }); }
|
|
81
80
|
}
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggleIcon, decorators: [{
|
|
83
82
|
type: Directive,
|
|
84
83
|
args: [{ selector: '[matTimepickerToggleIcon]', standalone: true }]
|
|
85
84
|
}] });
|
|
@@ -130,12 +129,12 @@ class MatTimepickerToggle {
|
|
|
130
129
|
this._stateChanges.unsubscribe();
|
|
131
130
|
this._stateChanges = merge(this._intl.changes, timepickerStateChanged, inputStateChanged, timepickerToggled).subscribe(() => this._cdr.markForCheck());
|
|
132
131
|
}
|
|
133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggle, deps: [{ token: 'tabindex', attribute: true }, { token: MatTimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatTimepickerToggle, isStandalone: true, selector: "mat-timepicker-toggle", inputs: { timepicker: ["for", "timepicker"], disabled: "disabled", disableRipple: "disableRipple", tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"] }, 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\"" }, classAttribute: "mat-timepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: MatTimepickerToggleIcon, descendants: true }], exportAs: ["matTimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n type=\"button\"\n #button\n mat-icon-button\n [attr.aria-haspopup]=\"timepicker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel || _intl.openTimepickerLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\"\n>\n @if (!customIcon) {\n <svg\n class=\"mat-timepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z\"\n />\n </svg>\n }\n\n <ng-content select=\"[matTimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field .mat-form-field-prefix .mat-timepicker-toggle-default-icon,.mat-form-field .mat-form-field-suffix .mat-timepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field .mat-form-field-prefix .mat-icon-button .mat-timepicker-toggle-default-icon,.mat-form-field .mat-form-field-suffix .mat-icon-button .mat-timepicker-toggle-default-icon{margin:auto}.mat-timepicker-toggle{color:var(--mat-timepicker-toggle-color, var(--mat-sys-on-surface-variant))}.mat-timepicker-toggle.mat-timepicker-toggle-active button{color:var(--mat-timepicker-toggle-active-color, var(--mat-sys-primary))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
135
134
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggle, decorators: [{
|
|
137
136
|
type: Component,
|
|
138
|
-
args: [{ selector: 'mat-timepicker-toggle', standalone: true, imports: [
|
|
137
|
+
args: [{ selector: 'mat-timepicker-toggle', standalone: true, imports: [MatButtonModule], exportAs: 'matTimepickerToggle', host: {
|
|
139
138
|
class: 'mat-timepicker-toggle',
|
|
140
139
|
'[attr.tabindex]': 'null',
|
|
141
140
|
'[class.mat-timepicker-toggle-active]': 'timepicker && timepicker.opened',
|
|
@@ -163,27 +162,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
163
162
|
args: ['aria-label']
|
|
164
163
|
}] } });
|
|
165
164
|
|
|
166
|
-
/** Animations used by the timepicker. */
|
|
167
|
-
const matTimepickerAnimations = {
|
|
168
|
-
/** Transforms the height of the timepicker's. */
|
|
169
|
-
transformPanel: trigger('transformPanel', [
|
|
170
|
-
transition('void => enter-dropdown', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
|
|
171
|
-
style({ opacity: 0, transform: 'scale(1, 0.8)' }),
|
|
172
|
-
style({ opacity: 1, transform: 'scale(1, 1)' }),
|
|
173
|
-
]))),
|
|
174
|
-
transition('void => enter-dialog', animate('150ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
|
|
175
|
-
style({ opacity: 0, transform: 'scale(0.7)' }),
|
|
176
|
-
style({ transform: 'none', opacity: 1 }),
|
|
177
|
-
]))),
|
|
178
|
-
transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
|
|
179
|
-
]),
|
|
180
|
-
/** Fades in the content of the timepicker. */
|
|
181
|
-
fadeInTimepicker: trigger('fadeInTimepicker', [
|
|
182
|
-
state('void', style({ opacity: 0 })),
|
|
183
|
-
state('enter', style({ opacity: 1 })),
|
|
184
|
-
]),
|
|
185
|
-
};
|
|
186
|
-
|
|
187
165
|
const TOUCH_UI_MULTIPLIER = 1.25;
|
|
188
166
|
const TOUCH_UI_TICK_MULTIPLIER = 1.5;
|
|
189
167
|
const CLOCK_RADIUS = 128;
|
|
@@ -312,7 +290,8 @@ class MatMinutesClockDial {
|
|
|
312
290
|
const radian = atan2 < 0 ? Math.PI * 2 + atan2 : atan2;
|
|
313
291
|
const initialValue = Math.round(radian / unit) * this.interval;
|
|
314
292
|
const value = initialValue === 60 ? 0 : initialValue;
|
|
315
|
-
if (this.availableMinutes.includes(value) &&
|
|
293
|
+
if (this.availableMinutes.includes(value) &&
|
|
294
|
+
this.availableMinutes.includes(value)) {
|
|
316
295
|
this.selectedMinute = value;
|
|
317
296
|
this.selectedChange.emit(this.selectedMinute);
|
|
318
297
|
}
|
|
@@ -338,16 +317,16 @@ class MatMinutesClockDial {
|
|
|
338
317
|
_getWindow() {
|
|
339
318
|
return this._document.defaultView || window;
|
|
340
319
|
}
|
|
341
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
342
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatMinutesClockDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatMinutesClockDial, isStandalone: true, selector: "mat-minutes-clock-dial", inputs: { selectedMinute: "selectedMinute", interval: "interval", availableMinutes: "availableMinutes", color: "color", touchUi: "touchUi" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onUserAction($event)", "touchstart": "_onUserAction($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-minutes" }, exportAs: ["matMinutesClockDial"], ngImport: i0, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isMinutePoint\"\n [class.mat-clock-dial-hand-disabled]=\"disabled\"\n [ngStyle]=\"_handStyles()\"\n>\n <div class=\"mat-clock-dial-hand-point\" tabindex=\"0\"></div>\n</div>\n@for (minute of minutes; track minute.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(minute.value) ? 0 : -1\"\n [style.left.px]=\"minute.left\"\n [style.top.px]=\"minute.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(minute.value)\"\n [class.mat-clock-dial-cell-disabled]=\"minute.disabled\"\n [color]=\"_isActiveCell(minute.value) ? color : undefined\"\n [attr.aria-disabled]=\"minute.disabled || null\"\n >\n {{ minute.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
343
322
|
}
|
|
344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatMinutesClockDial, decorators: [{
|
|
345
324
|
type: Component,
|
|
346
325
|
args: [{ selector: 'mat-minutes-clock-dial', standalone: true, imports: [CommonModule, MatButtonModule], exportAs: 'matMinutesClockDial', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
347
326
|
class: 'mat-clock-dial mat-clock-dial-minutes',
|
|
348
327
|
'(mousedown)': '_onUserAction($event)',
|
|
349
328
|
'(touchstart)': '_onUserAction($event)',
|
|
350
|
-
}, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isMinutePoint\"\n [class.mat-clock-dial-hand-disabled]=\"disabled\"\n [ngStyle]=\"_handStyles()\"\n>\n <div class=\"mat-clock-dial-hand-point\" tabindex=\"0\"></div>\n</div>\n@for (minute of minutes; track minute.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(minute.value) ? 0 : -1\"\n [style.left.px]=\"minute.left\"\n [style.top.px]=\"minute.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(minute.value)\"\n [class.mat-clock-dial-cell-disabled]=\"minute.disabled\"\n [color]=\"_isActiveCell(minute.value) ? color : undefined\"\n [attr.aria-disabled]=\"minute.disabled || null\"\n >\n {{ minute.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"] }]
|
|
329
|
+
}, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isMinutePoint\"\n [class.mat-clock-dial-hand-disabled]=\"disabled\"\n [ngStyle]=\"_handStyles()\"\n>\n <div class=\"mat-clock-dial-hand-point\" tabindex=\"0\"></div>\n</div>\n@for (minute of minutes; track minute.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(minute.value) ? 0 : -1\"\n [style.left.px]=\"minute.left\"\n [style.top.px]=\"minute.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(minute.value)\"\n [class.mat-clock-dial-cell-disabled]=\"minute.disabled\"\n [color]=\"_isActiveCell(minute.value) ? color : undefined\"\n [attr.aria-disabled]=\"minute.disabled || null\"\n >\n {{ minute.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"] }]
|
|
351
330
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
352
331
|
type: Inject,
|
|
353
332
|
args: [DOCUMENT]
|
|
@@ -515,23 +494,25 @@ class MatHoursClockDial {
|
|
|
515
494
|
return getClockOuterRadius(this.touchUi);
|
|
516
495
|
}
|
|
517
496
|
const outer = hour >= 0 && hour < 12;
|
|
518
|
-
const radius = outer
|
|
497
|
+
const radius = outer
|
|
498
|
+
? getClockOuterRadius(this.touchUi)
|
|
499
|
+
: getClockInnerRadius(this.touchUi);
|
|
519
500
|
return radius;
|
|
520
501
|
}
|
|
521
502
|
/** Use defaultView of injected document if available or fallback to global window reference */
|
|
522
503
|
_getWindow() {
|
|
523
504
|
return this._document.defaultView || window;
|
|
524
505
|
}
|
|
525
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatHoursClockDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatHoursClockDial, isStandalone: true, selector: "mat-hours-clock-dial", inputs: { selectedHour: "selectedHour", isMeridiem: "isMeridiem", availableHours: "availableHours", color: "color", touchUi: "touchUi" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onUserAction($event)", "touchstart": "_onUserAction($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-hours" }, exportAs: ["matHoursClockDial"], ngImport: i0, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isHour\"\n [class.mat-clock-dial-hand-disabled]=\"disabledHand\"\n [ngStyle]=\"_handStyles()\"\n></div>\n@for (hour of hours; track hour.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(hour.value) ? 0 : -1\"\n [style.left.px]=\"hour.left\"\n [style.top.px]=\"hour.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(hour.value)\"\n [class.mat-clock-dial-cell-disabled]=\"hour.disabled\"\n [color]=\"_isActiveCell(hour.value) ? color : undefined\"\n [attr.aria-disabled]=\"hour.disabled || null\"\n >\n {{ hour.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
527
508
|
}
|
|
528
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatHoursClockDial, decorators: [{
|
|
529
510
|
type: Component,
|
|
530
511
|
args: [{ selector: 'mat-hours-clock-dial', standalone: true, imports: [CommonModule, MatButtonModule], exportAs: 'matHoursClockDial', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
531
512
|
class: 'mat-clock-dial mat-clock-dial-hours',
|
|
532
513
|
'(mousedown)': '_onUserAction($event)',
|
|
533
514
|
'(touchstart)': '_onUserAction($event)',
|
|
534
|
-
}, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isHour\"\n [class.mat-clock-dial-hand-disabled]=\"disabledHand\"\n [ngStyle]=\"_handStyles()\"\n></div>\n@for (hour of hours; track hour.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(hour.value) ? 0 : -1\"\n [style.left.px]=\"hour.left\"\n [style.top.px]=\"hour.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(hour.value)\"\n [class.mat-clock-dial-cell-disabled]=\"hour.disabled\"\n [color]=\"_isActiveCell(hour.value) ? color : undefined\"\n [attr.aria-disabled]=\"hour.disabled || null\"\n >\n {{ hour.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"] }]
|
|
515
|
+
}, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isHour\"\n [class.mat-clock-dial-hand-disabled]=\"disabledHand\"\n [ngStyle]=\"_handStyles()\"\n></div>\n@for (hour of hours; track hour.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(hour.value) ? 0 : -1\"\n [style.left.px]=\"hour.left\"\n [style.top.px]=\"hour.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(hour.value)\"\n [class.mat-clock-dial-cell-disabled]=\"hour.disabled\"\n [color]=\"_isActiveCell(hour.value) ? color : undefined\"\n [attr.aria-disabled]=\"hour.disabled || null\"\n >\n {{ hour.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"] }]
|
|
535
516
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
536
517
|
type: Inject,
|
|
537
518
|
args: [DOCUMENT]
|
|
@@ -760,10 +741,10 @@ class NativeDateTimeAdapter extends TimeAdapter {
|
|
|
760
741
|
d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
|
|
761
742
|
return dtf.format(d);
|
|
762
743
|
}
|
|
763
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
764
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
744
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeAdapter, deps: [{ token: MAT_TIME_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
745
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeAdapter }); }
|
|
765
746
|
}
|
|
766
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeAdapter, decorators: [{
|
|
767
748
|
type: Injectable
|
|
768
749
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
769
750
|
type: Optional
|
|
@@ -773,11 +754,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
773
754
|
}] }] });
|
|
774
755
|
|
|
775
756
|
class NativeDateTimeModule {
|
|
776
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
777
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
778
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
758
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] }); }
|
|
759
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeModule, providers: [{ provide: TimeAdapter, useClass: NativeDateTimeAdapter }], imports: [PlatformModule] }); }
|
|
779
760
|
}
|
|
780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeModule, decorators: [{
|
|
781
762
|
type: NgModule,
|
|
782
763
|
args: [{
|
|
783
764
|
imports: [PlatformModule],
|
|
@@ -785,11 +766,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
785
766
|
}]
|
|
786
767
|
}] });
|
|
787
768
|
class MatNativeDateTimeModule {
|
|
788
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
789
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
790
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
770
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatNativeDateTimeModule }); }
|
|
771
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatNativeDateTimeModule, providers: [provideNativeDateTimeAdapter()] }); }
|
|
791
772
|
}
|
|
792
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatNativeDateTimeModule, decorators: [{
|
|
793
774
|
type: NgModule,
|
|
794
775
|
args: [{
|
|
795
776
|
providers: [provideNativeDateTimeAdapter()],
|
|
@@ -1083,10 +1064,10 @@ class MatTimeFaceBase {
|
|
|
1083
1064
|
}
|
|
1084
1065
|
}
|
|
1085
1066
|
}
|
|
1086
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1087
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1067
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeFaceBase, deps: [{ token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1068
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimeFaceBase, isStandalone: true, inputs: { selected: "selected", minTime: "minTime", maxTime: "maxTime", minuteInterval: "minuteInterval", isMeridiem: "isMeridiem", color: "color" }, outputs: { _userSelection: "_userSelection", selectedChange: "selectedChange" }, ngImport: i0 }); }
|
|
1088
1069
|
}
|
|
1089
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1070
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeFaceBase, decorators: [{
|
|
1090
1071
|
type: Directive
|
|
1091
1072
|
}], ctorParameters: () => [{ type: TimeAdapter, decorators: [{
|
|
1092
1073
|
type: Optional
|
|
@@ -1184,10 +1165,10 @@ class MatTimeInputBase {
|
|
|
1184
1165
|
this.inputElement.placeholder = this._withZeroPrefix(value);
|
|
1185
1166
|
this._cdr.markForCheck();
|
|
1186
1167
|
}
|
|
1187
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1188
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeInputBase, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1169
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimeInputBase, isStandalone: true, inputs: { value: "value" }, outputs: { timeChanged: "timeChanged" }, host: { listeners: { "keydown": "_keydown($event)" } }, ngImport: i0 }); }
|
|
1189
1170
|
}
|
|
1190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeInputBase, decorators: [{
|
|
1191
1172
|
type: Directive
|
|
1192
1173
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
1193
1174
|
type: Inject,
|
|
@@ -1201,25 +1182,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1201
1182
|
args: ['keydown', ['$event']]
|
|
1202
1183
|
}] } });
|
|
1203
1184
|
|
|
1204
|
-
const visible = { transform: 'scale(1)', opacity: 1, visibility: 'visible' };
|
|
1205
|
-
const hidden = { transform: 'scale(1.05)', opacity: 0, visibility: 'hidden' };
|
|
1206
|
-
const enterLeaveAnimation = trigger('enterLeaveAnimation', [
|
|
1207
|
-
transition(':enter', [
|
|
1208
|
-
style(hidden),
|
|
1209
|
-
animate('0.1s ease-out', style(visible)),
|
|
1210
|
-
]),
|
|
1211
|
-
transition(':leave', [style(visible), animate('0s ease-in', style(hidden))]),
|
|
1212
|
-
]);
|
|
1213
|
-
|
|
1214
1185
|
class MatTimepickerContentLayout {
|
|
1215
1186
|
constructor() {
|
|
1216
1187
|
/** Layout orientation. */
|
|
1217
1188
|
this.orientation = 'vertical';
|
|
1218
1189
|
}
|
|
1219
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1220
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerContentLayout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerContentLayout, isStandalone: true, selector: "mat-timepicker-content-layout", inputs: { title: "title", orientation: "orientation" }, host: { properties: { "class.mat-timepicker-content-layout-horizontal": "orientation === \"horizontal\"", "class.mat-timepicker-content-layout-vertical": "orientation === \"vertical\"" }, classAttribute: "mat-timepicker-content-layout" }, exportAs: ["matTimepickerContent"], ngImport: i0, template: "<h6 class=\"mat-timepicker-content-layout-title\">{{ title }}</h6>\n\n<div class=\"mat-timepicker-content-layout-container\">\n <div class=\"mat-timepicker-content-layout-values\">\n <div class=\"mat-timepicker-content-layout-hours\">\n <ng-content select=\"[hours]\"></ng-content>\n </div>\n <span class=\"mat-timepicker-content-layout-separator\">:</span>\n <div class=\"mat-timepicker-content-layout-minutes\">\n <ng-content select=\"[minutes]\"></ng-content>\n </div>\n\n <ng-content select=\"[mat-time-period]\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n</div>\n", styles: [".mat-timepicker-content-layout-title{color:var(--mat-timepicker-content-layout-title-color, var(--mat-sys-on-surface-variant));font-size:var(--mat-timepicker-content-layout-title-font-size, 12px);font-weight:var(--mat-timepicker-content-layout-title-font-weight, var(--mat-sys-title-medium-weight))}h6.mat-timepicker-content-layout-title{margin-top:0rem;margin-bottom:1.25rem;letter-spacing:.05rem}.mat-timepicker-content-layout-values{display:flex;justify-content:center}.mat-time-period{margin-left:.75rem}.mat-timepicker-content-layout-horizontal h6.mat-timepicker-content-layout-title{margin-bottom:0}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-container{display:flex;gap:4rem;align-items:center}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-values{flex-wrap:wrap}.mat-timepicker-content-layout-horizontal .mat-time-period{margin-top:.75rem;margin-left:0}.mat-timepicker-content-layout-hours,.mat-timepicker-content-layout-minutes{width:6rem}.mat-timepicker-content-layout-separator{display:flex;justify-content:center;align-self:center;width:1.5rem;height:1.75rem;font-weight:500;font-size:var(--mat-timepicker-content-layout-separator-font-size, 3rem);line-height:var(--mat-timepicker-content-layout-separator-line-height, 1.25rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1221
1192
|
}
|
|
1222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerContentLayout, decorators: [{
|
|
1223
1194
|
type: Component,
|
|
1224
1195
|
args: [{ selector: 'mat-timepicker-content-layout', standalone: true, exportAs: 'matTimepickerContent', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1225
1196
|
class: 'mat-timepicker-content-layout',
|
|
@@ -1270,10 +1241,10 @@ class MatTimePeriod {
|
|
|
1270
1241
|
}
|
|
1271
1242
|
return this.disabledPeriod === period;
|
|
1272
1243
|
}
|
|
1273
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimePeriod, deps: [{ token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimePeriod, isStandalone: true, selector: "mat-time-period", inputs: { vertical: "vertical", period: "period", disabledPeriod: "disabledPeriod" }, outputs: { periodChanged: "periodChanged" }, host: { properties: { "class.mat-time-period-vertical": "vertical", "class.mat-time-period-horizontal": "!vertical", "attr.aria-orientation": "vertical ? \"vertical\" : \"horizontal\"" }, classAttribute: "mat-time-period" }, ngImport: i0, template: "<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"period === 'am'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('am')\"\n (click)=\"setPeriod($event, 'am')\"\n (keydown.space)=\"setPeriod($event, 'am')\"\n>\n {{ _intl.am }}\n</div>\n<mat-divider [vertical]=\"!vertical\"></mat-divider>\n<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"period === 'pm'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('pm')\"\n (click)=\"setPeriod($event, 'pm')\"\n (keydown.space)=\"setPeriod($event, 'pm')\"\n>\n {{ _intl.pm }}\n</div>\n", styles: [".mat-time-period{display:flex;text-align:center;border-width:1px;border-style:solid;border-radius:.25rem;box-sizing:border-box;border-color:var(--mat-timepicker-time-period-border-color, var(--mat-sys-outline))}.mat-time-period-vertical{flex-direction:column;width:3.25rem;height:4.5rem}.mat-time-period-vertical .mat-time-period-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-time-period-vertical .mat-time-period-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-horizontal{flex-direction:row;max-width:13.5rem;width:100%;height:2.5rem}.mat-time-period-horizontal .mat-time-period-item:first-child{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.mat-time-period-horizontal .mat-time-period-item:last-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-item{display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:100%;font-size:.875rem;font-weight:500;cursor:pointer}.mat-time-period-item-active{color:var(--mat-timepicker-time-period-active-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mat-timepicker-time-period-active-background-color, var(--mat-sys-tertiary-container))}.mat-time-period-item-disabled{pointer-events:none;color:var(--mat-timepicker-time-period-disabled-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-time-period-disabled-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 20%, transparent))}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1275
1246
|
}
|
|
1276
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimePeriod, decorators: [{
|
|
1277
1248
|
type: Component,
|
|
1278
1249
|
args: [{ selector: 'mat-time-period', standalone: true, imports: [MatDividerModule, MatRippleModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1279
1250
|
class: 'mat-time-period',
|
|
@@ -1298,13 +1269,13 @@ class MatClockDials extends MatTimeFaceBase {
|
|
|
1298
1269
|
this._ngZone = _ngZone;
|
|
1299
1270
|
this._elementRef = _elementRef;
|
|
1300
1271
|
this._cdr = _cdr;
|
|
1301
|
-
this.isHoursView = true;
|
|
1272
|
+
this.isHoursView = signal(true, ...(ngDevMode ? [{ debugName: "isHoursView" }] : []));
|
|
1302
1273
|
/** Specifies the view of clock dial. */
|
|
1303
1274
|
this._view = new BehaviorSubject('hours');
|
|
1304
1275
|
this._viewSubscription = Subscription.EMPTY;
|
|
1305
1276
|
}
|
|
1306
1277
|
ngOnInit() {
|
|
1307
|
-
this._viewSubscription = this._view.subscribe((view) =>
|
|
1278
|
+
this._viewSubscription = this._view.subscribe((view) => this.isHoursView.set(view === 'hours'));
|
|
1308
1279
|
}
|
|
1309
1280
|
ngOnDestroy() {
|
|
1310
1281
|
this._viewSubscription?.unsubscribe();
|
|
@@ -1349,13 +1320,12 @@ class MatClockDials extends MatTimeFaceBase {
|
|
|
1349
1320
|
this._onHourSelected(hour);
|
|
1350
1321
|
this._cdr.detectChanges();
|
|
1351
1322
|
}
|
|
1352
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatClockDials, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1324
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatClockDials, isStandalone: true, selector: "mat-clock-dials", inputs: { orientation: "orientation", touchUi: "touchUi" }, host: { attributes: { "role": "dial" }, classAttribute: "mat-clock-dials" }, exportAs: ["matClockDials"], usesInheritance: true, ngImport: i0, template: "<mat-timepicker-content-layout\n [title]=\"_intl.dialsTitle\"\n [orientation]=\"orientation\"\n>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n hours\n [class.mat-clock-dial-value-active]=\"isHoursView()\"\n (click)=\"onViewChange($event, 'hours')\"\n (keydown.space)=\"onViewChange($event, 'hours')\"\n >\n {{ _withZeroPrefix(selectedHour) }}\n </div>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n minutes\n [class.mat-clock-dial-value-active]=\"!isHoursView()\"\n (click)=\"onViewChange($event, 'minutes')\"\n (keydown.space)=\"onViewChange($event, 'minutes')\"\n >\n {{ _withZeroPrefix(selectedMinute) }}\n </div>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n [vertical]=\"orientation === 'vertical'\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n\n <div\n class=\"mat-clock-dial-faces\"\n [class.mat-clock-dial-faces-horizontal]=\"orientation === 'horizontal'\"\n >\n @if (isHoursView()) {\n <mat-hours-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedHour]=\"selectedHour\"\n [isMeridiem]=\"isMeridiem\"\n [availableHours]=\"_getAvailableHours()\"\n [touchUi]=\"touchUi\"\n (selectedChange)=\"_onHourChanged($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n ></mat-hours-clock-dial>\n }\n\n @if (!isHoursView()) {\n <mat-minutes-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedMinute]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n [touchUi]=\"touchUi\"\n (selectedChange)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n ></mat-minutes-clock-dial>\n }\n </div>\n</mat-timepicker-content-layout>\n", styles: [".mat-clock-dial-values{display:flex;width:100%}.mat-clock-dial-value{display:flex;align-items:center;justify-content:center;height:4.5rem;border-radius:.25rem;cursor:pointer;background-color:var(--mat-timepicker-clock-dial-value-background-color, var(--mat-sys-surface-container-highest));font-family:var(--mat-timepicker-clock-dial-value-font-family, var(--mat-sys-body-medium-font));font-size:var(--mat-timepicker-clock-dial-value-font-size, 2rem);letter-spacing:var(--mat-timepicker-clock-dial-value-letter-spacing, .5px)}.mat-clock-dial-value.mat-clock-dial-value-active{color:var(--mat-timepicker-clock-dial-value-active-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-clock-dial-value-active-background-color, var(--mat-sys-primary-container))}.mat-clock-dial-faces{margin-top:2.25rem}.mat-clock-dial-faces.mat-clock-dial-faces-horizontal{margin-top:0}.mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover{cursor:default}.mat-clock-dial-enter{animation:clock-dial-enter-animation .1s ease-out}.mat-clock-dial-leave{animation:clock-dial-leave-animation 0s ease-in}@keyframes clock-dial-enter-animation{0%{opacity:0;visibility:hidden;transform:scale(1.05)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes clock-dial-leave-animation{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(1.05)}}\n"], dependencies: [{ kind: "component", type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title", "orientation"], exportAs: ["matTimepickerContent"] }, { kind: "component", type: MatHoursClockDial, selector: "mat-hours-clock-dial", inputs: ["selectedHour", "isMeridiem", "availableHours", "color", "touchUi"], outputs: ["selectedChange"], exportAs: ["matHoursClockDial"] }, { kind: "component", type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: ["selectedMinute", "interval", "availableMinutes", "color", "touchUi"], outputs: ["selectedChange"], exportAs: ["matMinutesClockDial"] }, { kind: "component", type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1354
1325
|
}
|
|
1355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatClockDials, decorators: [{
|
|
1356
1327
|
type: Component,
|
|
1357
1328
|
args: [{ selector: 'mat-clock-dials', standalone: true, imports: [
|
|
1358
|
-
CommonModule,
|
|
1359
1329
|
MatTimepickerContentLayout,
|
|
1360
1330
|
MatHoursClockDial,
|
|
1361
1331
|
MatMinutesClockDial,
|
|
@@ -1363,7 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1363
1333
|
], exportAs: 'matClockDials', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1364
1334
|
role: 'dial',
|
|
1365
1335
|
class: 'mat-clock-dials',
|
|
1366
|
-
},
|
|
1336
|
+
}, template: "<mat-timepicker-content-layout\n [title]=\"_intl.dialsTitle\"\n [orientation]=\"orientation\"\n>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n hours\n [class.mat-clock-dial-value-active]=\"isHoursView()\"\n (click)=\"onViewChange($event, 'hours')\"\n (keydown.space)=\"onViewChange($event, 'hours')\"\n >\n {{ _withZeroPrefix(selectedHour) }}\n </div>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n minutes\n [class.mat-clock-dial-value-active]=\"!isHoursView()\"\n (click)=\"onViewChange($event, 'minutes')\"\n (keydown.space)=\"onViewChange($event, 'minutes')\"\n >\n {{ _withZeroPrefix(selectedMinute) }}\n </div>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n [vertical]=\"orientation === 'vertical'\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n\n <div\n class=\"mat-clock-dial-faces\"\n [class.mat-clock-dial-faces-horizontal]=\"orientation === 'horizontal'\"\n >\n @if (isHoursView()) {\n <mat-hours-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedHour]=\"selectedHour\"\n [isMeridiem]=\"isMeridiem\"\n [availableHours]=\"_getAvailableHours()\"\n [touchUi]=\"touchUi\"\n (selectedChange)=\"_onHourChanged($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n ></mat-hours-clock-dial>\n }\n\n @if (!isHoursView()) {\n <mat-minutes-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedMinute]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n [touchUi]=\"touchUi\"\n (selectedChange)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n ></mat-minutes-clock-dial>\n }\n </div>\n</mat-timepicker-content-layout>\n", styles: [".mat-clock-dial-values{display:flex;width:100%}.mat-clock-dial-value{display:flex;align-items:center;justify-content:center;height:4.5rem;border-radius:.25rem;cursor:pointer;background-color:var(--mat-timepicker-clock-dial-value-background-color, var(--mat-sys-surface-container-highest));font-family:var(--mat-timepicker-clock-dial-value-font-family, var(--mat-sys-body-medium-font));font-size:var(--mat-timepicker-clock-dial-value-font-size, 2rem);letter-spacing:var(--mat-timepicker-clock-dial-value-letter-spacing, .5px)}.mat-clock-dial-value.mat-clock-dial-value-active{color:var(--mat-timepicker-clock-dial-value-active-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-clock-dial-value-active-background-color, var(--mat-sys-primary-container))}.mat-clock-dial-faces{margin-top:2.25rem}.mat-clock-dial-faces.mat-clock-dial-faces-horizontal{margin-top:0}.mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover{cursor:default}.mat-clock-dial-enter{animation:clock-dial-enter-animation .1s ease-out}.mat-clock-dial-leave{animation:clock-dial-leave-animation 0s ease-in}@keyframes clock-dial-enter-animation{0%{opacity:0;visibility:hidden;transform:scale(1.05)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes clock-dial-leave-animation{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(1.05)}}\n"] }]
|
|
1367
1337
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1368
1338
|
type: Optional
|
|
1369
1339
|
}] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { orientation: [{
|
|
@@ -1417,10 +1387,10 @@ class MatHourInput extends MatTimeInputBase {
|
|
|
1417
1387
|
}
|
|
1418
1388
|
return Math.min(Math.max(value, Math.min(...this.availableHours)), Math.max(...this.availableHours));
|
|
1419
1389
|
}
|
|
1420
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1421
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatHourInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1391
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatHourInput, isStandalone: true, selector: "input[matHourInput]", inputs: { availableHours: "availableHours", isMeridiem: "isMeridiem" }, host: { listeners: { "focus": "focus($event)", "blur": "blur($event)" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1422
1392
|
}
|
|
1423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatHourInput, decorators: [{
|
|
1424
1394
|
type: Directive,
|
|
1425
1395
|
args: [{
|
|
1426
1396
|
selector: 'input[matHourInput]',
|
|
@@ -1469,10 +1439,10 @@ class MatMinuteInput extends MatTimeInputBase {
|
|
|
1469
1439
|
const roundedValue = Math.round(value / this.interval) * this.interval;
|
|
1470
1440
|
return Math.min(Math.max(roundedValue, Math.min(...this.availableMinutes)), Math.max(...this.availableMinutes));
|
|
1471
1441
|
}
|
|
1472
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1473
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatMinuteInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1443
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatMinuteInput, isStandalone: true, selector: "input[matMinuteInput]", inputs: { interval: "interval", availableMinutes: "availableMinutes" }, host: { listeners: { "focus": "focus($event)", "blur": "blur($event)" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1474
1444
|
}
|
|
1475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatMinuteInput, decorators: [{
|
|
1476
1446
|
type: Directive,
|
|
1477
1447
|
args: [{
|
|
1478
1448
|
selector: 'input[matMinuteInput]',
|
|
@@ -1515,13 +1485,12 @@ class MatTimeInputs extends MatTimeFaceBase {
|
|
|
1515
1485
|
});
|
|
1516
1486
|
});
|
|
1517
1487
|
}
|
|
1518
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeInputs, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1489
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatTimeInputs, isStandalone: true, selector: "mat-time-inputs", host: { classAttribute: "mat-time-inputs" }, usesInheritance: true, ngImport: i0, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n hours\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matHourInput\n [isMeridiem]=\"isMeridiem\"\n [value]=\"selectedHour\"\n [availableHours]=\"_getAvailableHours()\"\n (timeChanged)=\"_onHourSelected($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n />\n <mat-hint>{{ _intl.hourInputHint }}</mat-hint>\n </mat-form-field>\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n minutes\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matMinuteInput\n [value]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n (timeChanged)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n />\n <mat-hint>{{ _intl.minuteInputHint }}</mat-hint>\n </mat-form-field>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n</mat-timepicker-content-layout>\n", styles: [".mat-time-inputs{display:block}.mat-time-inputs .mat-timepicker-content-layout-separator{margin-top:-1.5rem}.mat-time-inputs-field{display:block}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-flex{margin:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{top:0;margin:0;background-color:var(--mat-timepicker-time-inputs-field-background-color, var(--mat-sys-surface-container-highest))}.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__leading,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__notch,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__trailing{border-style:none}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{margin-top:.75rem;line-height:1;letter-spacing:.05rem}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding-left:0}.mat-time-inputs-field.mat-form-field-appearance-outline input.mat-mdc-input-element{font-size:var(--mat-timepicker-time-inputs-field-font-size, 2rem);line-height:var(--mat-timepicker-time-inputs-field-line-height, 1.25)}.mat-time-inputs-field .mat-mdc-form-field-bottom-align:before{height:0}.mat-time-inputs-field .mat-mdc-form-field-infix{border-top:none;text-align:center}.mat-time-inputs-field input.mat-mdc-input-element{margin-top:0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title", "orientation"], exportAs: ["matTimepickerContent"] }, { kind: "directive", type: MatHourInput, selector: "input[matHourInput]", inputs: ["availableHours", "isMeridiem"], exportAs: ["matTimeInput"] }, { kind: "directive", type: MatMinuteInput, selector: "input[matMinuteInput]", inputs: ["interval", "availableMinutes"], exportAs: ["matTimeInput"] }, { kind: "component", type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1520
1490
|
}
|
|
1521
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeInputs, decorators: [{
|
|
1522
1492
|
type: Component,
|
|
1523
1493
|
args: [{ selector: 'mat-time-inputs', standalone: true, imports: [
|
|
1524
|
-
CommonModule,
|
|
1525
1494
|
MatFormFieldModule,
|
|
1526
1495
|
MatInputModule,
|
|
1527
1496
|
MatTimepickerContentLayout,
|
|
@@ -1530,7 +1499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1530
1499
|
MatTimePeriod,
|
|
1531
1500
|
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1532
1501
|
class: 'mat-time-inputs',
|
|
1533
|
-
}, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n hours\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matHourInput\n [isMeridiem]=\"isMeridiem\"\n [value]=\"selectedHour\"\n [availableHours]=\"_getAvailableHours()\"\n (timeChanged)=\"_onHourSelected($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n />\n <mat-hint>{{ _intl.hourInputHint }}</mat-hint>\n </mat-form-field>\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n minutes\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matMinuteInput\n [value]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n (timeChanged)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n />\n <mat-hint>{{ _intl.minuteInputHint }}</mat-hint>\n </mat-form-field>\n\n <ng-
|
|
1502
|
+
}, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n hours\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matHourInput\n [isMeridiem]=\"isMeridiem\"\n [value]=\"selectedHour\"\n [availableHours]=\"_getAvailableHours()\"\n (timeChanged)=\"_onHourSelected($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n />\n <mat-hint>{{ _intl.hourInputHint }}</mat-hint>\n </mat-form-field>\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n minutes\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matMinuteInput\n [value]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n (timeChanged)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n />\n <mat-hint>{{ _intl.minuteInputHint }}</mat-hint>\n </mat-form-field>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n</mat-timepicker-content-layout>\n", styles: [".mat-time-inputs{display:block}.mat-time-inputs .mat-timepicker-content-layout-separator{margin-top:-1.5rem}.mat-time-inputs-field{display:block}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-flex{margin:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{top:0;margin:0;background-color:var(--mat-timepicker-time-inputs-field-background-color, var(--mat-sys-surface-container-highest))}.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__leading,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__notch,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__trailing{border-style:none}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{margin-top:.75rem;line-height:1;letter-spacing:.05rem}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding-left:0}.mat-time-inputs-field.mat-form-field-appearance-outline input.mat-mdc-input-element{font-size:var(--mat-timepicker-time-inputs-field-font-size, 2rem);line-height:var(--mat-timepicker-time-inputs-field-line-height, 1.25)}.mat-time-inputs-field .mat-mdc-form-field-bottom-align:before{height:0}.mat-time-inputs-field .mat-mdc-form-field-infix{border-top:none;text-align:center}.mat-time-inputs-field input.mat-mdc-input-element{margin-top:0;text-align:center}\n"] }]
|
|
1534
1503
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1535
1504
|
type: Optional
|
|
1536
1505
|
}] }, { type: i0.NgZone }, { type: i0.ElementRef }] });
|
|
@@ -1559,10 +1528,10 @@ class MatTimeSelectionModel {
|
|
|
1559
1528
|
ngOnDestroy() {
|
|
1560
1529
|
this._selectionChanged.complete();
|
|
1561
1530
|
}
|
|
1562
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1563
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1531
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1532
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeSelectionModel }); }
|
|
1564
1533
|
}
|
|
1565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1534
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeSelectionModel, decorators: [{
|
|
1566
1535
|
type: Injectable
|
|
1567
1536
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1568
1537
|
/**
|
|
@@ -1585,10 +1554,10 @@ class MatSingleTimeSelectionModel extends MatTimeSelectionModel {
|
|
|
1585
1554
|
clone.updateSelection(this.selection, this);
|
|
1586
1555
|
return clone;
|
|
1587
1556
|
}
|
|
1588
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1589
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1557
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSingleTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1558
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSingleTimeSelectionModel }); }
|
|
1590
1559
|
}
|
|
1591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSingleTimeSelectionModel, decorators: [{
|
|
1592
1561
|
type: Injectable
|
|
1593
1562
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1594
1563
|
function MAT_SINGLE_TIME_SELECTION_MODEL_FACTORY(parent, adapter) {
|
|
@@ -1607,42 +1576,74 @@ const MAT_SINGLE_TIME_SELECTION_MODEL_PROVIDER = {
|
|
|
1607
1576
|
};
|
|
1608
1577
|
|
|
1609
1578
|
class MatTimepickerContent {
|
|
1610
|
-
constructor(
|
|
1579
|
+
constructor(_globalModel, _changeDetectorRef) {
|
|
1611
1580
|
this._globalModel = _globalModel;
|
|
1612
1581
|
this._changeDetectorRef = _changeDetectorRef;
|
|
1582
|
+
/** Whether the animation is disabled. */
|
|
1583
|
+
this._animationsDisabled = inject(MATERIAL_ANIMATIONS, {
|
|
1584
|
+
optional: true,
|
|
1585
|
+
})?.animationsDisabled;
|
|
1613
1586
|
/** Portal with projected action buttons. */
|
|
1614
1587
|
this._actionsPortal = null;
|
|
1615
1588
|
/** Whether there is an in-progress animation. */
|
|
1616
1589
|
this._isAnimating = false;
|
|
1617
1590
|
/** Emits when an animation has finished. */
|
|
1618
1591
|
this._animationDone = new Subject();
|
|
1619
|
-
this.
|
|
1620
|
-
this.
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1592
|
+
this._elementRef = inject(ElementRef);
|
|
1593
|
+
this._ngZone = inject(NgZone);
|
|
1594
|
+
this._handleAnimationEvent = (event) => {
|
|
1595
|
+
const element = this._elementRef.nativeElement;
|
|
1596
|
+
if (event.target !== element ||
|
|
1597
|
+
!event.animationName.startsWith('_mat-timepicker-content')) {
|
|
1598
|
+
return;
|
|
1599
|
+
}
|
|
1600
|
+
clearTimeout(this._animationFallback);
|
|
1601
|
+
this._isAnimating = event.type === 'animationstart';
|
|
1602
|
+
element.classList.toggle('mat-timepicker-content-animating', this._isAnimating);
|
|
1603
|
+
if (!this._isAnimating) {
|
|
1604
|
+
this._animationDone.next();
|
|
1605
|
+
}
|
|
1606
|
+
};
|
|
1607
|
+
this._closeButtonText = inject(MatTimepickerIntl).closeTimepickerLabel;
|
|
1608
|
+
if (!this._animationsDisabled) {
|
|
1609
|
+
const element = this._elementRef.nativeElement;
|
|
1610
|
+
const renderer = inject(Renderer2);
|
|
1611
|
+
this._eventCleanups = this._ngZone.runOutsideAngular(() => [
|
|
1612
|
+
renderer.listen(element, 'animationstart', this._handleAnimationEvent),
|
|
1613
|
+
renderer.listen(element, 'animationend', this._handleAnimationEvent),
|
|
1614
|
+
renderer.listen(element, 'animationcancel', this._handleAnimationEvent),
|
|
1615
|
+
]);
|
|
1616
|
+
}
|
|
1625
1617
|
}
|
|
1626
1618
|
ngAfterViewInit() {
|
|
1627
|
-
this.
|
|
1619
|
+
this._stateChanges = this.timepicker.stateChanges.subscribe(() => {
|
|
1628
1620
|
this._changeDetectorRef.markForCheck();
|
|
1629
|
-
})
|
|
1621
|
+
});
|
|
1630
1622
|
(this._dials || this._inputs)?.focusActiveCell();
|
|
1631
1623
|
}
|
|
1632
1624
|
ngOnDestroy() {
|
|
1633
|
-
this.
|
|
1625
|
+
clearTimeout(this._animationFallback);
|
|
1626
|
+
this._eventCleanups?.forEach((cleanup) => cleanup());
|
|
1627
|
+
this._stateChanges?.unsubscribe();
|
|
1634
1628
|
this._animationDone.complete();
|
|
1635
1629
|
}
|
|
1636
1630
|
/** Changes animation state while closing timepicker content. */
|
|
1637
1631
|
_startExitAnimation() {
|
|
1638
|
-
this.
|
|
1639
|
-
this.
|
|
1640
|
-
}
|
|
1641
|
-
_handleAnimationEvent(event) {
|
|
1642
|
-
this._isAnimating = event.phaseName === 'start';
|
|
1643
|
-
if (!this._isAnimating) {
|
|
1632
|
+
this._elementRef.nativeElement.classList.add('mat-timepicker-content-exit');
|
|
1633
|
+
if (this._animationsDisabled) {
|
|
1644
1634
|
this._animationDone.next();
|
|
1645
1635
|
}
|
|
1636
|
+
else {
|
|
1637
|
+
// Some internal apps disable animations in tests using `* {animation: none !important}`.
|
|
1638
|
+
// If that happens, the animation events won't fire and we'll never clean up the overlay.
|
|
1639
|
+
// Add a fallback that will fire if the animation doesn't run in a certain amount of time.
|
|
1640
|
+
clearTimeout(this._animationFallback);
|
|
1641
|
+
this._animationFallback = setTimeout(() => {
|
|
1642
|
+
if (!this._isAnimating) {
|
|
1643
|
+
this._animationDone.next();
|
|
1644
|
+
}
|
|
1645
|
+
}, 200);
|
|
1646
|
+
}
|
|
1646
1647
|
}
|
|
1647
1648
|
onToggleMode(mode) {
|
|
1648
1649
|
this.mode = mode;
|
|
@@ -1677,16 +1678,12 @@ class MatTimepickerContent {
|
|
|
1677
1678
|
const value = event;
|
|
1678
1679
|
this._model.add(value);
|
|
1679
1680
|
}
|
|
1680
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1682
|
-
matTimepickerAnimations.transformPanel,
|
|
1683
|
-
matTimepickerAnimations.fadeInTimepicker,
|
|
1684
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1681
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerContent, deps: [{ token: MatTimeSelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1682
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatTimepickerContent, isStandalone: true, selector: "mat-timepicker-content", host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mat-timepicker-content-touch": "timepicker.touchUi", "class.mat-timepicker-content-animations-enabled": "!_animationsDisabled" }, classAttribute: "mat-timepicker-content" }, viewQueries: [{ propertyName: "_dials", first: true, predicate: MatClockDials, descendants: true }, { propertyName: "_inputs", first: true, predicate: MatTimeInputs, descendants: true }], exportAs: ["matTimepickerContent"], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n class=\"mat-timepicker-content-container\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n>\n @switch (mode) {\n @case ('input') {\n <mat-time-inputs\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-time-inputs>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('dial')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"m15.175 16.625 1.475-1.45-3.6-3.6V7.1h-2.075v5.3ZM12 21.95q-2.075 0-3.887-.787-1.813-.788-3.15-2.125-1.338-1.338-2.125-3.151Q2.05 14.075 2.05 12t.788-3.887q.787-1.813 2.125-3.15Q6.3 3.625 8.113 2.837 9.925 2.05 12 2.05t3.887.787q1.813.788 3.151 2.126 1.337 1.337 2.125 3.15.787 1.812.787 3.887t-.787 3.887q-.788 1.813-2.125 3.151-1.338 1.337-3.151 2.125-1.812.787-3.887.787ZM12 12Zm0 7.8q3.225 0 5.513-2.275Q19.8 15.25 19.8 12q0-3.25-2.287-5.525Q15.225 4.2 12 4.2T6.488 6.475Q4.2 8.75 4.2 12q0 3.25 2.288 5.525Q8.775 19.8 12 19.8Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n\n @case ('dial') {\n <mat-clock-dials\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n [orientation]=\"orientation\"\n [touchUi]=\"timepicker.touchUi\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-clock-dials>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('input')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M4 19q-.825 0-1.412-.587Q2 17.825 2 17V7q0-.825.588-1.412Q3.175 5 4 5h16q.825 0 1.413.588Q22 6.175 22 7v10q0 .825-.587 1.413Q20.825 19 20 19Zm0-2h16V7H4v10Zm4-1h8v-2H8Zm-3-3h2v-2H5Zm3 0h2v-2H8Zm3 0h2v-2h-2Zm3 0h2v-2h-2Zm3 0h2v-2h-2ZM5 10h2V8H5Zm3 0h2V8H8Zm3 0h2V8h-2Zm3 0h2V8h-2Zm3 0h2V8h-2ZM4 17V7v10Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n }\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n class=\"mat-timepicker-close-button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"timepicker.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: [".mat-timepicker-content{color:var(--mat-timepicker-content-text-color, var(--mat-sys-on-surface));background-color:var(--mat-timepicker-content-background-color, var(--mat-sys-surface-container-high));border-radius:var(--mat-timepicker-content-border-radius, var(--mat-sys-corner-large))}.mat-timepicker-content.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-touch.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-container{position:relative;display:flex;flex-direction:column;padding:1rem 1.5rem}.mat-timepicker-content-actions{display:flex;justify-content:space-between;margin-right:-1rem;margin-top:1.5rem}.mat-time-toggle-mode-button{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-left:-.75rem;margin-bottom:-.25rem}.mat-time-toggle-mode-button svg{fill:var(--mat-timepicker-toggle-mode-button-color, var(--mat-sys-on-surface-variant))}button.mat-timepicker-close-button{position:absolute;top:100%;left:0;margin-top:.5rem}.mat-timepicker-content-animating button.mat-timepicker-close-button{display:none}.mat-timepicker-content-exit.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-exit .1s linear}@keyframes _mat-timepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-exit{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatTimeInputs, selector: "mat-time-inputs" }, { kind: "component", type: MatClockDials, selector: "mat-clock-dials", inputs: ["orientation", "touchUi"], exportAs: ["matClockDials"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1685
1683
|
}
|
|
1686
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerContent, decorators: [{
|
|
1687
1685
|
type: Component,
|
|
1688
1686
|
args: [{ selector: 'mat-timepicker-content', standalone: true, imports: [
|
|
1689
|
-
CommonModule,
|
|
1690
1687
|
PortalModule,
|
|
1691
1688
|
A11yModule,
|
|
1692
1689
|
MatTimeInputs,
|
|
@@ -1695,15 +1692,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1695
1692
|
], exportAs: 'matTimepickerContent', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1696
1693
|
class: 'mat-timepicker-content',
|
|
1697
1694
|
'[class]': 'color ? "mat-" + color : ""',
|
|
1698
|
-
'[@transformPanel]': '_animationState',
|
|
1699
|
-
'(@transformPanel.start)': '_handleAnimationEvent($event)',
|
|
1700
|
-
'(@transformPanel.done)': '_handleAnimationEvent($event)',
|
|
1701
1695
|
'[class.mat-timepicker-content-touch]': 'timepicker.touchUi',
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
], template: "<div\n cdkTrapFocus\n role=\"dialog\"\n class=\"mat-timepicker-content-container\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n>\n @switch (mode) {\n @case ('input') {\n <mat-time-inputs\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-time-inputs>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('dial')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"m15.175 16.625 1.475-1.45-3.6-3.6V7.1h-2.075v5.3ZM12 21.95q-2.075 0-3.887-.787-1.813-.788-3.15-2.125-1.338-1.338-2.125-3.151Q2.05 14.075 2.05 12t.788-3.887q.787-1.813 2.125-3.15Q6.3 3.625 8.113 2.837 9.925 2.05 12 2.05t3.887.787q1.813.788 3.151 2.126 1.337 1.337 2.125 3.15.787 1.812.787 3.887t-.787 3.887q-.788 1.813-2.125 3.151-1.338 1.337-3.151 2.125-1.812.787-3.887.787ZM12 12Zm0 7.8q3.225 0 5.513-2.275Q19.8 15.25 19.8 12q0-3.25-2.287-5.525Q15.225 4.2 12 4.2T6.488 6.475Q4.2 8.75 4.2 12q0 3.25 2.288 5.525Q8.775 19.8 12 19.8Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n\n @case ('dial') {\n <mat-clock-dials\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n [orientation]=\"orientation\"\n [touchUi]=\"timepicker.touchUi\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-clock-dials>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('input')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M4 19q-.825 0-1.412-.587Q2 17.825 2 17V7q0-.825.588-1.412Q3.175 5 4 5h16q.825 0 1.413.588Q22 6.175 22 7v10q0 .825-.587 1.413Q20.825 19 20 19Zm0-2h16V7H4v10Zm4-1h8v-2H8Zm-3-3h2v-2H5Zm3 0h2v-2H8Zm3 0h2v-2h-2Zm3 0h2v-2h-2Zm3 0h2v-2h-2ZM5 10h2V8H5Zm3 0h2V8H8Zm3 0h2V8h-2Zm3 0h2V8h-2Zm3 0h2V8h-2ZM4 17V7v10Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n }\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n class=\"mat-timepicker-close-button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"timepicker.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: [".mat-timepicker-content{color:var(--mat-timepicker-content-text-color, var(--mat-sys-on-surface));background-color:var(--mat-timepicker-content-background-color, var(--mat-sys-surface-container-high));border-radius:var(--mat-timepicker-content-border-radius, var(--mat-sys-corner-large))}.mat-timepicker-content-container{position:relative;display:flex;flex-direction:column;padding:1rem 1.5rem}.mat-timepicker-content-actions{display:flex;justify-content:space-between;margin-right:-1rem;margin-top:1.5rem}.mat-time-toggle-mode-button{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-left:-.75rem;margin-bottom:-.25rem}.mat-time-toggle-mode-button svg{fill:var(--mat-timepicker-toggle-mode-button-color, var(--mat-sys-on-surface-variant))}button.mat-timepicker-close-button{position:absolute;top:100%;left:0;margin-top:.5rem}.ng-animating button.mat-timepicker-close-button{display:none}\n"] }]
|
|
1706
|
-
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: MatTimeSelectionModel }, { type: i0.ChangeDetectorRef }], propDecorators: { _dials: [{
|
|
1696
|
+
'[class.mat-timepicker-content-animations-enabled]': '!_animationsDisabled',
|
|
1697
|
+
}, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n class=\"mat-timepicker-content-container\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n>\n @switch (mode) {\n @case ('input') {\n <mat-time-inputs\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-time-inputs>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('dial')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"m15.175 16.625 1.475-1.45-3.6-3.6V7.1h-2.075v5.3ZM12 21.95q-2.075 0-3.887-.787-1.813-.788-3.15-2.125-1.338-1.338-2.125-3.151Q2.05 14.075 2.05 12t.788-3.887q.787-1.813 2.125-3.15Q6.3 3.625 8.113 2.837 9.925 2.05 12 2.05t3.887.787q1.813.788 3.151 2.126 1.337 1.337 2.125 3.15.787 1.812.787 3.887t-.787 3.887q-.788 1.813-2.125 3.151-1.338 1.337-3.151 2.125-1.812.787-3.887.787ZM12 12Zm0 7.8q3.225 0 5.513-2.275Q19.8 15.25 19.8 12q0-3.25-2.287-5.525Q15.225 4.2 12 4.2T6.488 6.475Q4.2 8.75 4.2 12q0 3.25 2.288 5.525Q8.775 19.8 12 19.8Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n\n @case ('dial') {\n <mat-clock-dials\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n [orientation]=\"orientation\"\n [touchUi]=\"timepicker.touchUi\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-clock-dials>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('input')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M4 19q-.825 0-1.412-.587Q2 17.825 2 17V7q0-.825.588-1.412Q3.175 5 4 5h16q.825 0 1.413.588Q22 6.175 22 7v10q0 .825-.587 1.413Q20.825 19 20 19Zm0-2h16V7H4v10Zm4-1h8v-2H8Zm-3-3h2v-2H5Zm3 0h2v-2H8Zm3 0h2v-2h-2Zm3 0h2v-2h-2Zm3 0h2v-2h-2ZM5 10h2V8H5Zm3 0h2V8H8Zm3 0h2V8h-2Zm3 0h2V8h-2Zm3 0h2V8h-2ZM4 17V7v10Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n }\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n class=\"mat-timepicker-close-button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"timepicker.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: [".mat-timepicker-content{color:var(--mat-timepicker-content-text-color, var(--mat-sys-on-surface));background-color:var(--mat-timepicker-content-background-color, var(--mat-sys-surface-container-high));border-radius:var(--mat-timepicker-content-border-radius, var(--mat-sys-corner-large))}.mat-timepicker-content.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-touch.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-container{position:relative;display:flex;flex-direction:column;padding:1rem 1.5rem}.mat-timepicker-content-actions{display:flex;justify-content:space-between;margin-right:-1rem;margin-top:1.5rem}.mat-time-toggle-mode-button{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-left:-.75rem;margin-bottom:-.25rem}.mat-time-toggle-mode-button svg{fill:var(--mat-timepicker-toggle-mode-button-color, var(--mat-sys-on-surface-variant))}button.mat-timepicker-close-button{position:absolute;top:100%;left:0;margin-top:.5rem}.mat-timepicker-content-animating button.mat-timepicker-close-button{display:none}.mat-timepicker-content-exit.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-exit .1s linear}@keyframes _mat-timepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-exit{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
1698
|
+
}], ctorParameters: () => [{ type: MatTimeSelectionModel }, { type: i0.ChangeDetectorRef }], propDecorators: { _dials: [{
|
|
1707
1699
|
type: ViewChild,
|
|
1708
1700
|
args: [MatClockDials]
|
|
1709
1701
|
}], _inputs: [{
|
|
@@ -1914,7 +1906,6 @@ class MatTimepickerBase {
|
|
|
1914
1906
|
};
|
|
1915
1907
|
if (this._componentRef) {
|
|
1916
1908
|
const { instance, location } = this._componentRef;
|
|
1917
|
-
instance._startExitAnimation();
|
|
1918
1909
|
instance._animationDone.pipe(take(1)).subscribe(() => {
|
|
1919
1910
|
const activeElement = this._document.activeElement;
|
|
1920
1911
|
// Since we restore focus after the exit animation, we have to check that
|
|
@@ -1928,12 +1919,13 @@ class MatTimepickerBase {
|
|
|
1928
1919
|
this._focusedElementBeforeOpen = null;
|
|
1929
1920
|
this._destroyOverlay();
|
|
1930
1921
|
});
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1922
|
+
instance._startExitAnimation();
|
|
1923
|
+
}
|
|
1924
|
+
if (canRestoreFocus) {
|
|
1925
|
+
setTimeout(completeClose);
|
|
1926
|
+
}
|
|
1927
|
+
else {
|
|
1928
|
+
completeClose();
|
|
1937
1929
|
}
|
|
1938
1930
|
}
|
|
1939
1931
|
/**
|
|
@@ -2105,10 +2097,10 @@ class MatTimepickerBase {
|
|
|
2105
2097
|
event.keyCode === UP_ARROW));
|
|
2106
2098
|
})));
|
|
2107
2099
|
}
|
|
2108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2109
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
2100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerBase, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i0.NgZone }, { token: MAT_TIMEPICKER_SCROLL_STRATEGY }, { token: MAT_DEFAULT_ACITONS }, { token: MatTimeSelectionModel }, { token: MAT_TIMEPICKER_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2101
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: MatTimepickerBase, isStandalone: true, inputs: { disabled: "disabled", opened: "opened", openAs: "openAs", color: "color", mode: "mode", format: "format", showToggleModeButton: "showToggleModeButton", minuteInterval: "minuteInterval", orientation: "orientation", touchUi: ["touchUi", "touchUi", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { openedStream: "opened", closedStream: "closed" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2110
2102
|
}
|
|
2111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerBase, decorators: [{
|
|
2112
2104
|
type: Directive
|
|
2113
2105
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
|
2114
2106
|
type: Inject,
|
|
@@ -2158,13 +2150,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
2158
2150
|
}] } });
|
|
2159
2151
|
|
|
2160
2152
|
class MatTimepicker extends MatTimepickerBase {
|
|
2161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepicker, isStandalone: true, selector: "mat-timepicker", host: { properties: { "class.mat-primary": "color !== \"accent\" && color !== \"warn\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"" }, classAttribute: "mat-timepicker" }, providers: [
|
|
2163
2155
|
MAT_SINGLE_TIME_SELECTION_MODEL_PROVIDER,
|
|
2164
2156
|
{ provide: MatTimepickerBase, useExisting: MatTimepicker },
|
|
2165
2157
|
], exportAs: ["matTimepicker"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2166
2158
|
}
|
|
2167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepicker, decorators: [{
|
|
2168
2160
|
type: Component,
|
|
2169
2161
|
args: [{
|
|
2170
2162
|
selector: 'mat-timepicker',
|
|
@@ -2398,10 +2390,10 @@ class MatTimepickerInputBase {
|
|
|
2398
2390
|
this._pendingValue = value;
|
|
2399
2391
|
}
|
|
2400
2392
|
}
|
|
2401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2402
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInputBase, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2394
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerInputBase, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, outputs: { timeChange: "timeChange", timeInput: "timeInput" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2403
2395
|
}
|
|
2404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInputBase, decorators: [{
|
|
2405
2397
|
type: Directive
|
|
2406
2398
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimeAdapter, decorators: [{
|
|
2407
2399
|
type: Optional
|
|
@@ -2518,14 +2510,14 @@ class MatTimepickerInput extends MatTimepickerInputBase {
|
|
|
2518
2510
|
_shouldHandleChangeEvent(event) {
|
|
2519
2511
|
return event.source !== this;
|
|
2520
2512
|
}
|
|
2521
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2522
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInput, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2514
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerInput, isStandalone: true, selector: "input[matTimepicker]", inputs: { matTimepicker: "matTimepicker", min: "min", max: "max" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()" }, properties: { "attr.aria-haspopup": "_timepicker ? \"dialog\" : null", "attr.aria-owns": "(_timepicker?.opened && _timepicker.id) || null", "attr.min": "min || null", "attr.max": "max || null", "disabled": "disabled" }, classAttribute: "mat-timepicker-input" }, providers: [
|
|
2523
2515
|
MAT_TIMEPICKER_VALUE_ACCESSOR,
|
|
2524
2516
|
MAT_TIMEPICKER_VALIDATORS,
|
|
2525
2517
|
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
|
|
2526
2518
|
], exportAs: ["matTimepickerInput"], usesInheritance: true, ngImport: i0 }); }
|
|
2527
2519
|
}
|
|
2528
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInput, decorators: [{
|
|
2529
2521
|
type: Directive,
|
|
2530
2522
|
args: [{
|
|
2531
2523
|
selector: 'input[matTimepicker]',
|
|
@@ -2550,7 +2542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
2550
2542
|
}]
|
|
2551
2543
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimeAdapter, decorators: [{
|
|
2552
2544
|
type: Optional
|
|
2553
|
-
}] }, { type:
|
|
2545
|
+
}] }, { type: i3$1.MatFormField, decorators: [{
|
|
2554
2546
|
type: Optional
|
|
2555
2547
|
}, {
|
|
2556
2548
|
type: Inject,
|
|
@@ -2572,10 +2564,10 @@ class MatTimepickerApply {
|
|
|
2572
2564
|
this._timepicker._applyPendingSelection();
|
|
2573
2565
|
this._timepicker.close();
|
|
2574
2566
|
}
|
|
2575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2576
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerApply, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2568
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerApply, isStandalone: true, selector: "[matTimepickerApply]", host: { listeners: { "click": "_applySelection()" } }, ngImport: i0 }); }
|
|
2577
2569
|
}
|
|
2578
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerApply, decorators: [{
|
|
2579
2571
|
type: Directive,
|
|
2580
2572
|
args: [{
|
|
2581
2573
|
selector: '[matTimepickerApply]',
|
|
@@ -2593,10 +2585,10 @@ class MatTimepickerCancel {
|
|
|
2593
2585
|
close() {
|
|
2594
2586
|
this._timepicker.close();
|
|
2595
2587
|
}
|
|
2596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2597
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2588
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerCancel, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2589
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerCancel, isStandalone: true, selector: "[matTimepickerCancel]", host: { listeners: { "click": "close()" } }, ngImport: i0 }); }
|
|
2598
2590
|
}
|
|
2599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerCancel, decorators: [{
|
|
2600
2592
|
type: Directive,
|
|
2601
2593
|
args: [{
|
|
2602
2594
|
selector: '[matTimepickerCancel]',
|
|
@@ -2626,8 +2618,8 @@ class MatTimepickerActions {
|
|
|
2626
2618
|
this._portal?.detach();
|
|
2627
2619
|
}
|
|
2628
2620
|
}
|
|
2629
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2621
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerActions, deps: [{ token: MatTimepickerBase }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2622
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerActions, isStandalone: true, selector: "mat-timepicker-actions", host: { classAttribute: "mat-timepicker-actions-container" }, viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
|
|
2631
2623
|
<ng-template>
|
|
2632
2624
|
<div class="mat-timepicker-actions">
|
|
2633
2625
|
<ng-content></ng-content>
|
|
@@ -2635,7 +2627,7 @@ class MatTimepickerActions {
|
|
|
2635
2627
|
</ng-template>
|
|
2636
2628
|
`, isInline: true, styles: [".mat-timepicker-actions-container{margin-left:auto}.mat-timepicker-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2637
2629
|
}
|
|
2638
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerActions, decorators: [{
|
|
2639
2631
|
type: Component,
|
|
2640
2632
|
args: [{ selector: 'mat-timepicker-actions', standalone: true, template: `
|
|
2641
2633
|
<ng-template>
|
|
@@ -2657,13 +2649,13 @@ class MatTimepickerDefaultActions {
|
|
|
2657
2649
|
constructor(_timepicker, _intl) {
|
|
2658
2650
|
this._timepicker = _timepicker;
|
|
2659
2651
|
this._intl = _intl;
|
|
2660
|
-
this.color = signal(undefined);
|
|
2652
|
+
this.color = signal(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
2661
2653
|
}
|
|
2662
2654
|
ngOnInit() {
|
|
2663
2655
|
this.color.set(this._timepicker.color);
|
|
2664
2656
|
}
|
|
2665
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2666
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2657
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerDefaultActions, deps: [{ token: MatTimepickerBase }, { token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerDefaultActions, isStandalone: true, selector: "mat-timepicker-default-actions", host: { classAttribute: "mat-timepicker-actions-container" }, ngImport: i0, template: `
|
|
2667
2659
|
<div class="mat-timepicker-actions">
|
|
2668
2660
|
<ng-content></ng-content>
|
|
2669
2661
|
<button [color]="color()" mat-button matTimepickerCancel>
|
|
@@ -2673,9 +2665,9 @@ class MatTimepickerDefaultActions {
|
|
|
2673
2665
|
{{ _intl.okButton }}
|
|
2674
2666
|
</button>
|
|
2675
2667
|
</div>
|
|
2676
|
-
`, isInline: true, styles: [".mat-timepicker-actions-container{margin-left:auto}.mat-timepicker-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button],
|
|
2668
|
+
`, isInline: true, styles: [".mat-timepicker-actions-container{margin-left:auto}.mat-timepicker-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.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: MatTimepickerApply, selector: "[matTimepickerApply]" }, { kind: "directive", type: MatTimepickerCancel, selector: "[matTimepickerCancel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2677
2669
|
}
|
|
2678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2670
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerDefaultActions, decorators: [{
|
|
2679
2671
|
type: Component,
|
|
2680
2672
|
args: [{ selector: 'mat-timepicker-default-actions', standalone: true, imports: [MatButtonModule, MatTimepickerApply, MatTimepickerCancel], template: `
|
|
2681
2673
|
<div class="mat-timepicker-actions">
|
|
@@ -2693,8 +2685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
2693
2685
|
}], ctorParameters: () => [{ type: MatTimepickerBase }, { type: MatTimepickerIntl }] });
|
|
2694
2686
|
|
|
2695
2687
|
class MatTimepickerModule {
|
|
2696
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2697
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2688
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2689
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, imports: [OverlayModule,
|
|
2698
2690
|
PortalModule,
|
|
2699
2691
|
A11yModule,
|
|
2700
2692
|
MatTimepicker,
|
|
@@ -2731,7 +2723,7 @@ class MatTimepickerModule {
|
|
|
2731
2723
|
MatTimepickerDefaultActions,
|
|
2732
2724
|
MatTimepickerApply,
|
|
2733
2725
|
MatTimepickerCancel] }); }
|
|
2734
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2726
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, providers: [
|
|
2735
2727
|
MatTimepickerIntl,
|
|
2736
2728
|
MAT_TIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
|
|
2737
2729
|
{ provide: MAT_DEFAULT_ACITONS, useValue: MatTimepickerDefaultActions },
|
|
@@ -2751,7 +2743,7 @@ class MatTimepickerModule {
|
|
|
2751
2743
|
MatTimePeriod,
|
|
2752
2744
|
MatTimepickerDefaultActions, CdkScrollableModule] }); }
|
|
2753
2745
|
}
|
|
2754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, decorators: [{
|
|
2755
2747
|
type: NgModule,
|
|
2756
2748
|
args: [{
|
|
2757
2749
|
declarations: [],
|