@sumaris-net/ngx-components 2.12.4-beta1 → 2.12.5

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, booleanAttribute, numberAttribute, ViewChild, ANIMATION_MODULE_TYPE, inject, RendererStyleFlags2, ContentChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, APP_INITIALIZER, ChangeDetectorRef } from '@angular/core';
+import { InjectionToken, Directive, Pipe, Injectable, EventEmitter, Output, Optional, Inject, NgModule, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChildren, HostBinding, HostListener, ElementRef, booleanAttribute, numberAttribute, ViewChild, ANIMATION_MODULE_TYPE, inject, RendererStyleFlags2, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, APP_INITIALIZER, ChangeDetectorRef } from '@angular/core';
 import { firstValueFrom, shareReplay, tap, of, Subject, merge, delay, isObservable, from, Subscription, timer, BehaviorSubject, fromEvent, noop as noop$a, Observable, forkJoin, defer, timeout, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, fromEventPattern, interval, combineLatest, mergeMap as mergeMap$1, EMPTY, switchMap as switchMap$1 } from 'rxjs';
-import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, finalize, throttleTime, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
+import { catchError, map, first, tap as tap$1, switchMap, takeUntil, filter, debounceTime, startWith, distinctUntilChanged, mergeMap, skip, combineLatestWith, finalize, throttleTime, bufferWhen, mapTo, distinctUntilKeyChanged, take } from 'rxjs/operators';
 import { setTimeout as setTimeout$1 } from '@rx-angular/cdk/zone-less/browser';
 import * as i3$1 from '@angular/common';
 import { CommonModule, DOCUMENT, Location } from '@angular/common';
@@ -40,7 +40,7 @@ import { maskitoWithPlaceholder, maskitoEventHandler, maskitoDateOptionsGenerato
 import * as i12$1 from 'ngx-material-timepicker';
 import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 import * as i3 from '@angular/material/form-field';
-import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS, MatError } from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i11 from '@maskito/angular';
@@ -303,6 +303,9 @@ function arrayDistinct(values, propertiesOrKeyFn) {
 function nullIfUndefined(obj) {
     return obj === undefined ? null : obj;
 }
+function nullIfNilOrBlank(obj) {
+    return isNilOrBlank(obj) ? null : obj;
+}
 function undefinedIfNull(obj) {
     return obj === null ? undefined : obj;
 }
@@ -1358,8 +1361,9 @@ function parseLatitudeOrLongitude(input, pattern, maxDecimals, placeholderChar)
         console.debug('parseLatitudeOrLongitude ' + input + ' -> Invalid degrees (NaN). Parts found:', parts);
         return NaN;
     }
-    if (pattern === 'DD')
+    if (pattern === 'DD') {
         return roundFloat$1(degrees, maxDecimals);
+    }
     const minutes = ((pattern === 'DDMMSS' || pattern === 'DDMM') && parts[1] && parseFloat(parts[1].replace(/,/g, '.'))) || 0;
     const seconds = (pattern === 'DDMMSS' && parts[2] && parseFloat(parts[2].replace(/,/g, '.'))) || 0;
     const direction = (pattern === 'DDMMSS' && parts[3]) || (pattern === 'DDMM' && parts[2]) || undefined;
@@ -1368,13 +1372,10 @@ function parseLatitudeOrLongitude(input, pattern, maxDecimals, placeholderChar)
     return roundFloat$1(degrees, maxDecimals);
 }
 function roundFloat$1(input, maxDecimals) {
-    if (maxDecimals > 0) {
-        const powDecimal = Math.pow(10, maxDecimals);
-        return Math.trunc(input * powDecimal + 0.5) / powDecimal;
-    }
-    // no decimals: round to integer
-    else if (maxDecimals === 0) {
-        return Math.trunc(input + 0.5);
+    if (maxDecimals !== undefined && maxDecimals >= 0) {
+        // Utilisation de toFixed pour gérer les problèmes de précision
+        const str = input.toFixed(maxDecimals);
+        return parseFloat(str);
     }
     return input;
 }
@@ -4393,7 +4394,8 @@ class MaskitoPlaceholderPipe {
                         return { elementState };
                     }
                     const [from, to] = selection;
-                    const zeroes = value.slice(from, to).replace(/\d|\uFEFF/g, '0');
+                    const isDeleteAction = actionType === 'deleteBackward' || actionType === 'deleteForward';
+                    const zeroes = value.slice(from, to).replace(/\d/g, isDeleteAction ? '' : '0');
                     const newValue = value.slice(0, from) + zeroes + value.slice(to);
                     if (actionType === 'validation' || (actionType === 'insert' && from === to)) {
                         return {
@@ -6033,6 +6035,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+const EMPTY_CHAR = 0x00a0;
+const SIZE_TO_PX = {
+    large: 28,
+    medium: 22,
+    small: 16,
+};
 class BadgeDirective extends MatBadge {
     el;
     true;
@@ -6066,6 +6074,24 @@ class BadgeDirective extends MatBadge {
     get isDisabledHost() {
         return this.disabled;
     }
+    set appBadge(value) {
+        this.content = isNotNilOrBlank(value) ? value : EMPTY_CHAR;
+    }
+    get appBadge() {
+        return this.content;
+    }
+    set appBadgeDisabled(value) {
+        this.disabled = value;
+    }
+    get appBadgeDisabled() {
+        return this.disabled;
+    }
+    set appBadgeSize(value) {
+        this.size = value;
+    }
+    get appBadgeSize() {
+        return this.size;
+    }
     appBadgeColor;
     appBadgeFill;
     appBadgeMatIcon;
@@ -6077,7 +6103,7 @@ class BadgeDirective extends MatBadge {
     constructor(_ngZone, el, _ariaDescriber, _renderer, _animationMode) {
         super(_ngZone, el, _ariaDescriber, _renderer, _animationMode);
         this.el = el;
-        this.content = 0x00a0; // Will be invisible
+        this.content = EMPTY_CHAR; // Will be invisible
     }
     ngOnInit() {
         super.ngOnInit();
@@ -6092,7 +6118,10 @@ class BadgeDirective extends MatBadge {
             changes.appBadgeIcon ||
             changes.appBadgeHidden ||
             changes.appBadgeOverlap ||
-            changes.appBadgePosition) {
+            changes.appBadgePosition ||
+            changes.appBadge ||
+            changes.appBadgeSize ||
+            changes.appBadgeDisabled) {
             this.updateView();
         }
     }
@@ -6108,35 +6137,27 @@ class BadgeDirective extends MatBadge {
             this.appBadgeColor = 'primary';
         if (this.appBadgeColor === 'warn')
             this.appBadgeColor = 'warning';
-        let size;
-        switch (this.size) {
-            case 'large':
-                size = 24;
-                break;
-            case 'medium':
-                size = 22;
-                break;
-            case 'small':
-                size = 16;
-                break;
-        }
+        const size = SIZE_TO_PX[this.size];
+        const fontSize = `var(--mat-badge-legacy-${this.size}-size-container-size,${size}px)`;
         let hidden = this.appBadgeHidden;
-        let html = '';
-        if (this.appBadgeMatIcon) {
-            html = `<i class="material-icons" style="font-size: ${size}px;">${this.appBadgeMatIcon}</i>`;
-        }
-        else if (this.appBadgeIcon) {
-            html = `<ion-icon style="font-size: ${size}px; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
-        }
-        else if (isNotNilOrBlank(this.content)) {
-            html = '' + this.content;
-        }
-        else {
-            hidden = true;
-        }
-        if (!hidden && this._html !== html) {
-            this._html = html;
-            badge.innerHTML = html;
+        if (!hidden) {
+            let html = '';
+            if (this.appBadgeMatIcon) {
+                html = `<i class="material-icons" style="font-size: ${fontSize};">${this.appBadgeMatIcon}</i>`;
+            }
+            else if (this.appBadgeIcon) {
+                html = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
+            }
+            else if (isNotNilOrBlank(this.content) && this.content !== EMPTY_CHAR) {
+                html = '' + this.content;
+            }
+            else {
+                hidden = true;
+            }
+            if (!hidden && this._html !== html) {
+                this._html = html;
+                badge.innerHTML = html;
+            }
         }
         // Update style
         // fill: 'clear'
@@ -6157,7 +6178,7 @@ class BadgeDirective extends MatBadge {
             if (badge.style.position !== 'absolute')
                 badge.style.position = 'absolute';
             /*
-            // WOARKROUND to force position of the badge, when inside a <mat-button> (e.g. on a <mat-label>)
+            // WORKAROUND to force position of the badge, when inside a <mat-button> (e.g. on a <mat-label>)
             const overlap = this.overlap;
       
             // Right/left position
@@ -6192,22 +6213,12 @@ class BadgeDirective extends MatBadge {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$3.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { content: ["appBadge", "content"], disabled: ["appBadgeDisabled", "disabled"], color: ["appBadgeColor", "color"], size: ["appBadgeSize", "size"], fill: ["appBadgeFill", "fill"], hidden: ["appBadgeHidden", "hidden"], overlap: ["appBadgeOverlap", "overlap"], position: ["appBadgePosition", "position"], appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { appBadge: "appBadge", appBadgeDisabled: "appBadgeDisabled", appBadgeSize: "appBadgeSize", appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',
-                    inputs: [
-                        'content: appBadge',
-                        'disabled: appBadgeDisabled',
-                        'color: appBadgeColor',
-                        'size: appBadgeSize',
-                        'fill: appBadgeFill',
-                        'hidden: appBadgeHidden',
-                        'overlap: appBadgeOverlap',
-                        'position: appBadgePosition',
-                    ],
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1$3.AriaDescriber }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
@@ -6247,6 +6258,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], isDisabledHost: [{
                 type: HostBinding,
                 args: ['class.mat-badge-disabled']
+            }], appBadge: [{
+                type: Input
+            }], appBadgeDisabled: [{
+                type: Input
+            }], appBadgeSize: [{
+                type: Input
             }], appBadgeColor: [{
                 type: Input
             }], appBadgeFill: [{
@@ -7445,9 +7462,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 const MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING = 'fixed';
 const MAT_FORM_FIELD_DEFAULT_APPEARANCE = 'fill';
 
-const D = /\d|\uFEFF/;
-const M = /\d|\uFEFF/;
-const S = /\d|\uFEFF/;
+const D = /\d/;
+const M = /\d/;
+const S = /\d/;
 const MASKS = {
     latitude: {
         DDMMSS: [D, D, '°', ' ', M, M, "'", ' ', S, S, '.', S, S, '"'],
@@ -7519,7 +7536,6 @@ class MatLatLongField {
     onBlur = new EventEmitter();
     onFocus = new EventEmitter();
     inputElement;
-    matError;
     constructor(formBuilder, cd, formGroupDir, defaultOptions) {
         this.formBuilder = formBuilder;
         this.cd = cd;
@@ -7530,7 +7546,7 @@ class MatLatLongField {
     ngOnInit() {
         this.type = this.type || 'latitude';
         this.pattern = this.pattern || 'DDMM';
-        this.mask = MASKS[this.type] && MASKS[this.type][this.pattern];
+        this.mask = MASKS[this.type]?.[this.pattern];
         if (!this.mask) {
             console.error("Invalid attribute value. Expected: type: 'latitude|longitude' and latlongPattern: 'DD|DDMM|DDMMSS'");
             this.type = 'latitude';
@@ -7587,8 +7603,8 @@ class MatLatLongField {
     writeValue(obj) {
         if (this._writing)
             return;
-        const value = typeof obj === 'string' ? parseFloat(obj.replace(/,/g, '.')) : obj;
         this._writing = true;
+        const value = typeof obj === 'string' ? parseFloat(obj.replace(/,/g, '.')) : obj;
         const strValue = this._formatFn(value, { ...this._formatOptions, placeholderChar: this.placeholderChar });
         const sign = isNotNil(value)
             ? value < 0
@@ -7640,6 +7656,7 @@ class MatLatLongField {
             ...this._formatOptions,
             hideSign: false,
             placeholderChar: '',
+            ...opts
         });
     }
     _onFocus(event) {
@@ -7658,7 +7675,7 @@ class MatLatLongField {
                         // Set the value
                         this.inputElement.nativeElement.value = valueStr;
                         // Move cursor after the sign
-                        const caretIndex = this.type === 'latitude' ? 2 : 1;
+                        const caretIndex = (this.type === 'latitude') ? 2 : 1;
                         selectInputRange(event.target, caretIndex);
                     }, 250);
                 }
@@ -7675,9 +7692,18 @@ class MatLatLongField {
         return true;
     }
     _onBlur(event) {
-        const touched = this.checkIfTouched();
-        if (touched && isNil(this.formControl?.value)) {
-            this.inputElement.nativeElement.value = '';
+        if (this.textFormControl.touched || this.signFormControl.touched) {
+            const value = this.formControl.value;
+            if (isNil(value)) {
+                this.inputElement.nativeElement.value = '';
+            }
+            else {
+                // Reformat the text value (not need on format DD)
+                if (this.pattern !== 'DD') {
+                    const valueStr = this._format(value, { hideSign: this.showSignControl, placeholderChar: '0' });
+                    this.textFormControl.setValue(valueStr, { emitEvent: false });
+                }
+            }
         }
         this.onBlur.emit(event);
     }
@@ -7782,7 +7808,7 @@ class MatLatLongField {
             this._writing = false;
             return;
         }
-        const sign = this.pattern === 'DD' ? 1 /*ignore sign*/ : this.signFormControl.value || 1;
+        const sign = (this.pattern === 'DD') ? 1 /*ignore sign*/ : (this.signFormControl.value || 1);
         const value = isNotNil(parsedValue) ? sign * parsedValue : null;
         // Get the model value
         //console.debug("[mat-latlon] Setting value {" + value + "} parsed from {" + strValue + "}");
@@ -7792,7 +7818,7 @@ class MatLatLongField {
         this._onChangeCallback(value);
     }
     checkIfTouched() {
-        if (this.formControl.touched || this.textFormControl.touched) {
+        if (this.formControl.touched || this.textFormControl.touched || this.signFormControl.touched) {
             this.markForCheck();
             this._onTouchedCallback();
             return true;
@@ -7809,7 +7835,7 @@ class MatLatLongField {
                 multi: true,
                 useExisting: forwardRef(() => MatLatLongField),
             },
-        ], 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\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  [subscriptSizing]=\"subscriptSizing\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  @if (floatLabel !== 'never' && !!placeholder) {\n    <mat-label>{{ placeholder }}</mat-label>\n  }\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ _format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n\n  <!-- hints -->\n  <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n    <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n  </mat-hint>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field\n          [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          <input\n            matInput\n            #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\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n        </mat-form-field>\n      </ion-col>\n\n      <!-- sign -->\n      <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n        <!-- sign on latitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'latitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [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\n          *ngSwitchCase=\"'longitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [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\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('latitude') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_LATITUDE</mat-error>\n            }\n            @case ('longitude') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_LONGITUDE</mat-error>\n            }\n            @case ('min') {\n              <mat-error>\n                {{ 'ERROR.FIELD_MIN_COMPACT' | translate: { min: _format(formControl.errors.min.min) } }}\n              </mat-error>\n            }\n            @case ('max') {\n              <mat-error>\n                {{ 'ERROR.FIELD_MAX_COMPACT' | translate: { max: _format(formControl.errors.max.max) } }}\n              </mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </div>\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</ng-template>\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 .datetime-md{padding:0!important}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col.text{--min-width: 100px;min-width:var(--min-width)}ion-grid ion-col.sign{--min-width: 65px;--max-width: 85px;min-width:var(--min-width);max-width:var(--max-width)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.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$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.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 });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  [subscriptSizing]=\"subscriptSizing\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  @if (floatLabel !== 'never' && !!placeholder) {\n    <mat-label>{{ placeholder }}</mat-label>\n  }\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ _format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n\n  <!-- hints -->\n  <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n    <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n  </mat-hint>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field\n          [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          <input\n            matInput\n            #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\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n        </mat-form-field>\n      </ion-col>\n\n      <!-- sign -->\n      <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n        <!-- sign on latitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'latitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [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\n          *ngSwitchCase=\"'longitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [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\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('latitude') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_LATITUDE</mat-error>\n            }\n            @case ('longitude') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_LONGITUDE</mat-error>\n            }\n            @case ('min') {\n              <mat-error>\n                {{ 'ERROR.FIELD_MIN_COMPACT' | translate: { min: _format(formControl.errors.min.min) } }}\n              </mat-error>\n            }\n            @case ('max') {\n              <mat-error>\n                {{ 'ERROR.FIELD_MAX_COMPACT' | translate: { max: _format(formControl.errors.max.max) } }}\n              </mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </div>\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</ng-template>\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 .datetime-md{padding:0!important}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col.text{--min-width: 100px;min-width:var(--min-width)}ion-grid ion-col.sign{--min-width: 65px;--max-width: 85px;min-width:var(--min-width);max-width:var(--max-width)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.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$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatLatLongField, decorators: [{
             type: Component,
@@ -7863,9 +7889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
-            }], matError: [{
-                type: ContentChild,
-                args: [MatError]
             }] } });
 
 class SharedMatLatLongModule {
@@ -7923,6 +7946,7 @@ const DEFAULT_VALUE_ACCESSOR$3 = {
     useExisting: forwardRef(() => MatDate),
     multi: true,
 };
+const I18N_KEYS$2 = ['COMMON.DATE_PATTERN', 'COMMON.DATE_PLACEHOLDER'];
 const noop$5 = () => { };
 class MatDate {
     dateAdapter;
@@ -7946,16 +7970,16 @@ class MatDate {
     locale;
     maskitoOptions;
     datePlaceholder;
-    mobile;
     formControl;
     formControlName;
     placeholder;
     floatLabel = 'auto';
-    required;
+    mobile;
     compact = false;
     autofocus = false;
-    startDate = null;
     clearable = false;
+    required;
+    startDate = null;
     timezone = null;
     datePickerFilter;
     set appearance(value) {
@@ -8013,7 +8037,7 @@ class MatDate {
         this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
         this.required = isNotNilBoolean(this.required)
             ? this.required
-            : this.formControl.validator === Validators.required || isBlankString(this.required);
+            : this.formControl.hasValidator(Validators.required) || isBlankString(this.required);
         // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
         if (!this.formControl.validator || this.formControl.validator === Validators.required) {
             this.formControl.setValidators(this.required ? [Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
@@ -8028,15 +8052,11 @@ class MatDate {
         // Important: should copy errors from the model formControl
         () => this.formControl.errors);
         // Get patterns to display date
-        this.updatePattern(this.translate.instant('COMMON.DATE_PATTERN'));
-        this.updateMaskOptions(this.translate.instant('COMMON.DATE_PLACEHOLDER'));
+        this.updateTranslations(this.translate.instant(I18N_KEYS$2));
         this._subscription.add(this.translate
-            .get(['COMMON.DATE_PATTERN', 'COMMON.DATE_PLACEHOLDER'])
+            .get(I18N_KEYS$2)
             .pipe(skip(1))
-            .subscribe((translate) => {
-            this.updatePattern(translate['COMMON.DATE_PATTERN']);
-            this.updateMaskOptions(translate['COMMON.DATE_PLACEHOLDER']);
-        }));
+            .subscribe((translations) => this.updateTranslations(translations)));
         this._subscription.add(this.textControl.valueChanges.subscribe((value) => this.onFormChange(value)));
         // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
         this._subscription.add(this.formControl.statusChanges
@@ -8062,7 +8082,7 @@ class MatDate {
             return; // Skip
         this._writing = true;
         // DEBUG
-        //console.debug("[mat-date] writeValue() with:", value);
+        console.debug("[mat-date] writeValue() with:", value);
         // Convert into date
         // Important: clone, because startOf will update the existing date
         const date = isMoment(value) ? value.clone() : fromDateISOString(value);
@@ -8125,14 +8145,12 @@ class MatDate {
         });
     }
     clear(event) {
-        event?.preventDefault();
-        this.textControl.patchValue(null, { emitEvent: false });
-        this.formControl.setValue(null, { emitEvent: false });
-        this._onChangeCallback(null);
+        this._preventEvent(event);
+        this.formControl.setValue(null);
         this.markAsTouched();
         this.markAsDirty();
     }
-    /* -- protected methods -- */
+    /* -- protected functions -- */
     _onDatePickerChange(event) {
         // Make sure event is valid
         if (!event || (event.value !== null && !isMoment(event.value))) {
@@ -8175,14 +8193,13 @@ class MatDate {
             // Auto fill data in case of partial input
             this.writeValue(this.formControl.value);
         }
+        // Check if touched
         this._checkIfTouched();
     }
-    _checkIfTouched(opts) {
+    _checkIfTouched() {
         if (this.textControl.touched) {
             this._onTouchedCallback();
-            if (!opts || opts.emitEvent !== false) {
-                this.markForCheck();
-            }
+            this.markForCheck();
         }
     }
     _preventEvent(event) {
@@ -8195,58 +8212,94 @@ class MatDate {
             event.stopImmediatePropagation();
     }
     /* -- private methods -- */
+    updateTranslations(translations) {
+        const datePattern = translations['COMMON.DATE_PATTERN'] !== 'COMMON.DATE_PATTERN' ? translations['COMMON.DATE_PATTERN'] : 'DD/MM/YYYY';
+        this.updatePattern(datePattern);
+        const datePlaceholder = translations['COMMON.DATE_PLACEHOLDER'] !== 'COMMON.DATE_PLACEHOLDER' ? translations['COMMON.DATE_PLACEHOLDER'] : this.datePattern?.toLowerCase();
+        this.updateMaskOptions(datePlaceholder);
+    }
     updatePattern(pattern) {
-        pattern = pattern !== 'COMMON.DATE_PATTERN' ? pattern : 'L';
         if (this.datePattern !== pattern) {
             this.datePattern = pattern;
             this.markForCheck();
         }
     }
-    onFormChange(value) {
+    updateMaskOptions(datePlaceholder) {
+        if (this.datePlaceholder != datePlaceholder) {
+            this.datePlaceholder = datePlaceholder;
+            const dateOptions = maskitoDateOptionsGenerator({
+                mode: this.datePattern.toLowerCase(),
+                separator: '/',
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.datePlaceholder, true);
+            this.maskitoOptions = {
+                ...dateOptions,
+                plugins: plugins.concat(dateOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...dateOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...dateOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
+            this.markForCheck();
+        }
+    }
+    onFormChange(dateStr) {
         if (this._writing)
             return; // Skip if call by self
         this._writing = true;
-        if (value === this.datePlaceholder) {
-            value = undefined;
+        if (dateStr === this.datePlaceholder) {
+            dateStr = null;
         }
-        if (value) {
-            // Force '0' for empty month (otherwise moment will use the current month)
-            value = value
-                // Keep digits and slashes
-                .replace(/[^\d/]/g, '')
-                .replace('//', '/0/')
-                // Force '0' for empty year (otherwise moment will use the current year)
-                .replace(/\/$/, '/0');
+        else {
+            dateStr = nullIfNilOrBlank(dateStr);
         }
+        console.debug(`[mat-date] onFormChange() - controls values: `, dateStr);
+        // Force '0' for empty month (otherwise moment will use the current month)
+        dateStr = dateStr?.replace(/[^\d/]/g, '') // Keep only  digits and slashes
+            .replace('//', '/0/')
+            // Force '0' for empty year (otherwise moment will use the current year)
+            .replace(/\/$/, '/0');
         // Parse date (strict = false)
-        let date = (isNotNilOrBlank(value) && this.dateAdapter.parse(value, this.datePattern)) || null;
+        let date = (dateStr && this.dateAdapter.parse(dateStr, this.datePattern)) || null;
         // Move to the expected TZ, and keep the local hour (= midnight) to have midnight at local time
-        date = (date && (this.timezone ? date.tz(this.timezone, true) : date)) || null;
-        date =
-            (date &&
-                date
-                    .startOf('day') // Reset hour
-                    .utc()) || // Convert to UTC (avoid TZ offset in final string)
-                null;
+        if (this.timezone) {
+            date = date?.tz(this.timezone, true);
+        }
+        date = date?.startOf('day') // Reset hour
+            // Convert to UTC (avoid TZ offset in final string);
+            .utc();
+        // Set model value
+        this.emitChange(date, dateStr);
+        // Force the day control to update its validity (same errors as formControl - see ngOnInit())
+        this.textControl.updateValueAndValidity();
+        this._writing = false;
+    }
+    emitChange(date, defaultValue) {
         // Convert to model value (ISO date string)
         // IMPORTANT: If date is invalid, then keep the invalid string value
         // to allow SharedValidators.validDate() to raise an error
-        const formControlValue = date && date.isValid() ? toDateISOString(date) : value || null;
-        if (this.formControl.value !== formControlValue) {
+        const controlValue = date?.isValid() ? toDateISOString(date) : defaultValue || null;
+        if (this.formControl.value !== controlValue) {
             // DEBUG
-            //console.debug('[mat-date] Emit new value: ' + dateStr);
-            if (date?.isValid()) {
-                // Update formControl value (will update datePicker also)
-                this.formControl.setValue(formControlValue, { emitEvent: false });
+            //console.debug('[mat-date] Emit new value: ' + controlValue);
+            // Update formControl value (this is need to update datePicker also, in desktop mode)
+            if (!this.mobile && date?.isValid()) {
+                this.formControl.setValue(controlValue, { emitEvent: false });
             }
             // Changes comes from inside function: use the callback
-            this._onChangeCallback(formControlValue);
+            this._onChangeCallback(controlValue);
             // Check if need to update controls
             this._checkIfTouched();
         }
-        // Force the day control to update its validity (same errors as formControl - see ngOnInit())
-        this.textControl.updateValueAndValidity();
-        this._writing = false;
     }
     updateTabIndex() {
         if (isNil(this._tabindex) || this._tabindex === -1)
@@ -8268,36 +8321,8 @@ class MatDate {
     markForCheck() {
         this.cd.markForCheck();
     }
-    updateMaskOptions(datePlaceholder) {
-        if (this.datePlaceholder != datePlaceholder) {
-            this.datePlaceholder = datePlaceholder;
-            const dateOptions = maskitoDateOptionsGenerator({
-                mode: this.datePattern.toLowerCase(),
-                separator: '/',
-            });
-            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-            ...placeholderOptions
-            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-             } = maskitoWithPlaceholder(this.datePlaceholder, true);
-            this.maskitoOptions = {
-                ...dateOptions,
-                plugins: plugins.concat(dateOptions.plugins || []),
-                preprocessors: [
-                    // Always put it BEFORE all other preprocessors
-                    ...placeholderOptions.preprocessors,
-                    ...dateOptions.preprocessors,
-                ],
-                postprocessors: [
-                    ...dateOptions.postprocessors,
-                    // Always put it AFTER all other postprocessors
-                    ...placeholderOptions.postprocessors,
-                ],
-            };
-            this.markForCheck();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$3], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_onBlur()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n    <!-- hints -->\n    @if (!formControl.invalid) {\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\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    }\n  </mat-datepicker>\n}\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatDate, selector: "mat-date-field", inputs: { formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], required: ["required", "required", booleanAttribute], startDate: "startDate", timezone: "timezone", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$3], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        [maskito]=\"maskitoOptions\"\n        [formControl]=\"textControl\"\n        (blur)=\"_onBlur()\"\n        (keyup.arrowDown)=\"openDatePicker()\"\n        (keyup.escape)=\"_preventEvent($event)\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [appAutofocus]=\"autofocus\"\n      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n    <!-- hints -->\n    @if (!formControl.invalid) {\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\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    }\n  </mat-datepicker>\n}\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatDate, decorators: [{
             type: Component,
@@ -8307,9 +8332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
-                }] }], propDecorators: { mobile: [{
-                type: Input
-            }], formControl: [{
+                }] }], propDecorators: { formControl: [{
                 type: Input
             }], formControlName: [{
                 type: Input
@@ -8317,15 +8340,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], floatLabel: [{
                 type: Input
-            }], required: [{
-                type: Input
+            }], mobile: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], compact: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], autofocus: [{
-                type: Input
-            }], startDate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], clearable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], startDate: [{
                 type: Input
             }], timezone: [{
                 type: Input
@@ -8344,7 +8374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['datePicker']
             }], _matInput: [{
                 type: ViewChild,
-                args: ['matInput', { static: false }]
+                args: ['matInput']
             }] } });
 
 const DEFAULT_VALUE_ACCESSOR$2 = {
@@ -8352,7 +8382,7 @@ const DEFAULT_VALUE_ACCESSOR$2 = {
     useExisting: forwardRef(() => MatDateTime),
     multi: true,
 };
-const TIME_REGEXP = /^[012][0-9][:][012345][0-9]$/;
+const I18N_KEYS$1 = ['COMMON.DATE_PATTERN', 'COMMON.TIME_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_PLACEHOLDER', 'COMMON.TIME_PLACEHOLDER'];
 const noop$4 = () => { };
 class MatDateTime {
     dateAdapter;
@@ -8390,9 +8420,10 @@ class MatDateTime {
     mobile;
     compact = false;
     autofocus = false;
-    startDate = null;
     clearable = false;
+    startDate = null;
     datePickerFilter;
+    allowNoTime = false;
     set appearance(value) {
         this._appearance = value;
     }
@@ -8453,8 +8484,7 @@ class MatDateTime {
     }
     datePicker;
     timePicker;
-    matInputs;
-    matError;
+    _matInputs;
     constructor(dateAdapter, translate, formBuilder, cd, formGroupDir, defaultOptions) {
         this.dateAdapter = dateAdapter;
         this.translate = translate;
@@ -8476,15 +8506,16 @@ class MatDateTime {
         // Create the date control
         this.dateControl = this.formBuilder.control(null);
         // Create the time control
-        this.timeControl = this.formBuilder.control(null, this.mobile ? null : Validators.pattern(TIME_REGEXP));
+        this.timeControl = this.formBuilder.control(null);
         // Get patterns to display date and date+time
-        const i18nKeys = ['COMMON.DATE_PATTERN', 'COMMON.TIME_PATTERN', 'COMMON.DATE_TIME_PATTERN', 'COMMON.DATE_PLACEHOLDER', 'COMMON.TIME_PLACEHOLDER'];
-        this.updateTranslations(this.translate.instant(i18nKeys));
+        this.updateTranslations(this.translate.instant(I18N_KEYS$1));
         this._subscription.add(this.translate
-            .get(i18nKeys)
+            .get(I18N_KEYS$1)
             .pipe(skip(1))
-            .subscribe((translate) => this.updateTranslations(translate)));
-        this._subscription.add(merge(this.dateControl.valueChanges, this.timeControl.valueChanges).subscribe((_) => this.onFormChange()));
+            .subscribe((translations) => this.updateTranslations(translations)));
+        this._subscription.add(this.dateControl.valueChanges
+            .pipe(combineLatestWith(this.timeControl.valueChanges))
+            .subscribe(([dateStr, timeStr]) => this.onFormChange(dateStr, timeStr)));
         this._writing = false;
     }
     ngAfterViewInit() {
@@ -8499,10 +8530,10 @@ class MatDateTime {
         if (this._writing)
             return; // Skip
         this._writing = true;
-        // DEBUG
-        // console.debug("[mat-date-time] writeValue() with:", value);
         // Convert into date
         const moment = isMoment(value) ? value : fromDateISOString(value);
+        // DEBUG
+        console.debug("[mat-date-time] writeValue() with:", value);
         if (!moment || !moment.isValid()) {
             this.dateControl.patchValue(null, { emitEvent: false });
             this.timeControl.patchValue(null, { emitEvent: false });
@@ -8573,12 +8604,12 @@ class MatDateTime {
         this.timePicker.open();
     }
     focus() {
-        const input = this.matInputs.first;
-        if (!input)
+        const matInput = this._matInputs.first;
+        if (!matInput)
             return;
         setTimeout$1(() => {
-            if (isFocusableElement(input.nativeElement)) {
-                input.nativeElement.focus();
+            if (isFocusableElement(matInput.nativeElement)) {
+                matInput.nativeElement.focus();
             }
         });
     }
@@ -8608,6 +8639,8 @@ class MatDateTime {
                 .pipe(filter((_) => !this._readonly && !this._writing && !this._disabling) // Skip
             )
                 .subscribe((_) => {
+                // DEBUG
+                console.debug('[mat-date-time] updateValueAndValidity of sub controls');
                 this.dateControl.updateValueAndValidity({ emitEvent: false });
                 this.timeControl.updateValueAndValidity({ emitEvent: false });
                 if (this._formControl.touched) {
@@ -8616,6 +8649,7 @@ class MatDateTime {
                     if (!this.timeControl.touched)
                         this.timeControl.markAsTouched();
                 }
+                console.debug('[mat-date-time] timeControl.error ?', this.timeControl.errors);
                 this.markForCheck();
             });
         }
@@ -8712,19 +8746,33 @@ class MatDateTime {
             const dateStr = this.dateControl.value;
             // Auto fill data time/in case of partial input
             if (isNotNilOrBlank(dateStr)) {
-                const date = this.dateAdapter.parse(dateStr, this.datePattern);
                 const timeStr = this.timeControl.value;
+                const date = this.dateAdapter.parse(dateStr, this.datePattern);
+                let validDate = true;
                 if (isNotNilOrBlank(timeStr)) {
                     const hourParts = (timeStr || '').split(':');
                     const hour = parseInt(hourParts[0] || 0);
                     const minutes = parseInt(hourParts[1] || 0);
                     date.locale(this.locale).hour(hour).minute(minutes).seconds(0).millisecond(0);
                 }
+                // No time, and not required: mark
                 else {
                     DateUtils.markNoTime(date);
+                    validDate = this.allowNoTime;
                 }
                 this.writeValue(date);
-                this.formControl.updateValueAndValidity();
+                if (validDate) {
+                    this._formControl.setValue(date, { emitEvent: false });
+                    this.formControl.updateValueAndValidity();
+                }
+                else {
+                    // Mark control as invalid, because time is missing
+                    this._formControl.markAsPending({ onlySelf: true });
+                    this._formControl.setErrors({
+                        validDate: true,
+                        ...this._formControl.errors
+                    });
+                }
             }
         }
         // Check if touched
@@ -8747,32 +8795,103 @@ class MatDateTime {
     }
     /* -- private method -- */
     updateTranslations(translations) {
-        this.displayPattern = translations['COMMON.DATE_TIME_PATTERN'] !== 'COMMON.DATE_TIME_PATTERN' ? translations['COMMON.DATE_TIME_PATTERN'] : 'L LT';
         this.datePattern = translations['COMMON.DATE_PATTERN'] !== 'COMMON.DATE_PATTERN' ? translations['COMMON.DATE_PATTERN'] : 'DD/MM/YYYY';
         this.timePattern = translations['COMMON.TIME_PATTERN'] !== 'COMMON.TIME_PATTERN' ? translations['COMMON.TIME_PATTERN'] : 'HH:MM';
-        this.updateDateMaskOptions(translations['COMMON.DATE_PLACEHOLDER'] !== 'COMMON.DATE_PLACEHOLDER'
+        const displayPattern = translations['COMMON.DATE_TIME_PATTERN'] !== 'COMMON.DATE_TIME_PATTERN' ? translations['COMMON.DATE_TIME_PATTERN'] : 'L LT';
+        this.updateDisplayPattern(displayPattern);
+        const datePlaceholder = translations['COMMON.DATE_PLACEHOLDER'] !== 'COMMON.DATE_PLACEHOLDER'
             ? translations['COMMON.DATE_PLACEHOLDER']
-            : this.datePattern?.toLowerCase());
-        this.updateTimeMaskOptions(translations['COMMON.TIME_PLACEHOLDER'] !== 'COMMON.TIME_PLACEHOLDER'
+            : this.datePattern?.toLowerCase();
+        this.updateDateMaskOptions(datePlaceholder);
+        const timePlaceholder = translations['COMMON.TIME_PLACEHOLDER'] !== 'COMMON.TIME_PLACEHOLDER'
             ? translations['COMMON.TIME_PLACEHOLDER']
-            : this.timePattern?.toLowerCase());
+            : this.timePattern?.toLowerCase();
+        this.updateTimeMaskOptions(timePlaceholder);
     }
-    onFormChange() {
+    updateDisplayPattern(displayPattern) {
+        if (this.displayPattern !== displayPattern) {
+            this.displayPattern = displayPattern;
+            this.markForCheck();
+        }
+    }
+    updateDateMaskOptions(datePlaceholder) {
+        if (this.datePlaceholder !== datePlaceholder) {
+            this.datePlaceholder = datePlaceholder;
+            const dateOptions = maskitoDateOptionsGenerator({
+                mode: this.datePattern.toLowerCase(),
+                separator: '/',
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.datePlaceholder, true);
+            this.maskitoDateOptions = {
+                ...dateOptions,
+                plugins: plugins.concat(dateOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...dateOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...dateOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
+            this.markForCheck();
+        }
+    }
+    updateTimeMaskOptions(timePlaceholder) {
+        if (this.timePlaceholder !== timePlaceholder) {
+            this.timePlaceholder = timePlaceholder;
+            const timeOptions = maskitoTimeOptionsGenerator({
+                mode: this.timePattern.toUpperCase()
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.timePlaceholder, true);
+            this.maskitoTimeOptions = {
+                ...timeOptions,
+                plugins: plugins.concat(timeOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...timeOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...timeOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
+            this.markForCheck();
+        }
+    }
+    onFormChange(dateStr, timeStr) {
         if (this._writing)
             return; // Skip if call by self
         this._writing = true;
-        let dateStr = this.dateControl.value;
-        let timeStr = this.timeControl.value;
+        // Clean up
         if (dateStr === this.datePlaceholder) {
-            dateStr = undefined;
+            dateStr = null;
+        }
+        else {
+            dateStr = nullIfNilOrBlank(dateStr);
         }
         if (timeStr === this.timePlaceholder) {
-            timeStr = undefined;
+            timeStr = null;
+        }
+        else {
+            timeStr = nullIfNilOrBlank(timeStr);
         }
+        const value = `${dateStr || ''}T${timeStr || ''}`;
         // DEBUG
-        //console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dateStr, time]);
-        const incompleteValue = isNilOrBlank(timeStr) !== isNilOrBlank(dateStr);
+        console.debug(`[mat-date-time] onFormChange() - controls values: `, [dateStr, timeStr], this.dateControl.errors, this.timeControl.errors);
+        const incompleteValue = !this.allowNoTime && isNil(timeStr) !== isNil(dateStr);
         if (incompleteValue || this.dateControl.invalid || this.timeControl.invalid) {
+            console.debug(`[mat-date-time] onFormChange() - incompleteValue: ${incompleteValue}`);
             this._formControl.markAsPending({ onlySelf: true });
             this._formControl.setErrors({
                 validDate: incompleteValue,
@@ -8783,49 +8902,44 @@ class MatDateTime {
             if (this.dateControl.dirty || this.timeControl.dirty) {
                 this._formControl.markAsDirty();
             }
+            console.debug(`[mat-date-time] onFormChange() - ERROR`);
             this._writing = false;
             return;
         }
         // Force '0' for empty month (otherwise moment will use the current month)
-        dateStr =
-            dateStr &&
-                dateStr
-                    // Keep digits and slashes
-                    .replace(/[^\d/]/g, '')
-                    .replace('//', '/0/')
-                    // Force '0' for empty year (otherwise moment will use the current year)
-                    .replace(/\/$/, '/0');
+        dateStr = dateStr?.replace(/[^\d/]/g, '') // Keep only digits and slashes
+            .replace('//', '/0/')
+            // Force '0' for empty year (otherwise moment will use the current year)
+            .replace(/\/$/, '/0');
         // Parse date
         const date = (dateStr && this.dateAdapter.parse(dateStr, this.datePattern)) || null;
         // Parse time
         const hourParts = (timeStr || '').split(':');
-        const hour = parseInt(hourParts[0] || 0);
-        const minutes = parseInt(hourParts[1] || 0);
-        const dateTime = date &&
-            date
-                .locale(this.locale) // set as time as locale time
-                .hour(hour)
-                .minute(minutes) // Set local hour
-                .seconds(0)
-                .millisecond(0) // Reset seconds/millisecond
-                .utc(); // Convert to UTC (avoid TZ offset in final string)
+        const hour = parseInt(hourParts[0] || '0');
+        const minutes = parseInt(hourParts[1] || '0');
+        const dateTime = date?.locale(this.locale) // set as time as locale time
+            .hour(hour).minute(minutes) // Set local hour
+            .seconds(0).millisecond(0) // Reset seconds/millisecond
+            .utc(); // Convert to UTC (avoid TZ offset in final string)
         // Set model value
-        this.emitChange(dateTime);
+        this.emitChange(dateTime, dateStr);
         this._writing = false;
         this.markForCheck();
     }
-    emitChange(value) {
-        // Get the model value
-        const dateStr = toDateISOString(value) || null;
-        if (this._formControl.value !== dateStr) {
+    emitChange(date, defaultValue) {
+        // Convert to model value (ISO date string)
+        // IMPORTANT: If date is invalid, then keep the invalid string value
+        // to allow SharedValidators.validDate() to raise an error
+        const controlValue = date?.isValid() ? toDateISOString(date) : defaultValue || null;
+        if (this._formControl.value !== controlValue) {
             // DEBUG
-            //console.debug('[mat-date-time] Emit new value: ' + dateStr);
-            if (value?.isValid()) {
-                // Update formControl value (will update datePicker also)
-                this.formControl.setValue(dateStr, { emitEvent: false });
+            console.debug('[mat-date-time] Emit new value: ' + controlValue);
+            // Update formControl value (this is need to update datePicker also, in desktop mode)
+            if (!this.mobile && date?.isValid()) {
+                this.formControl.setValue(controlValue, { emitEvent: false });
             }
             // Changes comes from inside function: use the callback
-            this._onChangeCallback(dateStr);
+            this._onChangeCallback(controlValue);
             // Check if need to update controls
             this._checkIfTouched();
         }
@@ -8835,7 +8949,7 @@ class MatDateTime {
             return; // skip
         // Focus to first input
         setTimeout$1(() => {
-            this.matInputs.forEach((elementRef, index) => {
+            this._matInputs.forEach((elementRef, index) => {
                 setTabIndex(elementRef, this._tabindex + index);
             });
             this.markForCheck();
@@ -8853,67 +8967,12 @@ class MatDateTime {
     markForCheck() {
         this.cd.markForCheck();
     }
-    updateDateMaskOptions(datePlaceholder) {
-        if (this.datePlaceholder !== datePlaceholder) {
-            this.datePlaceholder = datePlaceholder;
-            const dateOptions = maskitoDateOptionsGenerator({
-                mode: this.datePattern.toLowerCase(),
-                separator: '/',
-            });
-            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-            ...placeholderOptions
-            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-             } = maskitoWithPlaceholder(this.datePlaceholder, true);
-            this.maskitoDateOptions = {
-                ...dateOptions,
-                plugins: plugins.concat(dateOptions.plugins || []),
-                preprocessors: [
-                    // Always put it BEFORE all other preprocessors
-                    ...placeholderOptions.preprocessors,
-                    ...dateOptions.preprocessors,
-                ],
-                postprocessors: [
-                    ...dateOptions.postprocessors,
-                    // Always put it AFTER all other postprocessors
-                    ...placeholderOptions.postprocessors,
-                ],
-            };
-            this.markForCheck();
-        }
-    }
-    updateTimeMaskOptions(timePlaceholder) {
-        if (this.timePlaceholder !== timePlaceholder) {
-            this.timePlaceholder = timePlaceholder;
-            const timeOptions = maskitoTimeOptionsGenerator({
-                mode: this.timePattern.toUpperCase(),
-            });
-            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-            ...placeholderOptions
-            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-             } = maskitoWithPlaceholder(this.timePlaceholder, true);
-            this.maskitoTimeOptions = {
-                ...timeOptions,
-                plugins: plugins.concat(timeOptions.plugins || []),
-                preprocessors: [
-                    // Always put it BEFORE all other preprocessors
-                    ...placeholderOptions.preprocessors,
-                    ...timeOptions.preprocessors,
-                ],
-                postprocessors: [
-                    ...timeOptions.postprocessors,
-                    // Always put it AFTER all other postprocessors
-                    ...placeholderOptions.postprocessors,
-                ],
-            };
-            this.markForCheck();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], 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@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [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          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          } @else {\n            <!-- Mobile -->\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"formControl.disabled || !formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply 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          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"!compact ? 1 : 0\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          } @else {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n              readonly\n            />\n          }\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          @if (!compact && !mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          } @else if (!compact && mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n            >\n              <mat-icon>access_time</mat-icon>\n            </button>\n          }\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          ></ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\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<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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 ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}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}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.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$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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$1.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$1.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", allowNoTime: ["allowNoTime", "allowNoTime", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], 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@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [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          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          } @else {\n            <!-- Mobile -->\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"formControl.disabled || !formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply 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          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"!compact ? 1 : 0\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          } @else {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n              readonly\n            />\n          }\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          @if (!compact && !mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          } @else if (!compact && mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n            >\n              <mat-icon>access_time</mat-icon>\n            </button>\n          }\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          ></ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\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<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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 ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}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}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.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$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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$1.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$1.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [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          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          } @else {\n            <!-- Mobile -->\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"formControl.disabled || !formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply 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          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"!compact ? 1 : 0\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          } @else {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n              readonly\n            />\n          }\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          @if (!compact && !mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          } @else if (!compact && mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n            >\n              <mat-icon>access_time</mat-icon>\n            </button>\n          }\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          ></ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\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<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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 ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}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}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
+            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [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          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          } @else {\n            <!-- Mobile -->\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"formControl.disabled || !formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply 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          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"!compact ? 1 : 0\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          } @else {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n              readonly\n            />\n          }\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          @if (!compact && !mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          } @else if (!compact && mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n            >\n              <mat-icon>access_time</mat-icon>\n            </button>\n          }\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          ></ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (formControl.touched && formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\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<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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 ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}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}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -8924,17 +8983,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], floatLabel: [{
                 type: Input
             }], mobile: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], compact: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], autofocus: [{
-                type: Input
-            }], startDate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], clearable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], startDate: [{
                 type: Input
             }], datePickerFilter: [{
                 type: Input
+            }], allowNoTime: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], appearance: [{
                 type: Input
             }], subscriptSizing: [{
@@ -8955,12 +9021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], timePicker: [{
                 type: ViewChild,
                 args: ['timePicker']
-            }], matInputs: [{
+            }], _matInputs: [{
                 type: ViewChildren,
                 args: ['matInput']
-            }], matError: [{
-                type: ContentChild,
-                args: [MatError]
             }] } });
 
 const DEFAULT_VALUE_ACCESSOR$1 = {
@@ -8969,6 +9032,7 @@ const DEFAULT_VALUE_ACCESSOR$1 = {
     multi: true,
 };
 const noop$3 = () => { };
+const I18N_KEYS = ['COMMON.DATE_YEAR_PATTERN', 'COMMON.DATE_YEAR_PLACEHOLDER'];
 class MatDateShort {
     dateAdapter;
     translate;
@@ -8987,20 +9051,20 @@ class MatDateShort {
     _defaultAppearance;
     _defaultSubscriptSizing;
     textControl;
-    datePattern;
+    yearPattern;
+    yearPlaceholder;
     locale;
     maskitoOptions;
-    yearPlaceholder;
-    mobile;
     formControl;
     formControlName;
     placeholder;
     floatLabel = 'auto';
-    required;
+    mobile;
     compact = false;
     autofocus = false;
-    startDate = null;
     clearable = false;
+    required;
+    startDate = null;
     datePickerFilter;
     set appearance(value) {
         this._appearance = value;
@@ -9057,7 +9121,7 @@ class MatDateShort {
         this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
         this.required = isNotNilBoolean(this.required)
             ? this.required
-            : this.formControl.validator === Validators.required || isBlankString(this.required);
+            : this.formControl.hasValidator(Validators.required) || isBlankString(this.required);
         // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
         if (!this.formControl.validator || this.formControl.validator === Validators.required) {
             this.formControl.setValidators(this.required ? [Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
@@ -9072,15 +9136,11 @@ class MatDateShort {
         // Important: should copy errors from the model formControl
         () => this.formControl.errors);
         // Get patterns to display date
-        this.updatePattern(this.translate.instant('COMMON.DATE_YEAR_PATTERN'));
-        this.updateMaskOptions(this.translate.instant('COMMON.DATE_YEAR_PLACEHOLDER'));
+        this.updateTranslations(this.translate.instant(I18N_KEYS));
         this._subscription.add(this.translate
-            .get(['COMMON.DATE_YEAR_PATTERN', 'COMMON.DATE_YEAR_PLACEHOLDER'])
+            .get(I18N_KEYS)
             .pipe(skip(1))
-            .subscribe((translate) => {
-            this.updatePattern(translate['COMMON.DATE_YEAR_PATTERN']);
-            this.updateMaskOptions(translate['COMMON.DATE_YEAR_PLACEHOLDER']);
-        }));
+            .subscribe((translations) => this.updateTranslations(translations)));
         this._subscription.add(this.textControl.valueChanges.subscribe((value) => this.onFormChange(value)));
         // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
         this._subscription.add(this.formControl.statusChanges
@@ -9120,7 +9180,7 @@ class MatDateShort {
         else {
             // Reset day
             const year = date.startOf('year');
-            const yearStr = this.dateAdapter.format(year, this.datePattern);
+            const yearStr = this.dateAdapter.format(year, this.yearPattern);
             if (this.textControl.value !== yearStr) {
                 // Update text control
                 this.textControl.patchValue(yearStr, { emitEvent: false });
@@ -9191,7 +9251,7 @@ class MatDateShort {
             return;
         }
         const date = value?.clone().locale(this.locale).startOf('year').utc(true);
-        const dateStr = (date && this.dateAdapter.format(date, this.datePattern)) || null;
+        const dateStr = (date && this.dateAdapter.format(date, this.yearPattern)) || null;
         if (this.textControl.value !== dateStr) {
             // DEBUG
             //console.debug('[mat-date-time] Emit new value: ' + dateStr);
@@ -9208,12 +9268,10 @@ class MatDateShort {
         // Open the picker
         this.openDatePicker();
     }
-    _checkIfTouched(opts) {
+    _checkIfTouched() {
         if (this.textControl.touched) {
             this._onTouchedCallback();
-            if (!opts || opts.emitEvent !== false) {
-                this.markForCheck();
-            }
+            this.markForCheck();
         }
     }
     // select only year
@@ -9235,10 +9293,42 @@ class MatDateShort {
             event.stopImmediatePropagation();
     }
     /* -- private methods -- */
+    updateTranslations(translations) {
+        const datePattern = translations['COMMON.DATE_YEAR_PATTERN'] !== 'COMMON.DATE_YEAR_PATTERN' ? translations['COMMON.DATE_YEAR_PATTERN'] : 'YYYY';
+        this.updatePattern(datePattern);
+        const yearPlaceholder = translations['COMMON.DATE_YEAR_PLACEHOLDER'] !== 'COMMON.DATE_YEAR_PLACEHOLDER' ? translations['COMMON.DATE_YEAR_PLACEHOLDER'] : datePattern.toLowerCase();
+        this.updateMaskOptions(yearPlaceholder);
+    }
     updatePattern(pattern) {
-        pattern = pattern !== 'COMMON.DATE_YEAR_PATTERN' ? pattern : 'YYYY';
-        if (this.datePattern !== pattern) {
-            this.datePattern = pattern;
+        if (this.yearPattern !== pattern) {
+            this.yearPattern = pattern;
+            this.markForCheck();
+        }
+    }
+    updateMaskOptions(yearPlaceholder) {
+        if (this.yearPlaceholder !== yearPlaceholder) {
+            this.yearPlaceholder = yearPlaceholder;
+            const dateOptions = maskitoDateOptionsGenerator({
+                mode: this.yearPattern.toLowerCase(),
+            });
+            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
+            ...placeholderOptions
+            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
+             } = maskitoWithPlaceholder(this.yearPlaceholder, true);
+            this.maskitoOptions = {
+                ...dateOptions,
+                plugins: plugins.concat(dateOptions.plugins || []),
+                preprocessors: [
+                    // Always put it BEFORE all other preprocessors
+                    ...placeholderOptions.preprocessors,
+                    ...dateOptions.preprocessors,
+                ],
+                postprocessors: [
+                    ...dateOptions.postprocessors,
+                    // Always put it AFTER all other postprocessors
+                    ...placeholderOptions.postprocessors,
+                ],
+            };
             this.markForCheck();
         }
     }
@@ -9250,7 +9340,7 @@ class MatDateShort {
             value = undefined;
         }
         // Parse year string
-        let date = (value && this.dateAdapter.parse(value, this.datePattern)) || null;
+        let date = (value && this.dateAdapter.parse(value, this.yearPattern)) || null;
         // Reset time
         date = date && date.locale(this.locale).startOf('year');
         // Get the model value
@@ -9304,47 +9394,18 @@ class MatDateShort {
     markForCheck() {
         this.cd.markForCheck();
     }
-    updateMaskOptions(yearPlaceholder) {
-        if (this.yearPlaceholder !== yearPlaceholder) {
-            this.yearPlaceholder = yearPlaceholder;
-            const dateOptions = maskitoDateOptionsGenerator({
-                mode: this.datePattern.toLowerCase(),
-            });
-            const { plugins, // plugins keeps caret inside actual value and remove placeholder on blur
-            ...placeholderOptions
-            // pass 'true' as second argument to add plugin to hide placeholder when input is not focused
-             } = maskitoWithPlaceholder(this.yearPlaceholder, true);
-            this.maskitoOptions = {
-                ...dateOptions,
-                plugins: plugins.concat(dateOptions.plugins || []),
-                preprocessors: [
-                    // Always put it BEFORE all other preprocessors
-                    ...placeholderOptions.preprocessors,
-                    ...dateOptions.preprocessors,
-                ],
-                postprocessors: [
-                    ...dateOptions.postprocessors,
-                    // Always put it AFTER all other postprocessors
-                    ...placeholderOptions.postprocessors,
-                ],
-            };
-            this.markForCheck();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n\n    <!-- hints -->\n    @if (!formControl.invalid) {\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <mat-datepicker\n    #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  >\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\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    }\n  </mat-datepicker>\n}\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatDateShort, selector: "mat-date-short-field", inputs: { formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], required: ["required", "required", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: yearPattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n\n    <!-- hints -->\n    @if (!formControl.invalid) {\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <mat-datepicker\n    #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  >\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\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    }\n  </mat-datepicker>\n}\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatDateShort, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-short-field', providers: [DEFAULT_VALUE_ACCESSOR$1], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n\n    <!-- hints -->\n    @if (!formControl.invalid) {\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <mat-datepicker\n    #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  >\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\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    }\n  </mat-datepicker>\n}\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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"] }]
+            args: [{ selector: 'mat-date-short-field', providers: [DEFAULT_VALUE_ACCESSOR$1], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: yearPattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n  >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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      />\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    } @else {\n      <!-- Mobile -->\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n      />\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n      />\n    }\n\n    <div matSuffix>\n      <button type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n        <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n      </button>\n      @if (clearable) {\n        <button\n          mat-icon-button\n          tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"clear($event)\"\n          [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\">\n      @switch (errorKey) {\n        @case ('required') {\n          <span translate>ERROR.FIELD_REQUIRED</span>\n        }\n        @case ('validDate') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        }\n        @case ('dateIsAfter') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n          </span>\n        }\n        @case ('dateIsBefore') {\n          <span>\n            {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n          </span>\n        }\n        @case ('dateRange') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        }\n        @case ('dateMaxDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        }\n        @case ('dateMinDuration') {\n          <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        }\n        @case ('msg') {\n          <span>\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        }\n      }\n    </mat-error>\n    <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n\n    <!-- hints -->\n    @if (!formControl.invalid) {\n      <mat-hint>\n        <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n      </mat-hint>\n    }\n  </mat-form-field>\n\n  <mat-datepicker\n    #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  >\n    <!-- Date picker buttons -->\n    @if (mobile) {\n      <mat-datepicker-actions>\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    }\n  </mat-datepicker>\n}\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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></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</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"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
-                }] }], propDecorators: { mobile: [{
-                type: Input
-            }], formControl: [{
+                }] }], propDecorators: { formControl: [{
                 type: Input
             }], formControlName: [{
                 type: Input
@@ -9352,15 +9413,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], floatLabel: [{
                 type: Input
-            }], required: [{
-                type: Input
+            }], mobile: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], compact: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], autofocus: [{
-                type: Input
-            }], startDate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], clearable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], startDate: [{
                 type: Input
             }], datePickerFilter: [{
                 type: Input
@@ -13069,7 +13137,7 @@ class AppFormField {
                 useExisting: forwardRef(() => AppFormField),
                 multi: true,
             },
-        ], 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  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #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\"\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    />\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'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\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\n      matInput\n      #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\"\n      [step]=\"numberInputStep\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n    />\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'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{\n        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')\n          | translate: { maxDecimals: definition.maximumNumberDecimals }\n      }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\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\n    *ngSwitchCase=\"'boolean'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field\n    *ngSwitchCase=\"'date'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\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\n    *ngSwitchCase=\"'dateTime'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\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'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <mat-select\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    >\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\n    *ngSwitchCase=\"'enums'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\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  >\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'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input\n      matInput\n      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    />\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'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n      (keypress)=\"filterAlphanumericalInput($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\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\n    *ngSwitchCase=\"'entity'\"\n    #autocompleteField\n    [class]=\"classList\"\n    [autofocus]=\"autofocus\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\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  >\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\n    *ngSwitchCase=\"'entities'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n  >\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\">\n      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.\n    </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</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.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$2.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", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.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", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter", "optionSelected"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "blur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "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 });
+        ], 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  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #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\"\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    />\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'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{ 'ERROR.FIELD_NOT_VALID_INTEGER' | translate }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\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\n      matInput\n      #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\"\n      [step]=\"numberInputStep\"\n      (keypress)=\"filterNumberInput($event, true)\"\n      [formControl]=\"formControl\"\n      [required]=\"required\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n    />\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'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors['max'] }}\n    </mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{\n        (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')\n          | translate: { maxDecimals: definition.maximumNumberDecimals }\n      }}\n    </mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\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\n    *ngSwitchCase=\"'boolean'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [readonly]=\"readonly\"\n  >\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field\n    *ngSwitchCase=\"'date'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\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\n    *ngSwitchCase=\"'dateTime'\"\n    #matInput\n    [class]=\"classList\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER' | translate) : placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [required]=\"required\"\n    [clearable]=\"clearable\"\n    [readonly]=\"readonly\"\n    [compact]=\"compact\"\n    [tabindex]=\"tabindex\"\n    [autofocus]=\"autofocus\"\n  >\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'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <mat-select\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    >\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\n    *ngSwitchCase=\"'enums'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\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  >\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'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input\n      matInput\n      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    />\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'\"\n                  [floatLabel]=\"floatLabel | asFloatLabelType\"\n                  [appearance]=\"appearance\"\n                  [class]=\"classList\">\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      [appAutofocus]=\"autofocus\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"floatLabel === 'never' && placeholder\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [tabIndex]=\"tabindex\"\n      (click)=\"selectInputContent($event)\"\n      (keypress)=\"filterAlphanumericalInput($event)\"\n      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n    />\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button\n      matSuffix\n      *ngIf=\"clearable\"\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      (click)=\"formControl.reset()\"\n      [hidden]=\"formControl.disabled || (formControl | formGetValue | isNilOrBlank)\"\n    >\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\n    *ngSwitchCase=\"'entity'\"\n    #autocompleteField\n    [class]=\"classList\"\n    [autofocus]=\"autofocus\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\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  >\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\n    *ngSwitchCase=\"'entities'\"\n    [class]=\"classList\"\n    [placeholder]=\"placeholder\"\n    [floatLabel]=\"floatLabel\"\n    [appearance]=\"appearance\"\n    [formControl]=\"formControl\"\n    [config]=\"definition.autocomplete\"\n    [required]=\"required\"\n    [chipColor]=\"chipColor | matColor\"\n    [clearable]=\"clearable\"\n    [displayWith]=\"getDisplayValueFn(definition)\"\n  >\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\">\n      Unknown type {{ type }} for option {{ definition.key }}. Please report this error.\n    </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</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$1.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$2.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", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.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", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter", "optionSelected"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "blur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AppFormField, decorators: [{
             type: Component,
@@ -29540,11 +29608,26 @@ class AppTable {
     confirmAndBackward(event, row) {
         // Deleting edited row, if empty and not dirty
         const previousRow = this.editedRow;
-        if (previousRow && previousRow.id === -1 && previousRow.validator?.invalid && !previousRow.validator?.dirty) {
-            this.deleteNewRow(event, previousRow);
-            // Wait deletion is done, then edit previous row (by id, because of reloading)
-            this.waitIdle().then(() => this.editRowById(event, row.id, { focusColumn: this.lastUserColumn }));
-            return true;
+        event?.stopPropagation();
+        if (previousRow) {
+            // Previous row was a nex row AND invalid: delete it
+            if (previousRow.id === -1 && previousRow.validator?.invalid && !previousRow.validator?.dirty) {
+                this.deleteNewRow(event, previousRow);
+                // Wait deletion is done, then edit previous row (by id, because of reloading)
+                this.waitIdle().then(() => this.editRowById(event, row.id, { focusColumn: this.lastUserColumn }));
+                return true;
+            }
+            // If cannot confirm previous row
+            else if (!this.confirmEditCreate(event, previousRow)) {
+                // If pending: Wait end of validation, then loop
+                if (previousRow.validator?.pending) {
+                    return AppFormUtils.waitWhilePending(previousRow.validator).then(() => this.confirmAndBackward(event, row));
+                }
+                // Go back to first column
+                this.focusColumn = this.lastUserColumn;
+                this.markForCheck();
+                return false;
+            }
         }
         // Edit previous row
         this.editRow(event, row, { focusColumn: this.lastUserColumn });
@@ -29554,11 +29637,15 @@ class AppTable {
         if (!this.inlineEdition)
             return false;
         row = row || this.editedRow;
+        event?.stopPropagation();
         if (!this.confirmEditCreate(event, row)) {
             // If pending: Wait end of validation, then loop
             if (row.validator?.pending) {
                 return AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmAndForward(event, row));
             }
+            // Go back to first column
+            this.focusColumn = this.firstUserColumn;
+            this.markForCheck();
             return false;
         }
         // Edit next row
@@ -29575,8 +29662,6 @@ class AppTable {
         row = row || this.editedRow;
         if (!row || !row.editing)
             return true; // no row to confirm
-        // Stop event
-        event?.stopPropagation();
         // Confirmation edition or creation
         // TODO: add await ?
         const confirmed = row.confirmEditCreate();
@@ -29896,7 +29981,10 @@ class AppTable {
         return this.clickRow(null, row);
     }
     toggleSelectRow(event, row) {
-        event.stopPropagation();
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         this.selection.toggle(row);
     }
     clickRow(event, row) {
@@ -30050,6 +30138,7 @@ class AppTable {
         const confirmed = this.confirmEditCreate();
         if (!confirmed)
             return false;
+        console.log('TODO editRow');
         if (!row.editing && !this.loading) {
             this.focusColumn = (opts && opts.focusColumn) || this.focusColumn;
             this._dataSource.startEdit(row);
@@ -30904,11 +30993,11 @@ class ActionsColumnComponent {
         this.forward.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionsColumnComponent, deps: [{ token: i7.MatTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", stickyEnd: "stickyEnd", canCancel: "canCancel", canConfirm: "canConfirm", canDelete: "canDelete", canBackward: "canBackward", canForward: "canForward", canConfirmAndAdd: "canConfirmAndAdd", dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n  <ng-container *ngSwitchCase=\"'table'\">\n    <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      <ng-container *ngIf=\"row.editing; else view\">\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        <ng-container *ngIf=\"row.id === -1; else existingRow\">\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-container>\n\n        <!-- existing row -->\n        <ng-template #existingRow>\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #view>\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      </ng-template>\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </td>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'mat-table'\">\n    <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observed\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      <ng-container *ngIf=\"row.editing; else view\">\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        <ng-container *ngIf=\"row.id === -1; else existingRow\">\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-container>\n\n        <!-- existing row -->\n        <ng-template #existingRow>\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #view>\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      </ng-template>\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </mat-footer-cell>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", stickyEnd: "stickyEnd", canCancel: "canCancel", canConfirm: "canConfirm", canDelete: "canDelete", canBackward: "canBackward", canForward: "canForward", canConfirmAndAdd: "canConfirmAndAdd", dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n  <ng-container *ngSwitchCase=\"'table'\">\n    <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      @if (row.editing) {\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        @if (row.id === -1) {\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n\n          <!-- existing row -->\n        } @else {\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      } @else {\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n          tabindex=\"-1\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      }\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </td>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'mat-table'\">\n    <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observed\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      <ng-container *ngIf=\"row.editing; else view\">\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        <ng-container *ngIf=\"row.id === -1; else existingRow\">\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-container>\n\n        <!-- existing row -->\n        <ng-template #existingRow>\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #view>\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      </ng-template>\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </mat-footer-cell>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionsColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-actions-column', template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n  <ng-container *ngSwitchCase=\"'table'\">\n    <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      <ng-container *ngIf=\"row.editing; else view\">\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        <ng-container *ngIf=\"row.id === -1; else existingRow\">\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-container>\n\n        <!-- existing row -->\n        <ng-template #existingRow>\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #view>\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      </ng-template>\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </td>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'mat-table'\">\n    <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observed\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      <ng-container *ngIf=\"row.editing; else view\">\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        <ng-container *ngIf=\"row.id === -1; else existingRow\">\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-container>\n\n        <!-- existing row -->\n        <ng-template #existingRow>\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #view>\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      </ng-template>\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </mat-footer-cell>\n  </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'app-actions-column', template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\" [ngSwitch]=\"style\">\n  <ng-container *ngSwitchCase=\"'table'\">\n    <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      @if (row.editing) {\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        @if (row.id === -1) {\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n\n          <!-- existing row -->\n        } @else {\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      } @else {\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n          tabindex=\"-1\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      }\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </td>\n\n    <td mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </td>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'mat-table'\">\n    <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n      <button\n        mat-icon-button\n        *ngIf=\"optionsClick.observed\"\n        [title]=\"optionsTitle | translate\"\n        (click)=\"optionsClick.emit($event)\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <ng-content select=\"[matHeader]\"></ng-content>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n      <ng-container *ngIf=\"row.editing; else view\">\n        <!-- pending -->\n        <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n        <!-- Confirm button -->\n        <button\n          mat-icon-button\n          color=\"light\"\n          *ngIf=\"canConfirm && row.editing && row.validator?.dirty && row.validator?.valid\"\n          [title]=\"'COMMON.BTN_APPLY' | translate\"\n          (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n        >\n          <mat-icon>checkmark</mat-icon>\n        </button>\n\n        <!-- new row -->\n        <ng-container *ngIf=\"row.id === -1; else existingRow\">\n          <!-- delete button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canDelete && row.validator?.invalid\"\n            [title]=\"'COMMON.BTN_DELETE' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>delete_outline</mat-icon>\n          </button>\n\n          <!-- add button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"!canForward && canConfirmAndAdd && row.validator?.valid\"\n            [title]=\"'COMMON.BTN_ADD' | translate\"\n            (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>add</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-container>\n\n        <!-- existing row -->\n        <ng-template #existingRow>\n          <!-- cancel button -->\n          <button\n            mat-icon-button\n            color=\"light\"\n            *ngIf=\"canCancel && row.validator?.dirty\"\n            [title]=\"'COMMON.BTN_UNDO' | translate\"\n            (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n\n          <!-- next button (invisible - focusable only) -->\n          <button\n            class=\"mat-row-action-button\"\n            style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n            *ngIf=\"canForward && row.validator?.valid\"\n            (focus)=\"this.forward.emit({ event: $event, row: row })\"\n          ></button>\n        </ng-template>\n      </ng-container>\n\n      <ng-template #view>\n        <!-- dirty icon -->\n        <ion-icon\n          *ngIf=\"dirtyIcon && row.validator?.dirty\"\n          [name]=\"dirtyIcon\"\n          color=\"accent\"\n          class=\"dirty-icon\"\n        ></ion-icon>\n\n        <!-- backward button (invisible - focusable only) -->\n        <button\n          mat-icon-button\n          class=\"mat-row-action-button\"\n          style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0\"\n          *ngIf=\"canBackward\"\n          (focus)=\"this.backward.emit({ event: $event, row: row })\"\n        ></button>\n      </ng-template>\n\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n    </mat-cell>\n\n    <mat-footer-cell *matFooterCellDef>\n      <ng-content select=\"[matFooter]\"></ng-content>\n    </mat-footer-cell>\n  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i7.MatTable }, { type: i0.ChangeDetectorRef }], propDecorators: { columnDef: [{
                 type: ViewChild,
                 args: [MatColumnDef]
@@ -35199,7 +35288,7 @@ class NewTokenModal extends AppEntityEditorModal {
         return flags;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NewTokenModal, deps: [{ token: i0.Injector }, { token: UserTokenValidatorService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NewTokenModal, selector: "app-new-token-modal", inputs: { showScopes: "showScopes", tokenScopes: "tokenScopes", existingNames: "existingNames" }, usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar\n  modalName=\"NewTokenModal\"\n  [title]=\"titleSubject | 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  <!-- 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\n              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>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>\n              ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS\n            </mat-error>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n      @if (showScopes) {\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>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-chips-field>\n          </ion-col>\n        </ion-row>\n      }\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 subscriptSizing=\"dynamic\">\n              <textarea\n                matInput\n                formControlName=\"token\"\n                readonly\n                style=\"height: auto; background-color: lightgray\"\n                rows=\"8\"\n              ></textarea>\n              <button\n                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  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\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        <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\n          [fill]=\"invalid ? 'clear' : 'solid'\"\n          [disabled]=\"disabled || loading || invalid\"\n          (click)=\"saveAndClose($event)\"\n          (keyup.enter)=\"saveAndClose($event)\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "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: i3$1.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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NewTokenModal, selector: "app-new-token-modal", inputs: { showScopes: "showScopes", tokenScopes: "tokenScopes", existingNames: "existingNames" }, usesInheritance: true, ngImport: i0, template: "<app-modal-toolbar\n  modalName=\"NewTokenModal\"\n  [title]=\"titleSubject | 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  <!-- 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\n              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>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"form.controls.name.hasError('notAlreadyExists') && form.controls.name.touched\" translate>\n              ACCOUNT.TOKENS.CREATE.NAME_ALREADY_EXISTS\n            </mat-error>\n          </mat-form-field>\n        </ion-col>\n      </ion-row>\n      @if (showScopes) {\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>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-chips-field>\n          </ion-col>\n        </ion-row>\n      }\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 subscriptSizing=\"dynamic\">\n              <textarea\n                matInput\n                formControlName=\"token\"\n                readonly\n                style=\"height: auto; background-color: lightgray\"\n                rows=\"8\"\n              ></textarea>\n              <button\n                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  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\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        <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\n          [fill]=\"invalid ? 'clear' : 'solid'\"\n          [disabled]=\"disabled || loading || invalid\"\n          (click)=\"saveAndClose($event)\"\n          (keyup.enter)=\"saveAndClose($event)\"\n          color=\"tertiary\"\n        >\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "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: i3$1.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NewTokenModal, decorators: [{
             type: Component,
@@ -39110,11 +39199,11 @@ class DateTimeTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i2$1.Platform }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-label>\n        <small>\n          <pre>{{ stringify(form.controls.empty.value) }}</pre>\n          <br/>\n          <pre>{{ stringify(form.controls.empty.errors) }}</pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field\n        formControlName=\"empty\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [allowNoTime]=\"false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button>OK</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateTimeTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-time-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
+            args: [{ selector: 'app-data-time-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-label>\n        <small>\n          <pre>{{ stringify(form.controls.empty.value) }}</pre>\n          <br/>\n          <pre>{{ stringify(form.controls.empty.errors) }}</pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field\n        formControlName=\"empty\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [allowNoTime]=\"false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button>OK</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\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\">Start date time</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\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\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          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</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\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i2$1.Platform }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
 
 class DateTestPage {
@@ -39219,7 +39308,7 @@ class DateTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (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    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\" placeholder=\"Date\" [mobile]=\"true\" [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          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"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          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</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\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\" placeholder=\"Date\" [mobile]=\"false\" [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          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</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\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showDesktopHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "required", "compact", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (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    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\" placeholder=\"Date\" [mobile]=\"true\" [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          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"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          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</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\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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\" placeholder=\"Date\" [mobile]=\"false\" [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          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</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\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showDesktopHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateTestPage, decorators: [{
             type: Component,
@@ -39405,11 +39494,11 @@ class DateShortTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateShortTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [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-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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>\n                      <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\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        @if (showIcons2.checked) {\n                          <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint align=\"end\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateShort, selector: "mat-date-short-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "required", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [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-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.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\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        @if (showIcons2.checked) {\n                          <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint align=\"end\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateShort, selector: "mat-date-short-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateShortTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-short-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [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-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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>\n                      <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\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        @if (showIcons2.checked) {\n                          <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint align=\"end\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
+            args: [{ selector: 'app-data-short-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\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            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\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\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [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-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\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            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</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>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.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\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</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-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</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-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</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-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</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\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint2 [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons2 [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        @if (showIcons2.checked) {\n                          <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint2.checked) {\n                          <mat-hint align=\"end\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
 
 let EntityTestClass$1 = class EntityTestClass {
@@ -39715,11 +39804,11 @@ class LatLongTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LatLongTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMM Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <!-- Disable  -->\n      <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></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\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">With hint</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-latlong-field\n                    #readonlyField\n                    [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMM\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-hint align=\"end\">This is a long long hint</mat-hint>\n                  </mat-latlong-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMM Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <!-- Disable  -->\n      <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></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\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">With hint</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-latlong-field\n                    #readonlyField\n                    [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMM\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-hint align=\"end\">This is a long long hint</mat-hint>\n                  </mat-latlong-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LatLongTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-latlong-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMM Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <!-- Disable  -->\n      <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></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\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">With hint</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-latlong-field\n                    #readonlyField\n                    [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMM\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-hint align=\"end\">This is a long long hint</mat-hint>\n                  </mat-latlong-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n" }]
+            args: [{ selector: 'app-latlong-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMM Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <!-- DDMMSS -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n\n      <!-- Disable  -->\n      <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></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\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </small>\n                    </ion-text>\n                  </ion-card-subtitle>\n                </ion-card-header>\n                <ion-card-content>\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <mat-icon matSuffix>gps_fixed</mat-icon>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                  </ion-grid>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">With hint</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-latlong-field\n                    #readonlyField\n                    [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMM\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-hint align=\"end\">This is a long long hint</mat-hint>\n                  </mat-latlong-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }, { type: PlatformService }] });
 
 class SwipeTestPage {
@@ -39933,11 +40022,11 @@ class MatBadgeTestPage {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatBadgeTestPage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeColor", "appBadgeSize", "appBadgeFill", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition", "appBadgeMatIcon", "appBadgeIcon"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MatBadgeTestPage, selector: "mat-badge-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- small badge with text -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span [appBadge]=\"0\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge with text 0\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: ["appBadge", "appBadgeDisabled", "appBadgeSize", "appBadgeColor", "appBadgeFill", "appBadgeMatIcon", "appBadgeIcon", "appBadgeHidden", "appBadgeOverlap", "appBadgePosition"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MatColorPipe, name: "matColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatBadgeTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-badge-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n        <span class=\"mat-badge-content\"></span>\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n" }]
+            args: [{ selector: 'mat-badge-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span appBadge appBadgeMatIcon=\"check\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- small badge with text -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span [appBadge]=\"0\" appBadgeSize=\"small\" appBadgeColor=\"accent\" appBadgeOverlap=\"false\">\n        Small badge with text 0\n      </span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text\n      appBadge\n      appBadgeMatIcon=\"check\"\n      appBadgeSize=\"medium\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeOverlap=\"false\"\n    >\n      Medium badge\n    </ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"close\" appBadgeSize=\"large\" appBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label appBadge appBadgeMatIcon=\"check\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label appBadge appBadgeIcon=\"checkmark\" [appBadgeColor]=\"'success' | matColor\" appBadgeOverlap=\"false\">\n      Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label\n      appBadge\n      appBadgeIcon=\"checkmark-circle\"\n      [appBadgeColor]=\"'tertiary' | matColor\"\n      appBadgeFill=\"clear\"\n      appBadgeOverlap=\"false\"\n    >\n      Badge with clear icon\n    </ion-label>\n  </p>\n\n  <!-- changing text-->\n  <ion-row>\n    <ion-col>\n      <ion-label\n        appBadge\n        appBadgeIcon=\"checkmark-circle\"\n        [appBadgeColor]=\"'tertiary' | matColor\"\n        appBadgeFill=\"clear\"\n        appBadgeOverlap=\"false\"\n      >\n        {{ userText }}\n      </ion-label>\n    </ion-col>\n    <ion-col>\n      <input type=\"text\" [value]=\"userText\" (input)=\"onInputChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col>Configurable example :</ion-col>\n  </ion-row>\n  <ion-row class=\"ion-no-padding\">\n    <ion-col size=\"auto\">\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        appBadge\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"above before\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeColor</mat-label>\n        <mat-select [value]=\"$color.value\" (selectionChange)=\"this.$color.next($event.value)\">\n          <mat-option [value]=\"'primary'\">primary</mat-option>\n          <mat-option [value]=\"'secondary'\">secondary</mat-option>\n          <mat-option [value]=\"'tertiary'\">tertiary</mat-option>\n          <mat-option [value]=\"'danger'\">danger</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeIcon</mat-label>\n        <mat-select [value]=\"$icon.value\" (selectionChange)=\"this.$icon.next($event.value)\">\n          <mat-option [value]=\"'checkmark-circle'\">checkmark-circle</mat-option>\n          <mat-option [value]=\"'alert-circle'\">alert-circle</mat-option>\n          <mat-option [value]=\"'alert'\">alert</mat-option>\n          <mat-option [value]=\"'flag'\">flag</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeSize</mat-label>\n        <mat-select [value]=\"$size.value\" (selectionChange)=\"this.$size.next($event.value)\">\n          <mat-option [value]=\"'large'\">large</mat-option>\n          <mat-option [value]=\"'medium'\">medium</mat-option>\n          <mat-option [value]=\"'small'\">small</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeFill</mat-label>\n        <mat-select [value]=\"$fill.value\" (selectionChange)=\"this.$fill.next($event.value)\">\n          <mat-option [value]=\"'clear'\">clear</mat-option>\n          <mat-option [value]=\"'solid'\">solid</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n\n    <ion-col>\n      <mat-form-field>\n        <mat-label>appBadgeHidden</mat-label>\n        <mat-select [value]=\"$hidden.value\" (selectionChange)=\"this.$hidden.next($event.value)\">\n          <mat-option [value]=\"true\">true</mat-option>\n          <mat-option [value]=\"false\">false</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-raised-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        appBadgeOverlap=\"true\"\n        appBadgePosition=\"below after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button with mat-label:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        class=\"ion-no-padding\"\n        [appBadgeIcon]=\"$icon | async\"\n        [appBadgeColor]=\"$color | async | matColor\"\n        [appBadgeHidden]=\"$hidden | async\"\n        [appBadgeFill]=\"$fill | async\"\n        [appBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n\n  <h4>Angular Material Badge (standard way)</h4>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-icon:</p>\n    </ion-col>\n    <ion-col>\n      <mat-icon\n        [style.color]=\"'var(--ion-color-secondary)'\"\n        [matBadge]=\"'!'\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n      >\n        <ion-icon slot=\"icon-only\" [color]=\"'secondary'\" name=\"navigate\"></ion-icon>\n      </mat-icon>\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button:</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"above after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n\n    <ion-col>\n      <input type=\"text\" [value]=\"matBadgeContent\" (input)=\"onMatBadgeContentChanged($event)\" />\n    </ion-col>\n  </ion-row>\n\n  <ion-row>\n    <ion-col size=\"auto\">\n      <p>mat-button</p>\n    </ion-col>\n    <ion-col>\n      <button\n        mat-button\n        color=\"primary\"\n        [matBadge]=\"matBadgeContent\"\n        [matBadgeColor]=\"$color | async | matColor\"\n        [matBadgeHidden]=\"$hidden | async\"\n        [matBadgeSize]=\"$size | async\"\n        matBadgeOverlap=\"true\"\n        matBadgePosition=\"after\"\n      >\n        {{ userText }}\n      </button>\n    </ion-col>\n  </ion-row>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class DurationTestPage {
@@ -40090,7 +40179,7 @@ class MatCommonTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatCommonTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatCommonTestPage, selector: "mat-common-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value</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>\n                    <br />\n                    <pre>\n                      formControl.valid? {{ form.controls.empty?.valid }}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value (required)</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-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\" [required]=\"true\" />\n\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-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\">With value</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-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\" [required]=\"true\" />\n              </mat-form-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\">Disable</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-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\" [required]=\"true\" />\n              </mat-form-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\">Readonly toggle</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\n                (change)=\"desktopReadonlyField.readOnly = $event.checked\"\n                [checked]=\"desktopReadonlyField.readOnly\"\n              >Readonly ?</mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\" [readOnly]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Boolean</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-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\"></mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat Select</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-form-field>\n                <mat-label>Select</mat-label>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  @for (item of statusList; track item) {\n                    <mat-option [value]=\"item\">{{ item.label | translate }}</mat-option>\n                  }\n                </mat-select>\n\n\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatDateTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat DateTime</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.date.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field\n                [formControl]=\"form.controls['date'] | formGetControl\"\n                placeholder=\"Date/Time\">\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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: "directive", type: i12.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "blur"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MatCommonTestPage, selector: "mat-common-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Common field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value</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>\n                    <br />\n                    <pre>\n                      formControl.valid? {{ form.controls.empty?.valid }}\n                    </pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"empty\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <!-- Empty value + required -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Empty value (required)</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-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"emptyRequired\" [required]=\"true\" />\n\n                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-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\">With value</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-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"enable\" [required]=\"true\" />\n              </mat-form-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\">Disable</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-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput formControlName=\"disable\" [required]=\"true\" />\n              </mat-form-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\">Readonly toggle</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\n                (change)=\"desktopReadonlyField.readOnly = $event.checked\"\n                [checked]=\"desktopReadonlyField.readOnly\"\n              >Readonly ?</mat-checkbox>\n              <mat-form-field>\n                <mat-label>Value</mat-label>\n                <input matInput #desktopReadonlyField formControlName=\"readonly\" [readOnly]=\"true\" />\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Boolean -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Boolean</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-boolean-field formControlName=\"boolean\" placeholder=\"Boolean\"></mat-boolean-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatSelect  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat Select</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-form-field>\n                <mat-label>Select</mat-label>\n                <mat-select [formControl]=\"form.controls['select'] | formGetControl\" placeholder=\"Select a value\">\n                  <mat-select-trigger>\n                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}\n                  </mat-select-trigger>\n                  @for (item of statusList; track item) {\n                    <mat-option [value]=\"item\">{{ item.label | translate }}</mat-option>\n                  }\n                </mat-select>\n\n\n              </mat-form-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- MatDateTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Mat DateTime</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(form.controls.date.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field\n                [formControl]=\"form.controls['date'] | formGetControl\"\n                placeholder=\"Date/Time\">\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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: "directive", type: i12.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "blur"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MatCommonTestPage, decorators: [{
             type: Component,
@@ -41492,7 +41581,7 @@ class TableTestPage extends AppTable {
                 provide: AppTable,
                 useExisting: forwardRef(() => TableTestPage),
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat)\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [formControl]=\"row.validator.controls['label']\"\n              [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n              [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n              [readonly]=\"!row.editing\"\n            />\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator?.controls.name\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n            />\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          <mat-autocomplete-field\n            *ngIf=\"row.editing; else readonlyCell\"\n            [formControl]=\"row.validator.controls.levelId\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [config]=\"autocompleteFields.level\"\n            [readonly]=\"!row.editing\"\n            [autofocus]=\"focusColumn === 'levelId'\"\n            [required]=\"true\"\n          ></mat-autocomplete-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            placeholder=\"Oui/Non\"\n            [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          <mat-date-time-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.date';\n              let dateControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"dateControl\"\n            [autofocus]=\"focusColumn === 'date'\"\n            [compact]=\"true\"\n          ></mat-date-time-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          <mat-latlong-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.latitude';\n              let latitudeControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"latitudeControl\"\n            [latLongPattern]=\"'DDMM'\"\n            [autofocus]=\"focusColumn === 'latitude'\"\n          ></mat-latlong-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { 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.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.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: 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i13$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$1.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter", "optionSelected"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "startDate", "clearable", "datePickerFilter", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat)\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { 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.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.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: 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: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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: i13$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$1.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter", "optionSelected"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: LatitudeFormatPipe, name: "latitudeFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -41505,7 +41594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             provide: AppTable,
                             useExisting: forwardRef(() => TableTestPage),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat)\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [formControl]=\"row.validator.controls['label']\"\n              [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n              [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n              [readonly]=\"!row.editing\"\n            />\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator?.controls.name\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n            />\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          <mat-autocomplete-field\n            *ngIf=\"row.editing; else readonlyCell\"\n            [formControl]=\"row.validator.controls.levelId\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [config]=\"autocompleteFields.level\"\n            [readonly]=\"!row.editing\"\n            [autofocus]=\"focusColumn === 'levelId'\"\n            [required]=\"true\"\n          ></mat-autocomplete-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            placeholder=\"Oui/Non\"\n            [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          <mat-date-time-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.date';\n              let dateControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"dateControl\"\n            [autofocus]=\"focusColumn === 'date'\"\n            [compact]=\"true\"\n          ></mat-date-time-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          <mat-latlong-field\n            *ngIf=\"\n              !readOnly && row.editing && row.validator | formGetControl: 'properties.latitude';\n              let latitudeControl;\n              else: readOnlyTemplate\n            \"\n            floatLabel=\"never\"\n            [formControl]=\"latitudeControl\"\n            [latLongPattern]=\"'DDMM'\"\n            [autofocus]=\"focusColumn === 'latitude'\"\n          ></mat-latlong-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"'COMMON.BTN_DUPLICATE' | translate\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat)\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n    >\n      <!-- group header cells -->\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_1' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length - 6\">\n          <ion-label translate>{{ i18nColumnPrefix + 'GROUP_2' }}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" [stickyEnd]=\"stickyEnd\">\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n          <ion-label></ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"toggleSelectRow($event, row)\"\n            [checked]=\"selection | isSelected: row\"\n            tabindex=\"-1\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\" [class.mat-column-sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'label'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                autocomplete=\"off\"\n                [formControl]=\"row.validator.controls['label']\"\n                [placeholder]=\"'TABLE.TESTING.LABEL' | translate\"\n                [appAutofocus]=\"focusColumn === 'label'\"\n                [readonly]=\"!row.editing\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'label' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'name'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator?.controls.name\"\n                [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n                [appAutofocus]=\"focusColumn === 'name'\"\n              />\n              <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'name' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'levelId'\">\n          @if (row.editing) {\n            <mat-autocomplete-field\n              [formControl]=\"row.validator.controls.levelId\"\n              [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n              floatLabel=\"never\"\n              [config]=\"autocompleteFields.level\"\n              [readonly]=\"!row.editing\"\n              [autofocus]=\"focusColumn === 'levelId'\"\n              [required]=\"true\"\n            ></mat-autocomplete-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          [class.mat-form-field-disabled]=\"!row.editing\"\n          (click)=\"focusColumn = 'statusId'\"\n        >\n          <mat-form-field>\n            <mat-select\n              [formControl]=\"row.validator.controls['statusId']\"\n              [placeholder]=\"i18nColumnPrefix + 'STATUS_ID' | translate\"\n            >\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label | translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n      <!--      <ng-container matColumnDef=\"values\">-->\n      <!--        <th mat-header-cell *matHeaderCellDef>-->\n      <!--          <span translate>Enums</span>-->\n      <!--        </th>-->\n      <!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n      <!--          <app-form-field-->\n      <!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n      <!--            [definition]=\"columnDefinitions['values']\"-->\n      <!--          ></app-form-field>-->\n      <!--        </td>-->\n      <!--      </ng-container>-->\n\n      <!-- boolean (as checkbox) -->\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          @if (!readOnly && row.editing) {\n            <mat-boolean-field\n              floatLabel=\"never\"\n              [style]=\"'checkbox'\"\n              placeholder=\"Oui/Non\"\n              [formControl]=\"row.validator | formGetControl: 'properties.boolean'\"\n              [compact]=\"true\"\n            ></mat-boolean-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- date -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\" class=\"mat-cell-date-time\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Date</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\" (click)=\"focusColumn = 'date'\">\n          @if (!readOnly && row.editing) {\n            <mat-date-time-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.date'\"\n              [autofocus]=\"focusColumn === 'date'\"\n              placeholder=\"Date/Time\"\n              [compact]=\"true\"\n            ></mat-date-time-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.date' | dateFormat: { time: true } }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- latitude -->\n      <ng-container matColumnDef=\"latitude\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"true\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Latitude</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = 'latitude'\">\n          @if (!readOnly && row.editing) {\n            <mat-latlong-field\n              floatLabel=\"never\"\n              [formControl]=\"row.validator | formGetControl: 'properties.latitude'\"\n              placeholder=\"Latitude\"\n              [latLongPattern]=\"'DDMM'\"\n              [autofocus]=\"focusColumn === 'latitude'\"\n            ></mat-latlong-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'properties.latitude' | latitudeFormat }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id !== -1\">\n            <small>\n              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input\n              type=\"text\"\n              matInput\n              [formControl]=\"row.validator?.controls.comments\"\n              [placeholder]=\"'TABLE.TESTING.COMMENTS' | translate\"\n              [readonly]=\"!row.editing\"\n            />\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <ion-icon\n              [color]=\"row.validator?.controls.comments.value ? 'tertiary' : 'medium'\"\n              name=\"chatbox\"\n              slot=\"icon-only\"\n            ></ion-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-mdc-row-selected]=\"row.editing\"\n        [class.mat-mdc-row-error]=\"row.invalid\"\n        [class.mat-mdc-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"error$ | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: AppValidatorService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { filterPanelFloating: [{
                 type: Input
             }], enableInfiniteScroll: [{
@@ -42657,5 +42746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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, AbstractNamedFilterService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppRowField, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, 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, FormErrorPipe, 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, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, 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, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, 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, 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, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, 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, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, 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, ValueFormatPipe, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, 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, isOnFieldMode, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, newArray, 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, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
+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, AbstractNamedFilterService, AbstractSelectionModelPipe, AbstractTableSelectionPipe, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, AccountUtils, ActionsColumnComponent, AdminModule, AdminRoutingModule, AdminUsersModule, Alerts, AndroidOsEnvironment, AppAboutModalModule, AppAccountModule, AppAsyncTable, AppAuthForm, AppAuthModal, AppAuthModule, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppEntityFormModule, AppForm, AppFormArray, AppFormButtonsBarModule, AppFormContainer, AppFormField, AppFormModule, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppHomePageModule, AppIconComponent, AppIconModule, AppImageGalleryComponent, AppInMemoryTable, AppInstallUpgradeCard, AppInstallUpgradeCardModule, AppListForm, AppListFormModule, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppPropertiesFormModule, AppPropertiesTable, AppRegisterModule, AppRowField, AppSelectPeerModule, AppSettingsPageModule, AppTabEditor, AppTabEditorOptions, AppTable, AppTableModule, AppTableUtils, AppTextPopoverModule, AppUpdateOfflineModeCard, AppUpdateOfflineModeCardModule, AppValidatorService, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLastPipe, ArrayLengthPipe, ArrayPluckPipe, AsAnyPipe, AsArrayPipe, AsFloatLabelTypePipe, AsObservablePipe, AudioProvider, AudioTestingModule, AudioTestingPage, AuthGuardService, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, BadgeDirective, BadgeNumberPipe, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, BooleanFormatPipe, BooleanTestPage, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CapitalizePipe, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigFragments, ConfigService, Configuration, CoreModule, CorePipesModule, 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, FormErrorPipe, 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, IsAllSelectedPipe, IsEmptySelectionPipe, IsLoginAccountPipe, IsMultipleSelectionPipe, IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotAllSelectedPipe, IsNotEmptySelectionPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, IsOnDeskPipe, IsOnFieldPipe, IsSelectedPipe, IsSingleSelectionPipe, 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, MAT_FORM_FIELD_DEFAULT_APPEARANCE, MAT_FORM_FIELD_DEFAULT_SUBSCRIPT_SIZING, 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, 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, NamedFilterSelectorTestingModule, NamedFilterSelectorTestingPage, NetworkService, NewTokenModal, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, 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, SelectionLengthPipe, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedBadgeModule, SharedDebugModule, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, 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, ValueFormatPipe, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayResize, arraySize, asInputElement, booleanToString, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, collectByProperty, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, fadeInSlowAnimation, filterFalse, filterFormErrors, filterFormErrorsByPath, filterFormErrorsByPrefix, 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, isOnFieldMode, isProgressEvent, isResponseEvent, isStartableService, isTouchUi, isWindows, joinProperties, joinPropertiesPath, lastArrayValue, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, maskitoPrefixPlugin, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, newArray, noTrailingSlash, notNilOrDefault, nullIfNilOrBlank, 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, underscoreToChangeCase, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending };
 //# sourceMappingURL=sumaris-net.ngx-components.mjs.map