@sumaris-net/ngx-components 18.2.28-alpha2 → 18.2.28-alpha3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "18.2.28-alpha2",
+  "version": "18.2.28-alpha3",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/public_api.d.ts

@@ -23,6 +23,7 @@ export { MatDateShort } from './src/app/shared/material/datetime/material.datesh
 export { MatDateTime } from './src/app/shared/material/datetime/material.datetime';
 export { MatDate } from './src/app/shared/material/datetime/material.date';
 export { MatLatLongField } from './src/app/shared/material/latlong/material.latlong';
+export { MatLatLongField2 } from './src/app/shared/material/latlong/material.latlong2';
 export * from './src/app/shared/material/latlong/material.latlong.module';
 export * from './src/app/shared/material/duration/duration.module';
 export { MatDuration } from './src/app/shared/material/duration/material.duration';

package/src/app/shared/material/latlong/latlong.utils.d.ts

@@ -14,8 +14,19 @@ export declare class LatLongFormatOptions {
     inputSelectionRanges?: number[][];
     fixLatLong?: boolean;
 }
-export declare const LAT_LONG_DEFAULT_MAX_DECIMALS = 3;
+export declare const LAT_LONG_PATTERN_MAX_DECIMALS = 3;
+export declare const LAT_LONG_VALUE_MAX_DECIMALS = 7;
 export declare function formatLatLong(value: number, type: LatLongType, opts?: Partial<LatLongFormatOptions>): string;
 export declare function formatLatitude(value: number | null, opts?: Partial<LatLongFormatOptions>): string;
 export declare function formatLongitude(value: number | null, opts?: Partial<LatLongFormatOptions>): string;
+export declare function splitNumberToFieldsDD(value: number, opts: LatLongFormatOptions & {
+    longitude: boolean;
+}): (number | string)[];
+export declare function splitNumberToFieldsDDMM(value: number, opts: LatLongFormatOptions & {
+    longitude: boolean;
+}): number[];
+export declare function splitNumberToFieldsDDMMSS(value: number, opts: LatLongFormatOptions & {
+    longitude: boolean;
+}): number[];
 export declare function parseLatitudeOrLongitude(input: string, pattern: string, maxDecimals?: number, placeholderChar?: string): number | null;
+export declare function computeDecimalDegrees(degrees: number, minutes: number, seconds: number, sign: -1 | 1, maxDecimals?: number): number;

package/src/app/shared/material/latlong/material.latlong.d.ts

@@ -68,6 +68,6 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     private parseValue;
     private markForCheck;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongField, [null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongField, "mat-latlong-field", never, { "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "placeholderChar": { "alias": "placeholderChar"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongField, "mat-latlong-field-old", never, { "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "placeholderChar": { "alias": "placeholderChar"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
     static ngAcceptInputType_mobile: unknown;
 }

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

@@ -1,20 +1,21 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./material.latlong";
-import * as i2 from "@angular/common";
-import * as i3 from "@ionic/angular";
-import * as i4 from "@angular/forms";
-import * as i5 from "../../directives/directives.module";
-import * as i6 from "../../pipes/pipes.module";
-import * as i7 from "@angular/material/core";
-import * as i8 from "@angular/material/form-field";
-import * as i9 from "@angular/material/input";
-import * as i10 from "@angular/material/button";
-import * as i11 from "@maskito/angular";
-import * as i12 from "@angular/material/icon";
-import * as i13 from "@angular/material/select";
-import * as i14 from "@ngx-translate/core";
+import * as i2 from "./material.latlong2";
+import * as i3 from "@angular/common";
+import * as i4 from "@ionic/angular";
+import * as i5 from "@angular/forms";
+import * as i6 from "../../directives/directives.module";
+import * as i7 from "../../pipes/pipes.module";
+import * as i8 from "@angular/material/core";
+import * as i9 from "@angular/material/form-field";
+import * as i10 from "@angular/material/input";
+import * as i11 from "@angular/material/button";
+import * as i12 from "@maskito/angular";
+import * as i13 from "@angular/material/icon";
+import * as i14 from "@angular/material/select";
+import * as i15 from "@ngx-translate/core";
 export declare class SharedMatLatLongModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedMatLatLongModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatLatLongModule, [typeof i1.MatLatLongField], [typeof i2.CommonModule, typeof i3.IonicModule, typeof i4.ReactiveFormsModule, typeof i5.SharedDirectivesModule, typeof i6.SharedPipesModule, typeof i7.MatCommonModule, typeof i8.MatFormFieldModule, typeof i9.MatInputModule, typeof i10.MatButtonModule, typeof i11.MaskitoDirective, typeof i12.MatIconModule, typeof i13.MatSelectModule, typeof i14.TranslateModule], [typeof i1.MatLatLongField]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatLatLongModule, [typeof i1.MatLatLongField, typeof i2.MatLatLongField2], [typeof i3.CommonModule, typeof i4.IonicModule, typeof i5.ReactiveFormsModule, typeof i6.SharedDirectivesModule, typeof i7.SharedPipesModule, typeof i8.MatCommonModule, typeof i9.MatFormFieldModule, typeof i10.MatInputModule, typeof i11.MatButtonModule, typeof i12.MaskitoDirective, typeof i13.MatIconModule, typeof i14.MatSelectModule, typeof i15.TranslateModule], [typeof i1.MatLatLongField, typeof i2.MatLatLongField2]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedMatLatLongModule>;
 }

package/src/app/shared/material/latlong/material.latlong2.d.ts

@@ -0,0 +1,160 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormGroupDirective, UntypedFormControl } from '@angular/forms';
+import { MatFormField, MatFormFieldAppearance, MatFormFieldDefaultOptions, SubscriptSizing } from '@angular/material/form-field';
+import { AppFloatLabelType } from '../../form/field.model';
+import { LatLongPattern, LatLongType } from './latlong.utils';
+import { MatSelect } from '@angular/material/select';
+import * as i0 from "@angular/core";
+declare type LatLongSign = 1 | -1;
+interface ILatLongData {
+    degrees: number;
+    minutes: number;
+    seconds: number;
+    sign: LatLongSign;
+}
+export declare class MatLatLongField2 implements OnInit, OnDestroy, ControlValueAccessor {
+    private cd;
+    private formGroupDir;
+    private _onChangeCallback;
+    private _onTouchedCallback;
+    private _subscription;
+    private _disabling;
+    private _writing;
+    private _appearance;
+    private _subscriptSizing;
+    private _readonly;
+    private _tabindex;
+    private readonly _defaultAppearance;
+    private readonly _defaultSubscriptSizing;
+    protected _focused: boolean;
+    protected _touched: boolean;
+    protected degreesControl: FormControl<number>;
+    protected minutesControl: FormControl<number>;
+    protected secondsControl: FormControl<number>;
+    protected signControl: FormControl<LatLongSign>;
+    protected showMinutes: boolean;
+    protected showSeconds: boolean;
+    protected showSignControl: boolean;
+    protected degreesPlaceholder: string;
+    protected minutesPlaceholder: string;
+    protected secondsPlaceholder: string;
+    protected patternMaxDecimals: number;
+    protected i18nErrorKeys: {
+        required: string;
+        min: string;
+        max: string;
+        minlength: string;
+        maxlength: string;
+        pubkey: string;
+        validDate: string;
+        dateIsAfter: string;
+        dateIsBefore: string;
+        dateRange: string;
+        dateMinDuration: string;
+        dateMaxDuration: string;
+        maxDecimals: string;
+        decimal: string;
+        integer: string;
+        precision: string;
+        email: string;
+        latitude: string;
+        longitude: string;
+        pattern: string;
+        unique: string;
+        entity: string;
+        invalid: string;
+        inconsistent: string;
+        equals: string;
+    };
+    protected minMaxValues: {
+        degrees?: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        minutes?: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        seconds?: {
+            min: number;
+            max: number;
+            step: number;
+        };
+    };
+    formControl: UntypedFormControl;
+    formControlName: string;
+    type: LatLongType;
+    pattern: LatLongPattern;
+    maxDecimals: number;
+    required: boolean;
+    floatLabel: AppFloatLabelType;
+    placeholder: string;
+    defaultSign: '-' | '+';
+    autofocus: boolean;
+    mobile: boolean;
+    degreesSymbolUnit: string;
+    minutesSymbolUnit: string;
+    secondsSymbolUnit: string;
+    clearable: boolean;
+    set tabindex(value: number);
+    get tabindex(): number;
+    set appearance(value: MatFormFieldAppearance);
+    get appearance(): MatFormFieldAppearance;
+    set readonly(value: boolean);
+    get readonly(): boolean;
+    set subscriptSizing(value: SubscriptSizing);
+    get subscriptSizing(): SubscriptSizing;
+    get showFields(): boolean;
+    get disabled(): any;
+    keyupEnter: EventEmitter<any>;
+    blurred: EventEmitter<FocusEvent>;
+    focused: EventEmitter<FocusEvent>;
+    formField: MatFormField;
+    fakeInput: ElementRef;
+    inputDegrees: ElementRef;
+    inputMinutes: ElementRef;
+    inputSeconds: ElementRef;
+    inputSign: ElementRef;
+    inputSignSelect: MatSelect;
+    constructor(cd: ChangeDetectorRef, formGroupDir: FormGroupDirective, defaultOptions?: MatFormFieldDefaultOptions);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    writeValue(value: number | string): void;
+    setDisabledState(isDisabled: boolean): void;
+    clearValue(event?: Event): void;
+    protected get internalElements(): HTMLElement[];
+    protected onFocusFakeInput(event: FocusEvent): void;
+    protected onBlurFakeInput(event: FocusEvent): void;
+    protected _onFocusInput(event: FocusEvent): void;
+    protected _onBlurInput(event: FocusEvent): void;
+    protected _onClickInput(event: UIEvent): void;
+    protected selectInput(input: any): void;
+    protected focus(target?: any): boolean;
+    protected format(rawValue: number): string;
+    protected computeDecimalPart(value: number, nbOfDecimals: number): number;
+    protected computeLatLongFormGroupValue(rawValue: number | string): ILatLongData;
+    protected markAsTouched(): void;
+    private patchValue;
+    private onFormChange;
+    private emitChange;
+    private _checkIfTouched;
+    private markForCheck;
+    /**
+     * Show/Hide the fake input
+     */
+    private updateFakeInput;
+    /**
+     * This is a special case, because, this component has a temporary component displayed before the first focus event
+     */
+    private updateTabIndex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongField2, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongField2, "mat-latlong-field", never, { "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "degreesSymbolUnit": { "alias": "degreesSymbolUnit"; "required": false; }; "minutesSymbolUnit": { "alias": "minutesSymbolUnit"; "required": false; }; "secondsSymbolUnit": { "alias": "secondsSymbolUnit"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "keyupEnter": "keyup.enter"; "blurred": "blur"; "focused": "focus"; }, never, ["[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ngAcceptInputType_mobile: unknown;
+    static ngAcceptInputType_clearable: unknown;
+    static ngAcceptInputType_tabindex: unknown;
+}
+export {};

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

@@ -9,13 +9,14 @@ export declare class LatLongTestPage implements OnInit {
     protected platform: PlatformService;
     form: UntypedFormGroup;
     geoPositionMessage: string;
-    mode: 'desktop' | 'mobile' | 'temp';
+    mode: 'mobile' | 'desktop' | 'dev' | 'temp';
+    selectedFormat: string;
     appearance: MatFormFieldAppearance;
     constructor(formBuilder: UntypedFormBuilder, platform: PlatformService);
     ngOnInit(): void;
     toggleMode(value: any): void;
     loadData(): Promise<void>;
-    doSubmit(event: any): void;
+    doSubmit(event: Event): void;
     geoPosition(event: Event, controlName?: string): Promise<void>;
     toggleAppearance(event: MatCheckboxChange): void;
     stringify: {

package/src/assets/i18n/en-US.json

@@ -87,7 +87,16 @@
       "LAT_SIGN_S": "S",
       "LONG_SIGN_PLACEHOLDER": "E|W",
       "LONG_SIGN_E": "E",
-      "LONG_SIGN_W": "W"
+      "LONG_SIGN_W": "W",
+      "SINGLE_FIELD_PATTERN": {
+        "DD": "DD",
+        "DD_PLACEHOLDER": "± DD.DDDDDDD",
+        "DDD": "DDD",
+        "DDD_PLACEHOLDER": "±DDD.DDDDDDD",
+        "MM": "MM",
+        "MM_MMM": "MM.MMM",
+        "SS_SS": "SS.SS"
+      }
     },
     "METADATA": "Metadata:",
     "DAY_UNIT": "j",

package/src/assets/i18n/en.json

@@ -86,7 +86,16 @@
       "LAT_SIGN_S": "S",
       "LONG_SIGN_PLACEHOLDER": "E|W",
       "LONG_SIGN_E": "E",
-      "LONG_SIGN_W": "W"
+      "LONG_SIGN_W": "W",
+      "SINGLE_FIELD_PATTERN": {
+        "DD": "DD",
+        "DD_PLACEHOLDER": "± DD.DDDDDDD",
+        "DDD": "DDD",
+        "DDD_PLACEHOLDER": "±DDD.DDDDDDD",
+        "MM": "MM",
+        "MM_MMM": "MM.MMM",
+        "SS_SS": "SS.SS"
+      }
     },
     "METADATA": "Metadata:",
     "DAY_UNIT": "j",

package/src/assets/i18n/fr.json

@@ -86,7 +86,16 @@
       "LAT_SIGN_S": "S",
       "LONG_SIGN_PLACEHOLDER": "E|W",
       "LONG_SIGN_E": "E",
-      "LONG_SIGN_W": "W"
+      "LONG_SIGN_W": "W",
+      "SINGLE_FIELD_PATTERN": {
+        "DD": "DD",
+        "DD_PLACEHOLDER": "± DD.DDDDDDD",
+        "DDD": "DDD",
+        "DDD_PLACEHOLDER": "±DDD.DDDDDDD",
+        "MM": "MM",
+        "MM_MMM": "MM.MMM",
+        "SS_SS": "SS.SS"
+      }
     },
     "METADATA": "Metadata:",
     "DAY_UNIT": "j",

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "18.2.28-alpha2",
+  "version": "18.2.28-alpha3",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_material.scss

@@ -11,11 +11,13 @@
 // --------------------------------------------------
 .mat-mdc-tab-group.mat-secondary, .mat-mdc-tab-nav-bar.mat-secondary {
   background-color: var(--ion-color-secondary, $secondary);
+
   .mat-mdc-tab-link {
     color: var(--ion-color-secondary-contrast);
     --mat-tab-header-label-text-tracking: normal;
   }
 }
+
 .mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
   background-color: var(--ion-color-primary, $primary);
 }
@@ -27,6 +29,7 @@
   --mat-tab-header-inactive-ripple-color: rgba(var(--ion-color-primary-rgb), 0.18);
   --mat-tab-header-pagination-icon-color: $text-color;
 }
+
 .mat-mdc-tab-header {
   --mat-tab-header-label-text-tracking: 0.0178571429em;
 }
@@ -53,6 +56,7 @@
 .mat-stroked-button.mat-primary {
   color: var(--ion-color-tertiary, $tertiary);
 }
+
 .mat-button.mat-secondary,
 .mat-icon.mat-secondary,
 .mat-icon-button.mat-secondary,
@@ -61,6 +65,7 @@
 .mat-stroked-button.mat-secondary {
   color: var(--ion-color-secondary, $secondary);
 }
+
 .mat-button.mat-accent,
 .mat-icon.mat-accent,
 .mat-icon-button.mat-accent,
@@ -69,20 +74,24 @@
 .mat-stroked-button.mat-accent {
   color: var(--ion-color-accent, $accent);
 }
+
 .mdc-button {
   --mdc-typography-button-letter-spacing: normal;
   --mdc-text-button-label-text-tracking: normal;
 }
+
 .mat-mdc-menu-item {
   --mat-menu-item-label-text-tracking: normal;
   --mat-menu-item-label-text-size: 14px;
   --mat-menu-item-icon-color: #0000008a;
 }
+
 .mat-mdc-option {
   --mat-option-label-text-tracking: normal;
   --mat-option-label-text-size: 16px;
   min-height: var(--mat-option-min-height, 48px);
 }
+
 .mat-mdc-select {
   --mat-select-trigger-text-font: inherit;
   --mat-select-trigger-text-tracking: normal;
@@ -95,10 +104,12 @@
   background-color: var(--ion-color-tertiary);
   color: var(--ion-color-tertiary-contrast);
 }
+
 .mat-badge-accent .mat-badge-content {
   background-color: var(--ion-color-accent);
   color: var(--ion-color-accent-contrast);
 }
+
 .mat-badge-warn .mat-badge-content {
   background-color: var(--ion-color-warning);
   color: var(--ion-color-warning-contrast);
@@ -114,9 +125,11 @@
   .mat-progress-bar-buffer {
     background-color: var(--background-color);
   }
-  .mat-progress-bar-primary.mat-progress-bar-fill:after  {
+
+  .mat-progress-bar-primary.mat-progress-bar-fill:after {
     background-color: var(--progress-primary-color);
   }
+
   .mat-progress-bar-secondary.mat-progress-bar-fill:after {
     background-color: var(--progress-secondary-color);
   }
@@ -167,7 +180,7 @@ mat-icon[slot] {
   mat-hint,
   .mat-hint,
   mat-error,
-  .mat-error{
+  .mat-error {
     font-size: 75%;
   }
 }
@@ -175,8 +188,26 @@ mat-icon[slot] {
 .mat-mdc-form-field-infix {
   label {
     width: 100% !important;
+
     mat-label {
       text-overflow: ellipsis;
     }
   }
 }
+
+// Latitude/Longitude component
+.mat-latlong-form-field {
+
+  .mat-mdc-form-field-infix {
+    display: inline-flex;
+
+    .mat-mdc-select.sign {
+      max-width: 2em;
+
+      .mat-mdc-select-trigger {
+        align-items: baseline;
+      }
+    }
+  }
+
+}