@sumaris-net/ngx-components 2.7.0-rc5 → 2.7.0-rc7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/app/core/account/new-token.modal.mjs +1 -1
- package/esm2022/src/app/shared/form/field.component.mjs +1 -1
- package/esm2022/src/app/shared/material/datetime/datetime.module.mjs +4 -5
- package/esm2022/src/app/shared/material/datetime/material.date.mjs +46 -18
- package/esm2022/src/app/shared/material/datetime/material.dateshort.mjs +46 -20
- package/esm2022/src/app/shared/material/datetime/material.datetime.mjs +145 -82
- package/esm2022/src/app/shared/material/datetime/testing/mat-date-time.test.mjs +3 -3
- package/esm2022/src/app/shared/material/datetime/testing/mat-date.test.mjs +1 -1
- package/esm2022/src/app/shared/material/datetime/testing/mat-dateshort.test.mjs +1 -1
- package/esm2022/src/app/shared/material/duration/material.duration.mjs +1 -1
- package/esm2022/src/app/shared/material/latlong/material.latlong.mjs +2 -2
- package/esm2022/src/app/shared/material/numpad/testing/numpad.test.mjs +1 -1
- package/esm2022/src/app/shared/pipes/maskito.pipe.mjs +2 -51
- package/esm2022/src/app/shared/pipes/pipes.module.mjs +4 -8
- package/fesm2022/sumaris-net.ngx-components.mjs +243 -178
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/inputs.d.ts +1 -1
- package/src/app/shared/material/datetime/datetime.module.d.ts +1 -1
- package/src/app/shared/material/datetime/material.date.d.ts +5 -3
- package/src/app/shared/material/datetime/material.dateshort.d.ts +5 -3
- package/src/app/shared/material/datetime/material.datetime.d.ts +12 -8
- package/src/app/shared/material/latlong/material.latlong.d.ts +1 -1
- package/src/app/shared/pipes/maskito.pipe.d.ts +1 -8
- package/src/app/shared/pipes/pipes.module.d.ts +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, Directive, Injectable, Pipe, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, ViewChild, ANIMATION_MODULE_TYPE, inject, ChangeDetectorRef, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, APP_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { shareReplay, tap, of, firstValueFrom, Subject, merge, isObservable, from, timer, Subscription, BehaviorSubject, fromEvent, noop as noop$9, Observable, forkJoin, defer, timeout, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY, delay, iif } from 'rxjs';
|
|
4
|
-
import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, mergeMap, debounceTime, startWith, distinctUntilChanged,
|
|
4
|
+
import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, mergeMap, debounceTime, startWith, distinctUntilChanged, skip, throttleTime, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
|
|
5
5
|
import * as i2 from '@angular/common/http';
|
|
6
6
|
import { HttpEventType, HttpClient, HttpHeaders, HttpResponse, HttpClientModule } from '@angular/common/http';
|
|
7
7
|
import * as i2$3 from '@angular/common';
|
|
@@ -42,7 +42,7 @@ import * as LocalForage from 'localforage';
|
|
|
42
42
|
import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
|
|
43
43
|
import * as i1$2 from '@angular/forms';
|
|
44
44
|
import { AbstractControl, UntypedFormGroup, UntypedFormArray, UntypedFormControl, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule, FormControl, FormGroup, FormsModule } from '@angular/forms';
|
|
45
|
-
import { maskitoWithPlaceholder, maskitoDateOptionsGenerator,
|
|
45
|
+
import { maskitoWithPlaceholder, maskitoEventHandler, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
|
|
46
46
|
import * as i12 from 'ngx-material-timepicker';
|
|
47
47
|
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
|
|
48
48
|
import * as i6 from '@angular/material/form-field';
|
|
@@ -50,7 +50,7 @@ import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS, MatError } from '@a
|
|
|
50
50
|
import * as i7 from '@angular/material/input';
|
|
51
51
|
import { MatInputModule } from '@angular/material/input';
|
|
52
52
|
import * as i11 from '@maskito/angular';
|
|
53
|
-
import { MaskitoModule } from '@maskito/angular';
|
|
53
|
+
import { MaskitoModule, MaskitoDirective } from '@maskito/angular';
|
|
54
54
|
import { Capacitor } from '@capacitor/core';
|
|
55
55
|
import { Keyboard } from '@capacitor/keyboard';
|
|
56
56
|
import * as i6$1 from '@angular/material/radio';
|
|
@@ -5150,7 +5150,6 @@ class MaskitoPlaceholderPipe {
|
|
|
5150
5150
|
const placeholderOptions = maskitoWithPlaceholder(placeholder, true);
|
|
5151
5151
|
const plugins = [
|
|
5152
5152
|
...placeholderOptions.plugins,
|
|
5153
|
-
//maskitoRestorePlaceholderOnFocus(placeholder)
|
|
5154
5153
|
];
|
|
5155
5154
|
if (defaultPrefix) {
|
|
5156
5155
|
plugins.push(maskitoPrefixPlugin(defaultPrefix, placeholder));
|
|
@@ -5195,40 +5194,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
5195
5194
|
name: 'maskitoPlaceholder'
|
|
5196
5195
|
}]
|
|
5197
5196
|
}] });
|
|
5198
|
-
class MaskitoDatePipe {
|
|
5199
|
-
transform(baseOptions, pattern, separator = '/') {
|
|
5200
|
-
const dateOptions = maskitoDateOptionsGenerator({
|
|
5201
|
-
mode: pattern.toLowerCase(),
|
|
5202
|
-
separator,
|
|
5203
|
-
});
|
|
5204
|
-
return {
|
|
5205
|
-
...baseOptions,
|
|
5206
|
-
...dateOptions,
|
|
5207
|
-
plugins: [
|
|
5208
|
-
...baseOptions.plugins,
|
|
5209
|
-
...dateOptions.plugins
|
|
5210
|
-
],
|
|
5211
|
-
preprocessors: [
|
|
5212
|
-
// Always put it BEFORE all other preprocessors
|
|
5213
|
-
...baseOptions.preprocessors,
|
|
5214
|
-
...dateOptions.preprocessors,
|
|
5215
|
-
],
|
|
5216
|
-
postprocessors: [
|
|
5217
|
-
...dateOptions.postprocessors,
|
|
5218
|
-
// Always put it AFTER all other postprocessors
|
|
5219
|
-
...baseOptions.postprocessors,
|
|
5220
|
-
],
|
|
5221
|
-
};
|
|
5222
|
-
}
|
|
5223
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MaskitoDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
5224
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: MaskitoDatePipe, name: "maskitoDate" });
|
|
5225
|
-
}
|
|
5226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MaskitoDatePipe, decorators: [{
|
|
5227
|
-
type: Pipe,
|
|
5228
|
-
args: [{
|
|
5229
|
-
name: 'maskitoDate'
|
|
5230
|
-
}]
|
|
5231
|
-
}] });
|
|
5232
5197
|
function maskitoPrefixPlugin(prefix, placeholder) {
|
|
5233
5198
|
return maskitoEventHandler('focus', (element, options) => {
|
|
5234
5199
|
if (element.value === '') {
|
|
@@ -5241,20 +5206,6 @@ function maskitoPrefixPlugin(prefix, placeholder) {
|
|
|
5241
5206
|
}
|
|
5242
5207
|
});
|
|
5243
5208
|
}
|
|
5244
|
-
function maskitoRestorePlaceholderOnFocus(placeholder) {
|
|
5245
|
-
// Focus
|
|
5246
|
-
return maskitoEventHandler('focus', (element, options) => {
|
|
5247
|
-
const value = element.value;
|
|
5248
|
-
if (value.length === placeholder.length) {
|
|
5249
|
-
const index = value.indexOf(EMPTY_PLACEHOLDER_CHAR);
|
|
5250
|
-
if (index !== -1) {
|
|
5251
|
-
element.value = value.replace(/\uFEFF/g, 'D');
|
|
5252
|
-
// substring(0, index) + placeholder.substring(index);
|
|
5253
|
-
element.dispatchEvent(new Event('input'));
|
|
5254
|
-
}
|
|
5255
|
-
}
|
|
5256
|
-
}, { capture: true });
|
|
5257
|
-
}
|
|
5258
5209
|
|
|
5259
5210
|
class SharedPipesModule {
|
|
5260
5211
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -5309,8 +5260,7 @@ class SharedPipesModule {
|
|
|
5309
5260
|
AsArrayPipe,
|
|
5310
5261
|
AsObservablePipe,
|
|
5311
5262
|
AsFloatLabelTypePipe,
|
|
5312
|
-
MaskitoPlaceholderPipe,
|
|
5313
|
-
MaskitoDatePipe], imports: [CommonModule,
|
|
5263
|
+
MaskitoPlaceholderPipe], imports: [CommonModule,
|
|
5314
5264
|
IonicModule,
|
|
5315
5265
|
TranslateModule], exports: [PropertyGetPipe,
|
|
5316
5266
|
PropertyFormatPipe,
|
|
@@ -5362,8 +5312,7 @@ class SharedPipesModule {
|
|
|
5362
5312
|
AsArrayPipe,
|
|
5363
5313
|
AsObservablePipe,
|
|
5364
5314
|
AsFloatLabelTypePipe,
|
|
5365
|
-
MaskitoPlaceholderPipe
|
|
5366
|
-
MaskitoDatePipe] });
|
|
5315
|
+
MaskitoPlaceholderPipe] });
|
|
5367
5316
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SharedPipesModule, imports: [CommonModule,
|
|
5368
5317
|
IonicModule,
|
|
5369
5318
|
TranslateModule] });
|
|
@@ -5429,7 +5378,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
5429
5378
|
AsObservablePipe,
|
|
5430
5379
|
AsFloatLabelTypePipe,
|
|
5431
5380
|
MaskitoPlaceholderPipe,
|
|
5432
|
-
MaskitoDatePipe
|
|
5433
5381
|
],
|
|
5434
5382
|
exports: [
|
|
5435
5383
|
PropertyGetPipe,
|
|
@@ -5483,7 +5431,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
5483
5431
|
AsObservablePipe,
|
|
5484
5432
|
AsFloatLabelTypePipe,
|
|
5485
5433
|
MaskitoPlaceholderPipe,
|
|
5486
|
-
MaskitoDatePipe
|
|
5487
5434
|
]
|
|
5488
5435
|
}]
|
|
5489
5436
|
}] });
|
|
@@ -5736,7 +5683,7 @@ class MatDuration {
|
|
|
5736
5683
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDuration, deps: [{ token: i2$2.Platform }, { token: i2$1.DateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5737
5684
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDuration, selector: "mat-duration-field", inputs: { disabled: "disabled", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: "readonly", required: "required", compact: "compact", maxDecimals: "maxDecimals", placeholderChar: "placeholderChar", tabindex: "tabindex", clearable: "clearable" }, providers: [
|
|
5738
5685
|
DEFAULT_VALUE_ACCESSOR$5,
|
|
5739
|
-
], viewQueries: [{ propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n <ion-text>{{ formControl.value|duration }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mat-form-field-disabled]=\"formControl.disabled\"\n [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n <input matInput #matInput type=\"text\"\n autocomplete=\"off\"\n [maskito]=\"'COMMON.DURATION_PLACEHOLDER'|translate|maskitoPlaceholder:durationMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DURATION_PLACEHOLDER'|translate\"\n [required]=\"required\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n (keyup.escape)=\"preventEvent($event)\"\n (blur)=\"checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n\n <!-- errors -->\n <mat-error *ngIf=\"!formControl.hasError('required') && textControl.hasError('pattern')\" translate>ERROR.FIELD_NOT_VALID_PATTERN</mat-error>\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('min')\">\n {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors.min }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('max')\">\n {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors.max }}</mat-error>\n\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n</ng-template>\n\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i11.
|
|
5686
|
+
], viewQueries: [{ propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n <ion-text>{{ formControl.value|duration }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mat-form-field-disabled]=\"formControl.disabled\"\n [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n <input matInput #matInput type=\"text\"\n autocomplete=\"off\"\n [maskito]=\"'COMMON.DURATION_PLACEHOLDER'|translate|maskitoPlaceholder:durationMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DURATION_PLACEHOLDER'|translate\"\n [required]=\"required\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n (keyup.escape)=\"preventEvent($event)\"\n (blur)=\"checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n\n <!-- errors -->\n <mat-error *ngIf=\"!formControl.hasError('required') && textControl.hasError('pattern')\" translate>ERROR.FIELD_NOT_VALID_PATTERN</mat-error>\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('min')\">\n {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors.min }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('max')\">\n {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors.max }}</mat-error>\n\n <ng-content select=\"mat-error\"></ng-content>\n </mat-form-field>\n</ng-template>\n\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i11.MaskitoCVA, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5740
5687
|
}
|
|
5741
5688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDuration, decorators: [{
|
|
5742
5689
|
type: Component,
|
|
@@ -8186,7 +8133,7 @@ class MatLatLongField {
|
|
|
8186
8133
|
multi: true,
|
|
8187
8134
|
useExisting: forwardRef(() => MatLatLongField),
|
|
8188
8135
|
}
|
|
8189
|
-
], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{_format(formControl.value) }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\">\n\n <ion-col class=\"text ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (signFormControl.invalid || formControl.invalid)\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <!--\n // TODO Normally, this is no longer required since we started using maskito\n (focus)=\"_onFocus($event)\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n -->\n <input matInput #inputElement\n [maskito]=\"inputPlaceholder|translate|maskitoPlaceholder:mask:(!showSignControl && defaultSign)\"\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"inputPlaceholder|translate\"\n (blur)=\"_onBlur($event)\"\n [formControl]=\"textFormControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n\n <div matSuffix *ngIf=\"!showSignControl\">\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n </mat-form-field>\n </ion-col>\n\n <!-- sign -->\n <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n\n <!-- sign on latitude -->\n <mat-form-field *ngSwitchCase=\"'latitude'\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER</mat-label>\n\n <mat-select [formControl]=\"signFormControl\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n <mat-option [value]=\"1\">{{'COMMON.LAT_LONG.LAT_SIGN_N'|translate}}</mat-option>\n <mat-option [value]=\"-1\" >{{'COMMON.LAT_LONG.LAT_SIGN_S'|translate}}</mat-option>\n </mat-select>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n\n <!-- sign on longitude -->\n <mat-form-field *ngSwitchCase=\"'longitude'\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER</mat-label>\n\n <mat-select [formControl]=\"signFormControl\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n <mat-option [value]=\"1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_E'|translate}}</mat-option>\n <mat-option [value]=\"-1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_W'|translate}}</mat-option>\n </mat-select>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\">\n <div class=\"mat-mdc-form-field-error-wrapper\"\n *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey ; else parentError\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n <span *ngSwitchCase=\"'min'\">{{'ERROR.FIELD_MIN_COMPACT'|translate: {min: _format(formControl.errors.min.min) } }}</span>\n <span *ngSwitchCase=\"'max'\">{{'ERROR.FIELD_MAX_COMPACT'|translate: {max: _format(formControl.errors.max.max) } }}</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint[align='end']\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field .datetime-md{padding:0!important}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.text{min-width:185px}ion-grid.fill ion-col.sign{min-width:85px;max-width:85px}mat-form-field{width:100%}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i11.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8136
|
+
], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{_format(formControl.value) }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\">\n\n <ion-col class=\"text ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (signFormControl.invalid || formControl.invalid)\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <!--\n // TODO Normally, this is no longer required since we started using maskito\n (focus)=\"_onFocus($event)\"\n (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n -->\n <input matInput #inputElement\n [maskito]=\"inputPlaceholder|translate|maskitoPlaceholder:mask:(!showSignControl && defaultSign)\"\n type=\"text\"\n autocomplete=\"off\"\n [placeholder]=\"inputPlaceholder|translate\"\n (blur)=\"_onBlur($event)\"\n [formControl]=\"textFormControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n\n <div matSuffix *ngIf=\"!showSignControl\">\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n </mat-form-field>\n </ion-col>\n\n <!-- sign -->\n <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n\n <!-- sign on latitude -->\n <mat-form-field *ngSwitchCase=\"'latitude'\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER</mat-label>\n\n <mat-select [formControl]=\"signFormControl\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n <mat-option [value]=\"1\">{{'COMMON.LAT_LONG.LAT_SIGN_N'|translate}}</mat-option>\n <mat-option [value]=\"-1\" >{{'COMMON.LAT_LONG.LAT_SIGN_S'|translate}}</mat-option>\n </mat-select>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n\n <!-- sign on longitude -->\n <mat-form-field *ngSwitchCase=\"'longitude'\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\">\n <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER</mat-label>\n\n <mat-select [formControl]=\"signFormControl\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n <mat-option [value]=\"1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_E'|translate}}</mat-option>\n <mat-option [value]=\"-1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_W'|translate}}</mat-option>\n </mat-select>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n </mat-form-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\">\n <div class=\"mat-mdc-form-field-error-wrapper\"\n *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey ; else parentError\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n <span *ngSwitchCase=\"'min'\">{{'ERROR.FIELD_MIN_COMPACT'|translate: {min: _format(formControl.errors.min.min) } }}</span>\n <span *ngSwitchCase=\"'max'\">{{'ERROR.FIELD_MAX_COMPACT'|translate: {max: _format(formControl.errors.max.max) } }}</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint[align='end']\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field .datetime-md{padding:0!important}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.text{min-width:185px}ion-grid.fill ion-col.sign{min-width:85px;max-width:85px}mat-form-field{width:100%}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i11.MaskitoCVA, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8190
8137
|
}
|
|
8191
8138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatLatLongField, decorators: [{
|
|
8192
8139
|
type: Component,
|
|
@@ -8305,7 +8252,6 @@ const DEFAULT_VALUE_ACCESSOR$3 = {
|
|
|
8305
8252
|
useExisting: forwardRef(() => MatDate),
|
|
8306
8253
|
multi: true
|
|
8307
8254
|
};
|
|
8308
|
-
const TEXT_MASK$1 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
|
|
8309
8255
|
const noop$4 = () => { };
|
|
8310
8256
|
class MatDate {
|
|
8311
8257
|
dateAdapter;
|
|
@@ -8323,7 +8269,8 @@ class MatDate {
|
|
|
8323
8269
|
textControl;
|
|
8324
8270
|
datePattern;
|
|
8325
8271
|
locale;
|
|
8326
|
-
|
|
8272
|
+
maskitoOptions;
|
|
8273
|
+
datePlaceholder;
|
|
8327
8274
|
mobile;
|
|
8328
8275
|
formControl;
|
|
8329
8276
|
formControlName;
|
|
@@ -8332,7 +8279,6 @@ class MatDate {
|
|
|
8332
8279
|
appearance = 'fill';
|
|
8333
8280
|
required;
|
|
8334
8281
|
compact = false;
|
|
8335
|
-
placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
|
|
8336
8282
|
autofocus = false;
|
|
8337
8283
|
startDate = null;
|
|
8338
8284
|
clearable = false;
|
|
@@ -8391,8 +8337,13 @@ class MatDate {
|
|
|
8391
8337
|
() => this.formControl.errors);
|
|
8392
8338
|
// Get patterns to display date
|
|
8393
8339
|
this.updatePattern(this.translate.instant('COMMON.DATE_PATTERN'));
|
|
8394
|
-
this.
|
|
8395
|
-
|
|
8340
|
+
this.updateMaskOptions(this.translate.instant('COMMON.DATE_PLACEHOLDER'));
|
|
8341
|
+
this._subscription.add(this.translate.get(['COMMON.DATE_PATTERN', 'COMMON.DATE_PLACEHOLDER'])
|
|
8342
|
+
.pipe(skip(1))
|
|
8343
|
+
.subscribe((translate) => {
|
|
8344
|
+
this.updatePattern(translate['COMMON.DATE_PATTERN']);
|
|
8345
|
+
this.updateMaskOptions(translate['COMMON.DATE_PLACEHOLDER']);
|
|
8346
|
+
}));
|
|
8396
8347
|
this._subscription.add(this.textControl.valueChanges
|
|
8397
8348
|
.subscribe((value) => this.onFormChange(value)));
|
|
8398
8349
|
// Listen status changes (when done outside the component - e.g. when setErrors() is calling on the formControl)
|
|
@@ -8557,11 +8508,10 @@ class MatDate {
|
|
|
8557
8508
|
if (this._writing)
|
|
8558
8509
|
return; // Skip if call by self
|
|
8559
8510
|
this._writing = true;
|
|
8511
|
+
if (value === this.datePlaceholder) {
|
|
8512
|
+
value = undefined;
|
|
8513
|
+
}
|
|
8560
8514
|
if (value) {
|
|
8561
|
-
// Make to remove placeholder chars
|
|
8562
|
-
while (value.indexOf(this.placeholderChar) !== -1) {
|
|
8563
|
-
value = value.replace(this.placeholderChar, '');
|
|
8564
|
-
}
|
|
8565
8515
|
// Force '0' for empty month (otherwise moment will use the current month)
|
|
8566
8516
|
value = value.replace('//', '/0/')
|
|
8567
8517
|
// Force '0' for empty year (otherwise moment will use the current year)
|
|
@@ -8614,16 +8564,44 @@ class MatDate {
|
|
|
8614
8564
|
markForCheck() {
|
|
8615
8565
|
this.cd.markForCheck();
|
|
8616
8566
|
}
|
|
8567
|
+
updateMaskOptions(datePlaceholder) {
|
|
8568
|
+
if (this.datePlaceholder != datePlaceholder) {
|
|
8569
|
+
this.datePlaceholder = datePlaceholder;
|
|
8570
|
+
const dateOptions = maskitoDateOptionsGenerator({
|
|
8571
|
+
mode: this.datePattern.toLowerCase(),
|
|
8572
|
+
separator: '/',
|
|
8573
|
+
});
|
|
8574
|
+
const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
|
|
8575
|
+
...placeholderOptions
|
|
8576
|
+
// pass 'true' as second argument to add plugin to hide placeholder when input is not focused
|
|
8577
|
+
} = maskitoWithPlaceholder(this.datePlaceholder, true);
|
|
8578
|
+
this.maskitoOptions = {
|
|
8579
|
+
...dateOptions,
|
|
8580
|
+
plugins: plugins.concat(dateOptions.plugins || []),
|
|
8581
|
+
preprocessors: [
|
|
8582
|
+
// Always put it BEFORE all other preprocessors
|
|
8583
|
+
...placeholderOptions.preprocessors,
|
|
8584
|
+
...dateOptions.preprocessors,
|
|
8585
|
+
],
|
|
8586
|
+
postprocessors: [
|
|
8587
|
+
...dateOptions.postprocessors,
|
|
8588
|
+
// Always put it AFTER all other postprocessors
|
|
8589
|
+
...placeholderOptions.postprocessors,
|
|
8590
|
+
],
|
|
8591
|
+
};
|
|
8592
|
+
this.markForCheck();
|
|
8593
|
+
}
|
|
8594
|
+
}
|
|
8617
8595
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
8618
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact",
|
|
8596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
|
|
8619
8597
|
DEFAULT_VALUE_ACCESSOR$3,
|
|
8620
|
-
], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\"\n [appearance]=\"appearance\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"'COMMON.DATE_PLACEHOLDER'|translate|maskitoPlaceholder:dateMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker()\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"textControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n (click)=\"openDatePicker()\"\n [disabled]=\"disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n\n <mat-datepicker #datePicker\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear()\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-content select=\"mat-error\"></ng-content>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n </mat-form-field>\n \n <!-- mat hint -->\n <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n <div class=\"mat-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i11.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8598
|
+
], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\"\n [appearance]=\"appearance\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoOptions\"\n [formControl]=\"textControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker()\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"textControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n (click)=\"openDatePicker()\"\n [disabled]=\"disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n\n <mat-datepicker #datePicker\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear()\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-content select=\"mat-error\"></ng-content>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n </mat-form-field>\n\n <!-- mat hint -->\n <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n <div class=\"mat-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8621
8599
|
}
|
|
8622
8600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDate, decorators: [{
|
|
8623
8601
|
type: Component,
|
|
8624
8602
|
args: [{ selector: 'mat-date-field', providers: [
|
|
8625
8603
|
DEFAULT_VALUE_ACCESSOR$3,
|
|
8626
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\"\n [appearance]=\"appearance\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"
|
|
8604
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\"\n [appearance]=\"appearance\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoOptions\"\n [formControl]=\"textControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker()\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"textControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n (click)=\"openDatePicker()\"\n [disabled]=\"disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n\n <mat-datepicker #datePicker\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear()\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-content select=\"mat-error\"></ng-content>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n </mat-form-field>\n\n <!-- mat hint -->\n <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n <div class=\"mat-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
|
|
8627
8605
|
}], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
|
|
8628
8606
|
type: Optional
|
|
8629
8607
|
}] }], propDecorators: { mobile: [{
|
|
@@ -8642,8 +8620,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
8642
8620
|
type: Input
|
|
8643
8621
|
}], compact: [{
|
|
8644
8622
|
type: Input
|
|
8645
|
-
}], placeholderChar: [{
|
|
8646
|
-
type: Input
|
|
8647
8623
|
}], autofocus: [{
|
|
8648
8624
|
type: Input
|
|
8649
8625
|
}], startDate: [{
|
|
@@ -8672,9 +8648,7 @@ const DEFAULT_VALUE_ACCESSOR$2 = {
|
|
|
8672
8648
|
useExisting: forwardRef(() => MatDateTime),
|
|
8673
8649
|
multi: true
|
|
8674
8650
|
};
|
|
8675
|
-
const
|
|
8676
|
-
const HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
|
|
8677
|
-
const HOUR_MASK = [/[012]/, /\d/, ':', /[012345]/, /\d/];
|
|
8651
|
+
const TIME_REGEXP = /^[012][0-9][:][012345][0-9]$/;
|
|
8678
8652
|
const noop$3 = () => { };
|
|
8679
8653
|
class MatDateTime {
|
|
8680
8654
|
dateAdapter;
|
|
@@ -8695,13 +8669,16 @@ class MatDateTime {
|
|
|
8695
8669
|
_controlName;
|
|
8696
8670
|
_required;
|
|
8697
8671
|
_subscriptSizing = null;
|
|
8698
|
-
|
|
8699
|
-
|
|
8672
|
+
dateControl;
|
|
8673
|
+
timeControl;
|
|
8700
8674
|
displayPattern;
|
|
8701
|
-
|
|
8675
|
+
datePattern;
|
|
8676
|
+
timePattern;
|
|
8702
8677
|
locale;
|
|
8703
|
-
|
|
8704
|
-
|
|
8678
|
+
maskitoDateOptions;
|
|
8679
|
+
maskitoTimeOptions;
|
|
8680
|
+
datePlaceholder;
|
|
8681
|
+
timePlaceholder;
|
|
8705
8682
|
get subscriptSizing() {
|
|
8706
8683
|
return this._subscriptSizing || this._defaults?.subscriptSizing;
|
|
8707
8684
|
}
|
|
@@ -8736,7 +8713,6 @@ class MatDateTime {
|
|
|
8736
8713
|
appearance;
|
|
8737
8714
|
mobile;
|
|
8738
8715
|
compact = false;
|
|
8739
|
-
placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
|
|
8740
8716
|
autofocus = false;
|
|
8741
8717
|
startDate = null;
|
|
8742
8718
|
clearable = false;
|
|
@@ -8785,14 +8761,22 @@ class MatDateTime {
|
|
|
8785
8761
|
this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
|
|
8786
8762
|
this._required = isNotNilBoolean(this._required) ? this._required : (control.hasValidator(Validators.required) || isBlankString(this._required));
|
|
8787
8763
|
this._setFormControl(control);
|
|
8788
|
-
// Create the
|
|
8789
|
-
this.
|
|
8790
|
-
// Create the
|
|
8791
|
-
this.
|
|
8764
|
+
// Create the date control
|
|
8765
|
+
this.dateControl = this.formBuilder.control(null);
|
|
8766
|
+
// Create the time control
|
|
8767
|
+
this.timeControl = this.formBuilder.control(null, this.mobile ? null : Validators.pattern(TIME_REGEXP));
|
|
8792
8768
|
// Get patterns to display date and date+time
|
|
8793
|
-
this.
|
|
8794
|
-
|
|
8795
|
-
this.
|
|
8769
|
+
this.updatePattern(this.translate.instant(['COMMON.DATE_PATTERN', 'COMMON.TIME_PATTERN', 'COMMON.DATE_TIME_PATTERN']));
|
|
8770
|
+
this.updateDateMaskOptions(this.translate.instant('COMMON.DATE_PLACEHOLDER'));
|
|
8771
|
+
this.updateTimeMaskOptions(this.translate.instant('COMMON.TIME_PLACEHOLDER'));
|
|
8772
|
+
this._subscription.add(this.translate.get(['COMMON.DATE_PATTERN', 'COMMON.TIME_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_PLACEHOLDER', 'COMMON.TIME_PLACEHOLDER'])
|
|
8773
|
+
.pipe(skip(1))
|
|
8774
|
+
.subscribe((translate) => {
|
|
8775
|
+
this.updatePattern(translate);
|
|
8776
|
+
this.updateDateMaskOptions(translate['COMMON.DATE_PLACEHOLDER']);
|
|
8777
|
+
this.updateTimeMaskOptions(translate['COMMON.TIME_PLACEHOLDER']);
|
|
8778
|
+
}));
|
|
8779
|
+
this._subscription.add(merge(this.dateControl.valueChanges, this.timeControl.valueChanges)
|
|
8796
8780
|
.subscribe((_) => this.onFormChange()));
|
|
8797
8781
|
this._writing = false;
|
|
8798
8782
|
}
|
|
@@ -8816,36 +8800,36 @@ class MatDateTime {
|
|
|
8816
8800
|
// DEBUG
|
|
8817
8801
|
// console.debug("[mat-date-time] writeValue() with:", value);
|
|
8818
8802
|
// Convert into date
|
|
8819
|
-
const
|
|
8820
|
-
if (!
|
|
8821
|
-
this.
|
|
8822
|
-
this.
|
|
8803
|
+
const moment = isMoment(value) ? value : fromDateISOString(value);
|
|
8804
|
+
if (!moment || !moment.isValid()) {
|
|
8805
|
+
this.dateControl.patchValue(null, { emitEvent: false });
|
|
8806
|
+
this.timeControl.patchValue(null, { emitEvent: false });
|
|
8823
8807
|
}
|
|
8824
8808
|
else {
|
|
8825
|
-
const
|
|
8809
|
+
const date = moment
|
|
8826
8810
|
// Important: clone, because startOf() will update the existing date
|
|
8827
8811
|
.clone()
|
|
8828
|
-
// Reset
|
|
8812
|
+
// Reset time
|
|
8829
8813
|
.startOf('day');
|
|
8830
|
-
const
|
|
8814
|
+
const dateStr = this.dateAdapter.format(date, this.datePattern);
|
|
8831
8815
|
// Format time
|
|
8832
8816
|
let timeStr;
|
|
8833
|
-
if (DateUtils.isNoTime(
|
|
8817
|
+
if (DateUtils.isNoTime(moment)) {
|
|
8834
8818
|
// Clear time
|
|
8835
8819
|
timeStr = null;
|
|
8836
8820
|
}
|
|
8837
8821
|
else {
|
|
8838
8822
|
// - Format hh
|
|
8839
|
-
let hour =
|
|
8823
|
+
let hour = moment.hour();
|
|
8840
8824
|
hour = hour < 10 ? ('0' + hour) : hour;
|
|
8841
8825
|
// - Format mm
|
|
8842
|
-
let minutes =
|
|
8826
|
+
let minutes = moment.minutes();
|
|
8843
8827
|
minutes = minutes < 10 ? ('0' + minutes) : minutes;
|
|
8844
8828
|
timeStr = `${hour}:${minutes}`;
|
|
8845
8829
|
}
|
|
8846
8830
|
// Update controls
|
|
8847
|
-
this.
|
|
8848
|
-
this.
|
|
8831
|
+
this.dateControl.patchValue(dateStr, { emitEvent: false });
|
|
8832
|
+
this.timeControl.patchValue(timeStr, { emitEvent: false });
|
|
8849
8833
|
}
|
|
8850
8834
|
this._writing = false;
|
|
8851
8835
|
this.markForCheck();
|
|
@@ -8861,12 +8845,12 @@ class MatDateTime {
|
|
|
8861
8845
|
return; // Skip
|
|
8862
8846
|
this._disabling = true;
|
|
8863
8847
|
if (isDisabled) {
|
|
8864
|
-
this.
|
|
8865
|
-
this.
|
|
8848
|
+
this.dateControl.disable({ emitEvent: false });
|
|
8849
|
+
this.timeControl.disable({ emitEvent: false });
|
|
8866
8850
|
}
|
|
8867
8851
|
else {
|
|
8868
|
-
this.
|
|
8869
|
-
this.
|
|
8852
|
+
this.dateControl.enable({ emitEvent: false });
|
|
8853
|
+
this.timeControl.enable({ emitEvent: false });
|
|
8870
8854
|
}
|
|
8871
8855
|
this._disabling = false;
|
|
8872
8856
|
this.markForCheck();
|
|
@@ -8922,13 +8906,13 @@ class MatDateTime {
|
|
|
8922
8906
|
.pipe(filter((_) => !this._readonly && !this._writing && !this._disabling) // Skip
|
|
8923
8907
|
)
|
|
8924
8908
|
.subscribe((_) => {
|
|
8925
|
-
this.
|
|
8926
|
-
this.
|
|
8909
|
+
this.dateControl.updateValueAndValidity({ emitEvent: false });
|
|
8910
|
+
this.timeControl.updateValueAndValidity({ emitEvent: false });
|
|
8927
8911
|
if (this._formControl.touched) {
|
|
8928
|
-
if (!this.
|
|
8929
|
-
this.
|
|
8930
|
-
if (!this.
|
|
8931
|
-
this.
|
|
8912
|
+
if (!this.dateControl.touched)
|
|
8913
|
+
this.dateControl.markAsTouched();
|
|
8914
|
+
if (!this.timeControl.touched)
|
|
8915
|
+
this.timeControl.markAsTouched();
|
|
8932
8916
|
}
|
|
8933
8917
|
this.markForCheck();
|
|
8934
8918
|
});
|
|
@@ -8960,25 +8944,25 @@ class MatDateTime {
|
|
|
8960
8944
|
console.warn('Invalid MatDatepicker event. Skipping', event);
|
|
8961
8945
|
return; // Skip
|
|
8962
8946
|
}
|
|
8963
|
-
let
|
|
8947
|
+
let moment = event.value;
|
|
8964
8948
|
// No value, but mobile mode: use the current date
|
|
8965
|
-
if (!
|
|
8949
|
+
if (!moment && this.mobile) {
|
|
8966
8950
|
this._writing = true;
|
|
8967
|
-
|
|
8968
|
-
this._formControl.setValue(
|
|
8951
|
+
moment = DateUtils.resetTime(DateUtils.moment().locale(this.locale));
|
|
8952
|
+
this._formControl.setValue(moment, { emitEvent: false });
|
|
8969
8953
|
this.markForCheck();
|
|
8970
8954
|
this._writing = false;
|
|
8971
8955
|
}
|
|
8972
|
-
// Convert to usable date, then convert to
|
|
8973
|
-
const
|
|
8956
|
+
// Convert to usable date, then convert to date pattern (e.g DD/MM/YYYY)
|
|
8957
|
+
const date = moment?.locale(this.locale) // set locale
|
|
8974
8958
|
.hour(0).minute(0).seconds(0).millisecond(0) // Reset hour
|
|
8975
8959
|
.utc(true);
|
|
8976
|
-
const
|
|
8977
|
-
// Update the
|
|
8978
|
-
if (this.
|
|
8960
|
+
const dateStr = date && this.dateAdapter.format(date, this.datePattern) || null;
|
|
8961
|
+
// Update the date control
|
|
8962
|
+
if (this.dateControl.value !== dateStr) {
|
|
8979
8963
|
// DEBUG
|
|
8980
|
-
// console.debug("[mat-date-time] onDatePickerChange() new value:",
|
|
8981
|
-
this.
|
|
8964
|
+
// console.debug("[mat-date-time] onDatePickerChange() new value:", dateStr);
|
|
8965
|
+
this.dateControl.setValue(dateStr, {
|
|
8982
8966
|
emitEvent: true // Will call onFormChange
|
|
8983
8967
|
});
|
|
8984
8968
|
}
|
|
@@ -8996,10 +8980,10 @@ class MatDateTime {
|
|
|
8996
8980
|
}
|
|
8997
8981
|
_onTimePickerChange(timeStr) {
|
|
8998
8982
|
// Update the time control, if need
|
|
8999
|
-
if (this.
|
|
8983
|
+
if (this.timeControl.value !== timeStr) {
|
|
9000
8984
|
// DEBUG
|
|
9001
8985
|
// console.debug("[mat-date-time] onTimePickerChange() new value:", timeStr);
|
|
9002
|
-
this.
|
|
8986
|
+
this.timeControl.setValue(timeStr, {
|
|
9003
8987
|
emitEvent: true // Will call onFormChange
|
|
9004
8988
|
});
|
|
9005
8989
|
}
|
|
@@ -9018,7 +9002,7 @@ class MatDateTime {
|
|
|
9018
9002
|
this.openTimePicker(event);
|
|
9019
9003
|
}
|
|
9020
9004
|
_checkIfTouched() {
|
|
9021
|
-
if (this.
|
|
9005
|
+
if (this.dateControl.touched || this.timeControl.touched) {
|
|
9022
9006
|
this._onTouchedCallback();
|
|
9023
9007
|
this.markForCheck();
|
|
9024
9008
|
}
|
|
@@ -9035,46 +9019,49 @@ class MatDateTime {
|
|
|
9035
9019
|
/* -- private method -- */
|
|
9036
9020
|
updatePattern(patterns) {
|
|
9037
9021
|
this.displayPattern = (patterns['COMMON.DATE_TIME_PATTERN'] !== 'COMMON.DATE_TIME_PATTERN' ? patterns['COMMON.DATE_TIME_PATTERN'] : 'L LT');
|
|
9038
|
-
this.
|
|
9022
|
+
this.datePattern = (patterns['COMMON.DATE_PATTERN'] !== 'COMMON.DATE_PATTERN' ? patterns['COMMON.DATE_PATTERN'] : 'L');
|
|
9023
|
+
this.timePattern = (patterns['COMMON.TIME_PATTERN'] !== 'COMMON.TIME_PATTERN' ? patterns['COMMON.TIME_PATTERN'] : 'LT');
|
|
9039
9024
|
}
|
|
9040
9025
|
onFormChange() {
|
|
9041
9026
|
if (this._writing)
|
|
9042
9027
|
return; // Skip if call by self
|
|
9043
9028
|
this._writing = true;
|
|
9044
|
-
let
|
|
9045
|
-
|
|
9029
|
+
let dateStr = this.dateControl.value;
|
|
9030
|
+
let timeStr = this.timeControl.value;
|
|
9031
|
+
if (dateStr === this.datePlaceholder) {
|
|
9032
|
+
dateStr = undefined;
|
|
9033
|
+
}
|
|
9034
|
+
if (timeStr === this.timePlaceholder) {
|
|
9035
|
+
timeStr = undefined;
|
|
9036
|
+
}
|
|
9046
9037
|
// DEBUG
|
|
9047
|
-
//console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [
|
|
9048
|
-
const incompleteValue = isNilOrBlank(
|
|
9049
|
-
if (incompleteValue || this.
|
|
9038
|
+
//console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dateStr, time]);
|
|
9039
|
+
const incompleteValue = isNilOrBlank(timeStr) !== isNilOrBlank(dateStr);
|
|
9040
|
+
if (incompleteValue || this.dateControl.invalid || this.timeControl.invalid) {
|
|
9050
9041
|
this._formControl.markAsPending({ onlySelf: true });
|
|
9051
9042
|
this._formControl.setErrors({
|
|
9052
9043
|
validDate: incompleteValue,
|
|
9053
9044
|
...this._formControl.errors,
|
|
9054
|
-
...this.
|
|
9055
|
-
...this.
|
|
9045
|
+
...this.dateControl.errors,
|
|
9046
|
+
...this.timeControl.errors
|
|
9056
9047
|
});
|
|
9057
|
-
if (this.
|
|
9048
|
+
if (this.dateControl.dirty || this.timeControl.dirty) {
|
|
9058
9049
|
this._formControl.markAsDirty();
|
|
9059
9050
|
}
|
|
9060
9051
|
this._writing = false;
|
|
9061
9052
|
return;
|
|
9062
9053
|
}
|
|
9063
|
-
// Make to remove placeholder chars
|
|
9064
|
-
while (dayStr && dayStr.indexOf(this.placeholderChar) !== -1) {
|
|
9065
|
-
dayStr = dayStr.replace(this.placeholderChar, '');
|
|
9066
|
-
}
|
|
9067
9054
|
// Force '0' for empty month (otherwise moment will use the current month)
|
|
9068
|
-
|
|
9055
|
+
dateStr = dateStr && dateStr.replace('//', '/0/')
|
|
9069
9056
|
// Force '0' for empty year (otherwise moment will use the current year)
|
|
9070
9057
|
.replace(/\/$/, '/0');
|
|
9071
|
-
// Parse
|
|
9072
|
-
const
|
|
9058
|
+
// Parse date
|
|
9059
|
+
const date = dateStr && this.dateAdapter.parse(dateStr, this.datePattern) || null;
|
|
9073
9060
|
// Parse time
|
|
9074
|
-
const hourParts = (
|
|
9061
|
+
const hourParts = (timeStr || '').split(':');
|
|
9075
9062
|
const hour = parseInt(hourParts[0] || 0);
|
|
9076
9063
|
const minutes = parseInt(hourParts[1] || 0);
|
|
9077
|
-
const dateTime =
|
|
9064
|
+
const dateTime = date && date
|
|
9078
9065
|
.locale(this.locale) // set as time as locale time
|
|
9079
9066
|
.hour(hour).minute(minutes) // Set local hour
|
|
9080
9067
|
.seconds(0).millisecond(0) // Reset seconds/millisecond
|
|
@@ -9111,8 +9098,8 @@ class MatDateTime {
|
|
|
9111
9098
|
});
|
|
9112
9099
|
}
|
|
9113
9100
|
markAsTouched(opts) {
|
|
9114
|
-
this.
|
|
9115
|
-
this.
|
|
9101
|
+
this.dateControl.markAsTouched(opts);
|
|
9102
|
+
this.timeControl.markAsTouched(opts);
|
|
9116
9103
|
this._onTouchedCallback();
|
|
9117
9104
|
this.markForCheck();
|
|
9118
9105
|
}
|
|
@@ -9122,16 +9109,71 @@ class MatDateTime {
|
|
|
9122
9109
|
markForCheck() {
|
|
9123
9110
|
this.cd.markForCheck();
|
|
9124
9111
|
}
|
|
9112
|
+
updateDateMaskOptions(datePlaceholder) {
|
|
9113
|
+
if (this.datePlaceholder !== datePlaceholder) {
|
|
9114
|
+
this.datePlaceholder = datePlaceholder;
|
|
9115
|
+
const dateOptions = maskitoDateOptionsGenerator({
|
|
9116
|
+
mode: this.datePattern.toLowerCase(),
|
|
9117
|
+
separator: '/',
|
|
9118
|
+
});
|
|
9119
|
+
const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
|
|
9120
|
+
...placeholderOptions
|
|
9121
|
+
// pass 'true' as second argument to add plugin to hide placeholder when input is not focused
|
|
9122
|
+
} = maskitoWithPlaceholder(this.datePlaceholder, true);
|
|
9123
|
+
this.maskitoDateOptions = {
|
|
9124
|
+
...dateOptions,
|
|
9125
|
+
plugins: plugins.concat(dateOptions.plugins || []),
|
|
9126
|
+
preprocessors: [
|
|
9127
|
+
// Always put it BEFORE all other preprocessors
|
|
9128
|
+
...placeholderOptions.preprocessors,
|
|
9129
|
+
...dateOptions.preprocessors,
|
|
9130
|
+
],
|
|
9131
|
+
postprocessors: [
|
|
9132
|
+
...dateOptions.postprocessors,
|
|
9133
|
+
// Always put it AFTER all other postprocessors
|
|
9134
|
+
...placeholderOptions.postprocessors,
|
|
9135
|
+
],
|
|
9136
|
+
};
|
|
9137
|
+
this.markForCheck();
|
|
9138
|
+
}
|
|
9139
|
+
}
|
|
9140
|
+
updateTimeMaskOptions(timePlaceholder) {
|
|
9141
|
+
if (this.timePlaceholder !== timePlaceholder) {
|
|
9142
|
+
this.timePlaceholder = timePlaceholder;
|
|
9143
|
+
const timeOptions = maskitoTimeOptionsGenerator({
|
|
9144
|
+
mode: this.timePattern.toUpperCase()
|
|
9145
|
+
});
|
|
9146
|
+
const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
|
|
9147
|
+
...placeholderOptions
|
|
9148
|
+
// pass 'true' as second argument to add plugin to hide placeholder when input is not focused
|
|
9149
|
+
} = maskitoWithPlaceholder(this.timePlaceholder, true);
|
|
9150
|
+
this.maskitoTimeOptions = {
|
|
9151
|
+
...timeOptions,
|
|
9152
|
+
plugins: plugins.concat(timeOptions.plugins || []),
|
|
9153
|
+
preprocessors: [
|
|
9154
|
+
// Always put it BEFORE all other preprocessors
|
|
9155
|
+
...placeholderOptions.preprocessors,
|
|
9156
|
+
...timeOptions.preprocessors,
|
|
9157
|
+
],
|
|
9158
|
+
postprocessors: [
|
|
9159
|
+
...timeOptions.postprocessors,
|
|
9160
|
+
// Always put it AFTER all other postprocessors
|
|
9161
|
+
...placeholderOptions.postprocessors,
|
|
9162
|
+
],
|
|
9163
|
+
};
|
|
9164
|
+
this.markForCheck();
|
|
9165
|
+
}
|
|
9166
|
+
}
|
|
9125
9167
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
|
|
9126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact",
|
|
9168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
|
|
9127
9169
|
DEFAULT_VALUE_ACCESSOR$2,
|
|
9128
|
-
], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dayControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\">\n\n<!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label\n *ngIf=\"floatLabel !== 'never' && !!placeholder\" >{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"'COMMON.DATE_PLACEHOLDER'|translate|maskitoPlaceholder:dayMask\"\n *ngIf=\"!mobile\"\n [formControl]=\"dayControl\"\n [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"dayControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label>{{hourControl.value||('COMMON.TIME'|translate)}}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\"\n >\n <mat-label\n *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input matInput #matInput type=\"text\" [formControl]=\"hourControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"'COMMON.TIME_PLACEHOLDER'|translate|maskitoPlaceholder:hourMask\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\" max=\"23\"\n [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n <input #matInput type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"hourControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly>\n\n <!-- Hide the final (hidden) input -->\n <input matInput [formControl]=\"hourControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\" >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\">\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\">\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\">\n <div class=\"mat-mdc-form-field-error-wrapper\"\n *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey ; else parentError\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i11.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9170
|
+
], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\">\n\n<!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label\n *ngIf=\"floatLabel !== 'never' && !!placeholder\" >{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label>{{timeControl.value||('COMMON.TIME'|translate)}}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label\n *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input matInput #matInput type=\"text\" [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\" max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n <input #matInput type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly>\n\n <!-- Hide the final (hidden) input -->\n <input matInput [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\" >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\">\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\">\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\">\n <div class=\"mat-mdc-form-field-error-wrapper\"\n *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey ; else parentError\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9129
9171
|
}
|
|
9130
9172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDateTime, decorators: [{
|
|
9131
9173
|
type: Component,
|
|
9132
9174
|
args: [{ selector: 'mat-date-time-field', providers: [
|
|
9133
9175
|
DEFAULT_VALUE_ACCESSOR$2,
|
|
9134
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dayControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\">\n\n<!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label\n *ngIf=\"floatLabel !== 'never' && !!placeholder\" >{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"'COMMON.DATE_PLACEHOLDER'|translate|maskitoPlaceholder:dayMask\"\n *ngIf=\"!mobile\"\n [formControl]=\"dayControl\"\n [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"dayControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label>{{hourControl.value||('COMMON.TIME'|translate)}}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\"\n >\n <mat-label\n *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input matInput #matInput type=\"text\" [formControl]=\"hourControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"'COMMON.TIME_PLACEHOLDER'|translate|maskitoPlaceholder:hourMask\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\" max=\"23\"\n [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n <input #matInput type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"hourControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly>\n\n <!-- Hide the final (hidden) input -->\n <input matInput [formControl]=\"hourControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\" >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\">\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\">\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\">\n <div class=\"mat-mdc-form-field-error-wrapper\"\n *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey ; else parentError\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
|
|
9176
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n <!-- day -->\n <ion-col class=\"day ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n (focus)=\"_openDatePickerIfMobile($event)\">\n\n<!-- (focusin)=\"mobile && _preventEvent($event)\"-->\n <mat-label\n *ngIf=\"floatLabel !== 'never' && !!placeholder\" >{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-input-element\"\n [maskito]=\"maskitoDateOptions\"\n *ngIf=\"!mobile\"\n [formControl]=\"dateControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"dateControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n (click)=\"openDatePicker($event, datePicker)\"\n [disabled]=\"formControl.disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n </mat-form-field>\n\n <!-- The date picker -->\n <mat-datepicker #datePicker\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label>{{timeControl.value||('COMMON.TIME'|translate)}}</ion-label>\n <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <!-- cancel button -->\n <ng-template #dateHeader>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n </ion-col>\n\n <!-- hour -->\n <ion-col class=\"hour ion-no-padding\">\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"'dynamic'\"\n [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n >\n <mat-label\n *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n <input matInput #matInput type=\"text\" [formControl]=\"timeControl\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoTimeOptions\"\n class=\"mat-input-element\"\n autocomplete=\"off\"\n min=\"0\" max=\"23\"\n [required]=\"required\"\n (keyup.arrowDown)=\"openTimePicker($event)\"\n (keyup.escape)=\"_preventEvent($event)\"\n (blur)=\"_checkIfTouched()\"\n [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n <input #matInput type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"timeControl\"\n (click)=\"_openTimePickerIfMobile($event)\"\n readonly>\n\n <!-- Hide the final (hidden) input -->\n <input matInput [formControl]=\"timeControl\"\n hidden\n [required]=\"required\"\n [ngxTimepicker]=\"timePicker\"\n [format]=\"24\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && !mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"openTimePicker($event)\" >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n <button matSuffix type=\"button\" mat-icon-button\n tabindex=\"-1\"\n *ngIf=\"!compact && mobile\"\n [disabled]=\"formControl.disabled\"\n (click)=\"_openTimePickerIfMobile($event)\">\n <mat-icon>access_time</mat-icon>\n </button>\n\n <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n (timeSet)=\"_onTimePickerChange($event)\"\n [ESC]=\"!mobile\"\n [defaultTime]=\"'00:00'\"\n [cancelBtnTmpl]=\"timePickerCancelButton\"\n [confirmBtnTmpl]=\"timePickerOkButton\"\n [preventOverlayClick]=\"mobile\"\n [enableKeyboardInput]=\"false\"\n [disableAnimation]=\"true\">\n <!-- cancel button -->\n <ng-template #timePickerCancelButton>\n <ion-button fill=\"clear\" color=\"dark\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n </ng-template>\n\n <!-- confirm button -->\n <ng-template #timePickerOkButton>\n <ion-button fill=\"solid\" color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ng-template>\n\n </ngx-material-timepicker>\n </mat-form-field>\n </ion-col>\n\n </ion-row>\n\n </ion-grid>\n\n <!-- Do the same as MatFromField since angular 15 (see component source)-->\n <div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n [ngSwitch]=\"_getDisplayedMessages()\">\n <div class=\"mat-mdc-form-field-error-wrapper\"\n *ngSwitchCase=\"'error'\">\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey ; else parentError\"\n [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-template #parentError>\n <ng-content select=\"mat-error\"></ng-content>\n </ng-template>\n </div>\n <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #iconDesktop>\n <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:185px}ion-grid.fill ion-col.hour{min-width:100px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
|
|
9135
9177
|
}], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
|
|
9136
9178
|
type: Optional
|
|
9137
9179
|
}] }, { type: undefined, decorators: [{
|
|
@@ -9155,8 +9197,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
9155
9197
|
type: Input
|
|
9156
9198
|
}], compact: [{
|
|
9157
9199
|
type: Input
|
|
9158
|
-
}], placeholderChar: [{
|
|
9159
|
-
type: Input
|
|
9160
9200
|
}], autofocus: [{
|
|
9161
9201
|
type: Input
|
|
9162
9202
|
}], startDate: [{
|
|
@@ -9188,7 +9228,6 @@ const DEFAULT_VALUE_ACCESSOR$1 = {
|
|
|
9188
9228
|
useExisting: forwardRef(() => MatDateShort),
|
|
9189
9229
|
multi: true
|
|
9190
9230
|
};
|
|
9191
|
-
const TEXT_MASK = [/\d/, /\d/, /\d/, /\d/];
|
|
9192
9231
|
const noop$2 = () => { };
|
|
9193
9232
|
class MatDateShort {
|
|
9194
9233
|
dateAdapter;
|
|
@@ -9206,7 +9245,8 @@ class MatDateShort {
|
|
|
9206
9245
|
textControl;
|
|
9207
9246
|
datePattern;
|
|
9208
9247
|
locale;
|
|
9209
|
-
|
|
9248
|
+
maskitoOptions;
|
|
9249
|
+
yearPlaceholder;
|
|
9210
9250
|
mobile;
|
|
9211
9251
|
formControl;
|
|
9212
9252
|
formControlName;
|
|
@@ -9215,7 +9255,6 @@ class MatDateShort {
|
|
|
9215
9255
|
appearance = 'fill';
|
|
9216
9256
|
required;
|
|
9217
9257
|
compact = false;
|
|
9218
|
-
placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
|
|
9219
9258
|
autofocus = false;
|
|
9220
9259
|
startDate = null;
|
|
9221
9260
|
clearable = false;
|
|
@@ -9273,8 +9312,13 @@ class MatDateShort {
|
|
|
9273
9312
|
() => this.formControl.errors);
|
|
9274
9313
|
// Get patterns to display date
|
|
9275
9314
|
this.updatePattern(this.translate.instant('COMMON.DATE_YEAR_PATTERN'));
|
|
9276
|
-
this.
|
|
9277
|
-
|
|
9315
|
+
this.updateMaskOptions(this.translate.instant('COMMON.DATE_YEAR_PLACEHOLDER'));
|
|
9316
|
+
this._subscription.add(this.translate.get(['COMMON.DATE_YEAR_PATTERN', 'COMMON.DATE_YEAR_PLACEHOLDER'])
|
|
9317
|
+
.pipe(skip(1))
|
|
9318
|
+
.subscribe((translate) => {
|
|
9319
|
+
this.updatePattern(translate['COMMON.DATE_YEAR_PATTERN']);
|
|
9320
|
+
this.updateMaskOptions(translate['COMMON.DATE_YEAR_PLACEHOLDER']);
|
|
9321
|
+
}));
|
|
9278
9322
|
this._subscription.add(this.textControl.valueChanges
|
|
9279
9323
|
.subscribe((value) => this.onFormChange(value)));
|
|
9280
9324
|
// Listen status changes (when done outside the component - e.g. when setErrors() is calling on the formControl)
|
|
@@ -9448,13 +9492,10 @@ class MatDateShort {
|
|
|
9448
9492
|
if (this._writing)
|
|
9449
9493
|
return; // Skip if call by self
|
|
9450
9494
|
this._writing = true;
|
|
9451
|
-
if (value) {
|
|
9452
|
-
|
|
9453
|
-
while (value.indexOf(this.placeholderChar) !== -1) {
|
|
9454
|
-
value = value.replace(this.placeholderChar, '');
|
|
9455
|
-
}
|
|
9495
|
+
if (value === this.yearPlaceholder) {
|
|
9496
|
+
value = undefined;
|
|
9456
9497
|
}
|
|
9457
|
-
// Parse
|
|
9498
|
+
// Parse year string
|
|
9458
9499
|
let date = value && this.dateAdapter.parse(value, this.datePattern) || null;
|
|
9459
9500
|
// Reset time
|
|
9460
9501
|
date = date && date.locale(this.locale).startOf('year');
|
|
@@ -9508,16 +9549,43 @@ class MatDateShort {
|
|
|
9508
9549
|
markForCheck() {
|
|
9509
9550
|
this.cd.markForCheck();
|
|
9510
9551
|
}
|
|
9552
|
+
updateMaskOptions(yearPlaceholder) {
|
|
9553
|
+
if (this.yearPlaceholder !== yearPlaceholder) {
|
|
9554
|
+
this.yearPlaceholder = yearPlaceholder;
|
|
9555
|
+
const dateOptions = maskitoDateOptionsGenerator({
|
|
9556
|
+
mode: this.datePattern.toLowerCase(),
|
|
9557
|
+
});
|
|
9558
|
+
const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
|
|
9559
|
+
...placeholderOptions
|
|
9560
|
+
// pass 'true' as second argument to add plugin to hide placeholder when input is not focused
|
|
9561
|
+
} = maskitoWithPlaceholder(this.yearPlaceholder, true);
|
|
9562
|
+
this.maskitoOptions = {
|
|
9563
|
+
...dateOptions,
|
|
9564
|
+
plugins: plugins.concat(dateOptions.plugins || []),
|
|
9565
|
+
preprocessors: [
|
|
9566
|
+
// Always put it BEFORE all other preprocessors
|
|
9567
|
+
...placeholderOptions.preprocessors,
|
|
9568
|
+
...dateOptions.preprocessors,
|
|
9569
|
+
],
|
|
9570
|
+
postprocessors: [
|
|
9571
|
+
...dateOptions.postprocessors,
|
|
9572
|
+
// Always put it AFTER all other postprocessors
|
|
9573
|
+
...placeholderOptions.postprocessors,
|
|
9574
|
+
],
|
|
9575
|
+
};
|
|
9576
|
+
this.markForCheck();
|
|
9577
|
+
}
|
|
9578
|
+
}
|
|
9511
9579
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDateShort, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
9512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact",
|
|
9580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
|
|
9513
9581
|
DEFAULT_VALUE_ACCESSOR$1,
|
|
9514
|
-
], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"'COMMON.DATE_YEAR_PLACEHOLDER'|translate|maskitoPlaceholder:yearMask\"\n [formControl]=\"textControl\"\n [placeholder]=\"'COMMON.DATE_YEAR_PLACEHOLDER'|translate\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker()\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"textControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n (click)=\"openDatePicker()\"\n [disabled]=\"disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n\n <mat-datepicker #datePicker\n startView=\"multi-year\"\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n (yearSelected)=\"_closeDatePicker($event)\"\n panelClass=\"mat-date-short-panel\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-content select=\"mat-error\"></ng-content>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n <!-- mat hint -->\n <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n <div class=\"mat-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </mat-form-field>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i11.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9582
|
+
], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoOptions\"\n [formControl]=\"textControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker()\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"textControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n (click)=\"openDatePicker()\"\n [disabled]=\"disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n\n <mat-datepicker #datePicker\n startView=\"multi-year\"\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n (yearSelected)=\"_closeDatePicker($event)\"\n panelClass=\"mat-date-short-panel\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-content select=\"mat-error\"></ng-content>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n <!-- mat hint -->\n <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n <div class=\"mat-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </mat-form-field>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9515
9583
|
}
|
|
9516
9584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MatDateShort, decorators: [{
|
|
9517
9585
|
type: Component,
|
|
9518
9586
|
args: [{ selector: 'mat-date-short-field', providers: [
|
|
9519
9587
|
DEFAULT_VALUE_ACCESSOR$1,
|
|
9520
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"
|
|
9588
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n class=\"mat-form-field-disabled\">\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput hidden type=\"text\"\n readonly\n [formControl]=\"formControl\">\n <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n <mat-form-field [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n (focus)=\"_openDatePickerIfMobile($event)\"\n (click)=\"_openDatePickerIfMobile($event)\">\n\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <div matPrefix>\n <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n </div>\n\n <!-- Desktop -->\n <input matInput #matInput autocomplete=\"off\" type=\"text\"\n *ngIf=\"!mobile\"\n [maskito]=\"maskitoOptions\"\n [formControl]=\"textControl\"\n (blur)=\"_checkIfTouched()\"\n (keyup.arrowDown)=\"openDatePicker()\"\n (keyup.escape)=\"_preventEvent($event)\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [appAutofocus]=\"autofocus\">\n <input type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"!mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <!-- Mobile -->\n <input #matInput autocomplete=\"off\" type=\"text\"\n class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n *ngIf=\"mobile\"\n [formControl]=\"textControl\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n readonly>\n <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n *ngIf=\"mobile\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"datePickerFilter\"\n (dateChange)=\"_onDatePickerChange($event)\"\n readonly>\n\n <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n (click)=\"openDatePicker()\"\n [disabled]=\"disabled\">\n <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n </button>\n\n <mat-datepicker #datePicker\n startView=\"multi-year\"\n [touchUi]=\"mobile\"\n [disabled]=\"disabled\"\n (yearSelected)=\"_closeDatePicker($event)\"\n panelClass=\"mat-date-short-panel\"\n [startAt]=\"startDate\">\n <!-- Date picker buttons -->\n <mat-datepicker-actions *ngIf=\"mobile\">\n <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <button matSuffix mat-icon-button tabindex=\"-1\"\n type=\"button\"\n *ngIf=\"clearable\"\n (click)=\"clear($event)\"\n [hidden]=\"formControl.disabled || !formControl.value\">\n <mat-icon>close</mat-icon>\n </button>\n\n <!-- errors -->\n <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n </mat-error>\n <ng-content select=\"mat-error\"></ng-content>\n\n <div matSuffix>\n <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n </div>\n\n <!-- mat hint -->\n <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n <div class=\"mat-form-field-hint-spacer\"></div>\n <ng-content select=\"mat-hint\"></ng-content>\n </div>\n </mat-form-field>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
|
|
9521
9589
|
}], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
|
|
9522
9590
|
type: Optional
|
|
9523
9591
|
}] }], propDecorators: { mobile: [{
|
|
@@ -9536,8 +9604,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
9536
9604
|
type: Input
|
|
9537
9605
|
}], compact: [{
|
|
9538
9606
|
type: Input
|
|
9539
|
-
}], placeholderChar: [{
|
|
9540
|
-
type: Input
|
|
9541
9607
|
}], autofocus: [{
|
|
9542
9608
|
type: Input
|
|
9543
9609
|
}], startDate: [{
|
|
@@ -9573,7 +9639,7 @@ class SharedMatDateTimeModule {
|
|
|
9573
9639
|
MatButtonModule,
|
|
9574
9640
|
MatDatepickerModule,
|
|
9575
9641
|
MatMomentDateModule,
|
|
9576
|
-
|
|
9642
|
+
MaskitoDirective,
|
|
9577
9643
|
NgxMaterialTimepickerModule, i1$1.TranslateModule, SharedDirectivesModule], exports: [MatIconModule,
|
|
9578
9644
|
MatDate,
|
|
9579
9645
|
MatDateTime,
|
|
@@ -9589,7 +9655,6 @@ class SharedMatDateTimeModule {
|
|
|
9589
9655
|
MatButtonModule,
|
|
9590
9656
|
MatDatepickerModule,
|
|
9591
9657
|
MatMomentDateModule,
|
|
9592
|
-
MaskitoModule,
|
|
9593
9658
|
NgxMaterialTimepickerModule,
|
|
9594
9659
|
TranslateModule.forChild(),
|
|
9595
9660
|
SharedDirectivesModule, MatIconModule] });
|
|
@@ -9609,7 +9674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
9609
9674
|
MatButtonModule,
|
|
9610
9675
|
MatDatepickerModule,
|
|
9611
9676
|
MatMomentDateModule,
|
|
9612
|
-
|
|
9677
|
+
MaskitoDirective,
|
|
9613
9678
|
NgxMaterialTimepickerModule,
|
|
9614
9679
|
TranslateModule.forChild(),
|
|
9615
9680
|
SharedDirectivesModule
|
|
@@ -13147,7 +13212,7 @@ class AppFormField {
|
|
|
13147
13212
|
useExisting: forwardRef(() => AppFormField),
|
|
13148
13213
|
multi: true
|
|
13149
13214
|
}
|
|
13150
|
-
], viewQueries: [{ propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }, { propertyName: "autocompleteField", first: true, predicate: ["autocompleteField"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n\n <!-- integer -->\n <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n <input matInput #matInput\n type=\"number\"\n autocomplete=\"off\"\n [readonly]=\"readonly\"\n [min]=\"definition.minValue\"\n [max]=\"definition.maxValue\"\n pattern=\"-?[0-9]*\"\n step=\"1\"\n [appAutofocus]=\"autofocus\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\"\n (keypress)=\"filterNumberInput($event, false)\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n (click)=\"selectInputContent($event)\">\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('min')\">\n {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('max')\">\n {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('pattern')\">\n {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('integer')\">\n {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n <button matSuffix *ngIf=\"clearable\"\n mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"formControl.reset()\"\n [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n <mat-icon>close</mat-icon>\n </button>\n\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- double -->\n <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput #matInput\n type=\"number\"\n decimal=\"true\"\n autocomplete=\"off\"\n [min]=\"definition.minValue\"\n [max]=\"definition.maxValue\"\n [appAutofocus]=\"autofocus\"\n [readonly]=\"readonly\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n [step]=\"numberInputStep\"\n (keypress)=\"filterNumberInput($event, true)\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n (click)=\"selectInputContent($event)\">\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n <mat-error *ngIf=\"formControl.hasError('min')\">\n {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('max')\">\n {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{maxDecimals:\n definition.maximumNumberDecimals} }}</mat-error>\n\n <button matSuffix *ngIf=\"clearable\"\n mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"formControl.reset()\"\n [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n <mat-icon>close</mat-icon>\n </button>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- boolean -->\n <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n [class]=\"classList\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [required]=\"required\"\n [compact]=\"compact\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\">\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-boolean-field>\n\n <!-- date -->\n <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n [class]=\"classList\"\n [formControl]=\"formControl\"\n [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n [floatLabel]=\"floatLabel\"\n [required]=\"required\"\n [clearable]=\"clearable\"\n [readonly]=\"readonly\"\n [compact]=\"compact\"\n [tabindex]=\"tabindex\"\n [autofocus]=\"autofocus\">\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-date-field>\n\n <!-- date time -->\n <mat-date-time-field *ngSwitchCase=\"'dateTime'\" #matInput\n [class]=\"classList\"\n [formControl]=\"formControl\"\n [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n [floatLabel]=\"floatLabel\"\n [required]=\"required\"\n [clearable]=\"clearable\"\n [readonly]=\"readonly\"\n [compact]=\"compact\"\n [tabindex]=\"tabindex\"\n [autofocus]=\"autofocus\">\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-date-time-field>\n\n <!-- enum -->\n <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n <mat-select [formControl]=\"formControl\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\">\n <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n </mat-select>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- multi enum -->\n <mat-chips-field *ngSwitchCase=\"'enums'\"\n [class]=\"classList\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [formControl]=\"formControl\"\n [clearable]=\"clearable\"\n [items]=\"_values\"\n [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n [config]=\"definition.autocomplete\"\n [showAllOnFocus]=\"true\"\n [required]=\"required\"\n [chipColor]=\"chipColor | matColor\">\n <ng-content select=\"[matPrefix]\"></ng-content>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-chips-field>\n\n <!-- color -->\n <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n\n <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n <input matInput autocomplete=\"off\"\n [appAutofocus]=\"autofocus\"\n [formControl]=\"formControl\"\n [style.color]=\"getColorContrast(formControl.value)\"\n [style.background]=\"formControl.value\"\n [colorPicker]=\"formControl.value\"\n (colorPickerChange)=\"writeValue($event)\"\n [cpSaveClickOutside]=\"true\"\n cpPosition=\"top\"\n cpOutputFormat=\"hex\"\n [cpOKButton]=\"false\"\n [required]=\"required\"/>\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n </mat-form-field>\n\n <!-- string -->\n <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n <input matInput #matInput\n autocomplete=\"off\"\n [appAutofocus]=\"autofocus\"\n [formControl]=\"formControl\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabindex\"\n (click)=\"selectInputContent($event)\"\n (keypress)=\"filterAlphanumericalInput($event)\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\">\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n <button matSuffix *ngIf=\"clearable\"\n mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"formControl.reset()\"\n [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n <mat-icon>close</mat-icon>\n </button>\n\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- auto-complete -->\n <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n #autocompleteField\n [class]=\"classList\"\n [autofocus]=\"autofocus\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [formControl]=\"formControl\"\n [config]=\"definition.autocomplete\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [clearable]=\"clearable\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\"\n [displayWith]=\"getDisplayValueFn(definition)\">\n <ng-content select=\"[matPrefix]\"></ng-content>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </mat-autocomplete-field>\n\n <!-- multi auto-complete -->\n <mat-chips-field *ngSwitchCase=\"'entities'\"\n [class]=\"classList\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [formControl]=\"formControl\"\n [config]=\"definition.autocomplete\"\n [required]=\"required\"\n [chipColor]=\"chipColor | matColor\"\n [clearable]=\"clearable\"\n [displayWith]=\"getDisplayValueFn(definition)\">\n <ng-content select=\"[matPrefix]\"></ng-content>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-chips-field>\n\n <!-- other -->\n <div *ngSwitchDefault>\n <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </div>\n\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13215
|
+
], viewQueries: [{ propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }, { propertyName: "autocompleteField", first: true, predicate: ["autocompleteField"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n\n <!-- integer -->\n <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n <input matInput #matInput\n type=\"number\"\n autocomplete=\"off\"\n [readonly]=\"readonly\"\n [min]=\"definition.minValue\"\n [max]=\"definition.maxValue\"\n pattern=\"-?[0-9]*\"\n step=\"1\"\n [appAutofocus]=\"autofocus\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\"\n (keypress)=\"filterNumberInput($event, false)\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n (click)=\"selectInputContent($event)\">\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('min')\">\n {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('max')\">\n {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('pattern')\">\n {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('integer')\">\n {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n <button matSuffix *ngIf=\"clearable\"\n mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"formControl.reset()\"\n [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n <mat-icon>close</mat-icon>\n </button>\n\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- double -->\n <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n\n <input matInput #matInput\n type=\"number\"\n decimal=\"true\"\n autocomplete=\"off\"\n [min]=\"definition.minValue\"\n [max]=\"definition.maxValue\"\n [appAutofocus]=\"autofocus\"\n [readonly]=\"readonly\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n [step]=\"numberInputStep\"\n (keypress)=\"filterNumberInput($event, true)\"\n [formControl]=\"formControl\"\n [required]=\"required\"\n [tabIndex]=\"tabindex\"\n (click)=\"selectInputContent($event)\">\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n <mat-error *ngIf=\"formControl.hasError('min')\">\n {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('max')\">\n {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{maxDecimals:\n definition.maximumNumberDecimals} }}</mat-error>\n\n <button matSuffix *ngIf=\"clearable\"\n mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"formControl.reset()\"\n [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n <mat-icon>close</mat-icon>\n </button>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- boolean -->\n <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n [class]=\"classList\"\n [formControl]=\"formControl\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [required]=\"required\"\n [compact]=\"compact\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\">\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-boolean-field>\n\n <!-- date -->\n <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n [class]=\"classList\"\n [formControl]=\"formControl\"\n [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n [floatLabel]=\"floatLabel\"\n [required]=\"required\"\n [clearable]=\"clearable\"\n [readonly]=\"readonly\"\n [compact]=\"compact\"\n [tabindex]=\"tabindex\"\n [autofocus]=\"autofocus\">\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-date-field>\n\n <!-- date time -->\n <mat-date-time-field *ngSwitchCase=\"'dateTime'\" #matInput\n [class]=\"classList\"\n [formControl]=\"formControl\"\n [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n [floatLabel]=\"floatLabel\"\n [required]=\"required\"\n [clearable]=\"clearable\"\n [readonly]=\"readonly\"\n [compact]=\"compact\"\n [tabindex]=\"tabindex\"\n [autofocus]=\"autofocus\">\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-date-time-field>\n\n <!-- enum -->\n <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n <mat-select [formControl]=\"formControl\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\">\n <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n </mat-select>\n\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- multi enum -->\n <mat-chips-field *ngSwitchCase=\"'enums'\"\n [class]=\"classList\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [formControl]=\"formControl\"\n [clearable]=\"clearable\"\n [items]=\"_values\"\n [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n [config]=\"definition.autocomplete\"\n [showAllOnFocus]=\"true\"\n [required]=\"required\"\n [chipColor]=\"chipColor | matColor\">\n <ng-content select=\"[matPrefix]\"></ng-content>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-chips-field>\n\n <!-- color -->\n <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n\n <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n <input matInput autocomplete=\"off\"\n [appAutofocus]=\"autofocus\"\n [formControl]=\"formControl\"\n [style.color]=\"getColorContrast(formControl.value)\"\n [style.background]=\"formControl.value\"\n [colorPicker]=\"formControl.value\"\n (colorPickerChange)=\"writeValue($event)\"\n [cpSaveClickOutside]=\"true\"\n cpPosition=\"top\"\n cpOutputFormat=\"hex\"\n [cpOKButton]=\"false\"\n [required]=\"required\"/>\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n </mat-form-field>\n\n <!-- string -->\n <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel | asFloatLabelType\" [class]=\"classList\">\n <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{placeholder}}</mat-label>\n <input matInput #matInput\n autocomplete=\"off\"\n [appAutofocus]=\"autofocus\"\n [formControl]=\"formControl\"\n [placeholder]=\"floatLabel === 'never' ? placeholder : undefined\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabindex\"\n (click)=\"selectInputContent($event)\"\n (keypress)=\"filterAlphanumericalInput($event)\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\">\n <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n <button matSuffix *ngIf=\"clearable\"\n mat-icon-button tabindex=\"-1\"\n type=\"button\"\n (click)=\"formControl.reset()\"\n [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n <mat-icon>close</mat-icon>\n </button>\n\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-form-field>\n\n <!-- auto-complete -->\n <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n #autocompleteField\n [class]=\"classList\"\n [autofocus]=\"autofocus\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [formControl]=\"formControl\"\n [config]=\"definition.autocomplete\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [clearable]=\"clearable\"\n (keyup.enter)=\"onKeyupEnter.emit($event)\"\n [displayWith]=\"getDisplayValueFn(definition)\">\n <ng-content select=\"[matPrefix]\"></ng-content>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </mat-autocomplete-field>\n\n <!-- multi auto-complete -->\n <mat-chips-field *ngSwitchCase=\"'entities'\"\n [class]=\"classList\"\n [placeholder]=\"placeholder\"\n [floatLabel]=\"floatLabel\"\n [formControl]=\"formControl\"\n [config]=\"definition.autocomplete\"\n [required]=\"required\"\n [chipColor]=\"chipColor | matColor\"\n [clearable]=\"clearable\"\n [displayWith]=\"getDisplayValueFn(definition)\">\n <ng-content select=\"[matPrefix]\"></ng-content>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </mat-chips-field>\n\n <!-- other -->\n <div *ngSwitchDefault>\n <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n <div matSuffix>\n <ng-content select=\"[matSuffix]\"></ng-content>\n </div>\n </div>\n\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5$1.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13151
13216
|
}
|
|
13152
13217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AppFormField, decorators: [{
|
|
13153
13218
|
type: Component,
|
|
@@ -32914,7 +32979,7 @@ class NewTokenModal extends AppEntityEditorModal {
|
|
|
32914
32979
|
return flags;
|
|
32915
32980
|
}
|
|
32916
32981
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: NewTokenModal, deps: [{ token: i0.Injector }, { token: UserTokenValidatorService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component });
|
|
32917
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: NewTokenModal, selector: "app-new-token-modal", inputs: { tokenScopes: "tokenScopes", existingNames: "existingNames" }, usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar modalName=\"NewTokenModal\"\n [title]=\"$title | async\"\n [color]=\"'secondary'\"\n [showSpinner]=\"loading\"\n [canValidate]=\"!loading && valid\"\n (cancel)=\"close($event)\"\n (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n <!-- error -->\n <ion-item *ngIf=\"error\" lines=\"none\">\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n\n <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>\n\n <form class=\"form-container\" [formGroup]=\"tokenForm\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n <mat-form-field>\n <mat-label>{{'ACCOUNT.TOKENS.CREATE.NAME'|translate}}</mat-label>\n <input matInput\n [appAutofocus]=\"true\"\n [autofocusDelay]=\"500\"\n formControlName=\"name\"\n autocomplete=\"off\"\n required\n [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n >\n <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS</mat-error>\n </mat-form-field>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-chips-field\n formControlName=\"scopes\"\n appearance=\"fill\"\n chipColor=\"primary\"\n [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n [config]=\"tokenConfig\"\n [mobile]=\"mobile\"\n [debug]=\"false\"\n [required]=\"true\"\n [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n >\n <mat-error *ngIf=\"form.controls.name.hasError('notEmptyArray') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n </mat-chips-field>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-field\n formControlName=\"expirationDate\"\n [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n [mobile]=\"mobile\"\n [required]=\"true\"\n [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n ></mat-date-field>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-button\n *ngIf=\"tokenForm | formGetValue: 'token' | isNilOrBlank; else showToken\"\n [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate\"\n (click)=\"generate($event)\"\n [disabled]=\"tokenForm.invalid\"\n >\n {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate}}\n </ion-button>\n <ng-template #showToken>\n <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>\n <mat-form-field>\n <textarea matInput formControlName=\"token\" readonly style=\"height: auto; background-color: lightgray;\" rows=\"4\"></textarea>\n <button matSuffix\n mat-icon-button\n [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate\"\n (click)=\"copy($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n </mat-form-field>\n </ng-template>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </form>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n <ng-content></ng-content>\n </ion-col>\n\n <ion-col size=\"auto\">\n\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n\n <ion-button [fill]=\"invalid ? 'clear' : 'solid'\"\n [disabled]=\"disabled || loading || invalid\"\n (click)=\"saveAndClose($event)\"\n (keyup.enter)=\"saveAndClose($event)\"\n color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }] });
|
|
32982
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: NewTokenModal, selector: "app-new-token-modal", inputs: { tokenScopes: "tokenScopes", existingNames: "existingNames" }, usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar modalName=\"NewTokenModal\"\n [title]=\"$title | async\"\n [color]=\"'secondary'\"\n [showSpinner]=\"loading\"\n [canValidate]=\"!loading && valid\"\n (cancel)=\"close($event)\"\n (validate)=\"saveAndClose($event)\"\n></app-modal-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n <!-- error -->\n <ion-item *ngIf=\"error\" lines=\"none\">\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n </ion-item>\n\n <p><b translate>ACCOUNT.TOKENS.CREATE.DESCRIPTION</b></p>\n\n <form class=\"form-container\" [formGroup]=\"tokenForm\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n <mat-form-field>\n <mat-label>{{'ACCOUNT.TOKENS.CREATE.NAME'|translate}}</mat-label>\n <input matInput\n [appAutofocus]=\"true\"\n [autofocusDelay]=\"500\"\n formControlName=\"name\"\n autocomplete=\"off\"\n required\n [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n >\n <mat-error *ngIf=\"form.controls.name.hasError('required') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS</mat-error>\n </mat-form-field>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-chips-field\n formControlName=\"scopes\"\n appearance=\"fill\"\n chipColor=\"primary\"\n [placeholder]=\"'ACCOUNT.TOKENS.CREATE.SCOPES' | translate\"\n [config]=\"tokenConfig\"\n [mobile]=\"mobile\"\n [debug]=\"false\"\n [required]=\"true\"\n [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n >\n <mat-error *ngIf=\"form.controls.name.hasError('notEmptyArray') && form.controls.name.touched\" translate>ERROR.FIELD_REQUIRED</mat-error>\n </mat-chips-field>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-date-field\n formControlName=\"expirationDate\"\n [placeholder]=\"'ACCOUNT.TOKENS.CREATE.EXPIRATION_DATE' | translate\"\n [mobile]=\"mobile\"\n [required]=\"true\"\n [readonly]=\"tokenForm | formGetValue: 'token' | isNotNilOrBlank\"\n ></mat-date-field>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-button\n *ngIf=\"tokenForm | formGetValue: 'token' | isNilOrBlank; else showToken\"\n [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_GENERATE_TITLE' | translate\"\n (click)=\"generate($event)\"\n [disabled]=\"tokenForm.invalid\"\n >\n {{ 'ACCOUNT.TOKENS.CREATE.BTN_GENERATE' | translate}}\n </ion-button>\n <ng-template #showToken>\n <p><b translate>ACCOUNT.TOKENS.CREATE.COPY_HELP</b></p>\n <mat-form-field>\n <textarea matInput formControlName=\"token\" readonly style=\"height: auto; background-color: lightgray;\" rows=\"4\"></textarea>\n <button matSuffix\n mat-icon-button\n [title]=\"'ACCOUNT.TOKENS.CREATE.BTN_COPY_TITLE' | translate\"\n (click)=\"copy($event)\"\n >\n <mat-icon>content_copy</mat-icon>\n </button>\n </mat-form-field>\n </ng-template>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </form>\n\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col>\n <ng-content></ng-content>\n </ion-col>\n\n <ion-col size=\"auto\">\n\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"close($event)\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n\n <ion-button [fill]=\"invalid ? 'clear' : 'solid'\"\n [disabled]=\"disabled || loading || invalid\"\n (click)=\"saveAndClose($event)\"\n (keyup.enter)=\"saveAndClose($event)\"\n color=\"tertiary\">\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: ModalToolbarComponent, selector: "app-modal-toolbar", inputs: ["modalName", "title", "color", "showSpinner", "canValidate", "validateIcon"], outputs: ["cancel", "validate"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: IsNotNilOrBlankPipe, name: "isNotNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }] });
|
|
32918
32983
|
}
|
|
32919
32984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: NewTokenModal, decorators: [{
|
|
32920
32985
|
type: Component,
|
|
@@ -38800,11 +38865,11 @@ class DateTimeTestPage {
|
|
|
38800
38865
|
}
|
|
38801
38866
|
stringify = JSON.stringify;
|
|
38802
38867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i2$2.Platform }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
38803
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <!-- debugging memory leak -->\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-time-field formControlName=\"emptyRequired\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <!-- Mobile mode -->\n <ion-grid *ngIf=\"mode=='mobile'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Mobile mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleMobileApparence($event)\">\n Change apparence\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty value + required -->\n <ion-col>\n\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Desktop mode -->\n <ion-grid *ngIf=\"mode==='desktop'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value (No time)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-time-field #readonlyField formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }] });
|
|
38868
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <!-- debugging memory leak -->\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-time-field formControlName=\"emptyRequired\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <!-- Mobile mode -->\n <ion-grid *ngIf=\"mode=='mobile'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Mobile mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleMobileApparence($event)\">\n Change apparence\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty value + required -->\n <ion-col>\n\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.endDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Desktop mode -->\n <ion-grid *ngIf=\"mode==='desktop'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value (No time)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-time-field #readonlyField formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.endDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }] });
|
|
38804
38869
|
}
|
|
38805
38870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DateTimeTestPage, decorators: [{
|
|
38806
38871
|
type: Component,
|
|
38807
|
-
args: [{ selector: 'app-data-time-test', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <!-- debugging memory leak -->\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-time-field formControlName=\"emptyRequired\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <!-- Mobile mode -->\n <ion-grid *ngIf=\"mode=='mobile'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Mobile mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleMobileApparence($event)\">\n Change apparence\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty value + required -->\n <ion-col>\n\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Desktop mode -->\n <ion-grid *ngIf=\"mode==='desktop'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value (No time)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-time-field #readonlyField formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n </form>\n\n</ion-content>\n" }]
|
|
38872
|
+
args: [{ selector: 'app-data-time-test', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date/Time field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <!-- debugging memory leak -->\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-time-field formControlName=\"emptyRequired\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <!-- Mobile mode -->\n <ion-grid *ngIf=\"mode=='mobile'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Mobile mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-checkbox (change)=\"toggleMobileApparence($event)\">\n Change apparence\n </mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty value + required -->\n <ion-col>\n\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"true\"\n [appearance]=\"mobileApparence\"\n >\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.endDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [required]=\"true\"\n [appearance]=\"mobileApparence\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Desktop mode -->\n <ion-grid *ngIf=\"mode==='desktop'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"empty\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Empty required value -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value + required\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"emptyRequired\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"enable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"disable\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- NoTime -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value (No time)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"noTime\"\n placeholder=\"Date/Time\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-time-field #readonlyField formControlName=\"readonly\"\n placeholder=\"Date/Time\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n <!-- Date diff -->\n <ion-row>\n <ion-col>\n <ion-text><h5>Date diff</h5></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Start date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.startDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"startDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [required]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n End date time\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.endDateTime.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"endDateTime\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [required]=\"true\"\n [subscriptSizing]=\"'fixed'\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <!-- duration -->\n <mat-hint align=\"end\" *ngIf=\"form.controls.startDateTime.valid && form.controls.endDateTime.value as value\">\n <span translate>COMMON.DURATION_DOTS</span>\n {{\n {\n startValue: form.controls.startDateTime.value,\n endValue: value\n } | dateDiffDuration\n }}\n </mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"hint\"\n placeholder=\"Date/Time\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-time-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n </form>\n\n</ion-content>\n" }]
|
|
38808
38873
|
}], ctorParameters: () => [{ type: i2$2.Platform }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
|
|
38809
38874
|
|
|
38810
38875
|
class DateTestPage {
|
|
@@ -38905,7 +38970,7 @@ class DateTestPage {
|
|
|
38905
38970
|
}
|
|
38906
38971
|
stringify = JSON.stringify;
|
|
38907
38972
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DateTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
38908
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n\n <!-- debugging memory leak -->\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-field formControlName=\"empty\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Mobile mode -->\n <ion-grid *ngIf=\"mode==='mobile'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Mobile mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"empty\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- TimeZone -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n TimeZone\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>timezone=\"{{timezone}}\" value=\"{{stringify(form.controls.timezone.value)}}\"</pre>\n </small>\n <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"timezone\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [timezone]=\"timezone\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-field #mobileReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"hint\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <!-- Desktop mode -->\n <ion-grid *ngIf=\"mode==='desktop'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"empty\"\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- TimeZone -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n TimeZone\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>timezone=\"{{timezone}}\" value={{stringify(form.controls.timezone.value)}}</pre>\n </small>\n <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"timezone\"\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [timezone]=\"timezone\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-field #desktopReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"hint\"\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n </ion-grid>\n\n </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }] });
|
|
38973
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n\n <!-- debugging memory leak -->\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-field formControlName=\"empty\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <!-- Mobile mode -->\n <ion-grid *ngIf=\"mode==='mobile'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Mobile mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"empty\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- TimeZone -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n TimeZone\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>timezone=\"{{timezone}}\" value=\"{{stringify(form.controls.timezone.value)}}\"</pre>\n </small>\n <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"timezone\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\"\n [timezone]=\"timezone\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-field #mobileReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"hint\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <!-- Desktop mode -->\n <ion-grid *ngIf=\"mode==='desktop'\">\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.empty.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"empty\"\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.emptyRequired.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.enable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.disable.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- TimeZone -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n TimeZone\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>timezone=\"{{timezone}}\" value={{stringify(form.controls.timezone.value)}}</pre>\n </small>\n <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"timezone\"\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\"\n [timezone]=\"timezone\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{stringify(form.controls.readonly.value)}}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-field #desktopReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Hint -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Hint\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-field formControlName=\"hint\"\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n <mat-hint>Some hint</mat-hint>\n </mat-date-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n </ion-grid>\n\n </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }] });
|
|
38909
38974
|
}
|
|
38910
38975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DateTestPage, decorators: [{
|
|
38911
38976
|
type: Component,
|
|
@@ -39090,7 +39155,7 @@ class DateShortTestPage {
|
|
|
39090
39155
|
}
|
|
39091
39156
|
stringify = JSON.stringify;
|
|
39092
39157
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DateShortTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
39093
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date short field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <!-- debugging memory leak -->\n <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-short-field formControlName=\"empty\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <ion-grid *ngIf=\"mode==='mobile'\">\n <!-- Mobile mode -->\n <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"empty\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-short-field #mobileReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <ion-grid *ngIf=\"mode==='desktop'\">\n <!-- Desktop mode -->\n <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n {{stringify(form.controls.empty.value)}}\n </pre><br/>\n <pre>\n formControl.valid? {{form.controls.empty?.valid}}\n textControl.valid? {{desktopEmptyField.textControl?.valid}}\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"empty\" #desktopEmptyField\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value + required -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-short-field #desktopReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n </ion-grid>\n\n </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateShort, selector: "mat-date-short-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
|
|
39158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Date short field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link\n [active]=\"mode==='mobile'\"\n (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='desktop'\"\n (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode==='memory'\"\n (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link\n [active]=\"mode==='temp'\"\n (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <ion-grid *ngIf=\"mode==='memory'\">\n\n <!-- debugging memory leak -->\n <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col size=\"auto\">\n <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n </ion-col>\n <ion-col size=\"4\">\n <mat-form-field floatLabel=\"auto\">\n <input matInput type=\"text\" hidden>\n <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n Mobile ?\n </mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col>\n <mat-date-short-field formControlName=\"empty\"\n *ngIf=\"!memoryHide\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"memoryMobile\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <ion-grid *ngIf=\"mode==='mobile'\">\n <!-- Mobile mode -->\n <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"empty\"\n placeholder=\"Date\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-short-field #mobileReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"true\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <!-- debug console -->\n <ion-row>\n <!-- buttons -->\n <ion-col size=\"2\">\n <!-- submit form -->\n <ion-button (click)=\"doSubmit($event)\"\n fill=\"outline\">\n <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <!-- clear log -->\n <ion-button (click)=\"clearLogPanel()\"\n fill=\"outline\">\n <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n <ion-text color=\"primary\">Log:<br/></ion-text>\n <div class=\"ion-padding-start\">\n <ion-text color=\"medium\">\n <small [innerHTML]=\"logContent\"></small>\n </ion-text>\n </div>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <ion-grid *ngIf=\"mode==='desktop'\">\n <!-- Desktop mode -->\n <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col>\n\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n {{stringify(form.controls.empty.value)}}\n </pre><br/>\n <pre>\n formControl.valid? {{form.controls.empty?.valid}}\n textControl.valid? {{desktopEmptyField.textControl?.valid}}\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"empty\" #desktopEmptyField\n placeholder=\"Date\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n\n <!-- Empty value + required -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Empty value (required)\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"emptyRequired\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n With value\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"enable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disable\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-date-short-field formControlName=\"disable\"\n placeholder=\"Date\"\n [required]=\"true\"\n [mobile]=\"false\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Readonly toggle\n </ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox (change)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n </mat-checkbox>\n\n <mat-date-short-field #desktopReadonlyField formControlName=\"readonly\"\n placeholder=\"Date\"\n [readonly]=\"true\"\n [mobile]=\"false\"\n [clearable]=\"true\">\n <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n </mat-date-short-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n </ion-row>\n </ion-grid>\n\n </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateShort, selector: "mat-date-short-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
|
|
39094
39159
|
}
|
|
39095
39160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DateShortTestPage, decorators: [{
|
|
39096
39161
|
type: Component,
|
|
@@ -39422,7 +39487,7 @@ class NumpadTestPage {
|
|
|
39422
39487
|
console.debug('Validate form: ', this.form.value);
|
|
39423
39488
|
}
|
|
39424
39489
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: NumpadTestPage, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
39425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: NumpadTestPage, selector: "app-numpad-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Numeric pad test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <h1>Numpad test page:</h1>\n\n <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <ion-grid>\n\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Decimal field, readonly\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>Empty decimal field</mat-label>\n <input matInput type=\"text\" formControlName=\"empty\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadDecimal\"\n readonly>\n <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- filled -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Integer field\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>Filled integer field</mat-label>\n <input matInput type=\"number\" formControlName=\"integer\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadInteger\">\n <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- append to input -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Attach to input, readonly\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>A number</mat-label>\n <input matInput type=\"text\" formControlName=\"integer\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadAppendToInput\"\n readonly>\n <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disabled control\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>Disabled field</mat-label>\n <input matInput type=\"number\" formControlName=\"disable\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadDisabled\">\n <mat-numpad #numpadDisabled></mat-numpad>\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n\n <!-- Other field (for comparision) -->\n <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Mat date time\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n </mat-date-time-field>\n\n <mat-date-time-field formControlName=\"datetime\"\n placeholder=\"Date/Time field (mobile)\"\n [mobile]=\"true\">\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "
|
|
39490
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: NumpadTestPage, selector: "app-numpad-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Numeric pad test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n <h1>Numpad test page:</h1>\n\n <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n <ion-grid>\n\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Decimal field, readonly\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>Empty decimal field</mat-label>\n <input matInput type=\"text\" formControlName=\"empty\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadDecimal\"\n readonly>\n <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- filled -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Integer field\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>Filled integer field</mat-label>\n <input matInput type=\"number\" formControlName=\"integer\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadInteger\">\n <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- append to input -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Attach to input, readonly\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>A number</mat-label>\n <input matInput type=\"text\" formControlName=\"integer\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadAppendToInput\"\n readonly>\n <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Disabled control\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-form-field >\n <mat-label>Disabled field</mat-label>\n <input matInput type=\"number\" formControlName=\"disable\"\n autocomplete=\"off\"\n [matNumpad]=\"numpadDisabled\">\n <mat-numpad #numpadDisabled></mat-numpad>\n </mat-form-field>\n\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n\n <!-- Other field (for comparision) -->\n <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">\n Mat date time\n </ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n </mat-date-time-field>\n\n <mat-date-time-field formControlName=\"datetime\"\n placeholder=\"Date/Time field (mobile)\"\n [mobile]=\"true\">\n </mat-date-time-field>\n\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["subscriptSizing", "formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatNumpadComponent, selector: "mat-numpad", inputs: ["keymap", "decimal", "appendToInput", "disableAnimation", "noBackdrop", "position"], outputs: ["keypress", "closed"] }, { kind: "directive", type: NumpadDirective, selector: "[matNumpad]", inputs: ["keymap", "matNumpad", "value", "disabled", "decimal", "disableClick"] }] });
|
|
39426
39491
|
}
|
|
39427
39492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: NumpadTestPage, decorators: [{
|
|
39428
39493
|
type: Component,
|
|
@@ -42321,5 +42386,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
42321
42386
|
* Generated bundle index. Do not edit.
|
|
42322
42387
|
*/
|
|
42323
42388
|
|
|
42324
|
-
export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractDateFormat, AbstractNamedFilterService, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MaskitoDatePipe, MaskitoPlaceholderPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RxStateModule, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, SubMenuTabDirective, SwipeTestPage, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoPrefixPlugin, maskitoRestorePlaceholderOnFocus, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
|
|
42389
|
+
export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_DEBUG_DATA_SERVICE, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_FRAGMENTS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_JOB_PROGRESSION_SERVICE, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_LOGGING_SERVICE, APP_MENU_ITEMS, APP_MENU_OPTIONS, APP_NAMED_FILTER_SERVICE, APP_PROGRESS_BAR_SERVICE, APP_SETTINGS_MENU_ITEMS, APP_STORAGE, APP_STORAGE_EXPLORER_PROTECTED_KEYS, APP_TESTING_PAGES, APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, APP_USER_EVENT_SERVICE, APP_USER_SETTINGS_OPTIONS, APP_USER_TOKEN_SCOPES, AboutModal, AbstractDateFormat, AbstractNamedFilterService, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AnimationState, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_MATCH_REGEXP, DATE_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFormatService, DateFromNowPipe, DateShortTestPage, DateTestPage, DateTimeTestPage, DateUtils, DebugComponent, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, DurationTestPage, ED25519_SEED_LENGTH, EMPTY_PLACEHOLDER_CHAR, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesAsyncTableDataSource, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EnvironmentHttpLoader, EnvironmentLoader, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, GalleryTestPage, GeolocationUtils, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IMAGE_DEFAULTS, IPosition, ImageAttachment, ImageAttachmentFilter, ImageAttachmentService, ImageGalleryModule, ImageGalleryTestingModule, ImageModule, ImageService, ImagesUtils, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, JobModule, JobProgression, JobProgressionComponent, JobProgressionIcon, JobProgressionList, JobProgressionService, JobProgressionTestService, JobProgressionTestingPage, JobTestingModule, JobUtils, JsonUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LogLevel, LogUtils, Logger, LoggingService, LoggingServiceModule, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MOMENT_NO_TIME_PROPERTY, MapGetPipe, MapKeysPipe, MapValuesPipe, MaskitoPlaceholderPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatAutocompleteFieldUtils, MatBadgeTestPage, MatBooleanField, MatChipsField, MatColorPipe, MatCommonTestPage, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItem, MenuItems, MenuOptions, MenuService, MenuTestingModule, MenuTestingPage, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NETWORK_DEFAULT_CONNECTION_TIMEOUT, NamedFilter, NamedFilterFilter, NamedFilterSelector, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, NumpadTestPage, ObservableTestPage, OddPipe, OtherMenuTestingPage, PEER_URL_REGEXP, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertiesFormTestPage, PropertiesFormTestingModule, PropertyEntity, PropertyEntityFilter, PropertyEntityValidator, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialToStringPipe, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, RegisterForm, RegisterModal, ResizableComponent, ResizableDirective, ResizableModule, RxStateModule, SCRYPT_PARAMS, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_STORAGE_TESTING_PAGES, SHARED_TESTING_PAGES, SOCIAL_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedNamedFilterModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedTextFormModule, SharedToolbarModule, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, SocialTestingModule, Software, StartableService, StatusById, StatusIds, StatusList, StorageDrivers, StorageExplorerComponent, StorageExplorerModule, StorageExplorerTestingModule, StorageExplorerTestingRoutingModule, StorageService, StrIncludesPipe, StrLengthPipe, SubMenuTabDirective, SwipeTestPage, Table2TestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TableValidatorService, TextForm, TextFormTestingPage, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, ToastTestingModule, ToastTestingPage, Toasts, TokenScope, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, TreeItemEntityUtils, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEventModule, UserEventNotificationIcon, UserEventNotificationList, UserEventTestService, UserEventTestingModule, UserEventTestingPage, UserSettings, UserToken, UserTokenTable, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, findParentWithClass, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, initArrayControlsFromValues, isAndroid, isBlankString, isCapacitor, isControlHasInput, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setPropertyByPath, setTabIndex, sleep, slideInAnimation, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, undefinedIfNull, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
|
|
42325
42390
|
//# sourceMappingURL=sumaris-net.ngx-components.mjs.map
|