@sumaris-net/ngx-components 2.2.7 → 2.2.8-rc2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.2.7",
+  "version": "2.2.8-rc2",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",
@@ -14,9 +14,9 @@
     "tslib": "~2.3.1"
   },
   "peerDependencies": {
-    "@angular-devkit/build-angular": "~14.2.5",
-    "@angular/compiler-cli": "~14.2.5",
-    "@apollo/client": "~3.6.9",
+    "@angular-devkit/build-angular": "~14.2.10",
+    "@angular/compiler-cli": "~14.2.10",
+    "@apollo/client": "~3.7.2",
     "@ionic/storage": "~3.0.6",
     "d3": "~7.6.1",
     "localforage": "~1.10.0",

package/public_api.d.ts

@@ -135,6 +135,7 @@ export * from './src/app/core/services/pipes/person-to-string.pipe';
 export * from './src/app/core/services/pipes/usage-mode.pipes';
 export * from './src/app/core/services/platform.service';
 export * from './src/app/core/services/network.service';
+export * from './src/app/core/services/network.types';
 export * from './src/app/core/services/config.service';
 export { CORE_CONFIG_OPTIONS } from './src/app/core/services/config/core.config';
 export * from './src/app/core/services/local-settings.service';
@@ -229,6 +230,7 @@ export * from './src/app/shared/material/latlong/testing/latlong.test';
 export * from './src/app/shared/material/swipe/testing/swipe.test';
 export * from './src/app/shared/material/datetime/testing/mat-date-time.test';
 export * from './src/app/shared/material/datetime/testing/mat-date.test';
+export * from './src/app/shared/material/datetime/testing/mat-dateshort.test';
 export * from './src/app/shared/material/chips/testing/chips.test';
 export * from './src/app/shared/material/numpad/testing/numpad.test';
 export * from './src/app/shared/testing/observable.test';

package/src/app/core/form/form.utils.d.ts

@@ -259,7 +259,7 @@ export declare class AppFormArray<T extends Entity<T>, C extends AbstractControl
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;
-    patchValue(values: any[], options?: {
+    patchValue(values: any[] | null | undefined, options?: {
         onlySelf?: boolean;
         emitEvent?: boolean;
     }): void;

package/src/app/core/graphql/graphql.service.d.ts

@@ -4,10 +4,10 @@ import { ApolloCache, ApolloClient, FetchPolicy, MutationUpdaterFn, OperationVar
 import { ServiceError } from '../services/errors';
 import { InjectionToken } from '@angular/core';
 import { NetworkService } from '../services/network.service';
+import { EmptyObject } from './graphql.utils';
 import { Platform } from '@ionic/angular';
 import { IEntity } from '../services/model/entity.model';
 import { Resolvers } from '@apollo/client/core/types';
-import { EmptyObject } from 'apollo-angular/types';
 import { HttpLink } from 'apollo-angular/http';
 import { ErrorPolicy, MutationBaseOptions } from '@apollo/client/core/watchQueryOptions';
 import { Cache } from '@apollo/client/cache/core/types/Cache';

package/src/app/core/graphql/graphql.utils.d.ts

@@ -1,9 +1,12 @@
 import { ApolloClient, ApolloLink, Operation } from '@apollo/client/core';
 import { Observable } from 'rxjs';
 import { PersistentStorage } from 'apollo3-cache-persist';
-import { ConnectionType } from '../services/network.service';
+import { ConnectionType } from '../services/network.types';
 import { StorageService } from '../../shared/services/storage/storage.service';
 export declare const NativeWebSocket: any;
+export declare type EmptyObject = {
+    [key: string]: any;
+};
 /**
  * AppWebSocket class.
  * With a hack on default Websocket, to avoid the use of protocol

package/src/app/core/services/account.service.d.ts

@@ -10,7 +10,8 @@ import { BaseGraphqlService } from './base-graphql-service.class';
 import { GraphqlService } from '../graphql/graphql.service';
 import { LocalSettingsService } from './local-settings.service';
 import { FormFieldDefinition } from '../../shared/form/field.model';
-import { AuthTokenType, NetworkService } from './network.service';
+import { NetworkService } from './network.service';
+import { AuthTokenType } from './network.types';
 import { FileService } from '../../shared/file/file.service';
 import { Referential } from './model/referential.model';
 import { ShowToastOptions } from '../../shared/toast/toasts';

package/src/app/core/services/base-graphql-service.class.d.ts

@@ -1,6 +1,5 @@
 import { GraphqlService, MutateQueryOptions, WatchQueryOptions } from '../graphql/graphql.service';
 import { Page } from '../../shared/services/entity-service.class';
-import { EmptyObject } from 'apollo-angular/types';
 import { Observable } from 'rxjs';
 import { FetchResult } from '@apollo/client/link/core';
 import { ApolloCache, InternalRefetchQueriesInclude } from '@apollo/client/core';
@@ -9,6 +8,7 @@ import { PureQueryOptions } from '@apollo/client/core/types';
 import { DocumentNode } from 'graphql';
 import { StartableService } from '../../shared/services/startable-service.class';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { EmptyObject } from '../graphql/graphql.utils';
 import * as i0 from "@angular/core";
 export interface QueryVariables<F = any> extends Partial<Page> {
     filter?: F;

package/src/app/core/services/network.service.d.ts

@@ -8,17 +8,14 @@ import { ISelectPeerModalOptions } from '../peer/select-peer.modal';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { LocalSettingsService } from './local-settings.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Connection, Network } from '@awesome-cordova-plugins/network/ngx';
+import { Network } from '@awesome-cordova-plugins/network/ngx';
 import { CacheService } from 'ionic-cache';
 import { ShowToastOptions } from '../../shared/toast/toasts';
 import { OverlayEventDetail } from '@ionic/core';
 import { AppManifest, NodeInfo } from './network.utils';
 import { StartableObservableService } from '../../shared/services/startable-observable-service.class';
+import { ConnectionType, NetworkEventType } from './network.types';
 import * as i0 from "@angular/core";
-export declare type ConnectionType = 'none' | 'wifi' | 'ethernet' | 'cell' | 'unknown';
-export declare type AuthTokenType = 'token' | 'basic' | 'basic-and-token';
-export declare function getConnectionType(type: Connection): ConnectionType;
-export declare type NetworkEventType = 'start' | 'peerChanged' | 'statusChanged' | 'resetCache' | 'beforeTryOnlineFinish';
 export declare const PEER_URL_REGEXP: RegExp;
 export declare class NetworkService extends StartableObservableService<Peer, Peer> {
     private _document;

package/src/app/core/services/network.types.d.ts

@@ -0,0 +1,5 @@
+import { Connection } from '@awesome-cordova-plugins/network/ngx';
+export declare type ConnectionType = 'none' | 'wifi' | 'ethernet' | 'cellular' | 'unknown';
+export declare type AuthTokenType = 'token' | 'basic' | 'basic-and-token';
+export declare function getConnectionType(type: Connection | string): ConnectionType;
+export declare type NetworkEventType = 'start' | 'peerChanged' | 'statusChanged' | 'resetCache' | 'beforeTryOnlineFinish';

package/src/app/shared/constants.d.ts

@@ -3,5 +3,5 @@ export declare const DATE_PATTERN = "YYYY-MM-DD";
 export declare const DEFAULT_PLACEHOLDER_CHAR = "_";
 export declare const PUBKEY_REGEXP: RegExp;
 export declare const SPACE_PLACEHOLDER_CHAR = "\u2000";
-export declare const ZERO_PLACEHOLDER_CHAR = "\uFEFF";
+export declare const EMPTY_PLACEHOLDER_CHAR = "\uFEFF";
 export declare const KEYBOARD_HIDE_DELAY_MS = 250;

package/src/app/shared/material/datetime/material.date.d.ts

@@ -15,7 +15,7 @@ export declare class MatDate implements OnInit, AfterViewInit, OnDestroy, Contro
     private formGroupDir;
     private _onChangeCallback;
     private _onTouchedCallback;
-    private _subscription;
+    private readonly _subscription;
     private _writing;
     private _disabling;
     private _tabindex;
@@ -70,5 +70,5 @@ export declare class MatDate implements OnInit, AfterViewInit, OnDestroy, Contro
     private markAsDirty;
     private markForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDate, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDate, "mat-date-field", never, { "mobile": "mobile"; "formControl": "formControl"; "formControlName": "formControlName"; "placeholder": "placeholder"; "floatLabel": "floatLabel"; "appearance": "appearance"; "required": "required"; "compact": "compact"; "placeholderChar": "placeholderChar"; "autofocus": "autofocus"; "startDate": "startDate"; "clearable": "clearable"; "timezone": "timezone"; "datePickerFilter": "datePickerFilter"; "readonly": "readonly"; "tabindex": "tabindex"; }, {}, never, ["mat-error", "mat-hint", "[matPrefix]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDate, "mat-date-field", never, { "mobile": "mobile"; "formControl": "formControl"; "formControlName": "formControlName"; "placeholder": "placeholder"; "floatLabel": "floatLabel"; "appearance": "appearance"; "required": "required"; "compact": "compact"; "placeholderChar": "placeholderChar"; "autofocus": "autofocus"; "startDate": "startDate"; "clearable": "clearable"; "timezone": "timezone"; "datePickerFilter": "datePickerFilter"; "readonly": "readonly"; "tabindex": "tabindex"; }, {}, never, ["mat-error", "mat-hint", "[matPrefix]", "[matSuffix]"], false>;
 }

package/src/app/shared/material/datetime/material.dateshort.d.ts

@@ -1,11 +1,11 @@
-import { ChangeDetectorRef, ElementRef, OnInit, QueryList } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { Moment } from 'moment/moment';
 import { InputElement } from '../../inputs';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
-import { MatDatepicker } from '@angular/material/datepicker';
-import { DateAdapter } from '@angular/material/core';
+import { DateFilterFn, MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import * as i0 from "@angular/core";
 export declare class MatDateShort implements OnInit, ControlValueAccessor, InputElement {
     private dateAdapter;
@@ -15,53 +15,61 @@ export declare class MatDateShort implements OnInit, ControlValueAccessor, Input
     private formGroupDir;
     private _onChangeCallback;
     private _onTouchedCallback;
-    protected writing: boolean;
-    protected disabling: boolean;
-    protected _tabindex: number;
-    protected keyboardHideDelay: number;
-    dayControl: UntypedFormControl;
-    displayPattern: string;
-    dayPattern: string;
-    _value: Moment;
+    private readonly _subscription;
+    private _writing;
+    private _disabling;
+    private _tabindex;
+    private _readonly;
+    textControl: UntypedFormControl;
+    datePattern: string;
     locale: string;
-    dayMask: RegExp[];
+    readonly mask: RegExp[];
     mobile: boolean;
-    disabled: boolean;
     formControl: UntypedFormControl;
     formControlName: string;
     placeholder: string;
     floatLabel: FloatLabelType;
     appearance: MatFormFieldAppearance;
-    readonly: boolean;
     required: boolean;
     compact: boolean;
     placeholderChar: string;
+    autofocus: boolean;
+    startDate: Moment | null;
+    clearable: boolean;
+    datePickerFilter: DateFilterFn<Moment>;
+    set readonly(value: boolean);
+    get readonly(): boolean;
     set tabindex(value: number);
     get tabindex(): number;
-    startDate: Date;
-    clearable: boolean;
-    datePicker1: MatDatepicker<Moment>;
-    datePicker2: MatDatepicker<Moment>;
-    matInputs: QueryList<ElementRef>;
     get value(): any;
-    constructor(dateAdapter: DateAdapter<Moment>, translate: TranslateService, formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective);
+    get disabled(): boolean;
+    datePicker: MatDatepicker<Moment>;
+    _matInput: ElementRef;
+    constructor(dateAdapter: MomentDateAdapter, translate: TranslateService, formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective);
     ngOnInit(): void;
-    writeValue(obj: any): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
-    onDatePickerChange(event: any): void;
+    openDatePicker(): void;
+    focus(): void;
+    clear(): void;
+    protected _onDatePickerChange(event: MatDatepickerInputEvent<Moment>): void;
+    protected _checkIfTouched(opts?: {
+        emitEvent?: boolean;
+    }): void;
+    protected _openDatePickerIfMobile(event: Event): Promise<void>;
+    protected _closeDatePicker(eventData: any): void;
+    protected _preventEvent(event: Event): void;
     private updatePattern;
     private onFormChange;
-    checkIfTouched(): void;
-    openDatePickerIfMobile(event: Event, datePicker?: MatDatepicker<any>): Promise<void>;
-    openDatePicker(event?: Event, datePicker?: MatDatepicker<any>): void;
-    closeDatePicker(eventData: any, matDatepicker?: any): void;
-    preventEvent(event: Event): void;
-    focus(): void;
-    protected waitKeyboardHide(waitKeyboardDelay: boolean): Promise<void>;
-    protected updateTabIndex(): void;
-    protected markForCheck(): void;
+    private waitKeyboardHide;
+    private updateTabIndex;
+    private markAsTouched;
+    private markAsDirty;
+    private markForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDateShort, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateShort, "mat-date-short-field", never, { "mobile": "mobile"; "disabled": "disabled"; "formControl": "formControl"; "formControlName": "formControlName"; "placeholder": "placeholder"; "floatLabel": "floatLabel"; "appearance": "appearance"; "readonly": "readonly"; "required": "required"; "compact": "compact"; "placeholderChar": "placeholderChar"; "tabindex": "tabindex"; "startDate": "startDate"; "clearable": "clearable"; }, {}, never, ["[matPrefix]", "mat-error", "[matPrefix]", "[matSuffix]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDateShort, "mat-date-short-field", never, { "mobile": "mobile"; "formControl": "formControl"; "formControlName": "formControlName"; "placeholder": "placeholder"; "floatLabel": "floatLabel"; "appearance": "appearance"; "required": "required"; "compact": "compact"; "placeholderChar": "placeholderChar"; "autofocus": "autofocus"; "startDate": "startDate"; "clearable": "clearable"; "datePickerFilter": "datePickerFilter"; "readonly": "readonly"; "tabindex": "tabindex"; }, {}, never, ["mat-error", "mat-hint", "[matPrefix]", "[matSuffix]"], false>;
 }

package/src/app/shared/material/datetime/testing/mat-dateshort.test.d.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectorRef, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import 'moment-timezone';
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class DateShortTestPage implements OnInit {
+    protected formBuilder: UntypedFormBuilder;
+    protected cd: ChangeDetectorRef;
+    showLogPanel: boolean;
+    logContent: string;
+    memoryHide: boolean;
+    memoryMobile: boolean;
+    memoryTimer: Subscription;
+    form: UntypedFormGroup;
+    constructor(formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef);
+    ngOnInit(): void;
+    loadData(): Promise<void>;
+    doSubmit(event: any): void;
+    log(message: string): void;
+    clearLogPanel(): void;
+    startMemoryTimer(): void;
+    stopMemoryTimer(): void;
+    stringify: {
+        (value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
+        (value: any, replacer?: (string | number)[], space?: string | number): string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateShortTestPage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateShortTestPage, "app-data-short-test", never, {}, {}, never, never, false>;
+}

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

@@ -2,23 +2,24 @@ import { TestingPage } from '../testing/tests.page';
 import * as i0 from "@angular/core";
 import * as i1 from "./datetime/testing/mat-date-time.test";
 import * as i2 from "./datetime/testing/mat-date.test";
-import * as i3 from "./autocomplete/testing/autocomplete.test";
-import * as i4 from "./latlong/testing/latlong.test";
-import * as i5 from "./numpad/testing/numpad.test";
-import * as i6 from "./swipe/testing/swipe.test";
-import * as i7 from "./chips/testing/chips.test";
-import * as i8 from "./badge/badge.test";
-import * as i9 from "../testing/observable.test";
-import * as i10 from "@angular/common";
-import * as i11 from "@ionic/angular";
-import * as i12 from "@angular/forms";
-import * as i13 from "./material.module";
-import * as i14 from "@ngx-translate/core";
-import * as i15 from "@angular/router";
-import * as i16 from "../pipes/pipes.module";
+import * as i3 from "./datetime/testing/mat-dateshort.test";
+import * as i4 from "./autocomplete/testing/autocomplete.test";
+import * as i5 from "./latlong/testing/latlong.test";
+import * as i6 from "./numpad/testing/numpad.test";
+import * as i7 from "./swipe/testing/swipe.test";
+import * as i8 from "./chips/testing/chips.test";
+import * as i9 from "./badge/badge.test";
+import * as i10 from "../testing/observable.test";
+import * as i11 from "@angular/common";
+import * as i12 from "@ionic/angular";
+import * as i13 from "@angular/forms";
+import * as i14 from "./material.module";
+import * as i15 from "@ngx-translate/core";
+import * as i16 from "@angular/router";
+import * as i17 from "../pipes/pipes.module";
 export declare const SHARED_MATERIAL_TESTING_PAGES: TestingPage[];
 export declare class MaterialTestingModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MaterialTestingModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MaterialTestingModule, [typeof i1.DateTimeTestPage, typeof i2.DateTestPage, typeof i3.AutocompleteTestPage, typeof i4.LatLongTestPage, typeof i5.NumpadTestPage, typeof i6.SwipeTestPage, typeof i7.ChipsTestPage, typeof i8.MatBadgeTestPage, typeof i9.ObservableTestPage], [typeof i10.CommonModule, typeof i11.IonicModule, typeof i12.ReactiveFormsModule, typeof i13.SharedMaterialModule, typeof i14.TranslateModule, typeof i15.RouterModule, typeof i16.SharedPipesModule], [typeof i13.SharedMaterialModule, typeof i15.RouterModule, typeof i1.DateTimeTestPage, typeof i2.DateTestPage, typeof i3.AutocompleteTestPage, typeof i4.LatLongTestPage, typeof i5.NumpadTestPage, typeof i6.SwipeTestPage, typeof i7.ChipsTestPage, typeof i9.ObservableTestPage]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MaterialTestingModule, [typeof i1.DateTimeTestPage, typeof i2.DateTestPage, typeof i3.DateShortTestPage, typeof i4.AutocompleteTestPage, typeof i5.LatLongTestPage, typeof i6.NumpadTestPage, typeof i7.SwipeTestPage, typeof i8.ChipsTestPage, typeof i9.MatBadgeTestPage, typeof i10.ObservableTestPage], [typeof i11.CommonModule, typeof i12.IonicModule, typeof i13.ReactiveFormsModule, typeof i14.SharedMaterialModule, typeof i15.TranslateModule, typeof i16.RouterModule, typeof i17.SharedPipesModule], [typeof i14.SharedMaterialModule, typeof i16.RouterModule, typeof i1.DateTimeTestPage, typeof i2.DateTestPage, typeof i3.DateShortTestPage, typeof i4.AutocompleteTestPage, typeof i5.LatLongTestPage, typeof i6.NumpadTestPage, typeof i7.SwipeTestPage, typeof i8.ChipsTestPage, typeof i10.ObservableTestPage]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MaterialTestingModule>;
 }

package/src/app/shared/services/entity-service.class.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
 import { FetchPolicy, WatchQueryFetchPolicy } from '@apollo/client/core';
 import { SortDirection } from '@angular/material/sort';
-import { EmptyObject } from 'apollo-angular/types';
+import { EmptyObject } from '../../core/graphql/graphql.utils';
 export declare interface Page {
     offset: number;
     size: number;

package/src/theme/_ngx-components.scss

@@ -132,6 +132,7 @@ ion-menu.menu-side-left {
 .form-container,
 form.form-container {
   color: $app-form-color;
+  @include font-size(16px);
 
   .mat-form-field-disabled,
   .mat-input-element:disabled {
@@ -151,29 +152,32 @@ form.form-container {
   }
 
   mat-form-field {
-    @include font-size-important(16px);
+    //@include font-size-important(16px);
 
     ion-icon[matPrefix],
     mat-icon[matPrefix],
     .mat-form-field-prefix ion-icon,
     .mat-form-field-prefix .mat-icon {
-      font-size: 150%;
+      $font-size: calculateRem(24px);
+      $margin-vertical: calculateRem(4px);
+      font-size: $font-size !important;
       line-height: 1.125;
-      margin-left: 5px;
-      margin-right: 5px;
-      height: 1em;
+      height: $font-size;
+      width: $font-size;
+      margin-left: $margin-vertical;
+      margin-right: $margin-vertical;
       position: relative;
-      bottom: -3px;
+      bottom: calc(calc(1rem - $font-size) / 2);
     }
 
     ion-icon[matSuffix],
     mat-icon[matSuffix],
     .mat-form-field-suffix ion-icon,
     .mat-form-field-suffix .mat-icon {
-      //width: 0.8em !important;
 
       &.large {
-        font-size: 150%;
+        $font-size: calculateRem(24px);
+        font-size: $font-size;
         line-height: 1.125;
       }
     }
@@ -242,6 +246,8 @@ mat-form-field {
 
 // --- mat-date-time
 mat-date-time-field {
+  //@include font-size-important(16px);
+
   // Need for errors injected using the <ng-content> tag
   mat-error {
     text-align: end;
@@ -716,6 +722,8 @@ ion-list {
     }
 
     .mat-column-actions {
+      text-align: end;
+      min-width: var(--mat-column-actions-min-width);
       width: var(--mat-column-actions-width, 40px);
       max-width: var(--mat-column-actions-max-width, 40px);
       padding-inline-start: 0 !important; // No start padding
@@ -1308,7 +1316,7 @@ ion-modal.modal-fullscreen {
 .mat-cell {
   /* smaller size, for the comment icon */
   mat-icon.comment {
-    font-size: 16pt;
+    @include font-size(16pt);
     height: 100%;
     vertical-align: center;
     color: var(--ion-color-tertiary, grey);