npm - @sumaris-net/ngx-components - Versions diffs - 18.23.58 → 18.23.59 - Mend

@sumaris-net/ngx-components 18.23.58 → 18.23.59

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

Files changed (293) hide show

package/esm2022/src/app/shared/material/datetime/testing/mat-date.test.mjs CHANGED Viewed

@@ -117,10 +117,10 @@ export class DateTestPage {
         this.memoryHide = false;
     }
     stringify = JSON.stringify;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value=\"{{ stringify(form.controls.timezone.value) }}\"</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value={{ stringify(form.controls.timezone.value) }}</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showDesktopHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i8.MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTestPage, selector: "app-data-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value=\"{{ stringify(form.controls.timezone.value) }}\"</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value={{ stringify(form.controls.timezone.value) }}</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showDesktopHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i8.MatDate, selector: "mat-date-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "timezone", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-data-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value=\"{{ stringify(form.controls.timezone.value) }}\"</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- TimeZone  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">TimeZone</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>timezone=\"{{ timezone }}\" value={{ stringify(form.controls.timezone.value) }}</pre>\n                    </small>\n                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-field\n                  formControlName=\"timezone\"\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [timezone]=\"timezone\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col size=\"12\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHintEnd [checked]=\"false\">Align end ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-field formControlName=\"hint\" placeholder=\"Date\" [mobile]=\"false\" [clearable]=\"true\">\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (!showDesktopHintEnd.checked) {\n                          <mat-hint>Start hint</mat-hint>\n                        } @else {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });

package/esm2022/src/app/shared/material/datetime/testing/mat-dateshort.test.mjs CHANGED Viewed

@@ -108,10 +108,10 @@ export class DateShortTestPage {
         this.memoryHide = false;
     }
     stringify = JSON.stringify;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateShortTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date short field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        {{ stringify(form.controls.empty.value) }}\n                      </pre>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.valid }}\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-checkbox\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i8.MatDateShort, selector: "mat-date-short-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateShortTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateShortTestPage, selector: "app-data-short-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date short field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        {{ stringify(form.controls.empty.value) }}\n                      </pre>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.valid }}\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-checkbox\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.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.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i8.MatDateShort, selector: "mat-date-short-field", inputs: ["formControl", "formControlName", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "required", "startDate", "datePickerFilter", "appearance", "subscriptSizing", "readonly", "tabindex"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateShortTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateShortTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-data-short-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date short field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'memory') {\n      <ion-grid>\n        <!-- debugging memory leak -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-short-field\n                formControlName=\"empty\"\n                placeholder=\"Date\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-short-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <!-- Mobile mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Mobile mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"empty\" placeholder=\"Date\" [mobile]=\"true\" [clearable]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"true\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyIcons [checked]=\"true\">Icons ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <!-- Desktop mode -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>\n                        {{ stringify(form.controls.empty.value) }}\n                      </pre>\n                      <br />\n                      <pre>\n                        formControl.valid? {{ form.controls.empty?.valid }}\n                      </pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"empty\"\n                  #desktopEmptyField\n                  placeholder=\"Date\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <!-- Empty value + required -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value (required)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-short-field formControlName=\"disable\" placeholder=\"Date\" [required]=\"true\" [mobile]=\"false\">\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-checkbox\n                  (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                  [checked]=\"desktopReadonlyField.readonly\"\n                ></mat-checkbox>\n                <mat-date-short-field\n                  #desktopReadonlyField\n                  formControlName=\"readonly\"\n                  placeholder=\"Date\"\n                  [readonly]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-short-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showIcons [checked]=\"true\">Suffix icon ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-short-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showIcons.checked) {\n                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n                        }\n                        @if (showHint.checked) {\n                          <mat-hint [align]=\"showHintAlignEnd.checked ? 'end' : 'start'\">Some hint</mat-hint>\n                        }\n                      </mat-date-short-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });

package/esm2022/src/app/shared/material/duration/duration.module.mjs CHANGED Viewed

@@ -14,8 +14,8 @@ import { SharedDirectivesModule } from '../../directives/directives.module';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class SharedMatDurationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDurationModule, declarations: [MatDuration], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDurationModule, declarations: [MatDuration], imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -25,7 +25,7 @@ export class SharedMatDurationModule {
             MatRippleModule,
             MatMomentDateModule, i1.TranslateModule, MaskitoDirective,
             SharedDirectivesModule], exports: [MatDuration] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDurationModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDurationModule, imports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             SharedPipesModule,
@@ -37,7 +37,7 @@ export class SharedMatDurationModule {
             TranslateModule.forChild(),
             SharedDirectivesModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatDurationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatDurationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/src/app/shared/material/duration/material.duration.mjs CHANGED Viewed

@@ -238,10 +238,10 @@ export class MatDuration {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDuration, deps: [{ token: i1.Platform }, { token: i2.DateAdapter }, { token: i3.TranslateService }, { token: i4.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i4.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MatDuration, selector: "mat-duration-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], maxDecimals: "maxDecimals", placeholderChar: "placeholderChar", tabindex: "tabindex", clearable: "clearable" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    class=\"mat-form-field-disabled\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | duration }}</ion-text>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [class.mat-form-field-disabled]=\"formControl.disabled\"\n    [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n    <input\n      matInput\n      #matInput\n      type=\"text\"\n      autocomplete=\"off\"\n      [maskito]=\"'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask\"\n      [formControl]=\"textControl\"\n      [placeholder]=\"'COMMON.DURATION_PLACEHOLDER' | translate\"\n      [required]=\"required\"\n      (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n      (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n      (keyup.escape)=\"preventEvent($event)\"\n      (blur)=\"checkIfTouched()\"\n      [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n    />\n    <!-- errors -->\n    @if (!formControl.hasError('required') && textControl.hasError('pattern')) {\n      <mat-error translate>\n        ERROR.FIELD_NOT_VALID_PATTERN\n      </mat-error>\n    }\n    @if (formControl.hasError('required')) {\n      <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n    }\n    @if (formControl.hasError('min')) {\n      <mat-error>\n        {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}\n      </mat-error>\n    }\n    @if (formControl.hasError('max')) {\n      <mat-error>\n        {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n}\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "pipe", type: i8.DurationPipe, name: "duration" }, { kind: "pipe", type: i9.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i10.MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDuration, deps: [{ token: i1.Platform }, { token: i2.DateAdapter }, { token: i3.TranslateService }, { token: i4.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i4.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatDuration, selector: "mat-duration-field", inputs: { disabled: ["disabled", "disabled", booleanAttribute], formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], compact: ["compact", "compact", booleanAttribute], maxDecimals: "maxDecimals", placeholderChar: "placeholderChar", tabindex: "tabindex", clearable: "clearable" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    class=\"mat-form-field-disabled\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | duration }}</ion-text>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [class.mat-form-field-disabled]=\"formControl.disabled\"\n    [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n    <input\n      matInput\n      #matInput\n      type=\"text\"\n      autocomplete=\"off\"\n      [maskito]=\"'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask\"\n      [formControl]=\"textControl\"\n      [placeholder]=\"'COMMON.DURATION_PLACEHOLDER' | translate\"\n      [required]=\"required\"\n      (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n      (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n      (keyup.escape)=\"preventEvent($event)\"\n      (blur)=\"checkIfTouched()\"\n      [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n    />\n    <!-- errors -->\n    @if (!formControl.hasError('required') && textControl.hasError('pattern')) {\n      <mat-error translate>\n        ERROR.FIELD_NOT_VALID_PATTERN\n      </mat-error>\n    }\n    @if (formControl.hasError('required')) {\n      <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n    }\n    @if (formControl.hasError('min')) {\n      <mat-error>\n        {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}\n      </mat-error>\n    }\n    @if (formControl.hasError('max')) {\n      <mat-error>\n        {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n}\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}\n"], dependencies: [{ kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "pipe", type: i8.DurationPipe, name: "duration" }, { kind: "pipe", type: i9.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i10.MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDuration, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDuration, decorators: [{
             type: Component,
             args: [{ selector: 'mat-duration-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    class=\"mat-form-field-disabled\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | duration }}</ion-text>\n  </mat-form-field>\n} @else {\n  <!-- writable -->\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [class.mat-form-field-disabled]=\"formControl.disabled\"\n    [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n    <input\n      matInput\n      #matInput\n      type=\"text\"\n      autocomplete=\"off\"\n      [maskito]=\"'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask\"\n      [formControl]=\"textControl\"\n      [placeholder]=\"'COMMON.DURATION_PLACEHOLDER' | translate\"\n      [required]=\"required\"\n      (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n      (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n      (keyup.escape)=\"preventEvent($event)\"\n      (blur)=\"checkIfTouched()\"\n      [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n    />\n    <!-- errors -->\n    @if (!formControl.hasError('required') && textControl.hasError('pattern')) {\n      <mat-error translate>\n        ERROR.FIELD_NOT_VALID_PATTERN\n      </mat-error>\n    }\n    @if (formControl.hasError('required')) {\n      <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n    }\n    @if (formControl.hasError('min')) {\n      <mat-error>\n        {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}\n      </mat-error>\n    }\n    @if (formControl.hasError('max')) {\n      <mat-error>\n        {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n}\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.Platform }, { type: i2.DateAdapter }, { type: i3.TranslateService }, { type: i4.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i4.FormGroupDirective, decorators: [{