@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/shared/material/datetime/testing/mat-date.test.html

@@ -1,564 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Date field test page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- Tab nav - mobile/desktop mode -->
-  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-    <a mat-tab-link [active]="mode === 'mobile'" (click)="toggleMode('mobile')">
-      <mat-label>Mobile</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'desktop'" (click)="toggleMode('desktop')">
-      <mat-label>Desktop</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'memory'" (click)="toggleMode('memory')">
-      <mat-label>Memory leak debug</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'temp'" (click)="toggleMode('temp')">
-      <mat-label>Temporary</mat-label>
-    </a>
-  </nav>
-
-  <form #tabPanel class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
-    <!-- debugging memory leak -->
-    @if (mode === 'memory') {
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <ion-text><h4>Debug memory leak</h4></ion-text>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col size="auto">
-            @if (!memoryTimer) {
-              <ion-button (click)="startMemoryTimer()">Start timer</ion-button>
-            }
-            @if (memoryTimer) {
-              <ion-button (click)="stopMemoryTimer()">Stop timer</ion-button>
-            }
-          </ion-col>
-          <ion-col size="4">
-            <mat-form-field floatLabel="auto">
-              <input matInput type="text" hidden />
-              <mat-checkbox (change)="memoryMobile = $event.checked" [checked]="memoryMobile">Mobile ?</mat-checkbox>
-            </mat-form-field>
-          </ion-col>
-          <ion-col>
-            @if (!memoryHide) {
-              <mat-date-field
-                formControlName="empty"
-                placeholder="Date"
-                [required]="true"
-                [mobile]="memoryMobile"
-                [clearable]="true"
-              >
-                <ion-icon matPrefix name="calendar-outline"></ion-icon>
-              </mat-date-field>
-            }
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    }
-
-    <!-- Mobile mode -->
-    @if (mode === 'mobile') {
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <ion-text><h4>Mobile mode</h4></ion-text>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col>
-            <!-- Empty value -->
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Empty value</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.empty.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field formControlName="empty" placeholder="Date" [mobile]="true" [clearable]="true">
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <!-- Empty value -->
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Empty value (required)</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field
-                  formControlName="emptyRequired"
-                  placeholder="Date"
-                  [required]="true"
-                  [mobile]="true"
-                  [clearable]="true"
-                >
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Enable  -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">With value</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.enable.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field
-                  formControlName="enable"
-                  placeholder="Date"
-                  [required]="true"
-                  [mobile]="true"
-                  [clearable]="true"
-                >
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Disable -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Disable</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.disable.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field formControlName="disable" placeholder="Date" [required]="true" [mobile]="true">
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- TimeZone  -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">TimeZone</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>timezone="{{ timezone }}" value="{{ stringify(form.controls.timezone.value) }}"</pre>
-                    </small>
-                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field
-                  formControlName="timezone"
-                  placeholder="Date"
-                  [mobile]="true"
-                  [clearable]="true"
-                  [timezone]="timezone"
-                >
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Readonly  -->
-          <ion-col size="12" size-lg="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Readonly toggle</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <ion-col size="4">
-                      <mat-checkbox
-                        (change)="mobileReadonlyField.readonly = $event.checked"
-                        [checked]="mobileReadonlyField.readonly"
-                      >
-                        Readonly ?
-                      </mat-checkbox>
-                    </ion-col>
-                    <ion-col size="4">
-                      <mat-checkbox #showReadonlyHint [checked]="true">Hint ?</mat-checkbox>
-                    </ion-col>
-                    <ion-col size="4">
-                      <mat-checkbox #showReadonlyIcons [checked]="true">Icons ?</mat-checkbox>
-                    </ion-col>
-                  </ion-row>
-                  <ion-row>
-                    <ion-col>
-                      <mat-date-field
-                        #mobileReadonlyField
-                        formControlName="readonly"
-                        placeholder="Date"
-                        [readonly]="true"
-                        [mobile]="true"
-                        [clearable]="true"
-                      >
-                        <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                        @if (showReadonlyIcons.checked) {
-                          <mat-icon matSuffix>keyboard_arrow_left</mat-icon>
-                        }
-                        @if (showReadonlyHint.checked) {
-                          <mat-hint>Some hint</mat-hint>
-                        }
-                      </mat-date-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Hint -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Hint</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.hint.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <ion-col size="4">
-                      <mat-checkbox #showHintEnd [checked]="false">Align end ?</mat-checkbox>
-                    </ion-col>
-                  </ion-row>
-                  <ion-row>
-                    <ion-col>
-                      <mat-date-field formControlName="hint" placeholder="Date" [mobile]="true" [clearable]="true">
-                        <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                        @if (!showHintEnd.checked) {
-                          <mat-hint>Start hint</mat-hint>
-                        } @else {
-                          <mat-hint align="end">End hint</mat-hint>
-                        }
-                      </mat-date-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-        <!-- debug console -->
-        <ion-row>
-          <!-- buttons -->
-          <ion-col size="2">
-            <!-- submit form -->
-            <ion-button (click)="doSubmit($event)" fill="outline">
-              <ion-icon name="checkmark" slot="icon-only"></ion-icon>
-            </ion-button>
-            <!-- clear log  -->
-            <ion-button (click)="clearLogPanel()" fill="outline">
-              <ion-icon name="trash" slot="icon-only"></ion-icon>
-            </ion-button>
-          </ion-col>
-          @if (showLogPanel) {
-            <ion-col size="10">
-              <ion-text color="primary">
-                Log:
-                <br />
-              </ion-text>
-              <div class="ion-padding-start">
-                <ion-text color="medium">
-                  <small [innerHTML]="logContent"></small>
-                </ion-text>
-              </div>
-            </ion-col>
-          }
-        </ion-row>
-      </ion-grid>
-    }
-
-    <!-- Desktop mode -->
-    @if (mode === 'desktop') {
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <ion-text><h4>Desktop mode</h4></ion-text>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col>
-            <!-- Empty value -->
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Empty value</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.empty.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field formControlName="empty" placeholder="Date" [mobile]="false" [clearable]="true">
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col>
-            <!-- Empty value -->
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Empty value (required)</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field
-                  formControlName="emptyRequired"
-                  placeholder="Date"
-                  [required]="true"
-                  [mobile]="false"
-                  [clearable]="true"
-                >
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Enable  -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">With value</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.enable.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field
-                  formControlName="enable"
-                  placeholder="Date"
-                  [required]="true"
-                  [mobile]="false"
-                  [clearable]="true"
-                >
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Disable -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Disable</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.disable.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field formControlName="disable" placeholder="Date" [required]="true" [mobile]="false">
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- TimeZone  -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">TimeZone</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>timezone="{{ timezone }}" value={{ stringify(form.controls.timezone.value) }}</pre>
-                    </small>
-                    <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <mat-date-field
-                  formControlName="timezone"
-                  placeholder="Date"
-                  [mobile]="false"
-                  [clearable]="true"
-                  [timezone]="timezone"
-                >
-                  <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                </mat-date-field>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Readonly  -->
-          <ion-col size="12" size-lg="6">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Readonly toggle</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <ion-col size="4">
-                      <mat-checkbox
-                        (change)="desktopReadonlyField.readonly = $event.checked"
-                        [checked]="desktopReadonlyField.readonly"
-                      >
-                        Readonly ?
-                      </mat-checkbox>
-                    </ion-col>
-                    <ion-col size="4">
-                      <mat-checkbox #showDesktopHint [checked]="true">Hint ?</mat-checkbox>
-                    </ion-col>
-                  </ion-row>
-                  <ion-row>
-                    <ion-col>
-                      <mat-date-field
-                        #desktopReadonlyField
-                        formControlName="readonly"
-                        placeholder="Date"
-                        [readonly]="true"
-                        [mobile]="false"
-                        [clearable]="true"
-                      >
-                        <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                        @if (showDesktopHint.checked) {
-                          <mat-hint>Some hint</mat-hint>
-                        }
-                      </mat-date-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- Hint -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">Hint</ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small>
-                      <pre>{{ stringify(form.controls.hint.value) }}</pre>
-                    </small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <ion-col size="4">
-                      <mat-checkbox #showDesktopHintEnd [checked]="false">Align end ?</mat-checkbox>
-                    </ion-col>
-                  </ion-row>
-                  <ion-row>
-                    <ion-col>
-                      <mat-date-field formControlName="hint" placeholder="Date" [mobile]="false" [clearable]="true">
-                        <ion-icon matPrefix name="calendar-outline"></ion-icon>
-                        @if (!showDesktopHintEnd.checked) {
-                          <mat-hint>Start hint</mat-hint>
-                        } @else {
-                          <mat-hint align="end">End hint</mat-hint>
-                        }
-                      </mat-date-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    }
-  </form>
-</ion-content>