@sumaris-net/ngx-components 2.6.4-alpha5 → 2.6.4-alpha6

package/src/app/shared/material/latlong/testing/latlong.test.html

@@ -1,341 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Lat/Long field test page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-
-  <form class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
-
-    <!-- Empty value -->
-    <form *ngIf="form|formGetGroup:'empty' as formGroup" [formGroup]="formGroup">
-    <ion-grid>
-      <ion-row><ion-col><ion-text><h4>Empty, with defaults</h4></ion-text></ion-col></ion-row>
-
-      <ion-row >
-
-        <!-- DD Default sign -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">
-                  Format DD, defaultSign '-'
-                </ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small><pre>{{formGroup.value|json}}</pre></small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field formControlName="latitude"
-                                       type="latitude"
-                                       latLongPattern="DD"
-                                       defaultSign="-"
-                                       placeholder="Latitude">
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field formControlName="longitude"
-                                       type="longitude"
-                                       latLongPattern="DD"
-                                       defaultSign="-"
-                                       placeholder="Longitude">
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix
-                              (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-                <ion-row *ngIf="geoPositionMessage">
-                  <ion-col>{{geoPositionMessage}}</ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- DDMM Default sign -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">
-                  Format DDMM, defaultSign '+'
-                </ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small><pre>{{stringify(formGroup.value)}}</pre></small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field formControlName="latitude"
-                                       type="latitude"
-                                       latLongPattern="DDMM"
-                                       defaultSign="+"
-                                       placeholder="Latitude">
-
-                      <mat-icon matPrefix >room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix
-                              (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field formControlName="longitude"
-                                       type="longitude"
-                                       latLongPattern="DDMM"
-                                       defaultSign="+"
-                                       placeholder="Longitude">
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix
-                              (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-      </ion-row>
-    </ion-grid>
-    </form>
-
-    <form *ngIf="form|formGetGroup:'enable' as formGroup" [formGroup]="formGroup">
-      <ion-grid>
-        <!-- With value -->
-        <ion-row><ion-col><ion-text><h4>With value</h4></ion-text></ion-col></ion-row>
-
-        <ion-row>
-
-          <!-- DD -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">
-                    Format DD
-                  </ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid class="ion-no-padding">
-                  <ion-row>
-                    <ion-col>
-                      <mat-latlong-field formControlName="latitude"
-                                         type="latitude"
-                                         latLongPattern="DD"
-                                         placeholder="Latitude">
-                      </mat-latlong-field>
-                    </ion-col>
-                    <ion-col>
-                      <mat-latlong-field formControlName="longitude"
-                                         type="longitude"
-                                         latLongPattern="DD"
-                                         placeholder="Longitude">
-                      </mat-latlong-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-
-          <!-- DDMMSS -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">
-                    Format DDMM
-                  </ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid class="ion-no-padding">
-                  <ion-row>
-                    <ion-col>
-                      <mat-latlong-field formControlName="latitude"
-                                         type="latitude"
-                                         latLongPattern="DDMM"
-                                         placeholder="Latitude">
-                      </mat-latlong-field>
-                    </ion-col>
-                    <ion-col>
-                      <mat-latlong-field formControlName="longitude"
-                                         type="longitude"
-                                         latLongPattern="DDMM"
-                                         placeholder="Longitude">
-                      </mat-latlong-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-
-
-          <!-- DDMMSS -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">
-                    Format DDMMSS
-                  </ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid class="ion-no-padding">
-                  <ion-row>
-                    <ion-col>
-                      <mat-latlong-field formControlName="latitude"
-                                         type="latitude"
-                                         latLongPattern="DDMMSS"
-                                         placeholder="Latitude">
-                      </mat-latlong-field>
-                    </ion-col>
-                    <ion-col>
-                      <mat-latlong-field formControlName="longitude"
-                                         type="longitude"
-                                         latLongPattern="DDMMSS"
-                                         placeholder="Longitude">
-                      </mat-latlong-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </form>
-
-    <!-- Disable  -->
-    <form *ngIf="form|formGetGroup:'disable' as formGroup" [formGroup]="formGroup">
-      <ion-grid>
-        <ion-row><ion-col><ion-text><h4>Disabled control</h4></ion-text></ion-col></ion-row>
-        <ion-row>
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">
-                    Disabled control
-                  </ion-label>
-                </ion-card-title>
-                <ion-card-subtitle>
-                  <ion-text color="medium">
-                    <small><pre>{{stringify(formGroup.value)}}</pre></small>
-                  </ion-text>
-                </ion-card-subtitle>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid class="ion-no-padding">
-                  <ion-row>
-                    <ion-col>
-                      <mat-latlong-field formControlName="latitude"
-                                         type="latitude"
-                                         latLongPattern="DDMM"
-                                         placeholder="Latitude">
-                        <mat-icon matPrefix>room</mat-icon>
-                        <mat-icon matSuffix>gps_fixed</mat-icon>
-                      </mat-latlong-field>
-                    </ion-col>
-                    <ion-col>
-                      <mat-latlong-field formControlName="longitude"
-                                         type="longitude"
-                                         latLongPattern="DDMM"
-                                         placeholder="Longitude">
-                        <mat-icon matPrefix>room</mat-icon>
-                        <button type="button" mat-icon-button matSuffix
-                                (click)="geoPosition($event)">
-                          <mat-icon>gps_fixed</mat-icon>
-                        </button>
-                      </mat-latlong-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  <ion-label color="primary">
-                    Readonly (control is enable)
-                  </ion-label>
-                </ion-card-title>
-              </ion-card-header>
-              <ion-card-content>
-
-                <mat-checkbox (change)="readonlyField.readonly=$event.checked" [checked]="readonlyField.readonly">
-                </mat-checkbox>
-
-                <ion-grid class="ion-no-padding">
-                  <ion-row>
-                    <ion-col>
-                      <mat-latlong-field #readonlyField [formControl]="form|formGetControl: 'enable.latitude'"
-                                         type="latitude"
-                                         latLongPattern="DDMM"
-                                         placeholder="Latitude"
-                                         [readonly]="true">
-                        <mat-icon matPrefix>room</mat-icon>
-                        <mat-icon matSuffix>gps_fixed</mat-icon>
-                      </mat-latlong-field>
-                    </ion-col>
-                  </ion-row>
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </form>
-
-  </form>
-
-</ion-content>

package/src/app/shared/material/latlong/testing/latlong.test.ts

@@ -1,121 +0,0 @@
-import {Component, OnInit, Optional} from '@angular/core';
-import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {SharedValidators} from '../../../validator/validators';
-import {GeolocationUtils} from '../../../geolocation/geolocation.utils';
-import {PlatformService} from '../../../../core/services/platform.service';
-
-
-@Component({
-  selector: 'app-latlong-test',
-  templateUrl: './latlong.test.html'
-})
-export class LatLongTestPage implements OnInit {
-
-  form: UntypedFormGroup;
-
-  geoPositionMessage: string;
-
-
-  constructor(
-    protected formBuilder: UntypedFormBuilder,
-    protected platform: PlatformService
-  ) {
-    this.form = formBuilder.group({
-      empty: formBuilder.group({
-        latitude: [null, Validators.compose([Validators.required, SharedValidators.latitude])],
-        longitude: [null, Validators.compose([Validators.required, SharedValidators.longitude])]
-      }),
-      enable: formBuilder.group({
-        latitude: [null, SharedValidators.latitude],
-        longitude: [null, SharedValidators.longitude]
-      }),
-      disable: formBuilder.group({
-        latitude: [null, SharedValidators.latitude],
-        longitude: [null, SharedValidators.longitude]
-      })
-    });
-
-    const disableFormGroup = this.form.get('disable');
-    disableFormGroup.disable();
-
-    // Copy enable value to disable form
-    this.form.get('enable').valueChanges.subscribe(value => disableFormGroup.setValue(value));
-
-  }
-
-  ngOnInit() {
-
-
-    setTimeout(() => this.loadData(), 250);
-  }
-
-  // Load the form with data
-  async loadData() {
-    const data = {
-      empty: {
-        latitude: null,
-        longitude: null
-      },
-      enable: {
-        latitude: 50.1,
-        longitude: -2
-      },
-      disable: {
-        latitude: 50.1,
-        longitude: -2
-      },
-    };
-
-    this.form.setValue(data);
-  }
-
-  doSubmit(event) {
-    console.debug('Validate form: ', this.form.value);
-  }
-
-  async geoPosition(event: Event, controlName?: string) {
-    console.debug('Click on geoLocation button', event);
-    event.preventDefault();
-    event.stopPropagation();
-
-    let logMessage: string;
-    const now = Date.now();
-
-    try {
-      const position = await GeolocationUtils.getCurrentPosition(this.platform, {
-        maximumAge: 80000/*80s*/,
-        timeout: 40000/*40s*/,
-        enableHighAccuracy: false,
-      });
-
-      this.form.get(controlName||'empty').patchValue(position);
-
-      logMessage = `INFO (geolocation): OK in ${Date.now() - now}ms`;
-    }
-    catch(err) {
-      logMessage = err?.message || err;
-      const duration = Date.now() - now;
-      if (typeof logMessage === 'object') {
-        logMessage = JSON.stringify(logMessage);
-      }
-      logMessage = `ERROR (geolocation): ${logMessage} - after ${duration}ms`;
-    }
-
-    this.geoPositionMessage = logMessage;
-
-    // Clean the log message, if same
-    setTimeout(() => {
-      if (this.geoPositionMessage === logMessage) {
-        this.geoPositionMessage = null;
-      }
-    }, 5000);
-
-  }
-
-  stringify = JSON.stringify;
-
-  /* -- protected methods -- */
-
-
-}
-

package/src/app/shared/material/material.animations.ts

@@ -1,129 +0,0 @@
-// import the required animation functions from the angular animations module
-import {animate, state, style, transition, trigger} from '@angular/animations';
-
-export const fadeInAnimation =
-    // trigger name for attaching this animation to an element using the [@triggerName] syntax
-    trigger('fadeInAnimation', [
-
-        // route 'enter' transition
-        transition(':enter', [
-
-            // css styles at start of transition
-            style({ opacity: 0 }),
-
-            // animation and styles at end of transition
-            animate('.3s', style({ opacity: 1 }))
-        ]),
-    ]);
-
-export const fadeInOutAnimation =
-    // trigger name for attaching this animation to an element using the [@triggerName] syntax
-    trigger('fadeInOutAnimation', [
-
-        // route 'enter' transition
-        transition(':enter', [
-
-            // css styles at start of transition
-            style({ opacity: 0 }),
-
-            // animation and styles at end of transition
-            animate('.3s', style({ opacity: 1 }))
-        ]),
-
-        // route 'leave' transition
-        transition(':leave', [
-            // animation and styles at end of transition
-            animate('.5s ease-in-out', style({
-                opacity: 0
-            }))
-        ]),
-    ]);
-
-export const slideInOutAnimation =
-    // trigger name for attaching this animation to an element using the [@triggerName] syntax
-    trigger('slideInOutAnimation', [
-
-        // end state styles for route container (host)
-        state('*', style({
-            // the view covers the whole screen with a semi tranparent background
-            position: 'relative',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            opacity: 1
-        })),
-
-        // route 'enter' transition
-        transition(':enter', [
-
-            // styles at start of transition
-            style({
-                // start with the content positioned off the right of the screen,
-                // -400% is required instead of -100% because the negative position adds to the width of the element
-                left: '400%',
-
-                // start with background opacity set to 0 (invisible)
-                opacity: 0
-            }),
-
-            // animation and styles at end of transition
-            animate('.3s ease-in-out', style({
-                // transition the right position to 0 which slides the content into view
-                left: 0,
-
-                // transition the background opacity to 0.8 to fade it in
-                opacity: 0.8
-            }))
-        ]),
-
-        // route 'leave' transition
-        transition(':leave', [
-            // animation and styles at end of transition
-            animate('.5s ease-in-out', style({
-                // transition the right position to -400% which slides the content out of view
-                left: '400%',
-
-                // transition the background opacity to 0 to fade it out
-                opacity: 0
-            }))
-        ])
-    ]);
-
-export const slideUpDownAnimation =
-  // trigger name for attaching this animation to an element using the [@triggerName] syntax
-  trigger('slideUpDownAnimation', [
-
-    // end state styles for route container (host)
-    state('*', style({
-      transform: 'translateY(0)',
-      opacity: 1
-    })),
-
-    // route 'enter' transition
-    transition(':enter', [
-
-      // styles at start of transition
-      style({
-        transform: 'translateY(-400%)',
-        opacity: 0
-      }),
-
-      // animation and styles at end of transition
-      animate('.3s ease-in-out', style({
-        transform: 'translateY(0)',
-        opacity: 1
-      }))
-    ]),
-
-    // route 'leave' transition
-    transition(':leave', [
-      // animation and styles at end of transition
-      animate('.5s ease-in-out', style({
-        transform: 'translateY(-100%)',
-        opacity: 0
-      }))
-    ])
-  ]);
-
-

package/src/app/shared/material/material.module.ts

@@ -1,94 +0,0 @@
-import {NgModule, Type} from '@angular/core';
-import {CdkTableModule} from '@angular/cdk/table';
-
-import {A11yModule} from '@angular/cdk/a11y';
-import {OverlayModule} from '@angular/cdk/overlay';
-import {ScrollingModule} from '@angular/cdk/scrolling';
-import {MatCommonModule, MatRippleModule} from '@angular/material/core';
-import {MatTableModule} from '@angular/material/table';
-import {MatSortModule} from '@angular/material/sort';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatIconModule} from '@angular/material/icon';
-import {MatButtonModule} from '@angular/material/button';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatSelectModule} from '@angular/material/select';
-import {MatCardModule} from '@angular/material/card';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatStepperModule} from '@angular/material/stepper';
-import {MatListModule} from '@angular/material/list';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatRadioModule} from '@angular/material/radio';
-import {MatBadgeModule} from '@angular/material/badge';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatDialogModule} from '@angular/material/dialog';
-import {SharedMatAutocompleteModule} from './autocomplete/material.autocomplete.module';
-import {SharedMatLatLongModule} from './latlong/material.latlong.module';
-import {SharedMatDateTimeModule} from './datetime/datetime.module';
-import {SharedMatDurationModule} from './duration/duration.module';
-import {SharedMatBooleanModule} from './boolean/boolean.module';
-import {SharedMatNumpadModule} from './numpad/numpad.module';
-import {SharedMatSwipeModule} from './swipe/swipe.module';
-import {MatDividerModule} from '@angular/material/divider';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {SharedMatChipsModule} from './chips/chips.module';
-import {SharedBadgeModule} from './badge/badge.module';
-
-const modules: Array<Type<any> | any[]> = [
-  // Angular material components
-  MatCommonModule,
-  MatTableModule,
-  MatSortModule,
-  MatPaginatorModule,
-  MatFormFieldModule,
-  MatInputModule,
-  CdkTableModule,
-  MatCheckboxModule,
-  MatExpansionModule,
-  MatToolbarModule,
-  MatDialogModule,
-  MatIconModule,
-  MatButtonModule,
-  MatMenuModule,
-  MatSelectModule,
-  MatCardModule,
-  MatTabsModule,
-  MatListModule,
-  MatStepperModule,
-  MatButtonToggleModule,
-  MatProgressSpinnerModule,
-  MatProgressBarModule,
-  MatRadioModule,
-  MatBadgeModule,
-  MatSlideToggleModule,
-  A11yModule, // Used for focus trap
-  OverlayModule,
-  ScrollingModule,
-  MatRippleModule,
-  MatDividerModule,
-  MatTooltipModule,
-  // Custom components
-  SharedMatAutocompleteModule,
-  SharedMatLatLongModule,
-  SharedMatDateTimeModule,
-  SharedMatDurationModule,
-  SharedMatBooleanModule,
-  SharedMatNumpadModule,
-  SharedMatSwipeModule,
-  SharedMatChipsModule,
-  SharedBadgeModule
-];
-
-@NgModule({
-  imports: modules,
-  exports: modules
-})
-export class SharedMaterialModule {
-}
-