@dhutaryan/ngx-mat-timepicker 20.0.0 → 21.0.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.
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Injectable, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, ContentChild, EventEmitter, DOCUMENT, Inject, Output, inject, LOCALE_ID, Optional, NgModule, HostListener, SkipSelf, ViewChild,
|
|
2
|
+
import { InjectionToken, Injectable, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, ContentChild, EventEmitter, DOCUMENT, Inject, Output, inject, LOCALE_ID, Optional, NgModule, HostListener, input, booleanAttribute, output, linkedSignal, computed, effect, SkipSelf, ElementRef, NgZone, Renderer2, ViewChild, afterNextRender, forwardRef, TemplateRef, signal } 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
12
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
13
|
-
import { Subject, Subscription, of, merge, fromEvent, debounceTime, take,
|
|
13
|
+
import { Subject, Subscription, of, merge, fromEvent, debounceTime, take, filter } from 'rxjs';
|
|
14
14
|
import { PlatformModule, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
|
|
15
15
|
import { DOWN_ARROW, UP_ARROW, PAGE_UP, PAGE_DOWN, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
16
|
-
import
|
|
16
|
+
import * as i3 from '@angular/material/core';
|
|
17
|
+
import { MatRippleModule, MATERIAL_ANIMATIONS } from '@angular/material/core';
|
|
17
18
|
import * as i1 from '@angular/common';
|
|
18
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/core';
|
|
22
|
-
import { MatRippleModule } from '@angular/material/core';
|
|
23
22
|
import * as i3$1 from '@angular/material/form-field';
|
|
24
23
|
import { MatFormFieldModule, MAT_FORM_FIELD } from '@angular/material/form-field';
|
|
25
24
|
import * as i4 from '@angular/material/input';
|
|
@@ -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: "21.1.0", ngImport: i0, type: MatTimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
70
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerIntl, providedIn: 'root' }); }
|
|
72
71
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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: "21.1.0", ngImport: i0, type: MatTimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
79
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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: "21.1.0", ngImport: i0, type: MatTimepickerToggleIcon, decorators: [{
|
|
83
82
|
type: Directive,
|
|
84
83
|
args: [{ selector: '[matTimepickerToggleIcon]', standalone: true }]
|
|
85
84
|
}] });
|
|
@@ -130,10 +129,10 @@ 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: "21.1.0", 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: "21.1.0", 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: "21.1.0", ngImport: i0, type: MatTimepickerToggle, decorators: [{
|
|
137
136
|
type: Component,
|
|
138
137
|
args: [{ selector: 'mat-timepicker-toggle', standalone: true, imports: [MatButtonModule], exportAs: 'matTimepickerToggle', host: {
|
|
139
138
|
class: 'mat-timepicker-toggle',
|
|
@@ -163,27 +162,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", 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;
|
|
@@ -339,10 +317,10 @@ class MatMinutesClockDial {
|
|
|
339
317
|
_getWindow() {
|
|
340
318
|
return this._document.defaultView || window;
|
|
341
319
|
}
|
|
342
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", 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: "21.1.0", 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 }); }
|
|
344
322
|
}
|
|
345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatMinutesClockDial, decorators: [{
|
|
346
324
|
type: Component,
|
|
347
325
|
args: [{ selector: 'mat-minutes-clock-dial', standalone: true, imports: [CommonModule, MatButtonModule], exportAs: 'matMinutesClockDial', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
348
326
|
class: 'mat-clock-dial mat-clock-dial-minutes',
|
|
@@ -525,10 +503,10 @@ class MatHoursClockDial {
|
|
|
525
503
|
_getWindow() {
|
|
526
504
|
return this._document.defaultView || window;
|
|
527
505
|
}
|
|
528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", 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: "21.1.0", 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 }); }
|
|
530
508
|
}
|
|
531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatHoursClockDial, decorators: [{
|
|
532
510
|
type: Component,
|
|
533
511
|
args: [{ selector: 'mat-hours-clock-dial', standalone: true, imports: [CommonModule, MatButtonModule], exportAs: 'matHoursClockDial', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
534
512
|
class: 'mat-clock-dial mat-clock-dial-hours',
|
|
@@ -763,10 +741,10 @@ class NativeDateTimeAdapter extends TimeAdapter {
|
|
|
763
741
|
d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
|
|
764
742
|
return dtf.format(d);
|
|
765
743
|
}
|
|
766
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
767
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
744
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", 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: "21.1.0", ngImport: i0, type: NativeDateTimeAdapter }); }
|
|
768
746
|
}
|
|
769
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeAdapter, decorators: [{
|
|
770
748
|
type: Injectable
|
|
771
749
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
772
750
|
type: Optional
|
|
@@ -776,11 +754,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
776
754
|
}] }] });
|
|
777
755
|
|
|
778
756
|
class NativeDateTimeModule {
|
|
779
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
780
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
781
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
758
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] }); }
|
|
759
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, providers: [{ provide: TimeAdapter, useClass: NativeDateTimeAdapter }], imports: [PlatformModule] }); }
|
|
782
760
|
}
|
|
783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, decorators: [{
|
|
784
762
|
type: NgModule,
|
|
785
763
|
args: [{
|
|
786
764
|
imports: [PlatformModule],
|
|
@@ -788,11 +766,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
788
766
|
}]
|
|
789
767
|
}] });
|
|
790
768
|
class MatNativeDateTimeModule {
|
|
791
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
792
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
793
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
770
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule }); }
|
|
771
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule, providers: [provideNativeDateTimeAdapter()] }); }
|
|
794
772
|
}
|
|
795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule, decorators: [{
|
|
796
774
|
type: NgModule,
|
|
797
775
|
args: [{
|
|
798
776
|
providers: [provideNativeDateTimeAdapter()],
|
|
@@ -827,7 +805,6 @@ class MatTimeFaceBase {
|
|
|
827
805
|
this._setMaxHour();
|
|
828
806
|
this._setMinMinute();
|
|
829
807
|
this._setMaxMinute();
|
|
830
|
-
this._moveFocusOnNextTick = this.isMeridiem;
|
|
831
808
|
}
|
|
832
809
|
/** The minimum selectable time. */
|
|
833
810
|
get minTime() {
|
|
@@ -874,11 +851,9 @@ class MatTimeFaceBase {
|
|
|
874
851
|
this.availableMinutes = ALL_MINUTES;
|
|
875
852
|
this.availableHours = ALL_HOURS;
|
|
876
853
|
/**
|
|
877
|
-
* Used
|
|
878
|
-
* We need to schedule it, rather than do it immediately, because we have to wait
|
|
879
|
-
* for Angular to re-evaluate the view children.
|
|
854
|
+
* Used to focus the active cell after change detection has run.
|
|
880
855
|
*/
|
|
881
|
-
this.
|
|
856
|
+
this._focusActiveCellAfterViewChecked = false;
|
|
882
857
|
}
|
|
883
858
|
ngAfterContentInit() {
|
|
884
859
|
if (!this.selected) {
|
|
@@ -887,9 +862,9 @@ class MatTimeFaceBase {
|
|
|
887
862
|
}
|
|
888
863
|
}
|
|
889
864
|
ngAfterViewChecked() {
|
|
890
|
-
if (this.
|
|
891
|
-
this._moveFocusOnNextTick = false;
|
|
865
|
+
if (this._focusActiveCellAfterViewChecked) {
|
|
892
866
|
this.focusActiveCell();
|
|
867
|
+
this._focusActiveCellAfterViewChecked = false;
|
|
893
868
|
}
|
|
894
869
|
}
|
|
895
870
|
/** Handles hour selection. */
|
|
@@ -970,6 +945,7 @@ class MatTimeFaceBase {
|
|
|
970
945
|
default:
|
|
971
946
|
break;
|
|
972
947
|
}
|
|
948
|
+
this._scheduleFocusActiveCellAfterViewChecked();
|
|
973
949
|
}
|
|
974
950
|
_handleMinuteKeydown(event) {
|
|
975
951
|
const minutes = this.availableMinutes;
|
|
@@ -1086,10 +1062,14 @@ class MatTimeFaceBase {
|
|
|
1086
1062
|
}
|
|
1087
1063
|
}
|
|
1088
1064
|
}
|
|
1089
|
-
|
|
1090
|
-
|
|
1065
|
+
/** Schedules focus to be moved to the active cell on the next tick. */
|
|
1066
|
+
_scheduleFocusActiveCellAfterViewChecked() {
|
|
1067
|
+
this._focusActiveCellAfterViewChecked = true;
|
|
1068
|
+
}
|
|
1069
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeFaceBase, deps: [{ token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1070
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimeFaceBase, isStandalone: true, inputs: { selected: "selected", minTime: "minTime", maxTime: "maxTime", minuteInterval: "minuteInterval", isMeridiem: "isMeridiem", color: "color" }, outputs: { _userSelection: "_userSelection", selectedChange: "selectedChange" }, ngImport: i0 }); }
|
|
1091
1071
|
}
|
|
1092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeFaceBase, decorators: [{
|
|
1093
1073
|
type: Directive
|
|
1094
1074
|
}], ctorParameters: () => [{ type: TimeAdapter, decorators: [{
|
|
1095
1075
|
type: Optional
|
|
@@ -1187,10 +1167,10 @@ class MatTimeInputBase {
|
|
|
1187
1167
|
this.inputElement.placeholder = this._withZeroPrefix(value);
|
|
1188
1168
|
this._cdr.markForCheck();
|
|
1189
1169
|
}
|
|
1190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1191
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1170
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputBase, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1171
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimeInputBase, isStandalone: true, inputs: { value: "value" }, outputs: { timeChanged: "timeChanged" }, host: { listeners: { "keydown": "_keydown($event)" } }, ngImport: i0 }); }
|
|
1192
1172
|
}
|
|
1193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputBase, decorators: [{
|
|
1194
1174
|
type: Directive
|
|
1195
1175
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
1196
1176
|
type: Inject,
|
|
@@ -1204,25 +1184,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1204
1184
|
args: ['keydown', ['$event']]
|
|
1205
1185
|
}] } });
|
|
1206
1186
|
|
|
1207
|
-
const visible = { transform: 'scale(1)', opacity: 1, visibility: 'visible' };
|
|
1208
|
-
const hidden = { transform: 'scale(1.05)', opacity: 0, visibility: 'hidden' };
|
|
1209
|
-
const enterLeaveAnimation = trigger('enterLeaveAnimation', [
|
|
1210
|
-
transition(':enter', [
|
|
1211
|
-
style(hidden),
|
|
1212
|
-
animate('0.1s ease-out', style(visible)),
|
|
1213
|
-
]),
|
|
1214
|
-
transition(':leave', [style(visible), animate('0s ease-in', style(hidden))]),
|
|
1215
|
-
]);
|
|
1216
|
-
|
|
1217
1187
|
class MatTimepickerContentLayout {
|
|
1218
1188
|
constructor() {
|
|
1219
1189
|
/** Layout orientation. */
|
|
1220
1190
|
this.orientation = 'vertical';
|
|
1221
1191
|
}
|
|
1222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContentLayout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", 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 }); }
|
|
1224
1194
|
}
|
|
1225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContentLayout, decorators: [{
|
|
1226
1196
|
type: Component,
|
|
1227
1197
|
args: [{ selector: 'mat-timepicker-content-layout', standalone: true, exportAs: 'matTimepickerContent', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1228
1198
|
class: 'mat-timepicker-content-layout',
|
|
@@ -1236,103 +1206,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1236
1206
|
}] } });
|
|
1237
1207
|
|
|
1238
1208
|
class MatTimePeriod {
|
|
1239
|
-
/** Whether the time period is vertically aligned. */
|
|
1240
|
-
get vertical() {
|
|
1241
|
-
return this._vertical;
|
|
1242
|
-
}
|
|
1243
|
-
set vertical(value) {
|
|
1244
|
-
this._vertical = coerceBooleanProperty(value);
|
|
1245
|
-
}
|
|
1246
|
-
get period() {
|
|
1247
|
-
return this._period;
|
|
1248
|
-
}
|
|
1249
|
-
set period(value) {
|
|
1250
|
-
this._period = value || 'am';
|
|
1251
|
-
}
|
|
1252
|
-
get disabledPeriod() {
|
|
1253
|
-
return this._disabledPeriod;
|
|
1254
|
-
}
|
|
1255
|
-
set disabledPeriod(value) {
|
|
1256
|
-
this._disabledPeriod = value;
|
|
1257
|
-
}
|
|
1258
1209
|
constructor(_intl) {
|
|
1259
1210
|
this._intl = _intl;
|
|
1260
|
-
this.
|
|
1261
|
-
this.
|
|
1262
|
-
this.
|
|
1263
|
-
this.periodChanged =
|
|
1211
|
+
this.vertical = input(true, { ...(ngDevMode ? { debugName: "vertical" } : {}), transform: booleanAttribute });
|
|
1212
|
+
this.period = input('am', ...(ngDevMode ? [{ debugName: "period" }] : []));
|
|
1213
|
+
this.disabledPeriod = input(null, ...(ngDevMode ? [{ debugName: "disabledPeriod" }] : []));
|
|
1214
|
+
this.periodChanged = output();
|
|
1215
|
+
this._currentPeriod = linkedSignal(() => this.period(), ...(ngDevMode ? [{ debugName: "_currentPeriod" }] : []));
|
|
1264
1216
|
}
|
|
1265
1217
|
setPeriod(event, period) {
|
|
1266
1218
|
event.preventDefault();
|
|
1267
|
-
this.period
|
|
1219
|
+
this._currentPeriod.set(period);
|
|
1268
1220
|
this.periodChanged.emit(period);
|
|
1269
1221
|
}
|
|
1270
1222
|
_isPeriodDisabled(period) {
|
|
1271
|
-
if (!this.disabledPeriod) {
|
|
1223
|
+
if (!this.disabledPeriod()) {
|
|
1272
1224
|
return false;
|
|
1273
1225
|
}
|
|
1274
|
-
return this.disabledPeriod === period;
|
|
1226
|
+
return this.disabledPeriod() === period;
|
|
1275
1227
|
}
|
|
1276
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1228
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimePeriod, deps: [{ token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MatTimePeriod, isStandalone: true, selector: "mat-time-period", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, period: { classPropertyName: "period", publicName: "period", isSignal: true, isRequired: false, transformFunction: null }, disabledPeriod: { classPropertyName: "disabledPeriod", publicName: "disabledPeriod", isSignal: true, isRequired: false, transformFunction: null } }, 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]=\"_currentPeriod() === '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]=\"_currentPeriod() === '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))}.mat-divider{border-top-color:inherit}.mat-divider.mat-divider-vertical{border-right-color:inherit}\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 }); }
|
|
1278
1230
|
}
|
|
1279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimePeriod, decorators: [{
|
|
1280
1232
|
type: Component,
|
|
1281
1233
|
args: [{ selector: 'mat-time-period', standalone: true, imports: [MatDividerModule, MatRippleModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1282
1234
|
class: 'mat-time-period',
|
|
1283
|
-
'[class.mat-time-period-vertical]': 'vertical',
|
|
1284
|
-
'[class.mat-time-period-horizontal]': '!vertical',
|
|
1285
|
-
'[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
|
|
1286
|
-
}, template: "<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"
|
|
1287
|
-
}], ctorParameters: () => [{ type: MatTimepickerIntl }], propDecorators: { vertical: [{
|
|
1288
|
-
type: Input
|
|
1289
|
-
}], period: [{
|
|
1290
|
-
type: Input
|
|
1291
|
-
}], disabledPeriod: [{
|
|
1292
|
-
type: Input
|
|
1293
|
-
}], periodChanged: [{
|
|
1294
|
-
type: Output
|
|
1295
|
-
}] } });
|
|
1235
|
+
'[class.mat-time-period-vertical]': 'vertical()',
|
|
1236
|
+
'[class.mat-time-period-horizontal]': '!vertical()',
|
|
1237
|
+
'[attr.aria-orientation]': 'vertical() ? "vertical" : "horizontal"',
|
|
1238
|
+
}, template: "<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"_currentPeriod() === '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]=\"_currentPeriod() === '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))}.mat-divider{border-top-color:inherit}.mat-divider.mat-divider-vertical{border-right-color:inherit}\n"] }]
|
|
1239
|
+
}], ctorParameters: () => [{ type: MatTimepickerIntl }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], period: [{ type: i0.Input, args: [{ isSignal: true, alias: "period", required: false }] }], disabledPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledPeriod", required: false }] }], periodChanged: [{ type: i0.Output, args: ["periodChanged"] }] } });
|
|
1296
1240
|
|
|
1297
1241
|
class MatClockDials extends MatTimeFaceBase {
|
|
1298
|
-
constructor(_intl, _timeAdapter,
|
|
1242
|
+
constructor(_intl, _timeAdapter, _elementRef, _cdr) {
|
|
1299
1243
|
super(_timeAdapter);
|
|
1300
1244
|
this._intl = _intl;
|
|
1301
|
-
this._ngZone = _ngZone;
|
|
1302
1245
|
this._elementRef = _elementRef;
|
|
1303
1246
|
this._cdr = _cdr;
|
|
1304
|
-
|
|
1247
|
+
/** Layout orientation. */
|
|
1248
|
+
this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
1249
|
+
/** Whether the timepicker UI is in touch mode. */
|
|
1250
|
+
this.touchUi = input(false, ...(ngDevMode ? [{ debugName: "touchUi" }] : []));
|
|
1251
|
+
/** Whether the current view for the timepicker. */
|
|
1252
|
+
this.currentView = input('hours', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
|
|
1253
|
+
/** Emits when the view is changed. */
|
|
1254
|
+
this.viewChanged = output();
|
|
1255
|
+
this.isHoursView = computed(() => this._view() === 'hours', ...(ngDevMode ? [{ debugName: "isHoursView" }] : []));
|
|
1305
1256
|
/** Specifies the view of clock dial. */
|
|
1306
|
-
this._view =
|
|
1307
|
-
|
|
1308
|
-
}
|
|
1309
|
-
ngOnInit() {
|
|
1310
|
-
this._viewSubscription = this._view.subscribe((view) => (this.isHoursView = view === 'hours'));
|
|
1311
|
-
}
|
|
1312
|
-
ngOnDestroy() {
|
|
1313
|
-
this._viewSubscription?.unsubscribe();
|
|
1314
|
-
this._viewSubscription = null;
|
|
1257
|
+
this._view = linkedSignal(() => this.currentView(), ...(ngDevMode ? [{ debugName: "_view" }] : []));
|
|
1258
|
+
effect(() => this.viewChanged.emit(this._view()));
|
|
1315
1259
|
}
|
|
1316
1260
|
/** Changes clock dial view. */
|
|
1317
1261
|
onViewChange(event, view) {
|
|
1318
1262
|
event.preventDefault();
|
|
1319
|
-
this._view.
|
|
1263
|
+
this._view.set(view);
|
|
1320
1264
|
}
|
|
1321
1265
|
focusActiveCell() {
|
|
1322
|
-
this.
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
activePoint.focus();
|
|
1333
|
-
}
|
|
1334
|
-
});
|
|
1335
|
-
});
|
|
1266
|
+
const activeCell = this._elementRef.nativeElement.querySelector('.mat-timepicker-content .mat-clock-dial-cell-active');
|
|
1267
|
+
if (activeCell) {
|
|
1268
|
+
activeCell.focus();
|
|
1269
|
+
return;
|
|
1270
|
+
}
|
|
1271
|
+
const activePoint = this._elementRef.nativeElement.querySelector('.mat-timepicker-content .mat-clock-dial-hand-point');
|
|
1272
|
+
if (activePoint) {
|
|
1273
|
+
// if no active cell we need to focus a small dot
|
|
1274
|
+
activePoint.focus();
|
|
1275
|
+
}
|
|
1336
1276
|
}
|
|
1337
1277
|
_withZeroPrefix(value) {
|
|
1338
1278
|
if (value === 0) {
|
|
@@ -1347,15 +1287,15 @@ class MatClockDials extends MatTimeFaceBase {
|
|
|
1347
1287
|
/** Handles hour selection. */
|
|
1348
1288
|
_onHourChanged({ hour, changeView = false, }) {
|
|
1349
1289
|
if (changeView) {
|
|
1350
|
-
this._view.
|
|
1290
|
+
this._view.set('minutes');
|
|
1351
1291
|
}
|
|
1352
1292
|
this._onHourSelected(hour);
|
|
1353
1293
|
this._cdr.detectChanges();
|
|
1354
1294
|
}
|
|
1355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatClockDials, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MatClockDials, isStandalone: true, selector: "mat-clock-dials", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, 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 }); }
|
|
1357
1297
|
}
|
|
1358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatClockDials, decorators: [{
|
|
1359
1299
|
type: Component,
|
|
1360
1300
|
args: [{ selector: 'mat-clock-dials', standalone: true, imports: [
|
|
1361
1301
|
MatTimepickerContentLayout,
|
|
@@ -1365,14 +1305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1365
1305
|
], exportAs: 'matClockDials', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1366
1306
|
role: 'dial',
|
|
1367
1307
|
class: 'mat-clock-dials',
|
|
1368
|
-
},
|
|
1308
|
+
}, 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"] }]
|
|
1369
1309
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1370
1310
|
type: Optional
|
|
1371
|
-
}] }, { type: i0.
|
|
1372
|
-
type: Input
|
|
1373
|
-
}], touchUi: [{
|
|
1374
|
-
type: Input
|
|
1375
|
-
}] } });
|
|
1311
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], currentView: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentView", required: false }] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }] } });
|
|
1376
1312
|
|
|
1377
1313
|
class MatHourInput extends MatTimeInputBase {
|
|
1378
1314
|
get availableHours() {
|
|
@@ -1419,10 +1355,10 @@ class MatHourInput extends MatTimeInputBase {
|
|
|
1419
1355
|
}
|
|
1420
1356
|
return Math.min(Math.max(value, Math.min(...this.availableHours)), Math.max(...this.availableHours));
|
|
1421
1357
|
}
|
|
1422
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1423
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatHourInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1359
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatHourInput, isStandalone: true, selector: "input[matHourInput]", inputs: { availableHours: "availableHours", isMeridiem: "isMeridiem" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1424
1360
|
}
|
|
1425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatHourInput, decorators: [{
|
|
1426
1362
|
type: Directive,
|
|
1427
1363
|
args: [{
|
|
1428
1364
|
selector: 'input[matHourInput]',
|
|
@@ -1430,8 +1366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1430
1366
|
exportAs: 'matTimeInput',
|
|
1431
1367
|
host: {
|
|
1432
1368
|
class: 'mat-time-input',
|
|
1433
|
-
'(focus)': 'focus(
|
|
1434
|
-
'(blur)': 'blur(
|
|
1369
|
+
'(focus)': 'focus()',
|
|
1370
|
+
'(blur)': 'blur()',
|
|
1435
1371
|
},
|
|
1436
1372
|
}]
|
|
1437
1373
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
@@ -1471,10 +1407,10 @@ class MatMinuteInput extends MatTimeInputBase {
|
|
|
1471
1407
|
const roundedValue = Math.round(value / this.interval) * this.interval;
|
|
1472
1408
|
return Math.min(Math.max(roundedValue, Math.min(...this.availableMinutes)), Math.max(...this.availableMinutes));
|
|
1473
1409
|
}
|
|
1474
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1475
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1410
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatMinuteInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1411
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatMinuteInput, isStandalone: true, selector: "input[matMinuteInput]", inputs: { interval: "interval", availableMinutes: "availableMinutes" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1476
1412
|
}
|
|
1477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatMinuteInput, decorators: [{
|
|
1478
1414
|
type: Directive,
|
|
1479
1415
|
args: [{
|
|
1480
1416
|
selector: 'input[matMinuteInput]',
|
|
@@ -1482,8 +1418,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1482
1418
|
exportAs: 'matTimeInput',
|
|
1483
1419
|
host: {
|
|
1484
1420
|
class: 'mat-time-input',
|
|
1485
|
-
'(focus)': 'focus(
|
|
1486
|
-
'(blur)': 'blur(
|
|
1421
|
+
'(focus)': 'focus()',
|
|
1422
|
+
'(blur)': 'blur()',
|
|
1487
1423
|
},
|
|
1488
1424
|
}]
|
|
1489
1425
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
@@ -1495,10 +1431,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1495
1431
|
type: Input
|
|
1496
1432
|
}] } });
|
|
1497
1433
|
class MatTimeInputs extends MatTimeFaceBase {
|
|
1498
|
-
constructor(_intl, _timeAdapter,
|
|
1434
|
+
constructor(_intl, _timeAdapter, _elementRef) {
|
|
1499
1435
|
super(_timeAdapter);
|
|
1500
1436
|
this._intl = _intl;
|
|
1501
|
-
this._ngZone = _ngZone;
|
|
1502
1437
|
this._elementRef = _elementRef;
|
|
1503
1438
|
/**
|
|
1504
1439
|
* Using for skipping that focus shouldn't be moved to the active cell on the next tick.
|
|
@@ -1507,20 +1442,16 @@ class MatTimeInputs extends MatTimeFaceBase {
|
|
|
1507
1442
|
this._skipNextTickFocus = false;
|
|
1508
1443
|
}
|
|
1509
1444
|
focusActiveCell() {
|
|
1510
|
-
this.
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
this._skipNextTickFocus = true;
|
|
1516
|
-
}
|
|
1517
|
-
});
|
|
1518
|
-
});
|
|
1445
|
+
const activeCell = this._elementRef.nativeElement.querySelector('.mat-timepicker-content input');
|
|
1446
|
+
if (activeCell && !this._skipNextTickFocus) {
|
|
1447
|
+
activeCell.focus();
|
|
1448
|
+
this._skipNextTickFocus = true;
|
|
1449
|
+
}
|
|
1519
1450
|
}
|
|
1520
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1451
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputs, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
1522
1453
|
}
|
|
1523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1454
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputs, decorators: [{
|
|
1524
1455
|
type: Component,
|
|
1525
1456
|
args: [{ selector: 'mat-time-inputs', standalone: true, imports: [
|
|
1526
1457
|
MatFormFieldModule,
|
|
@@ -1534,7 +1465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1534
1465
|
}, 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"] }]
|
|
1535
1466
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1536
1467
|
type: Optional
|
|
1537
|
-
}] }, { type: i0.
|
|
1468
|
+
}] }, { type: i0.ElementRef }] });
|
|
1538
1469
|
|
|
1539
1470
|
/**
|
|
1540
1471
|
* A selection model containing a time selection.
|
|
@@ -1560,10 +1491,10 @@ class MatTimeSelectionModel {
|
|
|
1560
1491
|
ngOnDestroy() {
|
|
1561
1492
|
this._selectionChanged.complete();
|
|
1562
1493
|
}
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1564
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1495
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeSelectionModel }); }
|
|
1565
1496
|
}
|
|
1566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeSelectionModel, decorators: [{
|
|
1567
1498
|
type: Injectable
|
|
1568
1499
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1569
1500
|
/**
|
|
@@ -1586,10 +1517,10 @@ class MatSingleTimeSelectionModel extends MatTimeSelectionModel {
|
|
|
1586
1517
|
clone.updateSelection(this.selection, this);
|
|
1587
1518
|
return clone;
|
|
1588
1519
|
}
|
|
1589
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1590
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSingleTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1521
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSingleTimeSelectionModel }); }
|
|
1591
1522
|
}
|
|
1592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSingleTimeSelectionModel, decorators: [{
|
|
1593
1524
|
type: Injectable
|
|
1594
1525
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1595
1526
|
function MAT_SINGLE_TIME_SELECTION_MODEL_FACTORY(parent, adapter) {
|
|
@@ -1608,42 +1539,80 @@ const MAT_SINGLE_TIME_SELECTION_MODEL_PROVIDER = {
|
|
|
1608
1539
|
};
|
|
1609
1540
|
|
|
1610
1541
|
class MatTimepickerContent {
|
|
1611
|
-
constructor(
|
|
1542
|
+
constructor(_globalModel, _changeDetectorRef) {
|
|
1612
1543
|
this._globalModel = _globalModel;
|
|
1613
1544
|
this._changeDetectorRef = _changeDetectorRef;
|
|
1545
|
+
/** Whether the animation is disabled. */
|
|
1546
|
+
this._animationsDisabled = inject(MATERIAL_ANIMATIONS, {
|
|
1547
|
+
optional: true,
|
|
1548
|
+
})?.animationsDisabled;
|
|
1614
1549
|
/** Portal with projected action buttons. */
|
|
1615
1550
|
this._actionsPortal = null;
|
|
1616
1551
|
/** Whether there is an in-progress animation. */
|
|
1617
1552
|
this._isAnimating = false;
|
|
1618
1553
|
/** Emits when an animation has finished. */
|
|
1619
1554
|
this._animationDone = new Subject();
|
|
1620
|
-
this.
|
|
1621
|
-
this.
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1555
|
+
this._elementRef = inject(ElementRef);
|
|
1556
|
+
this._ngZone = inject(NgZone);
|
|
1557
|
+
this._handleAnimationEvent = (event) => {
|
|
1558
|
+
const element = this._elementRef.nativeElement;
|
|
1559
|
+
if (event.target !== element ||
|
|
1560
|
+
!event.animationName.startsWith('_mat-timepicker-content')) {
|
|
1561
|
+
return;
|
|
1562
|
+
}
|
|
1563
|
+
clearTimeout(this._animationFallback);
|
|
1564
|
+
this._isAnimating = event.type === 'animationstart';
|
|
1565
|
+
element.classList.toggle('mat-timepicker-content-animating', this._isAnimating);
|
|
1566
|
+
if (!this._isAnimating) {
|
|
1567
|
+
this._animationDone.next();
|
|
1568
|
+
}
|
|
1569
|
+
};
|
|
1570
|
+
this._closeButtonText = inject(MatTimepickerIntl).closeTimepickerLabel;
|
|
1571
|
+
if (!this._animationsDisabled) {
|
|
1572
|
+
const element = this._elementRef.nativeElement;
|
|
1573
|
+
const renderer = inject(Renderer2);
|
|
1574
|
+
this._eventCleanups = this._ngZone.runOutsideAngular(() => [
|
|
1575
|
+
renderer.listen(element, 'animationstart', this._handleAnimationEvent),
|
|
1576
|
+
renderer.listen(element, 'animationend', this._handleAnimationEvent),
|
|
1577
|
+
renderer.listen(element, 'animationcancel', this._handleAnimationEvent),
|
|
1578
|
+
]);
|
|
1579
|
+
}
|
|
1626
1580
|
}
|
|
1627
1581
|
ngAfterViewInit() {
|
|
1628
|
-
this.
|
|
1582
|
+
this._stateChanges = this.timepicker.stateChanges.subscribe(() => {
|
|
1629
1583
|
this._changeDetectorRef.markForCheck();
|
|
1630
|
-
})
|
|
1631
|
-
(this.
|
|
1584
|
+
});
|
|
1585
|
+
if (this._animationsDisabled) {
|
|
1586
|
+
(this._dials || this._inputs)?.focusActiveCell();
|
|
1587
|
+
return;
|
|
1588
|
+
}
|
|
1589
|
+
this._animationDone.pipe(take(1)).subscribe(() => {
|
|
1590
|
+
(this._dials || this._inputs)?.focusActiveCell();
|
|
1591
|
+
});
|
|
1632
1592
|
}
|
|
1633
1593
|
ngOnDestroy() {
|
|
1634
|
-
this.
|
|
1594
|
+
clearTimeout(this._animationFallback);
|
|
1595
|
+
this._eventCleanups?.forEach((cleanup) => cleanup());
|
|
1596
|
+
this._stateChanges?.unsubscribe();
|
|
1635
1597
|
this._animationDone.complete();
|
|
1636
1598
|
}
|
|
1637
1599
|
/** Changes animation state while closing timepicker content. */
|
|
1638
1600
|
_startExitAnimation() {
|
|
1639
|
-
this.
|
|
1640
|
-
this.
|
|
1641
|
-
}
|
|
1642
|
-
_handleAnimationEvent(event) {
|
|
1643
|
-
this._isAnimating = event.phaseName === 'start';
|
|
1644
|
-
if (!this._isAnimating) {
|
|
1601
|
+
this._elementRef.nativeElement.classList.add('mat-timepicker-content-exit');
|
|
1602
|
+
if (this._animationsDisabled) {
|
|
1645
1603
|
this._animationDone.next();
|
|
1646
1604
|
}
|
|
1605
|
+
else {
|
|
1606
|
+
// Some internal apps disable animations in tests using `* {animation: none !important}`.
|
|
1607
|
+
// If that happens, the animation events won't fire and we'll never clean up the overlay.
|
|
1608
|
+
// Add a fallback that will fire if the animation doesn't run in a certain amount of time.
|
|
1609
|
+
clearTimeout(this._animationFallback);
|
|
1610
|
+
this._animationFallback = setTimeout(() => {
|
|
1611
|
+
if (!this._isAnimating) {
|
|
1612
|
+
this._animationDone.next();
|
|
1613
|
+
}
|
|
1614
|
+
}, 200);
|
|
1615
|
+
}
|
|
1647
1616
|
}
|
|
1648
1617
|
onToggleMode(mode) {
|
|
1649
1618
|
this.mode = mode;
|
|
@@ -1678,13 +1647,10 @@ class MatTimepickerContent {
|
|
|
1678
1647
|
const value = event;
|
|
1679
1648
|
this._model.add(value);
|
|
1680
1649
|
}
|
|
1681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1683
|
-
matTimepickerAnimations.transformPanel,
|
|
1684
|
-
matTimepickerAnimations.fadeInTimepicker,
|
|
1685
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1650
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContent, deps: [{ token: MatTimeSelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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", "currentView"], outputs: ["viewChanged"], 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 }); }
|
|
1686
1652
|
}
|
|
1687
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContent, decorators: [{
|
|
1688
1654
|
type: Component,
|
|
1689
1655
|
args: [{ selector: 'mat-timepicker-content', standalone: true, imports: [
|
|
1690
1656
|
PortalModule,
|
|
@@ -1695,15 +1661,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1695
1661
|
], exportAs: 'matTimepickerContent', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1696
1662
|
class: 'mat-timepicker-content',
|
|
1697
1663
|
'[class]': 'color ? "mat-" + color : ""',
|
|
1698
|
-
'[@transformPanel]': '_animationState',
|
|
1699
|
-
'(@transformPanel.start)': '_handleAnimationEvent($event)',
|
|
1700
|
-
'(@transformPanel.done)': '_handleAnimationEvent($event)',
|
|
1701
1664
|
'[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: [{
|
|
1665
|
+
'[class.mat-timepicker-content-animations-enabled]': '!_animationsDisabled',
|
|
1666
|
+
}, 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"] }]
|
|
1667
|
+
}], ctorParameters: () => [{ type: MatTimeSelectionModel }, { type: i0.ChangeDetectorRef }], propDecorators: { _dials: [{
|
|
1707
1668
|
type: ViewChild,
|
|
1708
1669
|
args: [MatClockDials]
|
|
1709
1670
|
}], _inputs: [{
|
|
@@ -1820,10 +1781,10 @@ class MatTimepickerBase {
|
|
|
1820
1781
|
_getMaxTime() {
|
|
1821
1782
|
return this.timepickerInput && this.timepickerInput.max;
|
|
1822
1783
|
}
|
|
1823
|
-
constructor(_viewContainerRef, _overlay,
|
|
1784
|
+
constructor(_viewContainerRef, _overlay, _injector, scrollStrategy, _defaultActionsComponent, _model, _defaults) {
|
|
1824
1785
|
this._viewContainerRef = _viewContainerRef;
|
|
1825
1786
|
this._overlay = _overlay;
|
|
1826
|
-
this.
|
|
1787
|
+
this._injector = _injector;
|
|
1827
1788
|
this._defaultActionsComponent = _defaultActionsComponent;
|
|
1828
1789
|
this._model = _model;
|
|
1829
1790
|
this._defaults = _defaults;
|
|
@@ -1914,7 +1875,6 @@ class MatTimepickerBase {
|
|
|
1914
1875
|
};
|
|
1915
1876
|
if (this._componentRef) {
|
|
1916
1877
|
const { instance, location } = this._componentRef;
|
|
1917
|
-
instance._startExitAnimation();
|
|
1918
1878
|
instance._animationDone.pipe(take(1)).subscribe(() => {
|
|
1919
1879
|
const activeElement = this._document.activeElement;
|
|
1920
1880
|
// Since we restore focus after the exit animation, we have to check that
|
|
@@ -1928,12 +1888,13 @@ class MatTimepickerBase {
|
|
|
1928
1888
|
this._focusedElementBeforeOpen = null;
|
|
1929
1889
|
this._destroyOverlay();
|
|
1930
1890
|
});
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1891
|
+
instance._startExitAnimation();
|
|
1892
|
+
}
|
|
1893
|
+
if (canRestoreFocus) {
|
|
1894
|
+
setTimeout(completeClose);
|
|
1895
|
+
}
|
|
1896
|
+
else {
|
|
1897
|
+
completeClose();
|
|
1937
1898
|
}
|
|
1938
1899
|
}
|
|
1939
1900
|
/**
|
|
@@ -2031,9 +1992,9 @@ class MatTimepickerBase {
|
|
|
2031
1992
|
this._forwardContentValues(this._componentRef.instance);
|
|
2032
1993
|
// Update the position once the timepicker has rendered. Only relevant in dropdown mode.
|
|
2033
1994
|
if (!isDialog) {
|
|
2034
|
-
|
|
2035
|
-
.
|
|
2036
|
-
|
|
1995
|
+
afterNextRender(() => {
|
|
1996
|
+
overlayRef.updatePosition();
|
|
1997
|
+
}, { injector: this._injector });
|
|
2037
1998
|
}
|
|
2038
1999
|
}
|
|
2039
2000
|
/** Destroys the current overlay. */
|
|
@@ -2105,12 +2066,12 @@ class MatTimepickerBase {
|
|
|
2105
2066
|
event.keyCode === UP_ARROW));
|
|
2106
2067
|
})));
|
|
2107
2068
|
}
|
|
2108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2109
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
2069
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerBase, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i0.Injector }, { token: MAT_TIMEPICKER_SCROLL_STRATEGY }, { token: MAT_DEFAULT_ACITONS }, { token: MatTimeSelectionModel }, { token: MAT_TIMEPICKER_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2070
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", 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
2071
|
}
|
|
2111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerBase, decorators: [{
|
|
2112
2073
|
type: Directive
|
|
2113
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.
|
|
2074
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
|
|
2114
2075
|
type: Inject,
|
|
2115
2076
|
args: [MAT_TIMEPICKER_SCROLL_STRATEGY]
|
|
2116
2077
|
}] }, { type: undefined, decorators: [{
|
|
@@ -2158,13 +2119,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2158
2119
|
}] } });
|
|
2159
2120
|
|
|
2160
2121
|
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: "
|
|
2122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", 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
2124
|
MAT_SINGLE_TIME_SELECTION_MODEL_PROVIDER,
|
|
2164
2125
|
{ provide: MatTimepickerBase, useExisting: MatTimepicker },
|
|
2165
2126
|
], exportAs: ["matTimepicker"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2166
2127
|
}
|
|
2167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepicker, decorators: [{
|
|
2168
2129
|
type: Component,
|
|
2169
2130
|
args: [{
|
|
2170
2131
|
selector: 'mat-timepicker',
|
|
@@ -2305,7 +2266,8 @@ class MatTimepickerInputBase {
|
|
|
2305
2266
|
}
|
|
2306
2267
|
});
|
|
2307
2268
|
}
|
|
2308
|
-
_onInput(
|
|
2269
|
+
_onInput(event) {
|
|
2270
|
+
const value = event.target.value;
|
|
2309
2271
|
const lastValueWasValid = this._lastValueValid;
|
|
2310
2272
|
let time = this._timeAdapter.parse(value, TIME_FORMATS);
|
|
2311
2273
|
this._lastValueValid = this._isValidValue(time);
|
|
@@ -2398,10 +2360,10 @@ class MatTimepickerInputBase {
|
|
|
2398
2360
|
this._pendingValue = value;
|
|
2399
2361
|
}
|
|
2400
2362
|
}
|
|
2401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2402
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInputBase, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2364
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerInputBase, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, outputs: { timeChange: "timeChange", timeInput: "timeInput" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2403
2365
|
}
|
|
2404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInputBase, decorators: [{
|
|
2405
2367
|
type: Directive
|
|
2406
2368
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimeAdapter, decorators: [{
|
|
2407
2369
|
type: Optional
|
|
@@ -2486,7 +2448,9 @@ class MatTimepickerInput extends MatTimepickerInputBase {
|
|
|
2486
2448
|
* @return The element to connect the popup to.
|
|
2487
2449
|
*/
|
|
2488
2450
|
getConnectedOverlayOrigin() {
|
|
2489
|
-
return this._formField
|
|
2451
|
+
return this._formField
|
|
2452
|
+
? this._formField.getConnectedOverlayOrigin()
|
|
2453
|
+
: this._elementRef;
|
|
2490
2454
|
}
|
|
2491
2455
|
/** Returns the palette used by the input's form field, if any. */
|
|
2492
2456
|
getThemePalette() {
|
|
@@ -2518,14 +2482,14 @@ class MatTimepickerInput extends MatTimepickerInputBase {
|
|
|
2518
2482
|
_shouldHandleChangeEvent(event) {
|
|
2519
2483
|
return event.source !== this;
|
|
2520
2484
|
}
|
|
2521
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2522
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInput, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2486
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerInput, isStandalone: true, selector: "input[matTimepicker]", inputs: { matTimepicker: "matTimepicker", min: "min", max: "max" }, host: { listeners: { "input": "_onInput($event)", "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
2487
|
MAT_TIMEPICKER_VALUE_ACCESSOR,
|
|
2524
2488
|
MAT_TIMEPICKER_VALIDATORS,
|
|
2525
2489
|
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
|
|
2526
2490
|
], exportAs: ["matTimepickerInput"], usesInheritance: true, ngImport: i0 }); }
|
|
2527
2491
|
}
|
|
2528
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInput, decorators: [{
|
|
2529
2493
|
type: Directive,
|
|
2530
2494
|
args: [{
|
|
2531
2495
|
selector: 'input[matTimepicker]',
|
|
@@ -2543,7 +2507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2543
2507
|
'[attr.min]': 'min || null',
|
|
2544
2508
|
'[attr.max]': 'max || null',
|
|
2545
2509
|
'[disabled]': 'disabled',
|
|
2546
|
-
'(input)': '_onInput($event
|
|
2510
|
+
'(input)': '_onInput($event)',
|
|
2547
2511
|
'(change)': '_onChange()',
|
|
2548
2512
|
'(blur)': '_onBlur()',
|
|
2549
2513
|
},
|
|
@@ -2572,10 +2536,10 @@ class MatTimepickerApply {
|
|
|
2572
2536
|
this._timepicker._applyPendingSelection();
|
|
2573
2537
|
this._timepicker.close();
|
|
2574
2538
|
}
|
|
2575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2576
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2539
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerApply, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2540
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerApply, isStandalone: true, selector: "[matTimepickerApply]", host: { listeners: { "click": "_applySelection()" } }, ngImport: i0 }); }
|
|
2577
2541
|
}
|
|
2578
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2542
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerApply, decorators: [{
|
|
2579
2543
|
type: Directive,
|
|
2580
2544
|
args: [{
|
|
2581
2545
|
selector: '[matTimepickerApply]',
|
|
@@ -2593,10 +2557,10 @@ class MatTimepickerCancel {
|
|
|
2593
2557
|
close() {
|
|
2594
2558
|
this._timepicker.close();
|
|
2595
2559
|
}
|
|
2596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2597
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2560
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerCancel, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2561
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerCancel, isStandalone: true, selector: "[matTimepickerCancel]", host: { listeners: { "click": "close()" } }, ngImport: i0 }); }
|
|
2598
2562
|
}
|
|
2599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerCancel, decorators: [{
|
|
2600
2564
|
type: Directive,
|
|
2601
2565
|
args: [{
|
|
2602
2566
|
selector: '[matTimepickerCancel]',
|
|
@@ -2626,8 +2590,8 @@ class MatTimepickerActions {
|
|
|
2626
2590
|
this._portal?.detach();
|
|
2627
2591
|
}
|
|
2628
2592
|
}
|
|
2629
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2593
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerActions, deps: [{ token: MatTimepickerBase }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", 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
2595
|
<ng-template>
|
|
2632
2596
|
<div class="mat-timepicker-actions">
|
|
2633
2597
|
<ng-content></ng-content>
|
|
@@ -2635,7 +2599,7 @@ class MatTimepickerActions {
|
|
|
2635
2599
|
</ng-template>
|
|
2636
2600
|
`, 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
2601
|
}
|
|
2638
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerActions, decorators: [{
|
|
2639
2603
|
type: Component,
|
|
2640
2604
|
args: [{ selector: 'mat-timepicker-actions', standalone: true, template: `
|
|
2641
2605
|
<ng-template>
|
|
@@ -2657,13 +2621,13 @@ class MatTimepickerDefaultActions {
|
|
|
2657
2621
|
constructor(_timepicker, _intl) {
|
|
2658
2622
|
this._timepicker = _timepicker;
|
|
2659
2623
|
this._intl = _intl;
|
|
2660
|
-
this.color = signal(undefined);
|
|
2624
|
+
this.color = signal(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
2661
2625
|
}
|
|
2662
2626
|
ngOnInit() {
|
|
2663
2627
|
this.color.set(this._timepicker.color);
|
|
2664
2628
|
}
|
|
2665
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2666
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2629
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerDefaultActions, deps: [{ token: MatTimepickerBase }, { token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerDefaultActions, isStandalone: true, selector: "mat-timepicker-default-actions", host: { classAttribute: "mat-timepicker-actions-container" }, ngImport: i0, template: `
|
|
2667
2631
|
<div class="mat-timepicker-actions">
|
|
2668
2632
|
<ng-content></ng-content>
|
|
2669
2633
|
<button [color]="color()" mat-button matTimepickerCancel>
|
|
@@ -2675,7 +2639,7 @@ class MatTimepickerDefaultActions {
|
|
|
2675
2639
|
</div>
|
|
2676
2640
|
`, 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
2641
|
}
|
|
2678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerDefaultActions, decorators: [{
|
|
2679
2643
|
type: Component,
|
|
2680
2644
|
args: [{ selector: 'mat-timepicker-default-actions', standalone: true, imports: [MatButtonModule, MatTimepickerApply, MatTimepickerCancel], template: `
|
|
2681
2645
|
<div class="mat-timepicker-actions">
|
|
@@ -2693,8 +2657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2693
2657
|
}], ctorParameters: () => [{ type: MatTimepickerBase }, { type: MatTimepickerIntl }] });
|
|
2694
2658
|
|
|
2695
2659
|
class MatTimepickerModule {
|
|
2696
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2697
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2660
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2661
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, imports: [OverlayModule,
|
|
2698
2662
|
PortalModule,
|
|
2699
2663
|
A11yModule,
|
|
2700
2664
|
MatTimepicker,
|
|
@@ -2731,7 +2695,7 @@ class MatTimepickerModule {
|
|
|
2731
2695
|
MatTimepickerDefaultActions,
|
|
2732
2696
|
MatTimepickerApply,
|
|
2733
2697
|
MatTimepickerCancel] }); }
|
|
2734
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2698
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, providers: [
|
|
2735
2699
|
MatTimepickerIntl,
|
|
2736
2700
|
MAT_TIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
|
|
2737
2701
|
{ provide: MAT_DEFAULT_ACITONS, useValue: MatTimepickerDefaultActions },
|
|
@@ -2751,7 +2715,7 @@ class MatTimepickerModule {
|
|
|
2751
2715
|
MatTimePeriod,
|
|
2752
2716
|
MatTimepickerDefaultActions, CdkScrollableModule] }); }
|
|
2753
2717
|
}
|
|
2754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, decorators: [{
|
|
2755
2719
|
type: NgModule,
|
|
2756
2720
|
args: [{
|
|
2757
2721
|
declarations: [],
|