@dhutaryan/ngx-mat-timepicker 20.0.0 → 20.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/fesm2022/dhutaryan-ngx-mat-timepicker.mjs +207 -220
- package/fesm2022/dhutaryan-ngx-mat-timepicker.mjs.map +1 -1
- package/index.d.ts +30 -29
- package/package.json +4 -4
|
@@ -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, booleanAttribute, forwardRef, TemplateRef, signal } from '@angular/core';
|
|
2
|
+
import { InjectionToken, Injectable, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, ContentChild, EventEmitter, DOCUMENT, Inject, Output, inject, LOCALE_ID, Optional, NgModule, HostListener, input, output, computed, linkedSignal, effect, SkipSelf, ElementRef, NgZone, Renderer2, ViewChild, afterNextRender, booleanAttribute, 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: "20.
|
|
71
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
69
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
70
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerIntl, providedIn: 'root' }); }
|
|
72
71
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerIntl, decorators: [{
|
|
74
73
|
type: Injectable,
|
|
75
74
|
args: [{ providedIn: 'root' }]
|
|
76
75
|
}] });
|
|
77
76
|
|
|
78
77
|
class MatTimepickerToggleIcon {
|
|
79
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
80
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
78
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
79
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerToggleIcon, isStandalone: true, selector: "[matTimepickerToggleIcon]", ngImport: i0 }); }
|
|
81
80
|
}
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggleIcon, decorators: [{
|
|
83
82
|
type: Directive,
|
|
84
83
|
args: [{ selector: '[matTimepickerToggleIcon]', standalone: true }]
|
|
85
84
|
}] });
|
|
@@ -130,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: "20.
|
|
134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerToggle, deps: [{ token: 'tabindex', attribute: true }, { token: MatTimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatTimepickerToggle, isStandalone: true, selector: "mat-timepicker-toggle", inputs: { timepicker: ["for", "timepicker"], disabled: "disabled", disableRipple: "disableRipple", tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "open($event)" }, properties: { "attr.tabindex": "null", "class.mat-timepicker-toggle-active": "timepicker && timepicker.opened", "class.mat-accent": "timepicker && timepicker.color === \"accent\"", "class.mat-warn": "timepicker && timepicker.color === \"warn\"" }, classAttribute: "mat-timepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: MatTimepickerToggleIcon, descendants: true }], exportAs: ["matTimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n type=\"button\"\n #button\n mat-icon-button\n [attr.aria-haspopup]=\"timepicker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel || _intl.openTimepickerLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\"\n>\n @if (!customIcon) {\n <svg\n class=\"mat-timepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z\"\n />\n </svg>\n }\n\n <ng-content select=\"[matTimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field .mat-form-field-prefix .mat-timepicker-toggle-default-icon,.mat-form-field .mat-form-field-suffix .mat-timepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field .mat-form-field-prefix .mat-icon-button .mat-timepicker-toggle-default-icon,.mat-form-field .mat-form-field-suffix .mat-icon-button .mat-timepicker-toggle-default-icon{margin:auto}.mat-timepicker-toggle{color:var(--mat-timepicker-toggle-color, var(--mat-sys-on-surface-variant))}.mat-timepicker-toggle.mat-timepicker-toggle-active button{color:var(--mat-timepicker-toggle-active-color, var(--mat-sys-primary))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
135
134
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.
|
|
343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatMinutesClockDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatMinutesClockDial, isStandalone: true, selector: "mat-minutes-clock-dial", inputs: { selectedMinute: "selectedMinute", interval: "interval", availableMinutes: "availableMinutes", color: "color", touchUi: "touchUi" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onUserAction($event)", "touchstart": "_onUserAction($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-minutes" }, exportAs: ["matMinutesClockDial"], ngImport: i0, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isMinutePoint\"\n [class.mat-clock-dial-hand-disabled]=\"disabled\"\n [ngStyle]=\"_handStyles()\"\n>\n <div class=\"mat-clock-dial-hand-point\" tabindex=\"0\"></div>\n</div>\n@for (minute of minutes; track minute.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(minute.value) ? 0 : -1\"\n [style.left.px]=\"minute.left\"\n [style.top.px]=\"minute.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(minute.value)\"\n [class.mat-clock-dial-cell-disabled]=\"minute.disabled\"\n [color]=\"_isActiveCell(minute.value) ? color : undefined\"\n [attr.aria-disabled]=\"minute.disabled || null\"\n >\n {{ minute.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
344
322
|
}
|
|
345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.
|
|
529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatHoursClockDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatHoursClockDial, isStandalone: true, selector: "mat-hours-clock-dial", inputs: { selectedHour: "selectedHour", isMeridiem: "isMeridiem", availableHours: "availableHours", color: "color", touchUi: "touchUi" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onUserAction($event)", "touchstart": "_onUserAction($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-hours" }, exportAs: ["matHoursClockDial"], ngImport: i0, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isHour\"\n [class.mat-clock-dial-hand-disabled]=\"disabledHand\"\n [ngStyle]=\"_handStyles()\"\n></div>\n@for (hour of hours; track hour.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(hour.value) ? 0 : -1\"\n [style.left.px]=\"hour.left\"\n [style.top.px]=\"hour.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(hour.value)\"\n [class.mat-clock-dial-cell-disabled]=\"hour.disabled\"\n [color]=\"_isActiveCell(hour.value) ? color : undefined\"\n [attr.aria-disabled]=\"hour.disabled || null\"\n >\n {{ hour.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
530
508
|
}
|
|
531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.
|
|
767
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
744
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeAdapter, deps: [{ token: MAT_TIME_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
745
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeAdapter }); }
|
|
768
746
|
}
|
|
769
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.
|
|
780
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
781
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
758
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] }); }
|
|
759
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NativeDateTimeModule, providers: [{ provide: TimeAdapter, useClass: NativeDateTimeAdapter }], imports: [PlatformModule] }); }
|
|
782
760
|
}
|
|
783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.
|
|
792
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
793
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
770
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatNativeDateTimeModule }); }
|
|
771
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatNativeDateTimeModule, providers: [provideNativeDateTimeAdapter()] }); }
|
|
794
772
|
}
|
|
795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", ngImport: i0, type: MatTimeFaceBase, deps: [{ token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1070
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimeFaceBase, isStandalone: true, inputs: { selected: "selected", minTime: "minTime", maxTime: "maxTime", minuteInterval: "minuteInterval", isMeridiem: "isMeridiem", color: "color" }, outputs: { _userSelection: "_userSelection", selectedChange: "selectedChange" }, ngImport: i0 }); }
|
|
1091
1071
|
}
|
|
1092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.
|
|
1191
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1170
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeInputBase, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1171
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimeInputBase, isStandalone: true, inputs: { value: "value" }, outputs: { timeChanged: "timeChanged" }, host: { listeners: { "keydown": "_keydown($event)" } }, ngImport: i0 }); }
|
|
1192
1172
|
}
|
|
1193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: "20.
|
|
1223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerContentLayout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerContentLayout, isStandalone: true, selector: "mat-timepicker-content-layout", inputs: { title: "title", orientation: "orientation" }, host: { properties: { "class.mat-timepicker-content-layout-horizontal": "orientation === \"horizontal\"", "class.mat-timepicker-content-layout-vertical": "orientation === \"vertical\"" }, classAttribute: "mat-timepicker-content-layout" }, exportAs: ["matTimepickerContent"], ngImport: i0, template: "<h6 class=\"mat-timepicker-content-layout-title\">{{ title }}</h6>\n\n<div class=\"mat-timepicker-content-layout-container\">\n <div class=\"mat-timepicker-content-layout-values\">\n <div class=\"mat-timepicker-content-layout-hours\">\n <ng-content select=\"[hours]\"></ng-content>\n </div>\n <span class=\"mat-timepicker-content-layout-separator\">:</span>\n <div class=\"mat-timepicker-content-layout-minutes\">\n <ng-content select=\"[minutes]\"></ng-content>\n </div>\n\n <ng-content select=\"[mat-time-period]\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n</div>\n", styles: [".mat-timepicker-content-layout-title{color:var(--mat-timepicker-content-layout-title-color, var(--mat-sys-on-surface-variant));font-size:var(--mat-timepicker-content-layout-title-font-size, 12px);font-weight:var(--mat-timepicker-content-layout-title-font-weight, var(--mat-sys-title-medium-weight))}h6.mat-timepicker-content-layout-title{margin-top:0rem;margin-bottom:1.25rem;letter-spacing:.05rem}.mat-timepicker-content-layout-values{display:flex;justify-content:center}.mat-time-period{margin-left:.75rem}.mat-timepicker-content-layout-horizontal h6.mat-timepicker-content-layout-title{margin-bottom:0}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-container{display:flex;gap:4rem;align-items:center}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-values{flex-wrap:wrap}.mat-timepicker-content-layout-horizontal .mat-time-period{margin-top:.75rem;margin-left:0}.mat-timepicker-content-layout-hours,.mat-timepicker-content-layout-minutes{width:6rem}.mat-timepicker-content-layout-separator{display:flex;justify-content:center;align-self:center;width:1.5rem;height:1.75rem;font-weight:500;font-size:var(--mat-timepicker-content-layout-separator-font-size, 3rem);line-height:var(--mat-timepicker-content-layout-separator-line-height, 1.25rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1224
1194
|
}
|
|
1225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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',
|
|
@@ -1273,10 +1243,10 @@ class MatTimePeriod {
|
|
|
1273
1243
|
}
|
|
1274
1244
|
return this.disabledPeriod === period;
|
|
1275
1245
|
}
|
|
1276
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1246
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimePeriod, deps: [{ token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimePeriod, isStandalone: true, selector: "mat-time-period", inputs: { vertical: "vertical", period: "period", disabledPeriod: "disabledPeriod" }, outputs: { periodChanged: "periodChanged" }, host: { properties: { "class.mat-time-period-vertical": "vertical", "class.mat-time-period-horizontal": "!vertical", "attr.aria-orientation": "vertical ? \"vertical\" : \"horizontal\"" }, classAttribute: "mat-time-period" }, ngImport: i0, template: "<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"period === 'am'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('am')\"\n (click)=\"setPeriod($event, 'am')\"\n (keydown.space)=\"setPeriod($event, 'am')\"\n>\n {{ _intl.am }}\n</div>\n<mat-divider [vertical]=\"!vertical\"></mat-divider>\n<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"period === 'pm'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('pm')\"\n (click)=\"setPeriod($event, 'pm')\"\n (keydown.space)=\"setPeriod($event, 'pm')\"\n>\n {{ _intl.pm }}\n</div>\n", styles: [".mat-time-period{display:flex;text-align:center;border-width:1px;border-style:solid;border-radius:.25rem;box-sizing:border-box;border-color:var(--mat-timepicker-time-period-border-color, var(--mat-sys-outline))}.mat-time-period-vertical{flex-direction:column;width:3.25rem;height:4.5rem}.mat-time-period-vertical .mat-time-period-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-time-period-vertical .mat-time-period-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-horizontal{flex-direction:row;max-width:13.5rem;width:100%;height:2.5rem}.mat-time-period-horizontal .mat-time-period-item:first-child{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.mat-time-period-horizontal .mat-time-period-item:last-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-item{display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:100%;font-size:.875rem;font-weight:500;cursor:pointer}.mat-time-period-item-active{color:var(--mat-timepicker-time-period-active-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mat-timepicker-time-period-active-background-color, var(--mat-sys-tertiary-container))}.mat-time-period-item-disabled{pointer-events:none;color:var(--mat-timepicker-time-period-disabled-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-time-period-disabled-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 20%, transparent))}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1278
1248
|
}
|
|
1279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimePeriod, decorators: [{
|
|
1280
1250
|
type: Component,
|
|
1281
1251
|
args: [{ selector: 'mat-time-period', standalone: true, imports: [MatDividerModule, MatRippleModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1282
1252
|
class: 'mat-time-period',
|
|
@@ -1295,44 +1265,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1295
1265
|
}] } });
|
|
1296
1266
|
|
|
1297
1267
|
class MatClockDials extends MatTimeFaceBase {
|
|
1298
|
-
constructor(_intl, _timeAdapter,
|
|
1268
|
+
constructor(_intl, _timeAdapter, _elementRef, _cdr) {
|
|
1299
1269
|
super(_timeAdapter);
|
|
1300
1270
|
this._intl = _intl;
|
|
1301
|
-
this._ngZone = _ngZone;
|
|
1302
1271
|
this._elementRef = _elementRef;
|
|
1303
1272
|
this._cdr = _cdr;
|
|
1304
|
-
|
|
1273
|
+
/** Layout orientation. */
|
|
1274
|
+
this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
1275
|
+
/** Whether the timepicker UI is in touch mode. */
|
|
1276
|
+
this.touchUi = input(false, ...(ngDevMode ? [{ debugName: "touchUi" }] : []));
|
|
1277
|
+
/** Whether the current view for the timepicker. */
|
|
1278
|
+
this.currentView = input('hours', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
|
|
1279
|
+
/** Emits when the view is changed. */
|
|
1280
|
+
this.viewChanged = output();
|
|
1281
|
+
this.isHoursView = computed(() => this._view() === 'hours', ...(ngDevMode ? [{ debugName: "isHoursView" }] : []));
|
|
1305
1282
|
/** 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;
|
|
1283
|
+
this._view = linkedSignal(() => this.currentView(), ...(ngDevMode ? [{ debugName: "_view" }] : []));
|
|
1284
|
+
effect(() => this.viewChanged.emit(this._view()));
|
|
1315
1285
|
}
|
|
1316
1286
|
/** Changes clock dial view. */
|
|
1317
1287
|
onViewChange(event, view) {
|
|
1318
1288
|
event.preventDefault();
|
|
1319
|
-
this._view.
|
|
1289
|
+
this._view.set(view);
|
|
1320
1290
|
}
|
|
1321
1291
|
focusActiveCell() {
|
|
1322
|
-
this.
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
activePoint.focus();
|
|
1333
|
-
}
|
|
1334
|
-
});
|
|
1335
|
-
});
|
|
1292
|
+
const activeCell = this._elementRef.nativeElement.querySelector('.mat-timepicker-content .mat-clock-dial-cell-active');
|
|
1293
|
+
if (activeCell) {
|
|
1294
|
+
activeCell.focus();
|
|
1295
|
+
return;
|
|
1296
|
+
}
|
|
1297
|
+
const activePoint = this._elementRef.nativeElement.querySelector('.mat-timepicker-content .mat-clock-dial-hand-point');
|
|
1298
|
+
if (activePoint) {
|
|
1299
|
+
// if no active cell we need to focus a small dot
|
|
1300
|
+
activePoint.focus();
|
|
1301
|
+
}
|
|
1336
1302
|
}
|
|
1337
1303
|
_withZeroPrefix(value) {
|
|
1338
1304
|
if (value === 0) {
|
|
@@ -1347,15 +1313,15 @@ class MatClockDials extends MatTimeFaceBase {
|
|
|
1347
1313
|
/** Handles hour selection. */
|
|
1348
1314
|
_onHourChanged({ hour, changeView = false, }) {
|
|
1349
1315
|
if (changeView) {
|
|
1350
|
-
this._view.
|
|
1316
|
+
this._view.set('minutes');
|
|
1351
1317
|
}
|
|
1352
1318
|
this._onHourSelected(hour);
|
|
1353
1319
|
this._cdr.detectChanges();
|
|
1354
1320
|
}
|
|
1355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1321
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatClockDials, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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
1323
|
}
|
|
1358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatClockDials, decorators: [{
|
|
1359
1325
|
type: Component,
|
|
1360
1326
|
args: [{ selector: 'mat-clock-dials', standalone: true, imports: [
|
|
1361
1327
|
MatTimepickerContentLayout,
|
|
@@ -1365,14 +1331,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1365
1331
|
], exportAs: 'matClockDials', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1366
1332
|
role: 'dial',
|
|
1367
1333
|
class: 'mat-clock-dials',
|
|
1368
|
-
},
|
|
1334
|
+
}, 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
1335
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1370
1336
|
type: Optional
|
|
1371
|
-
}] }, { type: i0.
|
|
1372
|
-
type: Input
|
|
1373
|
-
}], touchUi: [{
|
|
1374
|
-
type: Input
|
|
1375
|
-
}] } });
|
|
1337
|
+
}] }, { 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
1338
|
|
|
1377
1339
|
class MatHourInput extends MatTimeInputBase {
|
|
1378
1340
|
get availableHours() {
|
|
@@ -1419,10 +1381,10 @@ class MatHourInput extends MatTimeInputBase {
|
|
|
1419
1381
|
}
|
|
1420
1382
|
return Math.min(Math.max(value, Math.min(...this.availableHours)), Math.max(...this.availableHours));
|
|
1421
1383
|
}
|
|
1422
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1423
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1384
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatHourInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1385
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatHourInput, isStandalone: true, selector: "input[matHourInput]", inputs: { availableHours: "availableHours", isMeridiem: "isMeridiem" }, host: { listeners: { "focus": "focus($event)", "blur": "blur($event)" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1424
1386
|
}
|
|
1425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatHourInput, decorators: [{
|
|
1426
1388
|
type: Directive,
|
|
1427
1389
|
args: [{
|
|
1428
1390
|
selector: 'input[matHourInput]',
|
|
@@ -1471,10 +1433,10 @@ class MatMinuteInput extends MatTimeInputBase {
|
|
|
1471
1433
|
const roundedValue = Math.round(value / this.interval) * this.interval;
|
|
1472
1434
|
return Math.min(Math.max(roundedValue, Math.min(...this.availableMinutes)), Math.max(...this.availableMinutes));
|
|
1473
1435
|
}
|
|
1474
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1475
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1436
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatMinuteInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1437
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatMinuteInput, isStandalone: true, selector: "input[matMinuteInput]", inputs: { interval: "interval", availableMinutes: "availableMinutes" }, host: { listeners: { "focus": "focus($event)", "blur": "blur($event)" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1476
1438
|
}
|
|
1477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatMinuteInput, decorators: [{
|
|
1478
1440
|
type: Directive,
|
|
1479
1441
|
args: [{
|
|
1480
1442
|
selector: 'input[matMinuteInput]',
|
|
@@ -1495,10 +1457,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1495
1457
|
type: Input
|
|
1496
1458
|
}] } });
|
|
1497
1459
|
class MatTimeInputs extends MatTimeFaceBase {
|
|
1498
|
-
constructor(_intl, _timeAdapter,
|
|
1460
|
+
constructor(_intl, _timeAdapter, _elementRef) {
|
|
1499
1461
|
super(_timeAdapter);
|
|
1500
1462
|
this._intl = _intl;
|
|
1501
|
-
this._ngZone = _ngZone;
|
|
1502
1463
|
this._elementRef = _elementRef;
|
|
1503
1464
|
/**
|
|
1504
1465
|
* Using for skipping that focus shouldn't be moved to the active cell on the next tick.
|
|
@@ -1507,20 +1468,16 @@ class MatTimeInputs extends MatTimeFaceBase {
|
|
|
1507
1468
|
this._skipNextTickFocus = false;
|
|
1508
1469
|
}
|
|
1509
1470
|
focusActiveCell() {
|
|
1510
|
-
this.
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
this._skipNextTickFocus = true;
|
|
1516
|
-
}
|
|
1517
|
-
});
|
|
1518
|
-
});
|
|
1471
|
+
const activeCell = this._elementRef.nativeElement.querySelector('.mat-timepicker-content input');
|
|
1472
|
+
if (activeCell && !this._skipNextTickFocus) {
|
|
1473
|
+
activeCell.focus();
|
|
1474
|
+
this._skipNextTickFocus = true;
|
|
1475
|
+
}
|
|
1519
1476
|
}
|
|
1520
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1477
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeInputs, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatTimeInputs, isStandalone: true, selector: "mat-time-inputs", host: { classAttribute: "mat-time-inputs" }, usesInheritance: true, ngImport: i0, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n hours\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matHourInput\n [isMeridiem]=\"isMeridiem\"\n [value]=\"selectedHour\"\n [availableHours]=\"_getAvailableHours()\"\n (timeChanged)=\"_onHourSelected($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n />\n <mat-hint>{{ _intl.hourInputHint }}</mat-hint>\n </mat-form-field>\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n minutes\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matMinuteInput\n [value]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n (timeChanged)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n />\n <mat-hint>{{ _intl.minuteInputHint }}</mat-hint>\n </mat-form-field>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n</mat-timepicker-content-layout>\n", styles: [".mat-time-inputs{display:block}.mat-time-inputs .mat-timepicker-content-layout-separator{margin-top:-1.5rem}.mat-time-inputs-field{display:block}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-flex{margin:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{top:0;margin:0;background-color:var(--mat-timepicker-time-inputs-field-background-color, var(--mat-sys-surface-container-highest))}.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__leading,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__notch,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__trailing{border-style:none}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{margin-top:.75rem;line-height:1;letter-spacing:.05rem}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding-left:0}.mat-time-inputs-field.mat-form-field-appearance-outline input.mat-mdc-input-element{font-size:var(--mat-timepicker-time-inputs-field-font-size, 2rem);line-height:var(--mat-timepicker-time-inputs-field-line-height, 1.25)}.mat-time-inputs-field .mat-mdc-form-field-bottom-align:before{height:0}.mat-time-inputs-field .mat-mdc-form-field-infix{border-top:none;text-align:center}.mat-time-inputs-field input.mat-mdc-input-element{margin-top:0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title", "orientation"], exportAs: ["matTimepickerContent"] }, { kind: "directive", type: MatHourInput, selector: "input[matHourInput]", inputs: ["availableHours", "isMeridiem"], exportAs: ["matTimeInput"] }, { kind: "directive", type: MatMinuteInput, selector: "input[matMinuteInput]", inputs: ["interval", "availableMinutes"], exportAs: ["matTimeInput"] }, { kind: "component", type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1522
1479
|
}
|
|
1523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeInputs, decorators: [{
|
|
1524
1481
|
type: Component,
|
|
1525
1482
|
args: [{ selector: 'mat-time-inputs', standalone: true, imports: [
|
|
1526
1483
|
MatFormFieldModule,
|
|
@@ -1534,7 +1491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1534
1491
|
}, 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
1492
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1536
1493
|
type: Optional
|
|
1537
|
-
}] }, { type: i0.
|
|
1494
|
+
}] }, { type: i0.ElementRef }] });
|
|
1538
1495
|
|
|
1539
1496
|
/**
|
|
1540
1497
|
* A selection model containing a time selection.
|
|
@@ -1560,10 +1517,10 @@ class MatTimeSelectionModel {
|
|
|
1560
1517
|
ngOnDestroy() {
|
|
1561
1518
|
this._selectionChanged.complete();
|
|
1562
1519
|
}
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1564
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1521
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeSelectionModel }); }
|
|
1565
1522
|
}
|
|
1566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimeSelectionModel, decorators: [{
|
|
1567
1524
|
type: Injectable
|
|
1568
1525
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1569
1526
|
/**
|
|
@@ -1586,10 +1543,10 @@ class MatSingleTimeSelectionModel extends MatTimeSelectionModel {
|
|
|
1586
1543
|
clone.updateSelection(this.selection, this);
|
|
1587
1544
|
return clone;
|
|
1588
1545
|
}
|
|
1589
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1590
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1546
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSingleTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1547
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSingleTimeSelectionModel }); }
|
|
1591
1548
|
}
|
|
1592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1549
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSingleTimeSelectionModel, decorators: [{
|
|
1593
1550
|
type: Injectable
|
|
1594
1551
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1595
1552
|
function MAT_SINGLE_TIME_SELECTION_MODEL_FACTORY(parent, adapter) {
|
|
@@ -1608,42 +1565,80 @@ const MAT_SINGLE_TIME_SELECTION_MODEL_PROVIDER = {
|
|
|
1608
1565
|
};
|
|
1609
1566
|
|
|
1610
1567
|
class MatTimepickerContent {
|
|
1611
|
-
constructor(
|
|
1568
|
+
constructor(_globalModel, _changeDetectorRef) {
|
|
1612
1569
|
this._globalModel = _globalModel;
|
|
1613
1570
|
this._changeDetectorRef = _changeDetectorRef;
|
|
1571
|
+
/** Whether the animation is disabled. */
|
|
1572
|
+
this._animationsDisabled = inject(MATERIAL_ANIMATIONS, {
|
|
1573
|
+
optional: true,
|
|
1574
|
+
})?.animationsDisabled;
|
|
1614
1575
|
/** Portal with projected action buttons. */
|
|
1615
1576
|
this._actionsPortal = null;
|
|
1616
1577
|
/** Whether there is an in-progress animation. */
|
|
1617
1578
|
this._isAnimating = false;
|
|
1618
1579
|
/** Emits when an animation has finished. */
|
|
1619
1580
|
this._animationDone = new Subject();
|
|
1620
|
-
this.
|
|
1621
|
-
this.
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1581
|
+
this._elementRef = inject(ElementRef);
|
|
1582
|
+
this._ngZone = inject(NgZone);
|
|
1583
|
+
this._handleAnimationEvent = (event) => {
|
|
1584
|
+
const element = this._elementRef.nativeElement;
|
|
1585
|
+
if (event.target !== element ||
|
|
1586
|
+
!event.animationName.startsWith('_mat-timepicker-content')) {
|
|
1587
|
+
return;
|
|
1588
|
+
}
|
|
1589
|
+
clearTimeout(this._animationFallback);
|
|
1590
|
+
this._isAnimating = event.type === 'animationstart';
|
|
1591
|
+
element.classList.toggle('mat-timepicker-content-animating', this._isAnimating);
|
|
1592
|
+
if (!this._isAnimating) {
|
|
1593
|
+
this._animationDone.next();
|
|
1594
|
+
}
|
|
1595
|
+
};
|
|
1596
|
+
this._closeButtonText = inject(MatTimepickerIntl).closeTimepickerLabel;
|
|
1597
|
+
if (!this._animationsDisabled) {
|
|
1598
|
+
const element = this._elementRef.nativeElement;
|
|
1599
|
+
const renderer = inject(Renderer2);
|
|
1600
|
+
this._eventCleanups = this._ngZone.runOutsideAngular(() => [
|
|
1601
|
+
renderer.listen(element, 'animationstart', this._handleAnimationEvent),
|
|
1602
|
+
renderer.listen(element, 'animationend', this._handleAnimationEvent),
|
|
1603
|
+
renderer.listen(element, 'animationcancel', this._handleAnimationEvent),
|
|
1604
|
+
]);
|
|
1605
|
+
}
|
|
1626
1606
|
}
|
|
1627
1607
|
ngAfterViewInit() {
|
|
1628
|
-
this.
|
|
1608
|
+
this._stateChanges = this.timepicker.stateChanges.subscribe(() => {
|
|
1629
1609
|
this._changeDetectorRef.markForCheck();
|
|
1630
|
-
})
|
|
1631
|
-
(this.
|
|
1610
|
+
});
|
|
1611
|
+
if (this._animationsDisabled) {
|
|
1612
|
+
(this._dials || this._inputs)?.focusActiveCell();
|
|
1613
|
+
return;
|
|
1614
|
+
}
|
|
1615
|
+
this._animationDone.pipe(take(1)).subscribe(() => {
|
|
1616
|
+
(this._dials || this._inputs)?.focusActiveCell();
|
|
1617
|
+
});
|
|
1632
1618
|
}
|
|
1633
1619
|
ngOnDestroy() {
|
|
1634
|
-
this.
|
|
1620
|
+
clearTimeout(this._animationFallback);
|
|
1621
|
+
this._eventCleanups?.forEach((cleanup) => cleanup());
|
|
1622
|
+
this._stateChanges?.unsubscribe();
|
|
1635
1623
|
this._animationDone.complete();
|
|
1636
1624
|
}
|
|
1637
1625
|
/** Changes animation state while closing timepicker content. */
|
|
1638
1626
|
_startExitAnimation() {
|
|
1639
|
-
this.
|
|
1640
|
-
this.
|
|
1641
|
-
}
|
|
1642
|
-
_handleAnimationEvent(event) {
|
|
1643
|
-
this._isAnimating = event.phaseName === 'start';
|
|
1644
|
-
if (!this._isAnimating) {
|
|
1627
|
+
this._elementRef.nativeElement.classList.add('mat-timepicker-content-exit');
|
|
1628
|
+
if (this._animationsDisabled) {
|
|
1645
1629
|
this._animationDone.next();
|
|
1646
1630
|
}
|
|
1631
|
+
else {
|
|
1632
|
+
// Some internal apps disable animations in tests using `* {animation: none !important}`.
|
|
1633
|
+
// If that happens, the animation events won't fire and we'll never clean up the overlay.
|
|
1634
|
+
// Add a fallback that will fire if the animation doesn't run in a certain amount of time.
|
|
1635
|
+
clearTimeout(this._animationFallback);
|
|
1636
|
+
this._animationFallback = setTimeout(() => {
|
|
1637
|
+
if (!this._isAnimating) {
|
|
1638
|
+
this._animationDone.next();
|
|
1639
|
+
}
|
|
1640
|
+
}, 200);
|
|
1641
|
+
}
|
|
1647
1642
|
}
|
|
1648
1643
|
onToggleMode(mode) {
|
|
1649
1644
|
this.mode = mode;
|
|
@@ -1678,13 +1673,10 @@ class MatTimepickerContent {
|
|
|
1678
1673
|
const value = event;
|
|
1679
1674
|
this._model.add(value);
|
|
1680
1675
|
}
|
|
1681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1683
|
-
matTimepickerAnimations.transformPanel,
|
|
1684
|
-
matTimepickerAnimations.fadeInTimepicker,
|
|
1685
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1676
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerContent, deps: [{ token: MatTimeSelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatTimepickerContent, isStandalone: true, selector: "mat-timepicker-content", host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mat-timepicker-content-touch": "timepicker.touchUi", "class.mat-timepicker-content-animations-enabled": "!_animationsDisabled" }, classAttribute: "mat-timepicker-content" }, viewQueries: [{ propertyName: "_dials", first: true, predicate: MatClockDials, descendants: true }, { propertyName: "_inputs", first: true, predicate: MatTimeInputs, descendants: true }], exportAs: ["matTimepickerContent"], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n class=\"mat-timepicker-content-container\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n>\n @switch (mode) {\n @case ('input') {\n <mat-time-inputs\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-time-inputs>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('dial')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"m15.175 16.625 1.475-1.45-3.6-3.6V7.1h-2.075v5.3ZM12 21.95q-2.075 0-3.887-.787-1.813-.788-3.15-2.125-1.338-1.338-2.125-3.151Q2.05 14.075 2.05 12t.788-3.887q.787-1.813 2.125-3.15Q6.3 3.625 8.113 2.837 9.925 2.05 12 2.05t3.887.787q1.813.788 3.151 2.126 1.337 1.337 2.125 3.15.787 1.812.787 3.887t-.787 3.887q-.788 1.813-2.125 3.151-1.338 1.337-3.151 2.125-1.812.787-3.887.787ZM12 12Zm0 7.8q3.225 0 5.513-2.275Q19.8 15.25 19.8 12q0-3.25-2.287-5.525Q15.225 4.2 12 4.2T6.488 6.475Q4.2 8.75 4.2 12q0 3.25 2.288 5.525Q8.775 19.8 12 19.8Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n\n @case ('dial') {\n <mat-clock-dials\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n [orientation]=\"orientation\"\n [touchUi]=\"timepicker.touchUi\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-clock-dials>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('input')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M4 19q-.825 0-1.412-.587Q2 17.825 2 17V7q0-.825.588-1.412Q3.175 5 4 5h16q.825 0 1.413.588Q22 6.175 22 7v10q0 .825-.587 1.413Q20.825 19 20 19Zm0-2h16V7H4v10Zm4-1h8v-2H8Zm-3-3h2v-2H5Zm3 0h2v-2H8Zm3 0h2v-2h-2Zm3 0h2v-2h-2Zm3 0h2v-2h-2ZM5 10h2V8H5Zm3 0h2V8H8Zm3 0h2V8h-2Zm3 0h2V8h-2Zm3 0h2V8h-2ZM4 17V7v10Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n }\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n class=\"mat-timepicker-close-button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"timepicker.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: [".mat-timepicker-content{color:var(--mat-timepicker-content-text-color, var(--mat-sys-on-surface));background-color:var(--mat-timepicker-content-background-color, var(--mat-sys-surface-container-high));border-radius:var(--mat-timepicker-content-border-radius, var(--mat-sys-corner-large))}.mat-timepicker-content.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-touch.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-container{position:relative;display:flex;flex-direction:column;padding:1rem 1.5rem}.mat-timepicker-content-actions{display:flex;justify-content:space-between;margin-right:-1rem;margin-top:1.5rem}.mat-time-toggle-mode-button{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-left:-.75rem;margin-bottom:-.25rem}.mat-time-toggle-mode-button svg{fill:var(--mat-timepicker-toggle-mode-button-color, var(--mat-sys-on-surface-variant))}button.mat-timepicker-close-button{position:absolute;top:100%;left:0;margin-top:.5rem}.mat-timepicker-content-animating button.mat-timepicker-close-button{display:none}.mat-timepicker-content-exit.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-exit .1s linear}@keyframes _mat-timepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-exit{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatTimeInputs, selector: "mat-time-inputs" }, { kind: "component", type: MatClockDials, selector: "mat-clock-dials", inputs: ["orientation", "touchUi", "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
1678
|
}
|
|
1687
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerContent, decorators: [{
|
|
1688
1680
|
type: Component,
|
|
1689
1681
|
args: [{ selector: 'mat-timepicker-content', standalone: true, imports: [
|
|
1690
1682
|
PortalModule,
|
|
@@ -1695,15 +1687,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1695
1687
|
], exportAs: 'matTimepickerContent', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1696
1688
|
class: 'mat-timepicker-content',
|
|
1697
1689
|
'[class]': 'color ? "mat-" + color : ""',
|
|
1698
|
-
'[@transformPanel]': '_animationState',
|
|
1699
|
-
'(@transformPanel.start)': '_handleAnimationEvent($event)',
|
|
1700
|
-
'(@transformPanel.done)': '_handleAnimationEvent($event)',
|
|
1701
1690
|
'[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: [{
|
|
1691
|
+
'[class.mat-timepicker-content-animations-enabled]': '!_animationsDisabled',
|
|
1692
|
+
}, 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"] }]
|
|
1693
|
+
}], ctorParameters: () => [{ type: MatTimeSelectionModel }, { type: i0.ChangeDetectorRef }], propDecorators: { _dials: [{
|
|
1707
1694
|
type: ViewChild,
|
|
1708
1695
|
args: [MatClockDials]
|
|
1709
1696
|
}], _inputs: [{
|
|
@@ -1820,10 +1807,10 @@ class MatTimepickerBase {
|
|
|
1820
1807
|
_getMaxTime() {
|
|
1821
1808
|
return this.timepickerInput && this.timepickerInput.max;
|
|
1822
1809
|
}
|
|
1823
|
-
constructor(_viewContainerRef, _overlay,
|
|
1810
|
+
constructor(_viewContainerRef, _overlay, _injector, scrollStrategy, _defaultActionsComponent, _model, _defaults) {
|
|
1824
1811
|
this._viewContainerRef = _viewContainerRef;
|
|
1825
1812
|
this._overlay = _overlay;
|
|
1826
|
-
this.
|
|
1813
|
+
this._injector = _injector;
|
|
1827
1814
|
this._defaultActionsComponent = _defaultActionsComponent;
|
|
1828
1815
|
this._model = _model;
|
|
1829
1816
|
this._defaults = _defaults;
|
|
@@ -1914,7 +1901,6 @@ class MatTimepickerBase {
|
|
|
1914
1901
|
};
|
|
1915
1902
|
if (this._componentRef) {
|
|
1916
1903
|
const { instance, location } = this._componentRef;
|
|
1917
|
-
instance._startExitAnimation();
|
|
1918
1904
|
instance._animationDone.pipe(take(1)).subscribe(() => {
|
|
1919
1905
|
const activeElement = this._document.activeElement;
|
|
1920
1906
|
// Since we restore focus after the exit animation, we have to check that
|
|
@@ -1928,12 +1914,13 @@ class MatTimepickerBase {
|
|
|
1928
1914
|
this._focusedElementBeforeOpen = null;
|
|
1929
1915
|
this._destroyOverlay();
|
|
1930
1916
|
});
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1917
|
+
instance._startExitAnimation();
|
|
1918
|
+
}
|
|
1919
|
+
if (canRestoreFocus) {
|
|
1920
|
+
setTimeout(completeClose);
|
|
1921
|
+
}
|
|
1922
|
+
else {
|
|
1923
|
+
completeClose();
|
|
1937
1924
|
}
|
|
1938
1925
|
}
|
|
1939
1926
|
/**
|
|
@@ -2031,9 +2018,9 @@ class MatTimepickerBase {
|
|
|
2031
2018
|
this._forwardContentValues(this._componentRef.instance);
|
|
2032
2019
|
// Update the position once the timepicker has rendered. Only relevant in dropdown mode.
|
|
2033
2020
|
if (!isDialog) {
|
|
2034
|
-
|
|
2035
|
-
.
|
|
2036
|
-
|
|
2021
|
+
afterNextRender(() => {
|
|
2022
|
+
overlayRef.updatePosition();
|
|
2023
|
+
}, { injector: this._injector });
|
|
2037
2024
|
}
|
|
2038
2025
|
}
|
|
2039
2026
|
/** Destroys the current overlay. */
|
|
@@ -2105,12 +2092,12 @@ class MatTimepickerBase {
|
|
|
2105
2092
|
event.keyCode === UP_ARROW));
|
|
2106
2093
|
})));
|
|
2107
2094
|
}
|
|
2108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2109
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.
|
|
2095
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerBase, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i0.Injector }, { token: MAT_TIMEPICKER_SCROLL_STRATEGY }, { token: MAT_DEFAULT_ACITONS }, { token: MatTimeSelectionModel }, { token: MAT_TIMEPICKER_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2096
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: MatTimepickerBase, isStandalone: true, inputs: { disabled: "disabled", opened: "opened", openAs: "openAs", color: "color", mode: "mode", format: "format", showToggleModeButton: "showToggleModeButton", minuteInterval: "minuteInterval", orientation: "orientation", touchUi: ["touchUi", "touchUi", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { openedStream: "opened", closedStream: "closed" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2110
2097
|
}
|
|
2111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerBase, decorators: [{
|
|
2112
2099
|
type: Directive
|
|
2113
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.
|
|
2100
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
|
|
2114
2101
|
type: Inject,
|
|
2115
2102
|
args: [MAT_TIMEPICKER_SCROLL_STRATEGY]
|
|
2116
2103
|
}] }, { type: undefined, decorators: [{
|
|
@@ -2158,13 +2145,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2158
2145
|
}] } });
|
|
2159
2146
|
|
|
2160
2147
|
class MatTimepicker extends MatTimepickerBase {
|
|
2161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
2148
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepicker, isStandalone: true, selector: "mat-timepicker", host: { properties: { "class.mat-primary": "color !== \"accent\" && color !== \"warn\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"" }, classAttribute: "mat-timepicker" }, providers: [
|
|
2163
2150
|
MAT_SINGLE_TIME_SELECTION_MODEL_PROVIDER,
|
|
2164
2151
|
{ provide: MatTimepickerBase, useExisting: MatTimepicker },
|
|
2165
2152
|
], exportAs: ["matTimepicker"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2166
2153
|
}
|
|
2167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepicker, decorators: [{
|
|
2168
2155
|
type: Component,
|
|
2169
2156
|
args: [{
|
|
2170
2157
|
selector: 'mat-timepicker',
|
|
@@ -2398,10 +2385,10 @@ class MatTimepickerInputBase {
|
|
|
2398
2385
|
this._pendingValue = value;
|
|
2399
2386
|
}
|
|
2400
2387
|
}
|
|
2401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2402
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
2388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInputBase, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2389
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerInputBase, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, outputs: { timeChange: "timeChange", timeInput: "timeInput" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2403
2390
|
}
|
|
2404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInputBase, decorators: [{
|
|
2405
2392
|
type: Directive
|
|
2406
2393
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimeAdapter, decorators: [{
|
|
2407
2394
|
type: Optional
|
|
@@ -2518,14 +2505,14 @@ class MatTimepickerInput extends MatTimepickerInputBase {
|
|
|
2518
2505
|
_shouldHandleChangeEvent(event) {
|
|
2519
2506
|
return event.source !== this;
|
|
2520
2507
|
}
|
|
2521
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2522
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
2508
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInput, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2509
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerInput, isStandalone: true, selector: "input[matTimepicker]", inputs: { matTimepicker: "matTimepicker", min: "min", max: "max" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()" }, properties: { "attr.aria-haspopup": "_timepicker ? \"dialog\" : null", "attr.aria-owns": "(_timepicker?.opened && _timepicker.id) || null", "attr.min": "min || null", "attr.max": "max || null", "disabled": "disabled" }, classAttribute: "mat-timepicker-input" }, providers: [
|
|
2523
2510
|
MAT_TIMEPICKER_VALUE_ACCESSOR,
|
|
2524
2511
|
MAT_TIMEPICKER_VALIDATORS,
|
|
2525
2512
|
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
|
|
2526
2513
|
], exportAs: ["matTimepickerInput"], usesInheritance: true, ngImport: i0 }); }
|
|
2527
2514
|
}
|
|
2528
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerInput, decorators: [{
|
|
2529
2516
|
type: Directive,
|
|
2530
2517
|
args: [{
|
|
2531
2518
|
selector: 'input[matTimepicker]',
|
|
@@ -2572,10 +2559,10 @@ class MatTimepickerApply {
|
|
|
2572
2559
|
this._timepicker._applyPendingSelection();
|
|
2573
2560
|
this._timepicker.close();
|
|
2574
2561
|
}
|
|
2575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2576
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
2562
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerApply, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2563
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerApply, isStandalone: true, selector: "[matTimepickerApply]", host: { listeners: { "click": "_applySelection()" } }, ngImport: i0 }); }
|
|
2577
2564
|
}
|
|
2578
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerApply, decorators: [{
|
|
2579
2566
|
type: Directive,
|
|
2580
2567
|
args: [{
|
|
2581
2568
|
selector: '[matTimepickerApply]',
|
|
@@ -2593,10 +2580,10 @@ class MatTimepickerCancel {
|
|
|
2593
2580
|
close() {
|
|
2594
2581
|
this._timepicker.close();
|
|
2595
2582
|
}
|
|
2596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2597
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
2583
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerCancel, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2584
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerCancel, isStandalone: true, selector: "[matTimepickerCancel]", host: { listeners: { "click": "close()" } }, ngImport: i0 }); }
|
|
2598
2585
|
}
|
|
2599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerCancel, decorators: [{
|
|
2600
2587
|
type: Directive,
|
|
2601
2588
|
args: [{
|
|
2602
2589
|
selector: '[matTimepickerCancel]',
|
|
@@ -2626,8 +2613,8 @@ class MatTimepickerActions {
|
|
|
2626
2613
|
this._portal?.detach();
|
|
2627
2614
|
}
|
|
2628
2615
|
}
|
|
2629
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
2616
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerActions, deps: [{ token: MatTimepickerBase }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerActions, isStandalone: true, selector: "mat-timepicker-actions", host: { classAttribute: "mat-timepicker-actions-container" }, viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
|
|
2631
2618
|
<ng-template>
|
|
2632
2619
|
<div class="mat-timepicker-actions">
|
|
2633
2620
|
<ng-content></ng-content>
|
|
@@ -2635,7 +2622,7 @@ class MatTimepickerActions {
|
|
|
2635
2622
|
</ng-template>
|
|
2636
2623
|
`, 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
2624
|
}
|
|
2638
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2625
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerActions, decorators: [{
|
|
2639
2626
|
type: Component,
|
|
2640
2627
|
args: [{ selector: 'mat-timepicker-actions', standalone: true, template: `
|
|
2641
2628
|
<ng-template>
|
|
@@ -2657,13 +2644,13 @@ class MatTimepickerDefaultActions {
|
|
|
2657
2644
|
constructor(_timepicker, _intl) {
|
|
2658
2645
|
this._timepicker = _timepicker;
|
|
2659
2646
|
this._intl = _intl;
|
|
2660
|
-
this.color = signal(undefined);
|
|
2647
|
+
this.color = signal(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
2661
2648
|
}
|
|
2662
2649
|
ngOnInit() {
|
|
2663
2650
|
this.color.set(this._timepicker.color);
|
|
2664
2651
|
}
|
|
2665
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2666
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
2652
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerDefaultActions, deps: [{ token: MatTimepickerBase }, { token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2653
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: MatTimepickerDefaultActions, isStandalone: true, selector: "mat-timepicker-default-actions", host: { classAttribute: "mat-timepicker-actions-container" }, ngImport: i0, template: `
|
|
2667
2654
|
<div class="mat-timepicker-actions">
|
|
2668
2655
|
<ng-content></ng-content>
|
|
2669
2656
|
<button [color]="color()" mat-button matTimepickerCancel>
|
|
@@ -2675,7 +2662,7 @@ class MatTimepickerDefaultActions {
|
|
|
2675
2662
|
</div>
|
|
2676
2663
|
`, 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
2664
|
}
|
|
2678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerDefaultActions, decorators: [{
|
|
2679
2666
|
type: Component,
|
|
2680
2667
|
args: [{ selector: 'mat-timepicker-default-actions', standalone: true, imports: [MatButtonModule, MatTimepickerApply, MatTimepickerCancel], template: `
|
|
2681
2668
|
<div class="mat-timepicker-actions">
|
|
@@ -2693,8 +2680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2693
2680
|
}], ctorParameters: () => [{ type: MatTimepickerBase }, { type: MatTimepickerIntl }] });
|
|
2694
2681
|
|
|
2695
2682
|
class MatTimepickerModule {
|
|
2696
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
2697
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
2683
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2684
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, imports: [OverlayModule,
|
|
2698
2685
|
PortalModule,
|
|
2699
2686
|
A11yModule,
|
|
2700
2687
|
MatTimepicker,
|
|
@@ -2731,7 +2718,7 @@ class MatTimepickerModule {
|
|
|
2731
2718
|
MatTimepickerDefaultActions,
|
|
2732
2719
|
MatTimepickerApply,
|
|
2733
2720
|
MatTimepickerCancel] }); }
|
|
2734
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
2721
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, providers: [
|
|
2735
2722
|
MatTimepickerIntl,
|
|
2736
2723
|
MAT_TIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
|
|
2737
2724
|
{ provide: MAT_DEFAULT_ACITONS, useValue: MatTimepickerDefaultActions },
|
|
@@ -2751,7 +2738,7 @@ class MatTimepickerModule {
|
|
|
2751
2738
|
MatTimePeriod,
|
|
2752
2739
|
MatTimepickerDefaultActions, CdkScrollableModule] }); }
|
|
2753
2740
|
}
|
|
2754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
2741
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatTimepickerModule, decorators: [{
|
|
2755
2742
|
type: NgModule,
|
|
2756
2743
|
args: [{
|
|
2757
2744
|
declarations: [],
|