@ngx-mce/datetime-picker 21.3.2 → 21.3.3
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,10 +1,11 @@
|
|
|
1
1
|
import { CdkMonitorFocus, CdkTrapFocus } from '@angular/cdk/a11y';
|
|
2
2
|
import { ComponentPortal, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { Injectable, Optional, SkipSelf, inject, input, output, computed, ElementRef, NgZone, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, viewChild, ChangeDetectorRef, Input, forwardRef, linkedSignal, Directive, Injector, ContentChild, model, effect, untracked, HostBinding, DOCUMENT, EventEmitter, ViewContainerRef, Output, booleanAttribute, TemplateRef, Attribute, signal, ViewChild } from '@angular/core';
|
|
5
5
|
import { outputFromObservable, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
import * as i4 from '@angular/material/button';
|
|
7
7
|
import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
|
|
8
|
+
import * as i1 from '@angular/material/core';
|
|
8
9
|
import { DateAdapter, MAT_DATE_FORMATS, ErrorStateMatcher } from '@angular/material/core';
|
|
9
10
|
import { Subject, Subscription, merge, of } from 'rxjs';
|
|
10
11
|
import { Directionality } from '@angular/cdk/bidi';
|
|
@@ -13,7 +14,7 @@ import { take, startWith, debounceTime, filter, takeUntil } from 'rxjs/operators
|
|
|
13
14
|
import { Platform, _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
|
|
14
15
|
import { NgClass } from '@angular/common';
|
|
15
16
|
import { coerceBooleanProperty, coerceStringArray } from '@angular/cdk/coercion';
|
|
16
|
-
import * as i1 from '@angular/forms';
|
|
17
|
+
import * as i1$1 from '@angular/forms';
|
|
17
18
|
import { NgForm, FormGroupDirective, NgControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer, FormBuilder, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
18
19
|
import * as i2 from '@angular/material/form-field';
|
|
19
20
|
import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule, MatFormField } from '@angular/material/form-field';
|
|
@@ -48,14 +49,14 @@ class NgxDateRange {
|
|
|
48
49
|
* @docs-private
|
|
49
50
|
*/
|
|
50
51
|
class NgxMatDateSelectionModel {
|
|
52
|
+
_adapter;
|
|
51
53
|
selection;
|
|
52
54
|
_selectionChanged = new Subject();
|
|
53
55
|
/** Emits when the selection has changed. */
|
|
54
56
|
selectionChanged = this._selectionChanged;
|
|
55
|
-
_adapter = inject((DateAdapter));
|
|
56
|
-
constructor(
|
|
57
57
|
/** The current selection. */
|
|
58
|
-
selection) {
|
|
58
|
+
constructor(_adapter, selection) {
|
|
59
|
+
this._adapter = _adapter;
|
|
59
60
|
this.selection = selection;
|
|
60
61
|
this.selection = selection;
|
|
61
62
|
}
|
|
@@ -80,14 +81,14 @@ class NgxMatDateSelectionModel {
|
|
|
80
81
|
}
|
|
81
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatDateSelectionModel, decorators: [{
|
|
82
83
|
type: Injectable
|
|
83
|
-
}], ctorParameters: () => [{ type: undefined }] });
|
|
84
|
+
}], ctorParameters: () => [{ type: i1.DateAdapter }, { type: undefined }] });
|
|
84
85
|
/**
|
|
85
86
|
* A selection model that contains a single date.
|
|
86
87
|
* @docs-private
|
|
87
88
|
*/
|
|
88
89
|
class NgxMatSingleDateSelectionModel extends NgxMatDateSelectionModel {
|
|
89
|
-
constructor() {
|
|
90
|
-
super(null);
|
|
90
|
+
constructor(adapter) {
|
|
91
|
+
super(adapter, null);
|
|
91
92
|
}
|
|
92
93
|
/**
|
|
93
94
|
* Adds a date to the current selection. In the case of a single date selection, the added date
|
|
@@ -109,23 +110,23 @@ class NgxMatSingleDateSelectionModel extends NgxMatDateSelectionModel {
|
|
|
109
110
|
}
|
|
110
111
|
/** Clones the selection model. */
|
|
111
112
|
clone() {
|
|
112
|
-
const clone = new NgxMatSingleDateSelectionModel();
|
|
113
|
+
const clone = new NgxMatSingleDateSelectionModel(this._adapter);
|
|
113
114
|
clone.updateSelection(this.selection, this);
|
|
114
115
|
return clone;
|
|
115
116
|
}
|
|
116
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatSingleDateSelectionModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
117
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatSingleDateSelectionModel, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
117
118
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatSingleDateSelectionModel });
|
|
118
119
|
}
|
|
119
120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatSingleDateSelectionModel, decorators: [{
|
|
120
121
|
type: Injectable
|
|
121
|
-
}], ctorParameters: () => [] });
|
|
122
|
+
}], ctorParameters: () => [{ type: i1.DateAdapter }] });
|
|
122
123
|
/**
|
|
123
124
|
* A selection model that contains a date range.
|
|
124
125
|
* @docs-private
|
|
125
126
|
*/
|
|
126
127
|
class NgxMatRangeDateSelectionModel extends NgxMatDateSelectionModel {
|
|
127
|
-
constructor() {
|
|
128
|
-
super(new NgxDateRange(null, null));
|
|
128
|
+
constructor(adapter) {
|
|
129
|
+
super(adapter, new NgxDateRange(null, null));
|
|
129
130
|
}
|
|
130
131
|
/**
|
|
131
132
|
* Adds a date to the current selection. In the case of a date range selection, the added date
|
|
@@ -172,19 +173,19 @@ class NgxMatRangeDateSelectionModel extends NgxMatDateSelectionModel {
|
|
|
172
173
|
}
|
|
173
174
|
/** Clones the selection model. */
|
|
174
175
|
clone() {
|
|
175
|
-
const clone = new NgxMatRangeDateSelectionModel();
|
|
176
|
+
const clone = new NgxMatRangeDateSelectionModel(this._adapter);
|
|
176
177
|
clone.updateSelection(this.selection, this);
|
|
177
178
|
return clone;
|
|
178
179
|
}
|
|
179
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatRangeDateSelectionModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
180
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatRangeDateSelectionModel, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
180
181
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatRangeDateSelectionModel });
|
|
181
182
|
}
|
|
182
183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatRangeDateSelectionModel, decorators: [{
|
|
183
184
|
type: Injectable
|
|
184
|
-
}], ctorParameters: () => [] });
|
|
185
|
+
}], ctorParameters: () => [{ type: i1.DateAdapter }] });
|
|
185
186
|
/** @docs-private */
|
|
186
|
-
function NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent) {
|
|
187
|
-
return parent || new NgxMatSingleDateSelectionModel();
|
|
187
|
+
function NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY(parent, dateAdapter) {
|
|
188
|
+
return parent || new NgxMatSingleDateSelectionModel(dateAdapter);
|
|
188
189
|
}
|
|
189
190
|
/**
|
|
190
191
|
* Used to provide a single selection model to a component.
|
|
@@ -196,8 +197,8 @@ const NGX_MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER = {
|
|
|
196
197
|
useFactory: NGX_MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY,
|
|
197
198
|
};
|
|
198
199
|
/** @docs-private */
|
|
199
|
-
function NGX_MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent) {
|
|
200
|
-
return parent || new NgxMatRangeDateSelectionModel();
|
|
200
|
+
function NGX_MAT_RANGE_DATE_SELECTION_MODEL_FACTORY(parent, dateAdapter) {
|
|
201
|
+
return parent || new NgxMatRangeDateSelectionModel(dateAdapter);
|
|
201
202
|
}
|
|
202
203
|
/**
|
|
203
204
|
* Used to provide a range selection model to a component.
|
|
@@ -3706,7 +3707,7 @@ class NgxMatTimepickerComponent {
|
|
|
3706
3707
|
useExisting: forwardRef(() => NgxMatTimepickerComponent),
|
|
3707
3708
|
multi: true,
|
|
3708
3709
|
},
|
|
3709
|
-
], exportAs: ["ngxMatTimepicker"], ngImport: i0, template: "<form [formGroup]=\"form\">\n <table class=\"ngx-mat-timepicker-table\">\n <tbody class=\"ngx-mat-timepicker-tbody\">\n @if (showSpinners()) {\n <tr>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"expand_less icon\"\n (click)=\"change('hour', true)\"\n [disabled]=\"disabled()\">\n <mat-icon>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M18 15l-6-6-6 6\" />\n </svg>\n </mat-icon>\n </button>\n </td>\n <td></td>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"expand_less icon\"\n (click)=\"change('minute', true)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M18 15l-6-6-6 6\" /></svg\n ></mat-icon>\n </button>\n </td>\n <td></td>\n @if (showSeconds()) {\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"expand_less icon\"\n (click)=\"change('second', true)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M18 15l-6-6-6 6\" /></svg\n ></mat-icon>\n </button>\n </td>\n }\n @if (enableMeridian()) {\n <td class=\"ngx-mat-timepicker-spacer\"></td>\n <td></td>\n }\n </tr>\n }\n\n <tr>\n <td>\n <mat-form-field appearance=\"fill\" [color]=\"color()\">\n <input\n type=\"text\"\n matInput\n (input)=\"formatInput($any($event).target)\"\n maxlength=\"2\"\n formControlName=\"hour\"\n (keydown.ArrowUp)=\"change('hour', true); $event.preventDefault()\"\n (keydown.ArrowDown)=\"change('hour', false); $event.preventDefault()\"\n (blur)=\"change('hour')\" />\n </mat-form-field>\n </td>\n <td class=\"ngx-mat-timepicker-spacer\">:</td>\n <td>\n <mat-form-field appearance=\"fill\" [color]=\"color()\">\n <input\n type=\"text\"\n matInput\n (input)=\"formatInput($any($event).target)\"\n maxlength=\"2\"\n formControlName=\"minute\"\n (keydown.ArrowUp)=\"change('minute', true); $event.preventDefault()\"\n (keydown.ArrowDown)=\"change('minute', false); $event.preventDefault()\"\n (blur)=\"change('minute')\" />\n </mat-form-field>\n </td>\n @if (showSeconds()) {\n <td class=\"ngx-mat-timepicker-spacer\">:</td>\n <td>\n <mat-form-field appearance=\"fill\" [color]=\"color()\">\n <input\n type=\"text\"\n matInput\n (input)=\"formatInput($any($event).target)\"\n maxlength=\"2\"\n formControlName=\"second\"\n (keydown.ArrowUp)=\"change('second', true); $event.preventDefault()\"\n (keydown.ArrowDown)=\"change('second', false); $event.preventDefault()\"\n (blur)=\"change('second')\" />\n </mat-form-field>\n </td>\n }\n\n @if (enableMeridian()) {\n <td class=\"ngx-mat-timepicker-spacer\"></td>\n\n <td class=\"ngx-mat-timepicker-meridian\">\n <button\n mat-button\n (click)=\"toggleMeridian()\"\n mat-stroked-button\n [color]=\"color()\"\n [disabled]=\"disabled()\">\n {{ meridian() }}\n </button>\n </td>\n }\n </tr>\n\n @if (showSpinners()) {\n <tr>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"keyboard_arrow_down icon\"\n (click)=\"change('hour', false)\"\n [disabled]=\"disabled()\">\n <mat-icon>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" />\n </svg>\n </mat-icon>\n </button>\n </td>\n <td></td>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"keyboard_arrow_down icon\"\n (click)=\"change('minute', false)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" /></svg\n ></mat-icon>\n </button>\n </td>\n @if (showSeconds()) {\n <td></td>\n\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"keyboard_arrow_down icon\"\n (click)=\"change('second', false)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" /></svg\n ></mat-icon>\n </button>\n </td>\n }\n\n @if (enableMeridian()) {\n <td class=\"ngx-mat-timepicker-spacer\"></td>\n <td></td>\n }\n </tr>\n }\n </tbody>\n </table>\n</form>\n", styles: [".ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td{text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-spacer{font-weight:700}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-meridian .mdc-button{min-width:64px;line-height:36px;min-width:0;border-radius:50%;width:36px;height:36px;padding:0;flex-shrink:0}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button{display:inline-flex;align-items:center;justify-content:center;height:var(--mat-icon-button-state-layer-size, 40px);width:var(--mdc-icon-button-state-layer-size, 40px);line-height:var(--mdc-icon-button-state-layer-size, 40px);font-size:var(--mdc-icon-button-icon-size, 24px);color:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant));padding:calc((var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button .mat-icon{font-size:var(--mdc-icon-button-icon-size, 24px)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button svg{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px);vertical-align:baseline}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button:disabled,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field{width:24px;max-width:24px;text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field.mat-focused .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay{background-color:transparent}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled{background-color:transparent!important;padding:0!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix{padding:4px 0;min-height:1px!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix input{text-align:center;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3710
|
+
], exportAs: ["ngxMatTimepicker"], ngImport: i0, template: "<form [formGroup]=\"form\">\n <table class=\"ngx-mat-timepicker-table\">\n <tbody class=\"ngx-mat-timepicker-tbody\">\n @if (showSpinners()) {\n <tr>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"expand_less icon\"\n (click)=\"change('hour', true)\"\n [disabled]=\"disabled()\">\n <mat-icon>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M18 15l-6-6-6 6\" />\n </svg>\n </mat-icon>\n </button>\n </td>\n <td></td>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"expand_less icon\"\n (click)=\"change('minute', true)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M18 15l-6-6-6 6\" /></svg\n ></mat-icon>\n </button>\n </td>\n <td></td>\n @if (showSeconds()) {\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"expand_less icon\"\n (click)=\"change('second', true)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M18 15l-6-6-6 6\" /></svg\n ></mat-icon>\n </button>\n </td>\n }\n @if (enableMeridian()) {\n <td class=\"ngx-mat-timepicker-spacer\"></td>\n <td></td>\n }\n </tr>\n }\n\n <tr>\n <td>\n <mat-form-field appearance=\"fill\" [color]=\"color()\">\n <input\n type=\"text\"\n matInput\n (input)=\"formatInput($any($event).target)\"\n maxlength=\"2\"\n formControlName=\"hour\"\n (keydown.ArrowUp)=\"change('hour', true); $event.preventDefault()\"\n (keydown.ArrowDown)=\"change('hour', false); $event.preventDefault()\"\n (blur)=\"change('hour')\" />\n </mat-form-field>\n </td>\n <td class=\"ngx-mat-timepicker-spacer\">:</td>\n <td>\n <mat-form-field appearance=\"fill\" [color]=\"color()\">\n <input\n type=\"text\"\n matInput\n (input)=\"formatInput($any($event).target)\"\n maxlength=\"2\"\n formControlName=\"minute\"\n (keydown.ArrowUp)=\"change('minute', true); $event.preventDefault()\"\n (keydown.ArrowDown)=\"change('minute', false); $event.preventDefault()\"\n (blur)=\"change('minute')\" />\n </mat-form-field>\n </td>\n @if (showSeconds()) {\n <td class=\"ngx-mat-timepicker-spacer\">:</td>\n <td>\n <mat-form-field appearance=\"fill\" [color]=\"color()\">\n <input\n type=\"text\"\n matInput\n (input)=\"formatInput($any($event).target)\"\n maxlength=\"2\"\n formControlName=\"second\"\n (keydown.ArrowUp)=\"change('second', true); $event.preventDefault()\"\n (keydown.ArrowDown)=\"change('second', false); $event.preventDefault()\"\n (blur)=\"change('second')\" />\n </mat-form-field>\n </td>\n }\n\n @if (enableMeridian()) {\n <td class=\"ngx-mat-timepicker-spacer\"></td>\n\n <td class=\"ngx-mat-timepicker-meridian\">\n <button\n mat-button\n (click)=\"toggleMeridian()\"\n mat-stroked-button\n [color]=\"color()\"\n [disabled]=\"disabled()\">\n {{ meridian() }}\n </button>\n </td>\n }\n </tr>\n\n @if (showSpinners()) {\n <tr>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"keyboard_arrow_down icon\"\n (click)=\"change('hour', false)\"\n [disabled]=\"disabled()\">\n <mat-icon>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" />\n </svg>\n </mat-icon>\n </button>\n </td>\n <td></td>\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"keyboard_arrow_down icon\"\n (click)=\"change('minute', false)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" /></svg\n ></mat-icon>\n </button>\n </td>\n @if (showSeconds()) {\n <td></td>\n\n <td>\n <button\n type=\"button\"\n mat-icon-button\n aria-label=\"keyboard_arrow_down icon\"\n (click)=\"change('second', false)\"\n [disabled]=\"disabled() || disableMinute()\">\n <mat-icon\n ><svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" /></svg\n ></mat-icon>\n </button>\n </td>\n }\n\n @if (enableMeridian()) {\n <td class=\"ngx-mat-timepicker-spacer\"></td>\n <td></td>\n }\n </tr>\n }\n </tbody>\n </table>\n</form>\n", styles: [".ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td{text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-spacer{font-weight:700}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td.ngx-mat-timepicker-meridian .mdc-button{min-width:64px;line-height:36px;min-width:0;border-radius:50%;width:36px;height:36px;padding:0;flex-shrink:0}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button{display:inline-flex;align-items:center;justify-content:center;height:var(--mat-icon-button-state-layer-size, 40px);width:var(--mdc-icon-button-state-layer-size, 40px);line-height:var(--mdc-icon-button-state-layer-size, 40px);font-size:var(--mdc-icon-button-icon-size, 24px);color:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant));padding:calc((var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button .mat-icon{font-size:var(--mdc-icon-button-icon-size, 24px)}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button svg{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px);vertical-align:baseline}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button:disabled,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-icon-button.mat-mdc-button-disabled{cursor:default;pointer-events:none;color:var(--mdc-icon-button-disabled-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field{width:24px;max-width:24px;text-align:center}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field.mat-focused .mdc-text-field--filled .mat-mdc-form-field-focus-overlay,.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field:hover .mdc-text-field--filled .mat-mdc-form-field-focus-overlay{background-color:transparent}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled{background-color:transparent!important;padding:0!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix{padding:4px 0;min-height:1px!important}.ngx-mat-timepicker form .ngx-mat-timepicker-table .ngx-mat-timepicker-tbody tr td .mat-mdc-form-field .mdc-text-field--filled .mat-mdc-form-field-infix input{text-align:center;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3710
3711
|
}
|
|
3711
3712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatTimepickerComponent, decorators: [{
|
|
3712
3713
|
type: Component,
|
|
@@ -3918,7 +3919,7 @@ class NgxMatDatepickerContent {
|
|
|
3918
3919
|
}
|
|
3919
3920
|
}
|
|
3920
3921
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatDatepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgxMatDatepickerContent, isStandalone: true, selector: "ngx-mat-datepicker-content", inputs: { color: "color" }, host: { listeners: { "animationend": "_onAnimationEnd($event)" }, properties: { "class.mat-datepicker-content-touch": "datepicker!.touchUi", "class.mat-datepicker-content-touch-with-time": "!datepicker!.hideTime", "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn", "class.panel-enter-dropdown": "this.isEnterDropdown", "class.panel-enter-dialog": "this.isEnterDialog", "class.panel-leave": "this.isLeavingClass" }, classAttribute: "mat-datepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: NgxMatCalendar, descendants: true, isSignal: true }], exportAs: ["ngxMatDatepickerContent"], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n class=\"mat-datepicker-content-container\"\n [class.mat-datepicker-content-container-with-custom-header]=\"\n datepicker?.calendarHeaderComponent()\n \"\n [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\"\n [class.mat-datepicker-content-container-with-time]=\"!datepicker!._hideTime\"\n>\n <ngx-mat-calendar\n [id]=\"datepicker!.id\"\n [ngClass]=\"datepicker!.panelClass\"\n [startAt]=\"datepicker!.startAt\"\n [startView]=\"datepicker!.startView()\"\n [minDate]=\"datepicker!._getMinDate()\"\n [maxDate]=\"datepicker!._getMaxDate()\"\n [dateFilter]=\"datepicker!._getDateFilter()\"\n [headerComponent]=\"datepicker!.calendarHeaderComponent()\"\n [selected]=\"_getSelected()\"\n [dateClass]=\"datepicker!.dateClass()\"\n [comparisonStart]=\"comparisonStart\"\n [comparisonEnd]=\"comparisonEnd\"\n [class.calendar-fade-enter]=\"false\"\n [startDateAccessibleName]=\"startDateAccessibleName\"\n [endDateAccessibleName]=\"endDateAccessibleName\"\n (yearSelected)=\"datepicker!._selectYear($event)\"\n (monthSelected)=\"datepicker!._selectMonth($event)\"\n (viewChanged)=\"datepicker!._viewChanged($event)\"\n (_userSelection)=\"_handleUserSelection($event)\"\n (_userDragDrop)=\"_handleUserDragDrop($event)\"\n />\n\n @if (isViewMonth) {\n @if (!datepicker!._hideTime) {\n <div\n class=\"time-container\"\n [ngClass]=\"datepicker!.panelClass\"\n [class.disable-seconds]=\"!datepicker!._showSeconds\"\n >\n <ngx-mat-timepicker\n [showSpinners]=\"datepicker!._showSpinners\"\n [showSeconds]=\"datepicker!._showSeconds\"\n [disabled]=\"datepicker!._disabled || !_modelTime\"\n [stepHour]=\"datepicker!._stepHour\"\n [stepMinute]=\"datepicker!._stepMinute\"\n [stepSecond]=\"datepicker!._stepSecond\"\n [(ngModel)]=\"_modelTime\"\n [color]=\"datepicker!._color\"\n [enableMeridian]=\"datepicker!._enableMeridian\"\n [disableMinute]=\"datepicker!._disableMinute\"\n (ngModelChange)=\"onTimeChanged($event)\"\n />\n </div>\n }\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\" />\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n class=\"mat-datepicker-close-button\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"datepicker?.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: ["@keyframes panelDropdownEnter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panelDialogEnter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panelLeave{0%{opacity:1}to{opacity:0}}.panel-enter-dropdown{animation:panelDropdownEnter .12s cubic-bezier(0,0,.2,1)}.panel-enter-dialog{animation:panelDialogEnter .15s cubic-bezier(0,0,.2,1)}.panel-leave{animation:panelLeave .1s linear forwards;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.calendar-fade-enter{animation:fadeIn .12s .1s cubic-bezier(.55,0,.55,.2) forwards}\n", ".mat-datepicker-content{display:block;border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large, 4px));background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12))}.mat-datepicker-content .mat-calendar{font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.time-container{display:flex;position:relative;padding-top:5px;justify-content:center}.time-container.disable-seconds .ngx-mat-timepicker .table{margin-left:9px}.time-container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background-color:#0000001f}.mat-datepicker-content-touch{display:block;max-height:90vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:815px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:90vh}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:none}}@media all and (orientation:portrait){.mat-datepicker-content-touch{max-height:100vh}.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:870px}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time.mat-datepicker-content-container-with-actions{max-height:none!important}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: NgxMatCalendar, selector: "ngx-mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["ngxMatCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3922
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NgxMatDatepickerContent, isStandalone: true, selector: "ngx-mat-datepicker-content", inputs: { color: "color" }, host: { listeners: { "animationend": "_onAnimationEnd($event)" }, properties: { "class.mat-datepicker-content-touch": "datepicker!.touchUi", "class.mat-datepicker-content-touch-with-time": "!datepicker!.hideTime", "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn", "class.panel-enter-dropdown": "this.isEnterDropdown", "class.panel-enter-dialog": "this.isEnterDialog", "class.panel-leave": "this.isLeavingClass" }, classAttribute: "mat-datepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: NgxMatCalendar, descendants: true, isSignal: true }], exportAs: ["ngxMatDatepickerContent"], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n class=\"mat-datepicker-content-container\"\n [class.mat-datepicker-content-container-with-custom-header]=\"\n datepicker?.calendarHeaderComponent()\n \"\n [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\"\n [class.mat-datepicker-content-container-with-time]=\"!datepicker!._hideTime\"\n>\n <ngx-mat-calendar\n [id]=\"datepicker!.id\"\n [ngClass]=\"datepicker!.panelClass\"\n [startAt]=\"datepicker!.startAt\"\n [startView]=\"datepicker!.startView()\"\n [minDate]=\"datepicker!._getMinDate()\"\n [maxDate]=\"datepicker!._getMaxDate()\"\n [dateFilter]=\"datepicker!._getDateFilter()\"\n [headerComponent]=\"datepicker!.calendarHeaderComponent()\"\n [selected]=\"_getSelected()\"\n [dateClass]=\"datepicker!.dateClass()\"\n [comparisonStart]=\"comparisonStart\"\n [comparisonEnd]=\"comparisonEnd\"\n [class.calendar-fade-enter]=\"false\"\n [startDateAccessibleName]=\"startDateAccessibleName\"\n [endDateAccessibleName]=\"endDateAccessibleName\"\n (yearSelected)=\"datepicker!._selectYear($event)\"\n (monthSelected)=\"datepicker!._selectMonth($event)\"\n (viewChanged)=\"datepicker!._viewChanged($event)\"\n (_userSelection)=\"_handleUserSelection($event)\"\n (_userDragDrop)=\"_handleUserDragDrop($event)\"\n />\n\n @if (isViewMonth) {\n @if (!datepicker!._hideTime) {\n <div\n class=\"time-container\"\n [ngClass]=\"datepicker!.panelClass\"\n [class.disable-seconds]=\"!datepicker!._showSeconds\"\n >\n <ngx-mat-timepicker\n [showSpinners]=\"datepicker!._showSpinners\"\n [showSeconds]=\"datepicker!._showSeconds\"\n [disabled]=\"datepicker!._disabled || !_modelTime\"\n [stepHour]=\"datepicker!._stepHour\"\n [stepMinute]=\"datepicker!._stepMinute\"\n [stepSecond]=\"datepicker!._stepSecond\"\n [(ngModel)]=\"_modelTime\"\n [color]=\"datepicker!._color\"\n [enableMeridian]=\"datepicker!._enableMeridian\"\n [disableMinute]=\"datepicker!._disableMinute\"\n (ngModelChange)=\"onTimeChanged($event)\"\n />\n </div>\n }\n }\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\" />\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n class=\"mat-datepicker-close-button\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"datepicker?.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: ["@keyframes panelDropdownEnter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panelDialogEnter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panelLeave{0%{opacity:1}to{opacity:0}}.panel-enter-dropdown{animation:panelDropdownEnter .12s cubic-bezier(0,0,.2,1)}.panel-enter-dialog{animation:panelDialogEnter .15s cubic-bezier(0,0,.2,1)}.panel-leave{animation:panelLeave .1s linear forwards;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.calendar-fade-enter{animation:fadeIn .12s .1s cubic-bezier(.55,0,.55,.2) forwards}\n", ".mat-datepicker-content{display:block;border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large, 4px));background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12))}.mat-datepicker-content .mat-calendar{font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.time-container{display:flex;position:relative;padding-top:5px;justify-content:center}.time-container.disable-seconds .ngx-mat-timepicker .table{margin-left:9px}.time-container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background-color:#0000001f}.mat-datepicker-content-touch{display:block;max-height:90vh;position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:815px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation:landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:90vh}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:none}}@media all and (orientation:portrait){.mat-datepicker-content-touch{max-height:100vh}.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time{height:auto;max-height:870px}.mat-datepicker-content-touch .mat-datepicker-content-container.mat-datepicker-content-container-with-time.mat-datepicker-content-container-with-actions{max-height:none!important}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: NgxMatCalendar, selector: "ngx-mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["ngxMatCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3922
3923
|
}
|
|
3923
3924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatDatepickerContent, decorators: [{
|
|
3924
3925
|
type: Component,
|
|
@@ -5087,7 +5088,7 @@ class NgxMatDatetimePickerContentV2 {
|
|
|
5087
5088
|
</button>
|
|
5088
5089
|
</div>
|
|
5089
5090
|
</div>
|
|
5090
|
-
`, isInline: true, styles: [".ngx-mat-datetime-picker-content-v2{display:flex;flex-direction:column;max-height:90vh;min-width:296px}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-content{display:flex;flex-direction:column}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{padding:16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px 16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch{min-width:320px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-time{padding:24px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-actions{padding:16px 24px 24px}.ngx-mat-datetime-picker-content-v2 mat-calendar{display:block}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-header{padding:8px 8px 0}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-content{padding:0 8px 8px}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker{width:100%;display:flex;justify-content:center;align-items:center}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker .ngx-mat-timepicker-container{justify-content:center}.ngx-mat-datetime-picker-content-enter{opacity:0;transform:scale(.9);transition:opacity .15s cubic-bezier(.25,.8,.25,1),transform .15s cubic-bezier(.25,.8,.25,1)}.ngx-mat-datetime-picker-content-enter-active{opacity:1;transform:scale(1)}.ngx-mat-datetime-picker-content-exit{opacity:1;transform:scale(1);transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)}.ngx-mat-datetime-picker-content-exit-active{opacity:0;transform:scale(.9)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5091
|
+
`, isInline: true, styles: [".ngx-mat-datetime-picker-content-v2{display:flex;flex-direction:column;max-height:90vh;min-width:296px}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-content{display:flex;flex-direction:column}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{padding:16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-time{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px 16px;border-top:1px solid rgba(0,0,0,.12)}.mat-dark .ngx-mat-datetime-picker-content-v2 .ngx-mat-datetime-picker-actions{border-top-color:#ffffff1f}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch{min-width:320px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-time{padding:24px}.ngx-mat-datetime-picker-content-v2.ngx-mat-datetime-picker-content-touch .ngx-mat-datetime-picker-actions{padding:16px 24px 24px}.ngx-mat-datetime-picker-content-v2 mat-calendar{display:block}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-header{padding:8px 8px 0}.ngx-mat-datetime-picker-content-v2 mat-calendar .mat-calendar-content{padding:0 8px 8px}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker{width:100%;display:flex;justify-content:center;align-items:center}.ngx-mat-datetime-picker-content-v2 ngx-mat-timepicker .ngx-mat-timepicker-container{justify-content:center}.ngx-mat-datetime-picker-content-enter{opacity:0;transform:scale(.9);transition:opacity .15s cubic-bezier(.25,.8,.25,1),transform .15s cubic-bezier(.25,.8,.25,1)}.ngx-mat-datetime-picker-content-enter-active{opacity:1;transform:scale(1)}.ngx-mat-datetime-picker-content-exit{opacity:1;transform:scale(1);transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)}.ngx-mat-datetime-picker-content-exit-active{opacity:0;transform:scale(.9)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["disabled", "showSpinners", "stepHour", "stepMinute", "stepSecond", "showSeconds", "disableMinute", "enableMeridian", "defaultTime", "color", "meridian", "value"], outputs: ["valueChange"], exportAs: ["ngxMatTimepicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5091
5092
|
}
|
|
5092
5093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgxMatDatetimePickerContentV2, decorators: [{
|
|
5093
5094
|
type: Component,
|