@sumaris-net/ngx-components 18.2.28 → 18.2.30

package/package.json

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

package/public_api.d.ts

@@ -23,7 +23,6 @@ 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/material.latlong.d.ts

@@ -1,73 +1,147 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormGroupDirective, UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
-import { LatLongFormatOptions, LatLongPattern, LatLongType } from './latlong.utils';
-import { MatFormFieldAppearance, MatFormFieldDefaultOptions, SubscriptSizing } from '@angular/material/form-field';
+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 { TranslateService } from '@ngx-translate/core';
+import { LatLongPattern, LatLongType } from './latlong.utils';
+import { MatSelect } from '@angular/material/select';
+import { MaskitoOptions } from '@maskito/core';
 import * as i0 from "@angular/core";
+declare type LatLongSign = 1 | -1;
+interface ILatLongData {
+    degrees: number;
+    minutes: number;
+    seconds: number;
+    sign: LatLongSign;
+}
 export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueAccessor {
-    private formBuilder;
     private cd;
-    private translate;
     private formGroupDir;
     private _onChangeCallback;
     private _onTouchedCallback;
     private _subscription;
-    private _formatOptions;
     private _disabling;
     private _writing;
     private _appearance;
     private _subscriptSizing;
+    private _readonly;
+    private _tabindex;
     private readonly _defaultAppearance;
     private readonly _defaultSubscriptSizing;
-    protected _readonly: boolean;
-    protected textFormControl: UntypedFormControl;
-    protected signFormControl: UntypedFormControl;
-    protected mask: (string | RegExp)[];
-    protected inputPlaceHolderI18nKey: string;
+    protected _focused: boolean;
+    protected _touched: boolean;
+    protected degreesControl: FormControl<string>;
+    protected minutesControl: FormControl<string>;
+    protected secondsControl: FormControl<string>;
+    protected signControl: FormControl<LatLongSign>;
+    protected showMinutes: boolean;
+    protected showSeconds: boolean;
     protected showSignControl: boolean;
-    protected maskitoPlaceholder: string;
-    protected hasFocus: boolean;
-    get disabled(): any;
+    protected degreesPlaceholder: string;
+    protected minutesPlaceholder: string;
+    protected secondsPlaceholder: string;
+    protected degreesMask: MaskitoOptions;
+    protected minutesMask: MaskitoOptions;
+    protected secondsMask: MaskitoOptions;
+    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;
+    };
     formControl: UntypedFormControl;
     formControlName: string;
     type: LatLongType;
     pattern: LatLongPattern;
+    maxDecimals: number;
     required: boolean;
     floatLabel: AppFloatLabelType;
     placeholder: string;
-    tabindex: number;
     defaultSign: '-' | '+';
-    maxDecimals: number;
-    placeholderChar: string;
     autofocus: boolean;
     mobile: boolean;
+    degreesSymbolUnit: string;
+    minutesSymbolUnit: string;
+    secondsSymbolUnit: string;
+    clearable: boolean;
+    classList: string;
+    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;
-    onBlur: EventEmitter<FocusEvent>;
-    onFocus: EventEmitter<FocusEvent>;
-    inputElement: ElementRef;
-    constructor(formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, translate: TranslateService, formGroupDir: FormGroupDirective, defaultOptions?: MatFormFieldDefaultOptions);
+    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;
-    writeValue(obj: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
+    writeValue(value: number | string): void;
     setDisabledState(isDisabled: boolean): void;
-    _onFocus(event: FocusEvent): boolean;
-    _onBlur(event: FocusEvent): void;
-    protected _format(value: number, opts?: Partial<LatLongFormatOptions>): string;
-    protected _checkIfTouched(): 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 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 updateTranslations;
-    private parseValue;
+    private _checkIfTouched;
     private markForCheck;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongField, [null, null, null, { optional: true; }, null]>;
-    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>;
+    /**
+     * 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<MatLatLongField, [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; }; "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; }; "classList": { "alias": "class"; "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/material.latlong.module.d.ts

@@ -1,21 +1,20 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./material.latlong";
-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";
+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";
 export declare class SharedMatLatLongModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedMatLatLongModule, never>;
-    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 ɵ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 ɵinj: i0.ɵɵInjectorDeclaration<SharedMatLatLongModule>;
 }

package/src/app/shared/validator/validators.d.ts

@@ -62,7 +62,9 @@ export declare class SharedFormGroupValidators {
         fieldOnly?: boolean;
         skipIfNoTime?: boolean;
     } | string): ValidatorFn;
-    static dateMaxDuration(startDateField: string, endDateField: string, maxDuration: number, durationUnit?: moment.unitOfTime.Diff): ValidatorFn;
+    static dateMaxDuration(startDateField: string, endDateField: string, maxDuration: number, durationUnit?: moment.unitOfTime.Diff, opts?: {
+        skipIfNoTime?: boolean;
+    }): ValidatorFn;
     static dateMinDuration(startDateField: string, endDateField: string, minDuration: number, durationUnit?: moment.unitOfTime.Diff): ValidatorFn;
     static requiredIf(fieldName: string, anotherFieldToCheck: string | AbstractControl, opts?: {
         fieldOnly?: boolean;

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",
+  "version": "18.2.30",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_material.scss

@@ -196,13 +196,13 @@ mat-icon[slot] {
 }
 
 // Latitude/Longitude component
-.mat-latlong-form-field {
+.mat-latlong-field {
 
   .mat-mdc-form-field-infix {
     display: inline-flex;
 
     .mat-mdc-select.sign {
-      max-width: 2em;
+      max-width: 1.7em;
 
       .mat-mdc-select-trigger {
         align-items: baseline;

package/src/theme/_ngx-components.table.scss

@@ -430,6 +430,7 @@
 
       // Specific behavior for select
       &.mat-mdc-form-field-type-mat-select {
+        --mat-select-arrow-transform: translateY(0px);
         .mdc-text-field {
           padding-right: 8px;
         }
@@ -476,13 +477,11 @@
     }
 
     mat-latlong-field {
+      --mat-select-arrow-transform: translateY(-3px);
       height: calc(var(--mat-row-height) - 2px);
-      ion-col.text {
-        min-width: unset !important; // make sure column is resizable
-      }
-      ion-col.sign {
-        --min-width: 35px !important;
-        --max-width: 45px !important;
+
+      .mat-mdc-form-field-infix {
+        height: calc(var(--mat-row-height) - 14px) !important;
       }
     }