npm - @sumaris-net/ngx-components - Versions diffs - 2.4.91 → 2.4.92 - Mend

@sumaris-net/ngx-components 2.4.91 → 2.4.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/fesm2020/sumaris-net.ngx-components.mjs CHANGED Viewed

@@ -6451,6 +6451,41 @@ class MatDateTime {
         this.clearable = false;
         this.locale = (translate.currentLang || translate.defaultLang).substring(0, 2);
     }
+    set control(value) {
+        this.setControl(value);
+    }
+    get control() {
+        return this._control;
+    }
+    set controlName(value) {
+        this.setControlName(value);
+    }
+    get controlName() {
+        return this._controlName;
+    }
+    set required(value) {
+        if (this._required === value)
+            return; // SKip
+        this._required = value;
+        if (this._control) {
+            this.updateControlValidators(this._control, value);
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    set formControl(value) {
+        this.control = value;
+    }
+    get formControl() {
+        return this.control;
+    }
+    set formControlName(value) {
+        this.controlName = value;
+    }
+    get formControlName() {
+        return this.controlName;
+    }
     set readonly(value) {
         this._readonly = value;
         this.markForCheck();
@@ -6475,19 +6510,13 @@ class MatDateTime {
         return this.formControl.disabled;
     }
     ngOnInit() {
-        this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
-        if (!this.formControl)
+        const control = this._control || (this._controlName && this.formGroupDir?.form.get(this._controlName));
+        if (!control)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-time-field>.');
+        // Default values
         this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
-        this.required = isNotNilBoolean(this.required) ? this.required : (this.formControl.validator === Validators.required || isBlankString(this.required));
-        // Add 'validDate' validator (when existing validator are null or required, to be sure to keep)
-        if (!this.formControl.validator || this.formControl.validator === Validators.required) {
-            this.formControl.setValidators(this.required ? [Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
-        }
-        else {
-            this.formControl.setValidators(this.required ? [this.formControl.validator, Validators.required, SharedValidators.validDate] :
-                [this.formControl.validator, SharedValidators.validDate]);
-        }
+        this._required = isNotNilBoolean(this._required) ? this._required : (control.hasValidator(Validators.required) || isBlankString(this._required));
+        this.setControl(control);
         // Create the day control
         this.dayControl = this.formBuilder.control(null);
         // Create the hour control
@@ -6497,11 +6526,6 @@ class MatDateTime {
             .subscribe((patterns) => this.updatePattern(patterns)));
         this._subscription.add(merge(this.dayControl.valueChanges, this.hourControl.valueChanges)
             .subscribe((_) => this.onFormChange()));
-        // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
-        this._subscription.add(this.formControl.statusChanges
-            .pipe(filter((_) => !this._readonly && !this._writing && !this._disabling) // Skip
-        )
-            .subscribe((_) => this.markForCheck()));
         this._writing = false;
     }
     ngAfterViewInit() {
@@ -6509,6 +6533,50 @@ class MatDateTime {
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
+        this._controlSubscription?.unsubscribe();
+    }
+    setControlName(controlName) {
+        if (!controlName || this._controlName === controlName)
+            return; // Skip
+        this._controlName = controlName;
+        if (this.formGroupDir?.form) {
+            const control = this.formGroupDir.form.get(controlName);
+            if (!control)
+                throw new Error(`No form control named \'${controlName}\'!`);
+            this.setControl(control);
+        }
+    }
+    setControl(control) {
+        if (!control)
+            return; // Skip
+        if (this._control !== control) {
+            this._control = control;
+            // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
+            this._controlSubscription?.unsubscribe();
+            this._controlSubscription = control.statusChanges
+                .pipe(filter((_) => !this._readonly && !this._writing && !this._disabling) // Skip
+            )
+                .subscribe((_) => this.markForCheck());
+        }
+        // Update validators
+        this.updateControlValidators(control, this._required);
+    }
+    updateControlValidators(control, required) {
+        if (!control)
+            return;
+        // Add 'validDate' validator
+        if (!control.hasValidator(SharedValidators.validDate)) {
+            control.addValidators(SharedValidators.validDate);
+        }
+        // Add required validator (if need)
+        if (required) {
+            if (!control.hasValidator(Validators.required)) {
+                control.addValidators(Validators.required);
+            }
+        }
+        else if (control.hasValidator(Validators.required)) {
+            control.removeValidators(Validators.required);
+        }
     }
     writeValue(value) {
         if (this._writing)
@@ -6599,7 +6667,7 @@ class MatDateTime {
         });
     }
     clear() {
-        this.formControl.setValue(null);
+        this._control.setValue(null);
         this.markAsTouched();
         this.markAsDirty();
     }
@@ -6616,7 +6684,7 @@ class MatDateTime {
         if (!value && this.mobile) {
             this._writing = true;
             value = DateUtils.resetTime(DateUtils.moment().locale(this.locale));
-            this.formControl.setValue(value, { emitEvent: false });
+            this._control.setValue(value, { emitEvent: false });
             this.markForCheck();
             this._writing = false;
         }
@@ -6698,15 +6766,15 @@ class MatDateTime {
         //console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dayStr, time]);
         const incompleteValue = isNilOrBlank(time) !== isNilOrBlank(dayStr);
         if (incompleteValue || this.dayControl.invalid || this.hourControl.invalid) {
-            this.formControl.markAsPending({ onlySelf: true });
-            this.formControl.setErrors({
+            this._control.markAsPending({ onlySelf: true });
+            this._control.setErrors({
                 validDate: incompleteValue,
-                ...this.formControl.errors,
+                ...this._control.errors,
                 ...this.dayControl.errors,
                 ...this.hourControl.errors
             });
             if (this.dayControl.dirty || this.hourControl.dirty) {
-                this.formControl.markAsDirty();
+                this._control.markAsDirty();
             }
             this._writing = false;
             return;
@@ -6738,7 +6806,7 @@ class MatDateTime {
     emitChange(value) {
         // Get the model value
         const dateStr = toDateISOString(value) || null;
-        if (this.formControl.value !== dateStr) {
+        if (this._control.value !== dateStr) {
             // DEBUG
             //console.debug('[mat-date-time] Emit new value: ' + dateStr);
             // Apply to form control. => Will call writeValue()
@@ -6768,14 +6836,14 @@ class MatDateTime {
         this.markForCheck();
     }
     markAsDirty(opts) {
-        this.formControl.markAsDirty(opts);
+        this._control.markAsDirty(opts);
     }
     markForCheck() {
         this.cd.markForCheck();
     }
 }
 MatDateTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatDateTime, deps: [{ token: i1$1.MomentDateAdapter }, { token: i1$2.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatDateTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatDateTime, selector: "mat-date-time-field", inputs: { formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", mobile: "mobile", compact: "compact", placeholderChar: "placeholderChar", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
+MatDateTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatDateTime, selector: "mat-date-time-field", inputs: { control: "control", controlName: "controlName", required: "required", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", placeholderChar: "placeholderChar", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
         DEFAULT_VALUE_ACCESSOR$4,
     ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding mat-form-field-{{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n                        >\n\n          <mat-label (focusin)=\"mobile && _preventEvent($event)\" *ngIf=\"placeholder\" >{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dayControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"_checkIfTouched()\"\n                 (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"!mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <!-- Mobile -->\n          <input #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dayControl\"\n                 (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n          <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n                  (click)=\"openDatePicker($event, datePicker)\"\n                  [disabled]=\"formControl.disabled\">\n            <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"disabled\"\n                        [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{hourControl.value||('COMMON.TIME'|translate)}}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <mat-error  *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n          </mat-error>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input matInput #matInput type=\"text\" [formControl]=\"hourControl\"\n                 *ngIf=\"!mobile\"\n                 class=\"mat-input-element\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowDown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 (blur)=\"_checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input #matInput type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"hourControl\"\n                 (click)=\"_openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <!-- Hide the final (hidden) input -->\n          <input matInput [formControl]=\"hourControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\"\n                 readonly>\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"_openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field mat-label,ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.mat-form-field-outline ion-col.day{min-width:153px}.mat-form-field-outline ion-col.hour{min-width:100px;max-width:110px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1.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: i1.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: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], 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.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: i12$1.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["ESC", "hoursOnly", "ngxMaterialTimepickerTheme", "format", "minutesGap", "cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "defaultTime", "timepickerClass", "theme", "min", "max"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12$1.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "value", "min", "max", "ngxTimepicker", "disabled", "disableClick"] }, { kind: "directive", type: i1$2.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: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatDateTime, decorators: [{
@@ -6785,7 +6853,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding mat-form-field-{{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n                        >\n\n          <mat-label (focusin)=\"mobile && _preventEvent($event)\" *ngIf=\"placeholder\" >{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dayControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"_checkIfTouched()\"\n                 (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"!mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <!-- Mobile -->\n          <input #matInput autocomplete=\"off\" type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dayControl\"\n                 (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n          <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n                 *ngIf=\"mobile\"\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"_onDatePickerChange($event)\"\n                 readonly>\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n                  (click)=\"openDatePicker($event, datePicker)\"\n                  [disabled]=\"formControl.disabled\">\n            <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"disabled\"\n                        [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{hourControl.value||('COMMON.TIME'|translate)}}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <mat-error  *ngIf=\"formControl.touched && formControl.invalid && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n          </mat-error>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input matInput #matInput type=\"text\" [formControl]=\"hourControl\"\n                 *ngIf=\"!mobile\"\n                 class=\"mat-input-element\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowDown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"_preventEvent($event)\"\n                 (blur)=\"_checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input #matInput type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"hourControl\"\n                 (click)=\"_openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <!-- Hide the final (hidden) input -->\n          <input matInput [formControl]=\"hourControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\"\n                 readonly>\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"_openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field mat-label,ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.mat-form-field-outline ion-col.day{min-width:153px}.mat-form-field-outline ion-col.hour{min-width:100px;max-width:110px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.MomentDateAdapter }, { type: i1$2.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { formControl: [{
+                }] }]; }, propDecorators: { control: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], formControl: [{
                 type: Input
             }], formControlName: [{
                 type: Input
@@ -6795,8 +6869,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], appearance: [{
                 type: Input
-            }], required: [{
-                type: Input
             }], mobile: [{
                 type: Input
             }], compact: [{
@@ -10281,7 +10353,7 @@ AppFormField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             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\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           type=\"number\"\n           autocomplete=\"off\"\n           [readonly]=\"readonly\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           pattern=\"-?[0-9]*\"\n           step=\"1\"\n           [appAutofocus]=\"autofocus\"\n           [placeholder]=\"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    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n    <button matSuffix *ngIf=\"clearable\"\n            mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"formControl.reset()\"\n            [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <input matInput #matInput\n           type=\"number\"\n           decimal=\"true\"\n           autocomplete=\"off\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           [appAutofocus]=\"autofocus\"\n           [readonly]=\"readonly\"\n           [placeholder]=\"placeholder\"\n           [step]=\"numberInputStep\"\n           (keypress)=\"filterNumberInput($event, true)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{maxDecimals:\n      definition.maximumNumberDecimals} }}</mat-error>\n\n    <button matSuffix *ngIf=\"clearable\"\n            mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"formControl.reset()\"\n            [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n                     [class]=\"classList\"\n                     [formControl]=\"formControl\"\n                     [placeholder]=\"placeholder\"\n                     [floatLabel]=\"floatLabel\"\n                     [required]=\"required\"\n                     [compact]=\"compact\"\n                     [tabindex]=\"tabindex\"\n                     [readonly]=\"readonly\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n                  [class]=\"classList\"\n                  [formControl]=\"formControl\"\n                  [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n                  [floatLabel]=\"floatLabel\"\n                  [required]=\"required\"\n                  [clearable]=\"clearable\"\n                  [readonly]=\"readonly\"\n                  [compact]=\"compact\"\n                  [tabindex]=\"tabindex\"\n                  [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field *ngSwitchCase=\"'dateTime'\" #matInput\n                       [class]=\"classList\"\n                       [formControl]=\"formControl\"\n                       [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n                       [floatLabel]=\"floatLabel\"\n                       [required]=\"required\"\n                       [clearable]=\"clearable\"\n                       [readonly]=\"readonly\"\n                       [compact]=\"compact\"\n                       [tabindex]=\"tabindex\"\n                       [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <mat-select [formControl]=\"formControl\"\n                [placeholder]=\"placeholder\"\n                [required]=\"required\"\n                [tabindex]=\"tabindex\"\n                (keyup.enter)=\"onKeyupEnter.emit($event)\">\n      <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- multi enum -->\n  <mat-chips-field *ngSwitchCase=\"'enums'\"\n                   [class]=\"classList\"\n                   [placeholder]=\"placeholder\"\n                   [floatLabel]=\"floatLabel\"\n                   [formControl]=\"formControl\"\n                   [clearable]=\"clearable\"\n                   [items]=\"_values\"\n                   [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n                   [config]=\"definition.autocomplete\"\n                   [showAllOnFocus]=\"true\"\n                   [required]=\"required\"\n                   [chipColor]=\"chipColor\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input matInput autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [style.color]=\"getColorContrast(formControl.value)\"\n           [style.background]=\"formControl.value\"\n           [colorPicker]=\"formControl.value\"\n           (colorPickerChange)=\"writeValue($event)\"\n           [cpSaveClickOutside]=\"true\"\n           cpPosition=\"top\"\n           cpOutputFormat=\"hex\"\n           [cpOKButton]=\"false\"\n           [required]=\"required\"/>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [placeholder]=\"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    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button matSuffix *ngIf=\"clearable\"\n            mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"formControl.reset()\"\n            [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n                          #autocompleteField\n                          [class]=\"classList\"\n                          [autofocus]=\"autofocus\"\n                          [placeholder]=\"placeholder\"\n                          [floatLabel]=\"floatLabel\"\n                          [formControl]=\"formControl\"\n                          [config]=\"definition.autocomplete\"\n                          [required]=\"required\"\n                          [tabindex]=\"tabindex\"\n                          [clearable]=\"clearable\"\n                          (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                          [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field *ngSwitchCase=\"'entities'\"\n                    [class]=\"classList\"\n                    [placeholder]=\"placeholder\"\n                    [floatLabel]=\"floatLabel\"\n                    [formControl]=\"formControl\"\n                    [config]=\"definition.autocomplete\"\n                    [required]=\"required\"\n                    [chipColor]=\"chipColor\"\n                    [clearable]=\"clearable\"\n                    [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], 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\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           type=\"number\"\n           autocomplete=\"off\"\n           [readonly]=\"readonly\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           pattern=\"-?[0-9]*\"\n           step=\"1\"\n           [appAutofocus]=\"autofocus\"\n           [placeholder]=\"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    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n    <button matSuffix *ngIf=\"clearable\"\n            mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"formControl.reset()\"\n            [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <input matInput #matInput\n           type=\"number\"\n           decimal=\"true\"\n           autocomplete=\"off\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           [appAutofocus]=\"autofocus\"\n           [readonly]=\"readonly\"\n           [placeholder]=\"placeholder\"\n           [step]=\"numberInputStep\"\n           (keypress)=\"filterNumberInput($event, true)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{maxDecimals:\n      definition.maximumNumberDecimals} }}</mat-error>\n\n    <button matSuffix *ngIf=\"clearable\"\n            mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"formControl.reset()\"\n            [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n                     [class]=\"classList\"\n                     [formControl]=\"formControl\"\n                     [placeholder]=\"placeholder\"\n                     [floatLabel]=\"floatLabel\"\n                     [required]=\"required\"\n                     [compact]=\"compact\"\n                     [tabindex]=\"tabindex\"\n                     [readonly]=\"readonly\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n                  [class]=\"classList\"\n                  [formControl]=\"formControl\"\n                  [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n                  [floatLabel]=\"floatLabel\"\n                  [required]=\"required\"\n                  [clearable]=\"clearable\"\n                  [readonly]=\"readonly\"\n                  [compact]=\"compact\"\n                  [tabindex]=\"tabindex\"\n                  [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field *ngSwitchCase=\"'dateTime'\" #matInput\n                       [class]=\"classList\"\n                       [formControl]=\"formControl\"\n                       [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n                       [floatLabel]=\"floatLabel\"\n                       [required]=\"required\"\n                       [clearable]=\"clearable\"\n                       [readonly]=\"readonly\"\n                       [compact]=\"compact\"\n                       [tabindex]=\"tabindex\"\n                       [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <mat-select [formControl]=\"formControl\"\n                [placeholder]=\"placeholder\"\n                [required]=\"required\"\n                [tabindex]=\"tabindex\"\n                (keyup.enter)=\"onKeyupEnter.emit($event)\">\n      <mat-option *ngFor=\"let item of _values\" [value]=\"item.key\">{{ item.value | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- multi enum -->\n  <mat-chips-field *ngSwitchCase=\"'enums'\"\n                   [class]=\"classList\"\n                   [placeholder]=\"placeholder\"\n                   [floatLabel]=\"floatLabel\"\n                   [formControl]=\"formControl\"\n                   [clearable]=\"clearable\"\n                   [items]=\"_values\"\n                   [displayAttributes]=\"definition.autocomplete?.attributes || ['key', 'value']\"\n                   [config]=\"definition.autocomplete\"\n                   [showAllOnFocus]=\"true\"\n                   [required]=\"required\"\n                   [chipColor]=\"chipColor\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input matInput autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [style.color]=\"getColorContrast(formControl.value)\"\n           [style.background]=\"formControl.value\"\n           [colorPicker]=\"formControl.value\"\n           (colorPickerChange)=\"writeValue($event)\"\n           [cpSaveClickOutside]=\"true\"\n           cpPosition=\"top\"\n           cpOutputFormat=\"hex\"\n           [cpOKButton]=\"false\"\n           [required]=\"required\"/>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [placeholder]=\"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    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <button matSuffix *ngIf=\"clearable\"\n            mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"formControl.reset()\"\n            [hidden]=\"formControl.disabled || (formControl|formGetValue|isNilOrBlank)\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n                          #autocompleteField\n                          [class]=\"classList\"\n                          [autofocus]=\"autofocus\"\n                          [placeholder]=\"placeholder\"\n                          [floatLabel]=\"floatLabel\"\n                          [formControl]=\"formControl\"\n                          [config]=\"definition.autocomplete\"\n                          [required]=\"required\"\n                          [tabindex]=\"tabindex\"\n                          [clearable]=\"clearable\"\n                          (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                          [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field *ngSwitchCase=\"'entities'\"\n                    [class]=\"classList\"\n                    [placeholder]=\"placeholder\"\n                    [floatLabel]=\"floatLabel\"\n                    [formControl]=\"formControl\"\n                    [config]=\"definition.autocomplete\"\n                    [required]=\"required\"\n                    [chipColor]=\"chipColor\"\n                    [clearable]=\"clearable\"\n                    [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n\n</ng-container>\n", styles: [":host{display:inline-block;position:relative}button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i5.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["control", "controlName", "required", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "filter", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsNilOrBlankPipe, name: "isNilOrBlank" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppFormField, decorators: [{
             type: Component,
             args: [{ selector: 'app-form-field', providers: [
@@ -14667,7 +14739,7 @@ class AppForm {
     }
     /* -- private function -- */
     setLoading(value, opts) {
-        if (this.loadingSubject.value !== value) {
+        if (!this.loadingSubject.closed && this.loadingSubject.value !== value) {
             this.loadingSubject.next(value);
             if (!opts || opts.emitEvent !== false) {
                 this.markForCheck();
@@ -34578,7 +34650,7 @@ class DateTimeTestPage {
     }
 }
 DateTimeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i1.Platform }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"auto\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
+DateTimeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"auto\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.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: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["control", "controlName", "required", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-data-time-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"auto\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n" }]
@@ -34771,7 +34843,7 @@ class NumpadTestPage {
     }
 }
 NumpadTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumpadTestPage, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-NumpadTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumpadTestPage, selector: "app-numpad-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Numeric pad test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Numpad test page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Decimal field, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"text\" formControlName=\"empty\" placeholder=\"Empty decimal field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDecimal\"\n                       readonly>\n                <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- filled -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Integer field\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"number\" formControlName=\"integer\" placeholder=\"Filled integer field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadInteger\">\n                <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- append to input -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Attach to input, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"text\" formControlName=\"integer\" placeholder=\"A number\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadAppendToInput\"\n                       readonly>\n                <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"number\" formControlName=\"disable\" placeholder=\"Disabled field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDisabled\">\n                <mat-numpad #numpadDisabled></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n      <!-- Other field (for comparision) -->\n      <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mat date time\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n              </mat-date-time-field>\n\n              <mat-date-time-field formControlName=\"datetime\"\n                                   placeholder=\"Date/Time field (mobile)\"\n                                   [mobile]=\"true\">\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatNumpadComponent, selector: "mat-numpad", inputs: ["keymap", "decimal", "appendToInput", "disableAnimation", "noBackdrop", "position"], outputs: ["keypress", "closed"] }, { kind: "directive", type: NumpadDirective, selector: "[matNumpad]", inputs: ["keymap", "matNumpad", "value", "disabled", "decimal", "disableClick"] }] });
+NumpadTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumpadTestPage, selector: "app-numpad-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Numeric pad test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Numpad test page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Decimal field, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"text\" formControlName=\"empty\" placeholder=\"Empty decimal field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDecimal\"\n                       readonly>\n                <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- filled -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Integer field\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"number\" formControlName=\"integer\" placeholder=\"Filled integer field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadInteger\">\n                <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- append to input -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Attach to input, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"text\" formControlName=\"integer\" placeholder=\"A number\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadAppendToInput\"\n                       readonly>\n                <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"number\" formControlName=\"disable\" placeholder=\"Disabled field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDisabled\">\n                <mat-numpad #numpadDisabled></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n      <!-- Other field (for comparision) -->\n      <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mat date time\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n              </mat-date-time-field>\n\n              <mat-date-time-field formControlName=\"datetime\"\n                                   placeholder=\"Date/Time field (mobile)\"\n                                   [mobile]=\"true\">\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["control", "controlName", "required", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }, { kind: "component", type: MatNumpadComponent, selector: "mat-numpad", inputs: ["keymap", "decimal", "appendToInput", "disableAnimation", "noBackdrop", "position"], outputs: ["keypress", "closed"] }, { kind: "directive", type: NumpadDirective, selector: "[matNumpad]", inputs: ["keymap", "matNumpad", "value", "disabled", "decimal", "disableClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumpadTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-numpad-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Numeric pad test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <h1>Numpad test page:</h1>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Decimal field, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"text\" formControlName=\"empty\" placeholder=\"Empty decimal field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDecimal\"\n                       readonly>\n                <mat-numpad [decimal]=\"true\" #numpadDecimal></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- filled -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Integer field\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"number\" formControlName=\"integer\" placeholder=\"Filled integer field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadInteger\">\n                <mat-numpad #numpadInteger [decimal]=\"false\"></mat-numpad>\n\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- append to input -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Attach to input, readonly\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"text\" formControlName=\"integer\" placeholder=\"A number\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadAppendToInput\"\n                       readonly>\n                <mat-numpad #numpadAppendToInput [appendToInput]=\"true\"></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-form-field >\n                <input matInput type=\"number\" formControlName=\"disable\" placeholder=\"Disabled field\"\n                       autocomplete=\"off\"\n                       [matNumpad]=\"numpadDisabled\">\n                <mat-numpad #numpadDisabled></mat-numpad>\n              </mat-form-field>\n\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n      <!-- Other field (for comparision) -->\n      <ion-row><ion-col><ion-text><h4>Other field type (for style comparision)</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mat date time\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"datetime\" placeholder=\"Date/Time field (desktop)\">\n              </mat-date-time-field>\n\n              <mat-date-time-field formControlName=\"datetime\"\n                                   placeholder=\"Date/Time field (mobile)\"\n                                   [mobile]=\"true\">\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n" }]