@sumaris-net/ngx-components 2.0.0-rc16 → 2.0.0-rc19

package/esm2020/src/app/shared/material/chips/chips.module.mjs

@@ -18,8 +18,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatChipsModule {
 }
-SharedMatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SharedMatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedMatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.5", ngImport: i0, type: SharedMatChipsModule, declarations: [MatChipsField], imports: [CommonModule,
+SharedMatChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SharedMatChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedMatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: SharedMatChipsModule, declarations: [MatChipsField], imports: [CommonModule,
         IonicModule,
         ReactiveFormsModule,
         SharedPipesModule,
@@ -32,7 +32,7 @@ SharedMatChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         MatButtonModule,
         MatSelectModule,
         MatChipsModule, i1.TranslateModule], exports: [MatChipsField] });
-SharedMatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SharedMatChipsModule, imports: [CommonModule,
+SharedMatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SharedMatChipsModule, imports: [CommonModule,
         IonicModule,
         ReactiveFormsModule,
         SharedPipesModule,
@@ -46,7 +46,7 @@ SharedMatChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
         MatSelectModule,
         MatChipsModule,
         TranslateModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SharedMatChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SharedMatChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/src/app/shared/material/chips/material.chips.mjs

@@ -572,13 +572,13 @@ export class MatChipsField {
         }
     }
 }
-MatChipsField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatChipsField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatChipsField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: MatChipsField, selector: "mat-chips-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", suggestFn: "suggestFn", required: "required", mobile: "mobile", readonly: "readonly", clearable: "clearable", debounceTime: "debounceTime", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: "highlightAccent", showAllOnFocus: "showAllOnFocus", showPanelOnFocus: "showPanelOnFocus", autofocus: "autofocus", config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", classList: ["class", "classList"], panelWidth: "panelWidth", matAutocompletePosition: "matAutocompletePosition", itemSize: "itemSize", fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: "suggestLengthThreshold", showLoadingSpinner: "showLoadingSpinner", chipColor: "chipColor", debug: "debug", filter: "filter", tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [{
+MatChipsField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatChipsField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MatChipsField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: MatChipsField, selector: "mat-chips-field", inputs: { equals: "equals", logPrefix: "logPrefix", formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", suggestFn: "suggestFn", required: "required", mobile: "mobile", readonly: "readonly", clearable: "clearable", debounceTime: "debounceTime", displayWith: "displayWith", displayAttributes: "displayAttributes", displayColumnSizes: "displayColumnSizes", displayColumnNames: "displayColumnNames", highlightAccent: "highlightAccent", showAllOnFocus: "showAllOnFocus", showPanelOnFocus: "showPanelOnFocus", autofocus: "autofocus", config: "config", i18nPrefix: "i18nPrefix", noResultMessage: "noResultMessage", classList: ["class", "classList"], panelWidth: "panelWidth", matAutocompletePosition: "matAutocompletePosition", itemSize: "itemSize", fetchMoreThreshold: "fetchMoreThreshold", suggestLengthThreshold: "suggestLengthThreshold", showLoadingSpinner: "showLoadingSpinner", chipColor: "chipColor", debug: "debug", filter: "filter", tabindex: "tabindex", items: "items" }, outputs: { clicked: "click", blurred: "blur", focused: "focus", dropButtonClick: "dropButtonClick", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             multi: true,
             useExisting: forwardRef(() => MatChipsField)
         }], viewQueries: [{ propertyName: "matInputText", first: true, predicate: ["matInputText"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\"\n                      [appearance]=\"appearance\"\n                      class=\"material-chips\"\n                      [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"keydownEscape.emit($event)\"\n                 (keyup.enter)=\"keyupEnter.emit($event)\"\n                 (keyup.arrowDown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>{{noResultMessage | translate}}</ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                         [size]=\"displayColumnSizes[i]\">\n                  <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent } \"></ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\"\n                   class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-standard-chip.mat-chip-with-trailing-icon{padding:0 7px 0 12px}mat-icon.select-arrow{color:#00000078;font-size:150%}.mat-chip.mat-standard-chip{margin:1px 0 0 2px!important;min-height:calc(31px - .5em)}.mat-chip.mat-standard-chip.mat-chip-with-trailing-icon{padding:0 7px 0 12px}.mat-chip.mat-standard-chip.mat-chip-with-trailing-icon mat-icon{color:inherit}.mat-chip.mat-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-chip.mat-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-chip.mat-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-chip.mat-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-chip.mat-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}.mat-form-field-appearance-legacy .mat-standard-chip{min-height:calc(31px - .4375em)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.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: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonRow, selector: "ion-row" }, { kind: "component", type: i3.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i3.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.NgInitDirective, selector: "[ngInit]", outputs: ["ngInit"] }, { kind: "directive", type: i5.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i8.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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: i11.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i11.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i12.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: i14.HighlightPipe, name: "highlight" }, { kind: "pipe", type: i15.EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: i16.StrLengthPipe, name: "strLength" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatChipsField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatChipsField, decorators: [{
             type: Component,
             args: [{ selector: 'mat-chips-field', providers: [{
                             provide: NG_VALUE_ACCESSOR,

package/esm2020/src/app/shared/material/chips/testing/chips.test.mjs

@@ -127,9 +127,9 @@ export class ChipsTestPage {
         return JSON.stringify(value);
     }
 }
-ChipsTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ChipsTestPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ChipsTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: ChipsTestPage, selector: "app-chips-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>Chips 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      <ion-row>\n\n        <ion-col size=\"12\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field formControlName=\"entity\"\n                                     placeholder=\"A chip field\" [appearance]=\"appearance\"\n                                     [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                     [logPrefix]=\"'[mat-chips-empty] '\"\n                                     chipColor=\"accent\"\n                                     [debug]=\"false\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another field</mat-label>\n                      <input matInput type=\"text\">\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                  {{stringify(form.controls.entity.value)}}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-initialized] '\"\n                               chipColor=\"primary\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [equals]=\"equals\"\n                               [logPrefix]=\"'[mat-chips-disabled] '\"\n                               chipColor=\"warning\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: ChipsTestPage, decorators: [{
+ChipsTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ChipsTestPage, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ChipsTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ChipsTestPage, selector: "app-chips-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>Chips 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      <ion-row>\n\n        <ion-col size=\"12\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field formControlName=\"entity\"\n                                     placeholder=\"A chip field\" [appearance]=\"appearance\"\n                                     [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                     [logPrefix]=\"'[mat-chips-empty] '\"\n                                     chipColor=\"accent\"\n                                     [debug]=\"false\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another field</mat-label>\n                      <input matInput type=\"text\">\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                  {{stringify(form.controls.entity.value)}}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-initialized] '\"\n                               chipColor=\"primary\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [equals]=\"equals\"\n                               [logPrefix]=\"'[mat-chips-disabled] '\"\n                               chipColor=\"warning\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ChipsTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-chips-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>Chips 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      <ion-row>\n\n        <ion-col size=\"12\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field formControlName=\"entity\"\n                                     placeholder=\"A chip field\" [appearance]=\"appearance\"\n                                     [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                     [logPrefix]=\"'[mat-chips-empty] '\"\n                                     chipColor=\"accent\"\n                                     [debug]=\"false\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another field</mat-label>\n                      <input matInput type=\"text\">\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                  {{stringify(form.controls.entity.value)}}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-initialized] '\"\n                               chipColor=\"primary\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [equals]=\"equals\"\n                               [logPrefix]=\"'[mat-chips-disabled] '\"\n                               chipColor=\"warning\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }]; } });

package/esm2020/src/app/shared/material/datetime/datetime.module.mjs

@@ -21,8 +21,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatDateTimeModule {
 }
-SharedMatDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SharedMatDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedMatDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.5", ngImport: i0, type: SharedMatDateTimeModule, declarations: [MatDate,
+SharedMatDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SharedMatDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedMatDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: SharedMatDateTimeModule, declarations: [MatDate,
         MatDateTime,
         MatDateShort], imports: [CommonModule,
         IonicModule,
@@ -40,7 +40,7 @@ SharedMatDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         MatDate,
         MatDateTime,
         MatDateShort] });
-SharedMatDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SharedMatDateTimeModule, imports: [CommonModule,
+SharedMatDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SharedMatDateTimeModule, imports: [CommonModule,
         IonicModule,
         ReactiveFormsModule,
         SharedPipesModule,
@@ -55,7 +55,7 @@ SharedMatDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         NgxMaterialTimepickerModule,
         TranslateModule.forChild(),
         SharedDirectivesModule, MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: SharedMatDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SharedMatDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/src/app/shared/material/datetime/material.date.mjs

@@ -335,11 +335,11 @@ export class MatDate {
         this.cd.markForCheck();
     }
 }
-MatDate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatDate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", placeholderChar: "placeholderChar", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
+MatDate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MatDate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", placeholderChar: "placeholderChar", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
         DEFAULT_VALUE_ACCESSOR,
     ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\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: datePattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n\n    <input #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"_checkIfTouched()\"\n           (keyup.arrowDown)=\"openDatePicker()\"\n           (keyup.escape)=\"_preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input #matInput autocomplete=\"off\" type=\"text\" class=\"mat-input-element\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (focus)=\"_openDatePickerIfMobile($event)\"\n           (click)=\"_openDatePickerIfMobile($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final input -->\n    <input matInput #matInput\n           hidden\n           [formControl]=\"formControl\"\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()\"\n            [disabled]=\"disabled\">\n      <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker\n                    [touchUi]=\"mobile\"\n                    [disabled]=\"disabled\"\n                    [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear()\"\n            [hidden]=\"disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n      <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n\n\n\n</ng-template>\n\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}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6.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: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatDate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatDate, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-field', providers: [
                         DEFAULT_VALUE_ACCESSOR,

package/esm2020/src/app/shared/material/datetime/material.dateshort.mjs

@@ -275,11 +275,11 @@ export class MatDateShort {
         this.cd.markForCheck();
     }
 }
-MatDateShort.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatDateShort, deps: [{ token: i1.DateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatDateShort.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", disabled: "disabled", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: "readonly", required: "required", compact: "compact", placeholderChar: "placeholderChar", tabindex: "tabindex", startDate: "startDate", clearable: "clearable" }, providers: [
+MatDateShort.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatDateShort, deps: [{ token: i1.DateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MatDateShort.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", disabled: "disabled", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: "readonly", required: "required", compact: "compact", placeholderChar: "placeholderChar", tabindex: "tabindex", startDate: "startDate", clearable: "clearable" }, providers: [
         DEFAULT_VALUE_ACCESSOR,
     ], viewQueries: [{ propertyName: "datePicker1", first: true, predicate: ["datePicker1"], descendants: true }, { propertyName: "datePicker2", first: true, predicate: ["datePicker2"], 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  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_YEAR_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowDown)=\"openDatePicker($event, datePicker1)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (click)=\"matInput.select()\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"dayControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker1)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final control -->\n    <input matInput type=\"text\"\n           [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker1\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"openDatePicker($event, datePicker1)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"writeValue(null)\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker1\n                  startView=\"multi-year\"\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (yearSelected)=\"closeDatePicker($event, datePicker1)\"\n                  [startAt]=\"startDate\"></mat-datepicker>\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>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field .datetime-md{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6.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: "directive", type: i11.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i12.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i14.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatDateShort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatDateShort, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-short-field', providers: [
                         DEFAULT_VALUE_ACCESSOR,

package/esm2020/src/app/shared/material/datetime/material.datetime.mjs

@@ -380,11 +380,11 @@ export class MatDateTime {
         this.cd.markForCheck();
     }
 }
-MatDateTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatDateTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MatDateTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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: [
         DEFAULT_VALUE_ACCESSOR,
     ], 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)\">{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input #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 #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\n          <!-- Hide the final input -->\n          <input matInput type=\"text\" [formControl]=\"formControl\"\n                 hidden\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          <ng-container [ngSwitch]=\"formControl.touched && formControl.errors|mapKeys|arrayFirst\">\n            <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n          </ng-container>\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          <input #matInput type=\"text\"\n                 class=\"mat-input-element\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"hourControl\"\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          <input matInput\n                 [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}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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i5.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: i5.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonRow, selector: "ion-row" }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6.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.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.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "value", "min", "max", "ngxTimepicker", "disabled", "disableClick"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i16.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: MatDateTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-time-field', providers: [
                         DEFAULT_VALUE_ACCESSOR,

package/esm2020/src/app/shared/material/datetime/testing/mat-date-time.test.mjs

@@ -100,9 +100,9 @@ export class DateTimeTestPage {
         this.memoryHide = false;
     }
 }
-DateTimeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i1.Platform }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.5", 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", "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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDateTime, selector: "mat-date-time-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.5", ngImport: i0, type: DateTimeTestPage, decorators: [{
+DateTimeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i1.Platform }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DateTimeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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", "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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5.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.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDateTime, selector: "mat-date-time-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", 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" }]
         }], ctorParameters: function () { return [{ type: i1.Platform }, { type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }]; } });