@dhutaryan/ngx-mat-timepicker 20.1.0 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
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,
|
|
2
|
+
import { InjectionToken, Injectable, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, ContentChild, EventEmitter, DOCUMENT, Inject, Output, inject, LOCALE_ID, Optional, NgModule, HostListener, input, booleanAttribute, output, linkedSignal, computed, effect, SkipSelf, ElementRef, NgZone, Renderer2, ViewChild, afterNextRender, forwardRef, TemplateRef, signal } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
4
4
|
import { Overlay, FlexibleConnectedPositionStrategy, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
5
5
|
import * as i2$2 from '@angular/cdk/portal';
|
|
@@ -10,7 +10,7 @@ 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
16
|
import * as i3 from '@angular/material/core';
|
|
@@ -66,19 +66,19 @@ class MatTimepickerIntl {
|
|
|
66
66
|
/** A label for am text. */
|
|
67
67
|
this.pm = 'PM';
|
|
68
68
|
}
|
|
69
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
70
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
69
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
70
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerIntl, providedIn: 'root' }); }
|
|
71
71
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerIntl, decorators: [{
|
|
73
73
|
type: Injectable,
|
|
74
74
|
args: [{ providedIn: 'root' }]
|
|
75
75
|
}] });
|
|
76
76
|
|
|
77
77
|
class MatTimepickerToggleIcon {
|
|
78
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
79
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
78
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
79
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerToggleIcon, isStandalone: true, selector: "[matTimepickerToggleIcon]", ngImport: i0 }); }
|
|
80
80
|
}
|
|
81
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerToggleIcon, decorators: [{
|
|
82
82
|
type: Directive,
|
|
83
83
|
args: [{ selector: '[matTimepickerToggleIcon]', standalone: true }]
|
|
84
84
|
}] });
|
|
@@ -129,10 +129,10 @@ class MatTimepickerToggle {
|
|
|
129
129
|
this._stateChanges.unsubscribe();
|
|
130
130
|
this._stateChanges = merge(this._intl.changes, timepickerStateChanged, inputStateChanged, timepickerToggled).subscribe(() => this._cdr.markForCheck());
|
|
131
131
|
}
|
|
132
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerToggle, deps: [{ token: 'tabindex', attribute: true }, { token: MatTimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MatTimepickerToggle, isStandalone: true, selector: "mat-timepicker-toggle", inputs: { timepicker: ["for", "timepicker"], disabled: "disabled", disableRipple: "disableRipple", tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"] }, host: { listeners: { "click": "open($event)" }, properties: { "attr.tabindex": "null", "class.mat-timepicker-toggle-active": "timepicker && timepicker.opened", "class.mat-accent": "timepicker && timepicker.color === \"accent\"", "class.mat-warn": "timepicker && timepicker.color === \"warn\"" }, classAttribute: "mat-timepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: MatTimepickerToggleIcon, descendants: true }], exportAs: ["matTimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n type=\"button\"\n #button\n mat-icon-button\n [attr.aria-haspopup]=\"timepicker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel || _intl.openTimepickerLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\"\n>\n @if (!customIcon) {\n <svg\n class=\"mat-timepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M12.5,7H11v6l5.2,3.2l0.8-1.3l-4.5-2.7V7z\"\n />\n </svg>\n }\n\n <ng-content select=\"[matTimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field .mat-form-field-prefix .mat-timepicker-toggle-default-icon,.mat-form-field .mat-form-field-suffix .mat-timepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field .mat-form-field-prefix .mat-icon-button .mat-timepicker-toggle-default-icon,.mat-form-field .mat-form-field-suffix .mat-icon-button .mat-timepicker-toggle-default-icon{margin:auto}.mat-timepicker-toggle{color:var(--mat-timepicker-toggle-color, var(--mat-sys-on-surface-variant))}.mat-timepicker-toggle.mat-timepicker-toggle-active button{color:var(--mat-timepicker-toggle-active-color, var(--mat-sys-primary))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
134
134
|
}
|
|
135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerToggle, decorators: [{
|
|
136
136
|
type: Component,
|
|
137
137
|
args: [{ selector: 'mat-timepicker-toggle', standalone: true, imports: [MatButtonModule], exportAs: 'matTimepickerToggle', host: {
|
|
138
138
|
class: 'mat-timepicker-toggle',
|
|
@@ -317,10 +317,10 @@ class MatMinutesClockDial {
|
|
|
317
317
|
_getWindow() {
|
|
318
318
|
return this._document.defaultView || window;
|
|
319
319
|
}
|
|
320
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
321
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatMinutesClockDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MatMinutesClockDial, isStandalone: true, selector: "mat-minutes-clock-dial", inputs: { selectedMinute: "selectedMinute", interval: "interval", availableMinutes: "availableMinutes", color: "color", touchUi: "touchUi" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onUserAction($event)", "touchstart": "_onUserAction($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-minutes" }, exportAs: ["matMinutesClockDial"], ngImport: i0, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isMinutePoint\"\n [class.mat-clock-dial-hand-disabled]=\"disabled\"\n [ngStyle]=\"_handStyles()\"\n>\n <div class=\"mat-clock-dial-hand-point\" tabindex=\"0\"></div>\n</div>\n@for (minute of minutes; track minute.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(minute.value) ? 0 : -1\"\n [style.left.px]=\"minute.left\"\n [style.top.px]=\"minute.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(minute.value)\"\n [class.mat-clock-dial-cell-disabled]=\"minute.disabled\"\n [color]=\"_isActiveCell(minute.value) ? color : undefined\"\n [attr.aria-disabled]=\"minute.disabled || null\"\n >\n {{ minute.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
322
322
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatMinutesClockDial, decorators: [{
|
|
324
324
|
type: Component,
|
|
325
325
|
args: [{ selector: 'mat-minutes-clock-dial', standalone: true, imports: [CommonModule, MatButtonModule], exportAs: 'matMinutesClockDial', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
326
326
|
class: 'mat-clock-dial mat-clock-dial-minutes',
|
|
@@ -503,10 +503,10 @@ class MatHoursClockDial {
|
|
|
503
503
|
_getWindow() {
|
|
504
504
|
return this._document.defaultView || window;
|
|
505
505
|
}
|
|
506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
507
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatHoursClockDial, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MatHoursClockDial, isStandalone: true, selector: "mat-hours-clock-dial", inputs: { selectedHour: "selectedHour", isMeridiem: "isMeridiem", availableHours: "availableHours", color: "color", touchUi: "touchUi" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onUserAction($event)", "touchstart": "_onUserAction($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-hours" }, exportAs: ["matHoursClockDial"], ngImport: i0, template: "<div\n class=\"mat-clock-dial-hand\"\n [class.mat-clock-dial-hand-pointless]=\"isHour\"\n [class.mat-clock-dial-hand-disabled]=\"disabledHand\"\n [ngStyle]=\"_handStyles()\"\n></div>\n@for (hour of hours; track hour.value) {\n <button\n class=\"mat-clock-dial-cell\"\n mat-mini-fab\n disableRipple\n [tabIndex]=\"_isActiveCell(hour.value) ? 0 : -1\"\n [style.left.px]=\"hour.left\"\n [style.top.px]=\"hour.top\"\n [class.mat-clock-dial-cell-active]=\"_isActiveCell(hour.value)\"\n [class.mat-clock-dial-cell-disabled]=\"hour.disabled\"\n [color]=\"_isActiveCell(hour.value) ? color : undefined\"\n [attr.aria-disabled]=\"hour.disabled || null\"\n >\n {{ hour.displayValue }}\n </button>\n}\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%;background-color:var(--mat-timepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\";background-color:var(--mat-timepicker-clock-dial-center-point-color, var(--mat-sys-primary))}[mat-mini-fab].mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;box-shadow:none;color:var(--mat-timepicker-clock-dial-cell-text-color, var(--mat-sys-on-surface))}[mat-mini-fab].mat-clock-dial-cell:disabled{pointer-events:none}[mat-mini-fab].mat-clock-dial-cell:focus,[mat-mini-fab].mat-clock-dial-cell:hover,[mat-mini-fab].mat-clock-dial-cell:active,[mat-mini-fab].mat-clock-dial-cell:focus:active{box-shadow:none}[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active{background-color:var(--mat-timepicker-clock-dial-cell-active-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent));color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary))}.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn){background:var(--mat-timepicker-clock-dial-cell-unthemable-color, transparent)}.mat-clock-dial-cell.mat-clock-dial-cell-active{color:var(--mat-timepicker-clock-dial-cell-active-text-color, var(--mat-sys-on-primary));background-color:var(--mat-timepicker-clock-dial-cell-active-background-color, var(--mat-sys-primary))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled{color:var(--mat-timepicker-clock-dial-cell-disabled-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 40%, transparent))}.mat-clock-dial-cell.mat-clock-dial-cell-disabled .mat-mdc-button-persistent-ripple:before{background-color:var(--mat-timepicker-clock-dial-cell-disabled-background-color, transparent)}.mat-timepicker-content-touch .mat-clock-dial{width:20rem;height:20rem}.mat-timepicker-content-touch [mat-mini-fab].mat-clock-dial-cell{width:3rem;height:3rem;font-size:1.125rem}.mat-clock-dial-hand{position:absolute;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:-.25rem;left:-.25rem;width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-disabled{background-color:var(--mat-timepicker-clock-dial-hand-disabled-color, transparent)}.mat-clock-dial-hand.mat-clock-dial-hand-disabled:before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-disabled-color, color-mix(in srgb, var(--mat-sys-primary) 40%, transparent))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled){background-color:var(--mat-timepicker-clock-dial-hand-color, var(--mat-sys-primary))}.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled):before{background-color:var(--mat-timepicker-clock-dial-hand-value-point-color, var(--mat-sys-primary))}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
508
508
|
}
|
|
509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatHoursClockDial, decorators: [{
|
|
510
510
|
type: Component,
|
|
511
511
|
args: [{ selector: 'mat-hours-clock-dial', standalone: true, imports: [CommonModule, MatButtonModule], exportAs: 'matHoursClockDial', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
512
512
|
class: 'mat-clock-dial mat-clock-dial-hours',
|
|
@@ -741,10 +741,10 @@ class NativeDateTimeAdapter extends TimeAdapter {
|
|
|
741
741
|
d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
|
|
742
742
|
return dtf.format(d);
|
|
743
743
|
}
|
|
744
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
745
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
744
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeAdapter, deps: [{ token: MAT_TIME_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
745
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeAdapter }); }
|
|
746
746
|
}
|
|
747
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeAdapter, decorators: [{
|
|
748
748
|
type: Injectable
|
|
749
749
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
750
750
|
type: Optional
|
|
@@ -754,11 +754,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
754
754
|
}] }] });
|
|
755
755
|
|
|
756
756
|
class NativeDateTimeModule {
|
|
757
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
758
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
759
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
758
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] }); }
|
|
759
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, providers: [{ provide: TimeAdapter, useClass: NativeDateTimeAdapter }], imports: [PlatformModule] }); }
|
|
760
760
|
}
|
|
761
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NativeDateTimeModule, decorators: [{
|
|
762
762
|
type: NgModule,
|
|
763
763
|
args: [{
|
|
764
764
|
imports: [PlatformModule],
|
|
@@ -766,11 +766,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
766
766
|
}]
|
|
767
767
|
}] });
|
|
768
768
|
class MatNativeDateTimeModule {
|
|
769
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
770
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
771
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
770
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule }); }
|
|
771
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule, providers: [provideNativeDateTimeAdapter()] }); }
|
|
772
772
|
}
|
|
773
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatNativeDateTimeModule, decorators: [{
|
|
774
774
|
type: NgModule,
|
|
775
775
|
args: [{
|
|
776
776
|
providers: [provideNativeDateTimeAdapter()],
|
|
@@ -805,7 +805,6 @@ class MatTimeFaceBase {
|
|
|
805
805
|
this._setMaxHour();
|
|
806
806
|
this._setMinMinute();
|
|
807
807
|
this._setMaxMinute();
|
|
808
|
-
this._moveFocusOnNextTick = this.isMeridiem;
|
|
809
808
|
}
|
|
810
809
|
/** The minimum selectable time. */
|
|
811
810
|
get minTime() {
|
|
@@ -852,11 +851,9 @@ class MatTimeFaceBase {
|
|
|
852
851
|
this.availableMinutes = ALL_MINUTES;
|
|
853
852
|
this.availableHours = ALL_HOURS;
|
|
854
853
|
/**
|
|
855
|
-
* Used
|
|
856
|
-
* We need to schedule it, rather than do it immediately, because we have to wait
|
|
857
|
-
* for Angular to re-evaluate the view children.
|
|
854
|
+
* Used to focus the active cell after change detection has run.
|
|
858
855
|
*/
|
|
859
|
-
this.
|
|
856
|
+
this._focusActiveCellAfterViewChecked = false;
|
|
860
857
|
}
|
|
861
858
|
ngAfterContentInit() {
|
|
862
859
|
if (!this.selected) {
|
|
@@ -865,9 +862,9 @@ class MatTimeFaceBase {
|
|
|
865
862
|
}
|
|
866
863
|
}
|
|
867
864
|
ngAfterViewChecked() {
|
|
868
|
-
if (this.
|
|
869
|
-
this._moveFocusOnNextTick = false;
|
|
865
|
+
if (this._focusActiveCellAfterViewChecked) {
|
|
870
866
|
this.focusActiveCell();
|
|
867
|
+
this._focusActiveCellAfterViewChecked = false;
|
|
871
868
|
}
|
|
872
869
|
}
|
|
873
870
|
/** Handles hour selection. */
|
|
@@ -948,6 +945,7 @@ class MatTimeFaceBase {
|
|
|
948
945
|
default:
|
|
949
946
|
break;
|
|
950
947
|
}
|
|
948
|
+
this._scheduleFocusActiveCellAfterViewChecked();
|
|
951
949
|
}
|
|
952
950
|
_handleMinuteKeydown(event) {
|
|
953
951
|
const minutes = this.availableMinutes;
|
|
@@ -1064,10 +1062,14 @@ class MatTimeFaceBase {
|
|
|
1064
1062
|
}
|
|
1065
1063
|
}
|
|
1066
1064
|
}
|
|
1067
|
-
|
|
1068
|
-
|
|
1065
|
+
/** Schedules focus to be moved to the active cell on the next tick. */
|
|
1066
|
+
_scheduleFocusActiveCellAfterViewChecked() {
|
|
1067
|
+
this._focusActiveCellAfterViewChecked = true;
|
|
1068
|
+
}
|
|
1069
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeFaceBase, deps: [{ token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1070
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimeFaceBase, isStandalone: true, inputs: { selected: "selected", minTime: "minTime", maxTime: "maxTime", minuteInterval: "minuteInterval", isMeridiem: "isMeridiem", color: "color" }, outputs: { _userSelection: "_userSelection", selectedChange: "selectedChange" }, ngImport: i0 }); }
|
|
1069
1071
|
}
|
|
1070
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeFaceBase, decorators: [{
|
|
1071
1073
|
type: Directive
|
|
1072
1074
|
}], ctorParameters: () => [{ type: TimeAdapter, decorators: [{
|
|
1073
1075
|
type: Optional
|
|
@@ -1165,10 +1167,10 @@ class MatTimeInputBase {
|
|
|
1165
1167
|
this.inputElement.placeholder = this._withZeroPrefix(value);
|
|
1166
1168
|
this._cdr.markForCheck();
|
|
1167
1169
|
}
|
|
1168
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1169
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1170
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputBase, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1171
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimeInputBase, isStandalone: true, inputs: { value: "value" }, outputs: { timeChanged: "timeChanged" }, host: { listeners: { "keydown": "_keydown($event)" } }, ngImport: i0 }); }
|
|
1170
1172
|
}
|
|
1171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputBase, decorators: [{
|
|
1172
1174
|
type: Directive
|
|
1173
1175
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
1174
1176
|
type: Inject,
|
|
@@ -1187,10 +1189,10 @@ class MatTimepickerContentLayout {
|
|
|
1187
1189
|
/** Layout orientation. */
|
|
1188
1190
|
this.orientation = 'vertical';
|
|
1189
1191
|
}
|
|
1190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContentLayout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerContentLayout, isStandalone: true, selector: "mat-timepicker-content-layout", inputs: { title: "title", orientation: "orientation" }, host: { properties: { "class.mat-timepicker-content-layout-horizontal": "orientation === \"horizontal\"", "class.mat-timepicker-content-layout-vertical": "orientation === \"vertical\"" }, classAttribute: "mat-timepicker-content-layout" }, exportAs: ["matTimepickerContent"], ngImport: i0, template: "<h6 class=\"mat-timepicker-content-layout-title\">{{ title }}</h6>\n\n<div class=\"mat-timepicker-content-layout-container\">\n <div class=\"mat-timepicker-content-layout-values\">\n <div class=\"mat-timepicker-content-layout-hours\">\n <ng-content select=\"[hours]\"></ng-content>\n </div>\n <span class=\"mat-timepicker-content-layout-separator\">:</span>\n <div class=\"mat-timepicker-content-layout-minutes\">\n <ng-content select=\"[minutes]\"></ng-content>\n </div>\n\n <ng-content select=\"[mat-time-period]\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n</div>\n", styles: [".mat-timepicker-content-layout-title{color:var(--mat-timepicker-content-layout-title-color, var(--mat-sys-on-surface-variant));font-size:var(--mat-timepicker-content-layout-title-font-size, 12px);font-weight:var(--mat-timepicker-content-layout-title-font-weight, var(--mat-sys-title-medium-weight))}h6.mat-timepicker-content-layout-title{margin-top:0rem;margin-bottom:1.25rem;letter-spacing:.05rem}.mat-timepicker-content-layout-values{display:flex;justify-content:center}.mat-time-period{margin-left:.75rem}.mat-timepicker-content-layout-horizontal h6.mat-timepicker-content-layout-title{margin-bottom:0}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-container{display:flex;gap:4rem;align-items:center}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-values{flex-wrap:wrap}.mat-timepicker-content-layout-horizontal .mat-time-period{margin-top:.75rem;margin-left:0}.mat-timepicker-content-layout-hours,.mat-timepicker-content-layout-minutes{width:6rem}.mat-timepicker-content-layout-separator{display:flex;justify-content:center;align-self:center;width:1.5rem;height:1.75rem;font-weight:500;font-size:var(--mat-timepicker-content-layout-separator-font-size, 3rem);line-height:var(--mat-timepicker-content-layout-separator-line-height, 1.25rem)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1192
1194
|
}
|
|
1193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContentLayout, decorators: [{
|
|
1194
1196
|
type: Component,
|
|
1195
1197
|
args: [{ selector: 'mat-timepicker-content-layout', standalone: true, exportAs: 'matTimepickerContent', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1196
1198
|
class: 'mat-timepicker-content-layout',
|
|
@@ -1204,103 +1206,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1204
1206
|
}] } });
|
|
1205
1207
|
|
|
1206
1208
|
class MatTimePeriod {
|
|
1207
|
-
/** Whether the time period is vertically aligned. */
|
|
1208
|
-
get vertical() {
|
|
1209
|
-
return this._vertical;
|
|
1210
|
-
}
|
|
1211
|
-
set vertical(value) {
|
|
1212
|
-
this._vertical = coerceBooleanProperty(value);
|
|
1213
|
-
}
|
|
1214
|
-
get period() {
|
|
1215
|
-
return this._period;
|
|
1216
|
-
}
|
|
1217
|
-
set period(value) {
|
|
1218
|
-
this._period = value || 'am';
|
|
1219
|
-
}
|
|
1220
|
-
get disabledPeriod() {
|
|
1221
|
-
return this._disabledPeriod;
|
|
1222
|
-
}
|
|
1223
|
-
set disabledPeriod(value) {
|
|
1224
|
-
this._disabledPeriod = value;
|
|
1225
|
-
}
|
|
1226
1209
|
constructor(_intl) {
|
|
1227
1210
|
this._intl = _intl;
|
|
1228
|
-
this.
|
|
1229
|
-
this.
|
|
1230
|
-
this.
|
|
1231
|
-
this.periodChanged =
|
|
1211
|
+
this.vertical = input(true, { ...(ngDevMode ? { debugName: "vertical" } : {}), transform: booleanAttribute });
|
|
1212
|
+
this.period = input('am', ...(ngDevMode ? [{ debugName: "period" }] : []));
|
|
1213
|
+
this.disabledPeriod = input(null, ...(ngDevMode ? [{ debugName: "disabledPeriod" }] : []));
|
|
1214
|
+
this.periodChanged = output();
|
|
1215
|
+
this._currentPeriod = linkedSignal(() => this.period(), ...(ngDevMode ? [{ debugName: "_currentPeriod" }] : []));
|
|
1232
1216
|
}
|
|
1233
1217
|
setPeriod(event, period) {
|
|
1234
1218
|
event.preventDefault();
|
|
1235
|
-
this.period
|
|
1219
|
+
this._currentPeriod.set(period);
|
|
1236
1220
|
this.periodChanged.emit(period);
|
|
1237
1221
|
}
|
|
1238
1222
|
_isPeriodDisabled(period) {
|
|
1239
|
-
if (!this.disabledPeriod) {
|
|
1223
|
+
if (!this.disabledPeriod()) {
|
|
1240
1224
|
return false;
|
|
1241
1225
|
}
|
|
1242
|
-
return this.disabledPeriod === period;
|
|
1226
|
+
return this.disabledPeriod() === period;
|
|
1243
1227
|
}
|
|
1244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1245
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1228
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimePeriod, deps: [{ token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MatTimePeriod, isStandalone: true, selector: "mat-time-period", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, period: { classPropertyName: "period", publicName: "period", isSignal: true, isRequired: false, transformFunction: null }, disabledPeriod: { classPropertyName: "disabledPeriod", publicName: "disabledPeriod", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { periodChanged: "periodChanged" }, host: { properties: { "class.mat-time-period-vertical": "vertical()", "class.mat-time-period-horizontal": "!vertical()", "attr.aria-orientation": "vertical() ? \"vertical\" : \"horizontal\"" }, classAttribute: "mat-time-period" }, ngImport: i0, template: "<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"_currentPeriod() === 'am'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('am')\"\n (click)=\"setPeriod($event, 'am')\"\n (keydown.space)=\"setPeriod($event, 'am')\"\n>\n {{ _intl.am }}\n</div>\n<mat-divider [vertical]=\"!vertical()\"></mat-divider>\n<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"_currentPeriod() === 'pm'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('pm')\"\n (click)=\"setPeriod($event, 'pm')\"\n (keydown.space)=\"setPeriod($event, 'pm')\"\n>\n {{ _intl.pm }}\n</div>\n", styles: [".mat-time-period{display:flex;text-align:center;border-width:1px;border-style:solid;border-radius:.25rem;box-sizing:border-box;border-color:var(--mat-timepicker-time-period-border-color, var(--mat-sys-outline))}.mat-time-period-vertical{flex-direction:column;width:3.25rem;height:4.5rem}.mat-time-period-vertical .mat-time-period-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-time-period-vertical .mat-time-period-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-horizontal{flex-direction:row;max-width:13.5rem;width:100%;height:2.5rem}.mat-time-period-horizontal .mat-time-period-item:first-child{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.mat-time-period-horizontal .mat-time-period-item:last-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-item{display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:100%;font-size:.875rem;font-weight:500;cursor:pointer}.mat-time-period-item-active{color:var(--mat-timepicker-time-period-active-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mat-timepicker-time-period-active-background-color, var(--mat-sys-tertiary-container))}.mat-time-period-item-disabled{pointer-events:none;color:var(--mat-timepicker-time-period-disabled-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-time-period-disabled-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 20%, transparent))}.mat-divider{border-top-color:inherit}.mat-divider.mat-divider-vertical{border-right-color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1246
1230
|
}
|
|
1247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimePeriod, decorators: [{
|
|
1248
1232
|
type: Component,
|
|
1249
1233
|
args: [{ selector: 'mat-time-period', standalone: true, imports: [MatDividerModule, MatRippleModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1250
1234
|
class: 'mat-time-period',
|
|
1251
|
-
'[class.mat-time-period-vertical]': 'vertical',
|
|
1252
|
-
'[class.mat-time-period-horizontal]': '!vertical',
|
|
1253
|
-
'[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
|
|
1254
|
-
}, template: "<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"
|
|
1255
|
-
}], ctorParameters: () => [{ type: MatTimepickerIntl }], propDecorators: { vertical: [{
|
|
1256
|
-
type: Input
|
|
1257
|
-
}], period: [{
|
|
1258
|
-
type: Input
|
|
1259
|
-
}], disabledPeriod: [{
|
|
1260
|
-
type: Input
|
|
1261
|
-
}], periodChanged: [{
|
|
1262
|
-
type: Output
|
|
1263
|
-
}] } });
|
|
1235
|
+
'[class.mat-time-period-vertical]': 'vertical()',
|
|
1236
|
+
'[class.mat-time-period-horizontal]': '!vertical()',
|
|
1237
|
+
'[attr.aria-orientation]': 'vertical() ? "vertical" : "horizontal"',
|
|
1238
|
+
}, template: "<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"_currentPeriod() === 'am'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('am')\"\n (click)=\"setPeriod($event, 'am')\"\n (keydown.space)=\"setPeriod($event, 'am')\"\n>\n {{ _intl.am }}\n</div>\n<mat-divider [vertical]=\"!vertical()\"></mat-divider>\n<div\n tabindex=\"0\"\n class=\"mat-time-period-item\"\n matRipple\n [class.mat-time-period-item-active]=\"_currentPeriod() === 'pm'\"\n [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('pm')\"\n (click)=\"setPeriod($event, 'pm')\"\n (keydown.space)=\"setPeriod($event, 'pm')\"\n>\n {{ _intl.pm }}\n</div>\n", styles: [".mat-time-period{display:flex;text-align:center;border-width:1px;border-style:solid;border-radius:.25rem;box-sizing:border-box;border-color:var(--mat-timepicker-time-period-border-color, var(--mat-sys-outline))}.mat-time-period-vertical{flex-direction:column;width:3.25rem;height:4.5rem}.mat-time-period-vertical .mat-time-period-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-time-period-vertical .mat-time-period-item:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-horizontal{flex-direction:row;max-width:13.5rem;width:100%;height:2.5rem}.mat-time-period-horizontal .mat-time-period-item:first-child{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.mat-time-period-horizontal .mat-time-period-item:last-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}.mat-time-period-item{display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:100%;font-size:.875rem;font-weight:500;cursor:pointer}.mat-time-period-item-active{color:var(--mat-timepicker-time-period-active-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mat-timepicker-time-period-active-background-color, var(--mat-sys-tertiary-container))}.mat-time-period-item-disabled{pointer-events:none;color:var(--mat-timepicker-time-period-disabled-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-time-period-disabled-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 20%, transparent))}.mat-divider{border-top-color:inherit}.mat-divider.mat-divider-vertical{border-right-color:inherit}\n"] }]
|
|
1239
|
+
}], ctorParameters: () => [{ type: MatTimepickerIntl }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], period: [{ type: i0.Input, args: [{ isSignal: true, alias: "period", required: false }] }], disabledPeriod: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledPeriod", required: false }] }], periodChanged: [{ type: i0.Output, args: ["periodChanged"] }] } });
|
|
1264
1240
|
|
|
1265
1241
|
class MatClockDials extends MatTimeFaceBase {
|
|
1266
|
-
constructor(_intl, _timeAdapter,
|
|
1242
|
+
constructor(_intl, _timeAdapter, _elementRef, _cdr) {
|
|
1267
1243
|
super(_timeAdapter);
|
|
1268
1244
|
this._intl = _intl;
|
|
1269
|
-
this._ngZone = _ngZone;
|
|
1270
1245
|
this._elementRef = _elementRef;
|
|
1271
1246
|
this._cdr = _cdr;
|
|
1272
|
-
|
|
1247
|
+
/** Layout orientation. */
|
|
1248
|
+
this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
1249
|
+
/** Whether the timepicker UI is in touch mode. */
|
|
1250
|
+
this.touchUi = input(false, ...(ngDevMode ? [{ debugName: "touchUi" }] : []));
|
|
1251
|
+
/** Whether the current view for the timepicker. */
|
|
1252
|
+
this.currentView = input('hours', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
|
|
1253
|
+
/** Emits when the view is changed. */
|
|
1254
|
+
this.viewChanged = output();
|
|
1255
|
+
this.isHoursView = computed(() => this._view() === 'hours', ...(ngDevMode ? [{ debugName: "isHoursView" }] : []));
|
|
1273
1256
|
/** Specifies the view of clock dial. */
|
|
1274
|
-
this._view =
|
|
1275
|
-
|
|
1276
|
-
}
|
|
1277
|
-
ngOnInit() {
|
|
1278
|
-
this._viewSubscription = this._view.subscribe((view) => this.isHoursView.set(view === 'hours'));
|
|
1279
|
-
}
|
|
1280
|
-
ngOnDestroy() {
|
|
1281
|
-
this._viewSubscription?.unsubscribe();
|
|
1282
|
-
this._viewSubscription = null;
|
|
1257
|
+
this._view = linkedSignal(() => this.currentView(), ...(ngDevMode ? [{ debugName: "_view" }] : []));
|
|
1258
|
+
effect(() => this.viewChanged.emit(this._view()));
|
|
1283
1259
|
}
|
|
1284
1260
|
/** Changes clock dial view. */
|
|
1285
1261
|
onViewChange(event, view) {
|
|
1286
1262
|
event.preventDefault();
|
|
1287
|
-
this._view.
|
|
1263
|
+
this._view.set(view);
|
|
1288
1264
|
}
|
|
1289
1265
|
focusActiveCell() {
|
|
1290
|
-
this.
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
activePoint.focus();
|
|
1301
|
-
}
|
|
1302
|
-
});
|
|
1303
|
-
});
|
|
1266
|
+
const activeCell = this._elementRef.nativeElement.querySelector('.mat-timepicker-content .mat-clock-dial-cell-active');
|
|
1267
|
+
if (activeCell) {
|
|
1268
|
+
activeCell.focus();
|
|
1269
|
+
return;
|
|
1270
|
+
}
|
|
1271
|
+
const activePoint = this._elementRef.nativeElement.querySelector('.mat-timepicker-content .mat-clock-dial-hand-point');
|
|
1272
|
+
if (activePoint) {
|
|
1273
|
+
// if no active cell we need to focus a small dot
|
|
1274
|
+
activePoint.focus();
|
|
1275
|
+
}
|
|
1304
1276
|
}
|
|
1305
1277
|
_withZeroPrefix(value) {
|
|
1306
1278
|
if (value === 0) {
|
|
@@ -1315,15 +1287,15 @@ class MatClockDials extends MatTimeFaceBase {
|
|
|
1315
1287
|
/** Handles hour selection. */
|
|
1316
1288
|
_onHourChanged({ hour, changeView = false, }) {
|
|
1317
1289
|
if (changeView) {
|
|
1318
|
-
this._view.
|
|
1290
|
+
this._view.set('minutes');
|
|
1319
1291
|
}
|
|
1320
1292
|
this._onHourSelected(hour);
|
|
1321
1293
|
this._cdr.detectChanges();
|
|
1322
1294
|
}
|
|
1323
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1324
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatClockDials, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MatClockDials, isStandalone: true, selector: "mat-clock-dials", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, touchUi: { classPropertyName: "touchUi", publicName: "touchUi", isSignal: true, isRequired: false, transformFunction: null }, currentView: { classPropertyName: "currentView", publicName: "currentView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, host: { attributes: { "role": "dial" }, classAttribute: "mat-clock-dials" }, exportAs: ["matClockDials"], usesInheritance: true, ngImport: i0, template: "<mat-timepicker-content-layout\n [title]=\"_intl.dialsTitle\"\n [orientation]=\"orientation()\"\n>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n hours\n [class.mat-clock-dial-value-active]=\"isHoursView()\"\n (click)=\"onViewChange($event, 'hours')\"\n (keydown.space)=\"onViewChange($event, 'hours')\"\n >\n {{ _withZeroPrefix(selectedHour) }}\n </div>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n minutes\n [class.mat-clock-dial-value-active]=\"!isHoursView()\"\n (click)=\"onViewChange($event, 'minutes')\"\n (keydown.space)=\"onViewChange($event, 'minutes')\"\n >\n {{ _withZeroPrefix(selectedMinute) }}\n </div>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n [vertical]=\"orientation() === 'vertical'\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n\n <div\n class=\"mat-clock-dial-faces\"\n [class.mat-clock-dial-faces-horizontal]=\"orientation() === 'horizontal'\"\n >\n @if (isHoursView()) {\n <mat-hours-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedHour]=\"selectedHour\"\n [isMeridiem]=\"isMeridiem\"\n [availableHours]=\"_getAvailableHours()\"\n [touchUi]=\"touchUi()\"\n (selectedChange)=\"_onHourChanged($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n ></mat-hours-clock-dial>\n }\n\n @if (!isHoursView()) {\n <mat-minutes-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedMinute]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n [touchUi]=\"touchUi()\"\n (selectedChange)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n ></mat-minutes-clock-dial>\n }\n </div>\n</mat-timepicker-content-layout>\n", styles: [".mat-clock-dial-values{display:flex;width:100%}.mat-clock-dial-value{display:flex;align-items:center;justify-content:center;height:4.5rem;border-radius:.25rem;cursor:pointer;background-color:var(--mat-timepicker-clock-dial-value-background-color, var(--mat-sys-surface-container-highest));font-family:var(--mat-timepicker-clock-dial-value-font-family, var(--mat-sys-body-medium-font));font-size:var(--mat-timepicker-clock-dial-value-font-size, 2rem);letter-spacing:var(--mat-timepicker-clock-dial-value-letter-spacing, .5px)}.mat-clock-dial-value.mat-clock-dial-value-active{color:var(--mat-timepicker-clock-dial-value-active-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-clock-dial-value-active-background-color, var(--mat-sys-primary-container))}.mat-clock-dial-faces{margin-top:2.25rem}.mat-clock-dial-faces.mat-clock-dial-faces-horizontal{margin-top:0}.mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover{cursor:default}.mat-clock-dial-enter{animation:clock-dial-enter-animation .1s ease-out}.mat-clock-dial-leave{animation:clock-dial-leave-animation 0s ease-in}@keyframes clock-dial-enter-animation{0%{opacity:0;visibility:hidden;transform:scale(1.05)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes clock-dial-leave-animation{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(1.05)}}\n"], dependencies: [{ kind: "component", type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title", "orientation"], exportAs: ["matTimepickerContent"] }, { kind: "component", type: MatHoursClockDial, selector: "mat-hours-clock-dial", inputs: ["selectedHour", "isMeridiem", "availableHours", "color", "touchUi"], outputs: ["selectedChange"], exportAs: ["matHoursClockDial"] }, { kind: "component", type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: ["selectedMinute", "interval", "availableMinutes", "color", "touchUi"], outputs: ["selectedChange"], exportAs: ["matMinutesClockDial"] }, { kind: "component", type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1325
1297
|
}
|
|
1326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatClockDials, decorators: [{
|
|
1327
1299
|
type: Component,
|
|
1328
1300
|
args: [{ selector: 'mat-clock-dials', standalone: true, imports: [
|
|
1329
1301
|
MatTimepickerContentLayout,
|
|
@@ -1333,14 +1305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1333
1305
|
], exportAs: 'matClockDials', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1334
1306
|
role: 'dial',
|
|
1335
1307
|
class: 'mat-clock-dials',
|
|
1336
|
-
}, template: "<mat-timepicker-content-layout\n [title]=\"_intl.dialsTitle\"\n [orientation]=\"orientation\"\n>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n hours\n [class.mat-clock-dial-value-active]=\"isHoursView()\"\n (click)=\"onViewChange($event, 'hours')\"\n (keydown.space)=\"onViewChange($event, 'hours')\"\n >\n {{ _withZeroPrefix(selectedHour) }}\n </div>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n minutes\n [class.mat-clock-dial-value-active]=\"!isHoursView()\"\n (click)=\"onViewChange($event, 'minutes')\"\n (keydown.space)=\"onViewChange($event, 'minutes')\"\n >\n {{ _withZeroPrefix(selectedMinute) }}\n </div>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n [vertical]=\"orientation === 'vertical'\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n\n <div\n class=\"mat-clock-dial-faces\"\n [class.mat-clock-dial-faces-horizontal]=\"orientation === 'horizontal'\"\n >\n @if (isHoursView()) {\n <mat-hours-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedHour]=\"selectedHour\"\n [isMeridiem]=\"isMeridiem\"\n [availableHours]=\"_getAvailableHours()\"\n [touchUi]=\"touchUi\"\n (selectedChange)=\"_onHourChanged($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n ></mat-hours-clock-dial>\n }\n\n @if (!isHoursView()) {\n <mat-minutes-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedMinute]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n [touchUi]=\"touchUi\"\n (selectedChange)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n ></mat-minutes-clock-dial>\n }\n </div>\n</mat-timepicker-content-layout>\n", styles: [".mat-clock-dial-values{display:flex;width:100%}.mat-clock-dial-value{display:flex;align-items:center;justify-content:center;height:4.5rem;border-radius:.25rem;cursor:pointer;background-color:var(--mat-timepicker-clock-dial-value-background-color, var(--mat-sys-surface-container-highest));font-family:var(--mat-timepicker-clock-dial-value-font-family, var(--mat-sys-body-medium-font));font-size:var(--mat-timepicker-clock-dial-value-font-size, 2rem);letter-spacing:var(--mat-timepicker-clock-dial-value-letter-spacing, .5px)}.mat-clock-dial-value.mat-clock-dial-value-active{color:var(--mat-timepicker-clock-dial-value-active-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-clock-dial-value-active-background-color, var(--mat-sys-primary-container))}.mat-clock-dial-faces{margin-top:2.25rem}.mat-clock-dial-faces.mat-clock-dial-faces-horizontal{margin-top:0}.mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover{cursor:default}.mat-clock-dial-enter{animation:clock-dial-enter-animation .1s ease-out}.mat-clock-dial-leave{animation:clock-dial-leave-animation 0s ease-in}@keyframes clock-dial-enter-animation{0%{opacity:0;visibility:hidden;transform:scale(1.05)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes clock-dial-leave-animation{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(1.05)}}\n"] }]
|
|
1308
|
+
}, template: "<mat-timepicker-content-layout\n [title]=\"_intl.dialsTitle\"\n [orientation]=\"orientation()\"\n>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n hours\n [class.mat-clock-dial-value-active]=\"isHoursView()\"\n (click)=\"onViewChange($event, 'hours')\"\n (keydown.space)=\"onViewChange($event, 'hours')\"\n >\n {{ _withZeroPrefix(selectedHour) }}\n </div>\n <div\n tabindex=\"0\"\n class=\"mat-clock-dial-value\"\n minutes\n [class.mat-clock-dial-value-active]=\"!isHoursView()\"\n (click)=\"onViewChange($event, 'minutes')\"\n (keydown.space)=\"onViewChange($event, 'minutes')\"\n >\n {{ _withZeroPrefix(selectedMinute) }}\n </div>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n [vertical]=\"orientation() === 'vertical'\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n\n <div\n class=\"mat-clock-dial-faces\"\n [class.mat-clock-dial-faces-horizontal]=\"orientation() === 'horizontal'\"\n >\n @if (isHoursView()) {\n <mat-hours-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedHour]=\"selectedHour\"\n [isMeridiem]=\"isMeridiem\"\n [availableHours]=\"_getAvailableHours()\"\n [touchUi]=\"touchUi()\"\n (selectedChange)=\"_onHourChanged($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n ></mat-hours-clock-dial>\n }\n\n @if (!isHoursView()) {\n <mat-minutes-clock-dial\n animate.enter=\"mat-clock-dial-enter\"\n animate.leave=\"mat-clock-dial-leave\"\n [color]=\"color\"\n [selectedMinute]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n [touchUi]=\"touchUi()\"\n (selectedChange)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n ></mat-minutes-clock-dial>\n }\n </div>\n</mat-timepicker-content-layout>\n", styles: [".mat-clock-dial-values{display:flex;width:100%}.mat-clock-dial-value{display:flex;align-items:center;justify-content:center;height:4.5rem;border-radius:.25rem;cursor:pointer;background-color:var(--mat-timepicker-clock-dial-value-background-color, var(--mat-sys-surface-container-highest));font-family:var(--mat-timepicker-clock-dial-value-font-family, var(--mat-sys-body-medium-font));font-size:var(--mat-timepicker-clock-dial-value-font-size, 2rem);letter-spacing:var(--mat-timepicker-clock-dial-value-letter-spacing, .5px)}.mat-clock-dial-value.mat-clock-dial-value-active{color:var(--mat-timepicker-clock-dial-value-active-text-color, var(--mat-sys-on-surface-variant));background-color:var(--mat-timepicker-clock-dial-value-active-background-color, var(--mat-sys-primary-container))}.mat-clock-dial-faces{margin-top:2.25rem}.mat-clock-dial-faces.mat-clock-dial-faces-horizontal{margin-top:0}.mat-clock-dial-cell.mat-clock-dial-cell-disabled:hover{cursor:default}.mat-clock-dial-enter{animation:clock-dial-enter-animation .1s ease-out}.mat-clock-dial-leave{animation:clock-dial-leave-animation 0s ease-in}@keyframes clock-dial-enter-animation{0%{opacity:0;visibility:hidden;transform:scale(1.05)}to{opacity:1;visibility:visible;transform:scale(1)}}@keyframes clock-dial-leave-animation{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(1.05)}}\n"] }]
|
|
1337
1309
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1338
1310
|
type: Optional
|
|
1339
|
-
}] }, { type: i0.
|
|
1340
|
-
type: Input
|
|
1341
|
-
}], touchUi: [{
|
|
1342
|
-
type: Input
|
|
1343
|
-
}] } });
|
|
1311
|
+
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], touchUi: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUi", required: false }] }], currentView: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentView", required: false }] }], viewChanged: [{ type: i0.Output, args: ["viewChanged"] }] } });
|
|
1344
1312
|
|
|
1345
1313
|
class MatHourInput extends MatTimeInputBase {
|
|
1346
1314
|
get availableHours() {
|
|
@@ -1387,10 +1355,10 @@ class MatHourInput extends MatTimeInputBase {
|
|
|
1387
1355
|
}
|
|
1388
1356
|
return Math.min(Math.max(value, Math.min(...this.availableHours)), Math.max(...this.availableHours));
|
|
1389
1357
|
}
|
|
1390
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1391
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatHourInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1359
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatHourInput, isStandalone: true, selector: "input[matHourInput]", inputs: { availableHours: "availableHours", isMeridiem: "isMeridiem" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1392
1360
|
}
|
|
1393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatHourInput, decorators: [{
|
|
1394
1362
|
type: Directive,
|
|
1395
1363
|
args: [{
|
|
1396
1364
|
selector: 'input[matHourInput]',
|
|
@@ -1398,8 +1366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1398
1366
|
exportAs: 'matTimeInput',
|
|
1399
1367
|
host: {
|
|
1400
1368
|
class: 'mat-time-input',
|
|
1401
|
-
'(focus)': 'focus(
|
|
1402
|
-
'(blur)': 'blur(
|
|
1369
|
+
'(focus)': 'focus()',
|
|
1370
|
+
'(blur)': 'blur()',
|
|
1403
1371
|
},
|
|
1404
1372
|
}]
|
|
1405
1373
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
@@ -1439,10 +1407,10 @@ class MatMinuteInput extends MatTimeInputBase {
|
|
|
1439
1407
|
const roundedValue = Math.round(value / this.interval) * this.interval;
|
|
1440
1408
|
return Math.min(Math.max(roundedValue, Math.min(...this.availableMinutes)), Math.max(...this.availableMinutes));
|
|
1441
1409
|
}
|
|
1442
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1443
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1410
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatMinuteInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1411
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatMinuteInput, isStandalone: true, selector: "input[matMinuteInput]", inputs: { interval: "interval", availableMinutes: "availableMinutes" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0 }); }
|
|
1444
1412
|
}
|
|
1445
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatMinuteInput, decorators: [{
|
|
1446
1414
|
type: Directive,
|
|
1447
1415
|
args: [{
|
|
1448
1416
|
selector: 'input[matMinuteInput]',
|
|
@@ -1450,8 +1418,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1450
1418
|
exportAs: 'matTimeInput',
|
|
1451
1419
|
host: {
|
|
1452
1420
|
class: 'mat-time-input',
|
|
1453
|
-
'(focus)': 'focus(
|
|
1454
|
-
'(blur)': 'blur(
|
|
1421
|
+
'(focus)': 'focus()',
|
|
1422
|
+
'(blur)': 'blur()',
|
|
1455
1423
|
},
|
|
1456
1424
|
}]
|
|
1457
1425
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
@@ -1463,10 +1431,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1463
1431
|
type: Input
|
|
1464
1432
|
}] } });
|
|
1465
1433
|
class MatTimeInputs extends MatTimeFaceBase {
|
|
1466
|
-
constructor(_intl, _timeAdapter,
|
|
1434
|
+
constructor(_intl, _timeAdapter, _elementRef) {
|
|
1467
1435
|
super(_timeAdapter);
|
|
1468
1436
|
this._intl = _intl;
|
|
1469
|
-
this._ngZone = _ngZone;
|
|
1470
1437
|
this._elementRef = _elementRef;
|
|
1471
1438
|
/**
|
|
1472
1439
|
* Using for skipping that focus shouldn't be moved to the active cell on the next tick.
|
|
@@ -1475,20 +1442,16 @@ class MatTimeInputs extends MatTimeFaceBase {
|
|
|
1475
1442
|
this._skipNextTickFocus = false;
|
|
1476
1443
|
}
|
|
1477
1444
|
focusActiveCell() {
|
|
1478
|
-
this.
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
this._skipNextTickFocus = true;
|
|
1484
|
-
}
|
|
1485
|
-
});
|
|
1486
|
-
});
|
|
1445
|
+
const activeCell = this._elementRef.nativeElement.querySelector('.mat-timepicker-content input');
|
|
1446
|
+
if (activeCell && !this._skipNextTickFocus) {
|
|
1447
|
+
activeCell.focus();
|
|
1448
|
+
this._skipNextTickFocus = true;
|
|
1449
|
+
}
|
|
1487
1450
|
}
|
|
1488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1451
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputs, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MatTimeInputs, isStandalone: true, selector: "mat-time-inputs", host: { classAttribute: "mat-time-inputs" }, usesInheritance: true, ngImport: i0, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n hours\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matHourInput\n [isMeridiem]=\"isMeridiem\"\n [value]=\"selectedHour\"\n [availableHours]=\"_getAvailableHours()\"\n (timeChanged)=\"_onHourSelected($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n />\n <mat-hint>{{ _intl.hourInputHint }}</mat-hint>\n </mat-form-field>\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n minutes\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matMinuteInput\n [value]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n (timeChanged)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n />\n <mat-hint>{{ _intl.minuteInputHint }}</mat-hint>\n </mat-form-field>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n</mat-timepicker-content-layout>\n", styles: [".mat-time-inputs{display:block}.mat-time-inputs .mat-timepicker-content-layout-separator{margin-top:-1.5rem}.mat-time-inputs-field{display:block}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-flex{margin:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{top:0;margin:0;background-color:var(--mat-timepicker-time-inputs-field-background-color, var(--mat-sys-surface-container-highest))}.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__leading,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__notch,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__trailing{border-style:none}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{margin-top:.75rem;line-height:1;letter-spacing:.05rem}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding-left:0}.mat-time-inputs-field.mat-form-field-appearance-outline input.mat-mdc-input-element{font-size:var(--mat-timepicker-time-inputs-field-font-size, 2rem);line-height:var(--mat-timepicker-time-inputs-field-line-height, 1.25)}.mat-time-inputs-field .mat-mdc-form-field-bottom-align:before{height:0}.mat-time-inputs-field .mat-mdc-form-field-infix{border-top:none;text-align:center}.mat-time-inputs-field input.mat-mdc-input-element{margin-top:0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title", "orientation"], exportAs: ["matTimepickerContent"] }, { kind: "directive", type: MatHourInput, selector: "input[matHourInput]", inputs: ["availableHours", "isMeridiem"], exportAs: ["matTimeInput"] }, { kind: "directive", type: MatMinuteInput, selector: "input[matMinuteInput]", inputs: ["interval", "availableMinutes"], exportAs: ["matTimeInput"] }, { kind: "component", type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1490
1453
|
}
|
|
1491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1454
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeInputs, decorators: [{
|
|
1492
1455
|
type: Component,
|
|
1493
1456
|
args: [{ selector: 'mat-time-inputs', standalone: true, imports: [
|
|
1494
1457
|
MatFormFieldModule,
|
|
@@ -1502,7 +1465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1502
1465
|
}, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n hours\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matHourInput\n [isMeridiem]=\"isMeridiem\"\n [value]=\"selectedHour\"\n [availableHours]=\"_getAvailableHours()\"\n (timeChanged)=\"_onHourSelected($event)\"\n (keydown)=\"_onKeydown($event, 'hour')\"\n />\n <mat-hint>{{ _intl.hourInputHint }}</mat-hint>\n </mat-form-field>\n <mat-form-field\n class=\"mat-time-inputs-field\"\n appearance=\"outline\"\n minutes\n [color]=\"color\"\n >\n <input\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n matInput\n matMinuteInput\n [value]=\"selectedMinute\"\n [interval]=\"minuteInterval\"\n [availableMinutes]=\"availableMinutes\"\n (timeChanged)=\"_onMinuteSelected($event)\"\n (keydown)=\"_onKeydown($event, 'minute')\"\n />\n <mat-hint>{{ _intl.minuteInputHint }}</mat-hint>\n </mat-form-field>\n\n @if (isMeridiem) {\n <ng-container mat-time-period>\n <mat-time-period\n [period]=\"period\"\n [disabledPeriod]=\"disabledPeriod\"\n (periodChanged)=\"_onPeriodChanged($event)\"\n ></mat-time-period>\n </ng-container>\n }\n</mat-timepicker-content-layout>\n", styles: [".mat-time-inputs{display:block}.mat-time-inputs .mat-timepicker-content-layout-separator{margin-top:-1.5rem}.mat-time-inputs-field{display:block}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-flex{margin:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{top:0;margin:0;background-color:var(--mat-timepicker-time-inputs-field-background-color, var(--mat-sys-surface-container-highest))}.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__leading,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__notch,.mat-time-inputs-field.mat-form-field-appearance-outline:not(.mat-focused) .mdc-notched-outline__trailing{border-style:none}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{margin-top:.75rem;line-height:1;letter-spacing:.05rem}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{padding-left:0}.mat-time-inputs-field.mat-form-field-appearance-outline input.mat-mdc-input-element{font-size:var(--mat-timepicker-time-inputs-field-font-size, 2rem);line-height:var(--mat-timepicker-time-inputs-field-line-height, 1.25)}.mat-time-inputs-field .mat-mdc-form-field-bottom-align:before{height:0}.mat-time-inputs-field .mat-mdc-form-field-infix{border-top:none;text-align:center}.mat-time-inputs-field input.mat-mdc-input-element{margin-top:0;text-align:center}\n"] }]
|
|
1503
1466
|
}], ctorParameters: () => [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
|
|
1504
1467
|
type: Optional
|
|
1505
|
-
}] }, { type: i0.
|
|
1468
|
+
}] }, { type: i0.ElementRef }] });
|
|
1506
1469
|
|
|
1507
1470
|
/**
|
|
1508
1471
|
* A selection model containing a time selection.
|
|
@@ -1528,10 +1491,10 @@ class MatTimeSelectionModel {
|
|
|
1528
1491
|
ngOnDestroy() {
|
|
1529
1492
|
this._selectionChanged.complete();
|
|
1530
1493
|
}
|
|
1531
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1532
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1495
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeSelectionModel }); }
|
|
1533
1496
|
}
|
|
1534
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimeSelectionModel, decorators: [{
|
|
1535
1498
|
type: Injectable
|
|
1536
1499
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1537
1500
|
/**
|
|
@@ -1554,10 +1517,10 @@ class MatSingleTimeSelectionModel extends MatTimeSelectionModel {
|
|
|
1554
1517
|
clone.updateSelection(this.selection, this);
|
|
1555
1518
|
return clone;
|
|
1556
1519
|
}
|
|
1557
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1558
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSingleTimeSelectionModel, deps: [{ token: TimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1521
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSingleTimeSelectionModel }); }
|
|
1559
1522
|
}
|
|
1560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSingleTimeSelectionModel, decorators: [{
|
|
1561
1524
|
type: Injectable
|
|
1562
1525
|
}], ctorParameters: () => [{ type: TimeAdapter }] });
|
|
1563
1526
|
function MAT_SINGLE_TIME_SELECTION_MODEL_FACTORY(parent, adapter) {
|
|
@@ -1619,7 +1582,13 @@ class MatTimepickerContent {
|
|
|
1619
1582
|
this._stateChanges = this.timepicker.stateChanges.subscribe(() => {
|
|
1620
1583
|
this._changeDetectorRef.markForCheck();
|
|
1621
1584
|
});
|
|
1622
|
-
(this.
|
|
1585
|
+
if (this._animationsDisabled) {
|
|
1586
|
+
(this._dials || this._inputs)?.focusActiveCell();
|
|
1587
|
+
return;
|
|
1588
|
+
}
|
|
1589
|
+
this._animationDone.pipe(take(1)).subscribe(() => {
|
|
1590
|
+
(this._dials || this._inputs)?.focusActiveCell();
|
|
1591
|
+
});
|
|
1623
1592
|
}
|
|
1624
1593
|
ngOnDestroy() {
|
|
1625
1594
|
clearTimeout(this._animationFallback);
|
|
@@ -1678,10 +1647,10 @@ class MatTimepickerContent {
|
|
|
1678
1647
|
const value = event;
|
|
1679
1648
|
this._model.add(value);
|
|
1680
1649
|
}
|
|
1681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1650
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContent, deps: [{ token: MatTimeSelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MatTimepickerContent, isStandalone: true, selector: "mat-timepicker-content", host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mat-timepicker-content-touch": "timepicker.touchUi", "class.mat-timepicker-content-animations-enabled": "!_animationsDisabled" }, classAttribute: "mat-timepicker-content" }, viewQueries: [{ propertyName: "_dials", first: true, predicate: MatClockDials, descendants: true }, { propertyName: "_inputs", first: true, predicate: MatTimeInputs, descendants: true }], exportAs: ["matTimepickerContent"], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n class=\"mat-timepicker-content-container\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n>\n @switch (mode) {\n @case ('input') {\n <mat-time-inputs\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-time-inputs>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('dial')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"m15.175 16.625 1.475-1.45-3.6-3.6V7.1h-2.075v5.3ZM12 21.95q-2.075 0-3.887-.787-1.813-.788-3.15-2.125-1.338-1.338-2.125-3.151Q2.05 14.075 2.05 12t.788-3.887q.787-1.813 2.125-3.15Q6.3 3.625 8.113 2.837 9.925 2.05 12 2.05t3.887.787q1.813.788 3.151 2.126 1.337 1.337 2.125 3.15.787 1.812.787 3.887t-.787 3.887q-.788 1.813-2.125 3.151-1.338 1.337-3.151 2.125-1.812.787-3.887.787ZM12 12Zm0 7.8q3.225 0 5.513-2.275Q19.8 15.25 19.8 12q0-3.25-2.287-5.525Q15.225 4.2 12 4.2T6.488 6.475Q4.2 8.75 4.2 12q0 3.25 2.288 5.525Q8.775 19.8 12 19.8Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n\n @case ('dial') {\n <mat-clock-dials\n [id]=\"timepicker.id\"\n [color]=\"color\"\n [isMeridiem]=\"isMeridiem\"\n [selected]=\"_getSelected()\"\n [minTime]=\"timepicker._getMinTime()\"\n [maxTime]=\"timepicker._getMaxTime()\"\n [minuteInterval]=\"minuteInterval\"\n [orientation]=\"orientation\"\n [touchUi]=\"timepicker.touchUi\"\n (_userSelection)=\"_handleUserSelection($event)\"\n ></mat-clock-dials>\n\n <div class=\"mat-timepicker-content-actions\">\n @if (showToggleModeButton) {\n <button\n class=\"mat-time-toggle-mode-button\"\n mat-icon-button\n (click)=\"onToggleMode('input')\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n width=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M4 19q-.825 0-1.412-.587Q2 17.825 2 17V7q0-.825.588-1.412Q3.175 5 4 5h16q.825 0 1.413.588Q22 6.175 22 7v10q0 .825-.587 1.413Q20.825 19 20 19Zm0-2h16V7H4v10Zm4-1h8v-2H8Zm-3-3h2v-2H5Zm3 0h2v-2H8Zm3 0h2v-2h-2Zm3 0h2v-2h-2Zm3 0h2v-2h-2ZM5 10h2V8H5Zm3 0h2V8H8Zm3 0h2V8h-2Zm3 0h2V8h-2Zm3 0h2V8h-2ZM4 17V7v10Z\"\n />\n </svg>\n </button>\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n </div>\n }\n }\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n class=\"mat-timepicker-close-button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"timepicker.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: [".mat-timepicker-content{color:var(--mat-timepicker-content-text-color, var(--mat-sys-on-surface));background-color:var(--mat-timepicker-content-background-color, var(--mat-sys-surface-container-high));border-radius:var(--mat-timepicker-content-border-radius, var(--mat-sys-corner-large))}.mat-timepicker-content.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-touch.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mat-timepicker-content-container{position:relative;display:flex;flex-direction:column;padding:1rem 1.5rem}.mat-timepicker-content-actions{display:flex;justify-content:space-between;margin-right:-1rem;margin-top:1.5rem}.mat-time-toggle-mode-button{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-left:-.75rem;margin-bottom:-.25rem}.mat-time-toggle-mode-button svg{fill:var(--mat-timepicker-toggle-mode-button-color, var(--mat-sys-on-surface-variant))}button.mat-timepicker-close-button{position:absolute;top:100%;left:0;margin-top:.5rem}.mat-timepicker-content-animating button.mat-timepicker-close-button{display:none}.mat-timepicker-content-exit.mat-timepicker-content-animations-enabled{animation:_mat-timepicker-content-exit .1s linear}@keyframes _mat-timepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-dialog-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes _mat-timepicker-content-exit{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatTimeInputs, selector: "mat-time-inputs" }, { kind: "component", type: MatClockDials, selector: "mat-clock-dials", inputs: ["orientation", "touchUi", "currentView"], outputs: ["viewChanged"], exportAs: ["matClockDials"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1683
1652
|
}
|
|
1684
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerContent, decorators: [{
|
|
1685
1654
|
type: Component,
|
|
1686
1655
|
args: [{ selector: 'mat-timepicker-content', standalone: true, imports: [
|
|
1687
1656
|
PortalModule,
|
|
@@ -1812,10 +1781,10 @@ class MatTimepickerBase {
|
|
|
1812
1781
|
_getMaxTime() {
|
|
1813
1782
|
return this.timepickerInput && this.timepickerInput.max;
|
|
1814
1783
|
}
|
|
1815
|
-
constructor(_viewContainerRef, _overlay,
|
|
1784
|
+
constructor(_viewContainerRef, _overlay, _injector, scrollStrategy, _defaultActionsComponent, _model, _defaults) {
|
|
1816
1785
|
this._viewContainerRef = _viewContainerRef;
|
|
1817
1786
|
this._overlay = _overlay;
|
|
1818
|
-
this.
|
|
1787
|
+
this._injector = _injector;
|
|
1819
1788
|
this._defaultActionsComponent = _defaultActionsComponent;
|
|
1820
1789
|
this._model = _model;
|
|
1821
1790
|
this._defaults = _defaults;
|
|
@@ -2023,9 +1992,9 @@ class MatTimepickerBase {
|
|
|
2023
1992
|
this._forwardContentValues(this._componentRef.instance);
|
|
2024
1993
|
// Update the position once the timepicker has rendered. Only relevant in dropdown mode.
|
|
2025
1994
|
if (!isDialog) {
|
|
2026
|
-
|
|
2027
|
-
.
|
|
2028
|
-
|
|
1995
|
+
afterNextRender(() => {
|
|
1996
|
+
overlayRef.updatePosition();
|
|
1997
|
+
}, { injector: this._injector });
|
|
2029
1998
|
}
|
|
2030
1999
|
}
|
|
2031
2000
|
/** Destroys the current overlay. */
|
|
@@ -2097,12 +2066,12 @@ class MatTimepickerBase {
|
|
|
2097
2066
|
event.keyCode === UP_ARROW));
|
|
2098
2067
|
})));
|
|
2099
2068
|
}
|
|
2100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2101
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
2069
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerBase, deps: [{ token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i0.Injector }, { token: MAT_TIMEPICKER_SCROLL_STRATEGY }, { token: MAT_DEFAULT_ACITONS }, { token: MatTimeSelectionModel }, { token: MAT_TIMEPICKER_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2070
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: MatTimepickerBase, isStandalone: true, inputs: { disabled: "disabled", opened: "opened", openAs: "openAs", color: "color", mode: "mode", format: "format", showToggleModeButton: "showToggleModeButton", minuteInterval: "minuteInterval", orientation: "orientation", touchUi: ["touchUi", "touchUi", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { openedStream: "opened", closedStream: "closed" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2102
2071
|
}
|
|
2103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerBase, decorators: [{
|
|
2104
2073
|
type: Directive
|
|
2105
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.
|
|
2074
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
|
|
2106
2075
|
type: Inject,
|
|
2107
2076
|
args: [MAT_TIMEPICKER_SCROLL_STRATEGY]
|
|
2108
2077
|
}] }, { type: undefined, decorators: [{
|
|
@@ -2150,13 +2119,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2150
2119
|
}] } });
|
|
2151
2120
|
|
|
2152
2121
|
class MatTimepicker extends MatTimepickerBase {
|
|
2153
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2154
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepicker, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepicker, isStandalone: true, selector: "mat-timepicker", host: { properties: { "class.mat-primary": "color !== \"accent\" && color !== \"warn\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"" }, classAttribute: "mat-timepicker" }, providers: [
|
|
2155
2124
|
MAT_SINGLE_TIME_SELECTION_MODEL_PROVIDER,
|
|
2156
2125
|
{ provide: MatTimepickerBase, useExisting: MatTimepicker },
|
|
2157
2126
|
], exportAs: ["matTimepicker"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2158
2127
|
}
|
|
2159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepicker, decorators: [{
|
|
2160
2129
|
type: Component,
|
|
2161
2130
|
args: [{
|
|
2162
2131
|
selector: 'mat-timepicker',
|
|
@@ -2297,7 +2266,8 @@ class MatTimepickerInputBase {
|
|
|
2297
2266
|
}
|
|
2298
2267
|
});
|
|
2299
2268
|
}
|
|
2300
|
-
_onInput(
|
|
2269
|
+
_onInput(event) {
|
|
2270
|
+
const value = event.target.value;
|
|
2301
2271
|
const lastValueWasValid = this._lastValueValid;
|
|
2302
2272
|
let time = this._timeAdapter.parse(value, TIME_FORMATS);
|
|
2303
2273
|
this._lastValueValid = this._isValidValue(time);
|
|
@@ -2390,10 +2360,10 @@ class MatTimepickerInputBase {
|
|
|
2390
2360
|
this._pendingValue = value;
|
|
2391
2361
|
}
|
|
2392
2362
|
}
|
|
2393
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2394
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInputBase, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2364
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerInputBase, isStandalone: true, inputs: { value: "value", disabled: "disabled" }, outputs: { timeChange: "timeChange", timeInput: "timeInput" }, usesOnChanges: true, ngImport: i0 }); }
|
|
2395
2365
|
}
|
|
2396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInputBase, decorators: [{
|
|
2397
2367
|
type: Directive
|
|
2398
2368
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimeAdapter, decorators: [{
|
|
2399
2369
|
type: Optional
|
|
@@ -2478,7 +2448,9 @@ class MatTimepickerInput extends MatTimepickerInputBase {
|
|
|
2478
2448
|
* @return The element to connect the popup to.
|
|
2479
2449
|
*/
|
|
2480
2450
|
getConnectedOverlayOrigin() {
|
|
2481
|
-
return this._formField
|
|
2451
|
+
return this._formField
|
|
2452
|
+
? this._formField.getConnectedOverlayOrigin()
|
|
2453
|
+
: this._elementRef;
|
|
2482
2454
|
}
|
|
2483
2455
|
/** Returns the palette used by the input's form field, if any. */
|
|
2484
2456
|
getThemePalette() {
|
|
@@ -2510,14 +2482,14 @@ class MatTimepickerInput extends MatTimepickerInputBase {
|
|
|
2510
2482
|
_shouldHandleChangeEvent(event) {
|
|
2511
2483
|
return event.source !== this;
|
|
2512
2484
|
}
|
|
2513
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2514
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInput, deps: [{ token: i0.ElementRef }, { token: TimeAdapter, optional: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2486
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerInput, isStandalone: true, selector: "input[matTimepicker]", inputs: { matTimepicker: "matTimepicker", min: "min", max: "max" }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()" }, properties: { "attr.aria-haspopup": "_timepicker ? \"dialog\" : null", "attr.aria-owns": "(_timepicker?.opened && _timepicker.id) || null", "attr.min": "min || null", "attr.max": "max || null", "disabled": "disabled" }, classAttribute: "mat-timepicker-input" }, providers: [
|
|
2515
2487
|
MAT_TIMEPICKER_VALUE_ACCESSOR,
|
|
2516
2488
|
MAT_TIMEPICKER_VALIDATORS,
|
|
2517
2489
|
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
|
|
2518
2490
|
], exportAs: ["matTimepickerInput"], usesInheritance: true, ngImport: i0 }); }
|
|
2519
2491
|
}
|
|
2520
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerInput, decorators: [{
|
|
2521
2493
|
type: Directive,
|
|
2522
2494
|
args: [{
|
|
2523
2495
|
selector: 'input[matTimepicker]',
|
|
@@ -2535,7 +2507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2535
2507
|
'[attr.min]': 'min || null',
|
|
2536
2508
|
'[attr.max]': 'max || null',
|
|
2537
2509
|
'[disabled]': 'disabled',
|
|
2538
|
-
'(input)': '_onInput($event
|
|
2510
|
+
'(input)': '_onInput($event)',
|
|
2539
2511
|
'(change)': '_onChange()',
|
|
2540
2512
|
'(blur)': '_onBlur()',
|
|
2541
2513
|
},
|
|
@@ -2564,10 +2536,10 @@ class MatTimepickerApply {
|
|
|
2564
2536
|
this._timepicker._applyPendingSelection();
|
|
2565
2537
|
this._timepicker.close();
|
|
2566
2538
|
}
|
|
2567
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2568
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2539
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerApply, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2540
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerApply, isStandalone: true, selector: "[matTimepickerApply]", host: { listeners: { "click": "_applySelection()" } }, ngImport: i0 }); }
|
|
2569
2541
|
}
|
|
2570
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2542
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerApply, decorators: [{
|
|
2571
2543
|
type: Directive,
|
|
2572
2544
|
args: [{
|
|
2573
2545
|
selector: '[matTimepickerApply]',
|
|
@@ -2585,10 +2557,10 @@ class MatTimepickerCancel {
|
|
|
2585
2557
|
close() {
|
|
2586
2558
|
this._timepicker.close();
|
|
2587
2559
|
}
|
|
2588
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2589
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2560
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerCancel, deps: [{ token: MatTimepickerBase }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2561
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerCancel, isStandalone: true, selector: "[matTimepickerCancel]", host: { listeners: { "click": "close()" } }, ngImport: i0 }); }
|
|
2590
2562
|
}
|
|
2591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerCancel, decorators: [{
|
|
2592
2564
|
type: Directive,
|
|
2593
2565
|
args: [{
|
|
2594
2566
|
selector: '[matTimepickerCancel]',
|
|
@@ -2618,8 +2590,8 @@ class MatTimepickerActions {
|
|
|
2618
2590
|
this._portal?.detach();
|
|
2619
2591
|
}
|
|
2620
2592
|
}
|
|
2621
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2622
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2593
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerActions, deps: [{ token: MatTimepickerBase }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerActions, isStandalone: true, selector: "mat-timepicker-actions", host: { classAttribute: "mat-timepicker-actions-container" }, viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
|
|
2623
2595
|
<ng-template>
|
|
2624
2596
|
<div class="mat-timepicker-actions">
|
|
2625
2597
|
<ng-content></ng-content>
|
|
@@ -2627,7 +2599,7 @@ class MatTimepickerActions {
|
|
|
2627
2599
|
</ng-template>
|
|
2628
2600
|
`, isInline: true, styles: [".mat-timepicker-actions-container{margin-left:auto}.mat-timepicker-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2629
2601
|
}
|
|
2630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerActions, decorators: [{
|
|
2631
2603
|
type: Component,
|
|
2632
2604
|
args: [{ selector: 'mat-timepicker-actions', standalone: true, template: `
|
|
2633
2605
|
<ng-template>
|
|
@@ -2654,8 +2626,8 @@ class MatTimepickerDefaultActions {
|
|
|
2654
2626
|
ngOnInit() {
|
|
2655
2627
|
this.color.set(this._timepicker.color);
|
|
2656
2628
|
}
|
|
2657
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2658
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2629
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerDefaultActions, deps: [{ token: MatTimepickerBase }, { token: MatTimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MatTimepickerDefaultActions, isStandalone: true, selector: "mat-timepicker-default-actions", host: { classAttribute: "mat-timepicker-actions-container" }, ngImport: i0, template: `
|
|
2659
2631
|
<div class="mat-timepicker-actions">
|
|
2660
2632
|
<ng-content></ng-content>
|
|
2661
2633
|
<button [color]="color()" mat-button matTimepickerCancel>
|
|
@@ -2667,7 +2639,7 @@ class MatTimepickerDefaultActions {
|
|
|
2667
2639
|
</div>
|
|
2668
2640
|
`, isInline: true, styles: [".mat-timepicker-actions-container{margin-left:auto}.mat-timepicker-actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTimepickerApply, selector: "[matTimepickerApply]" }, { kind: "directive", type: MatTimepickerCancel, selector: "[matTimepickerCancel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2669
2641
|
}
|
|
2670
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerDefaultActions, decorators: [{
|
|
2671
2643
|
type: Component,
|
|
2672
2644
|
args: [{ selector: 'mat-timepicker-default-actions', standalone: true, imports: [MatButtonModule, MatTimepickerApply, MatTimepickerCancel], template: `
|
|
2673
2645
|
<div class="mat-timepicker-actions">
|
|
@@ -2685,8 +2657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2685
2657
|
}], ctorParameters: () => [{ type: MatTimepickerBase }, { type: MatTimepickerIntl }] });
|
|
2686
2658
|
|
|
2687
2659
|
class MatTimepickerModule {
|
|
2688
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2689
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2660
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2661
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, imports: [OverlayModule,
|
|
2690
2662
|
PortalModule,
|
|
2691
2663
|
A11yModule,
|
|
2692
2664
|
MatTimepicker,
|
|
@@ -2723,7 +2695,7 @@ class MatTimepickerModule {
|
|
|
2723
2695
|
MatTimepickerDefaultActions,
|
|
2724
2696
|
MatTimepickerApply,
|
|
2725
2697
|
MatTimepickerCancel] }); }
|
|
2726
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2698
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, providers: [
|
|
2727
2699
|
MatTimepickerIntl,
|
|
2728
2700
|
MAT_TIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
|
|
2729
2701
|
{ provide: MAT_DEFAULT_ACITONS, useValue: MatTimepickerDefaultActions },
|
|
@@ -2743,7 +2715,7 @@ class MatTimepickerModule {
|
|
|
2743
2715
|
MatTimePeriod,
|
|
2744
2716
|
MatTimepickerDefaultActions, CdkScrollableModule] }); }
|
|
2745
2717
|
}
|
|
2746
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatTimepickerModule, decorators: [{
|
|
2747
2719
|
type: NgModule,
|
|
2748
2720
|
args: [{
|
|
2749
2721
|
declarations: [],
|