@sumaris-net/ngx-components 18.3.29 → 18.3.30-alpha1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "18.3.29",
+  "version": "18.3.30-alpha1",
   "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 { MatLatLongFieldInput } from './src/app/shared/material/latlong/material.latlong-input';
 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

@@ -1,6 +1,14 @@
 export declare type LatLongType = 'latitude' | 'longitude';
 export declare type LatLongPattern = 'DDMMSS' | 'DDMM' | 'DD';
 export declare const LAT_LONG_PATTERNS: LatLongPattern[];
+export declare type LatLongSign = '+' | '-';
+export declare type LatLongSignValue = 1 | -1;
+export interface ILatLongData {
+    degrees: number;
+    minutes: number;
+    seconds: number;
+    sign: LatLongSignValue;
+}
 export declare const MASKS: {
     [key: string]: {
         [pattern: string]: Array<string | RegExp>;
@@ -16,6 +24,7 @@ export declare class LatLongFormatOptions {
 }
 export declare const LAT_LONG_PATTERN_MAX_DECIMALS = 3;
 export declare const LAT_LONG_VALUE_MAX_DECIMALS = 7;
+export declare function computeDecimalPart(value: number, nbOfDecimals: number): number;
 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;

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

@@ -0,0 +1,80 @@
+import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { LatLongPattern, LatLongSign, LatLongType } from './latlong.utils';
+import { MaskitoOptions } from '@maskito/core';
+import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+export declare class MatLatLongFieldInput implements MatFormFieldControl<number>, ControlValueAccessor, OnInit, OnDestroy {
+    private _elementRef;
+    _formField: MatFormField;
+    ngControl: NgControl;
+    static nextId: number;
+    degreesInput: ElementRef;
+    minutesInput: ElementRef;
+    secondsInput: ElementRef;
+    signInput: ElementRef;
+    parts: import("@angular/forms").FormGroup<{
+        degrees: import("@angular/forms").FormControl<string>;
+        minutes: import("@angular/forms").FormControl<string>;
+        seconds: import("@angular/forms").FormControl<string>;
+        sign: import("@angular/forms").FormControl<1 | -1>;
+    }>;
+    stateChanges: Subject<void>;
+    focused: boolean;
+    touched: boolean;
+    controlType: string;
+    id: string;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    get empty(): boolean;
+    get shouldLabelFloat(): boolean;
+    userAriaDescribedBy: string;
+    placeholder: string;
+    get required(): boolean;
+    set required(value: BooleanInput);
+    private _required;
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    private _disabled;
+    get value(): number | null;
+    set value(value: number | null);
+    get errorState(): boolean;
+    type: LatLongType;
+    pattern: LatLongPattern;
+    degreesSymbolUnit: string;
+    minutesSymbolUnit: string;
+    secondsSymbolUnit: string;
+    defaultSign: LatLongSign;
+    maxDecimals: number;
+    showMinutes: boolean;
+    showSeconds: boolean;
+    showSign: boolean;
+    degreesMask: MaskitoOptions;
+    minutesMask: MaskitoOptions;
+    secondsMask: MaskitoOptions;
+    degreesPlaceholder: string;
+    minutesPlaceholder: string;
+    secondsPlaceholder: string;
+    lastInputMaxDecimals: number;
+    private logPrefix;
+    constructor(_elementRef: ElementRef<HTMLElement>, _formField: MatFormField, ngControl: NgControl);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onFocusIn(event: FocusEvent): void;
+    onFocusOut(event: FocusEvent): void;
+    handleInput(controlName: string, nextControlName?: string): void;
+    autoFocusNext(controlName: string, nextControlName?: string): void;
+    autoFocusPrev(controlName: string, prevControlName: string): void;
+    getElementByName(name: string): HTMLElement;
+    setDescribedByIds(ids: string[]): void;
+    onContainerClick(): void;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    private computeLatLongFormGroupValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongFieldInput, [null, { optional: true; }, { optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongFieldInput, "mat-latlong-input", never, { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "degreesSymbolUnit": { "alias": "degreesSymbolUnit"; "required": false; }; "minutesSymbolUnit": { "alias": "minutesSymbolUnit"; "required": false; }; "secondsSymbolUnit": { "alias": "secondsSymbolUnit"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "showMinutes": { "alias": "showMinutes"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "showSign": { "alias": "showSign"; "required": false; }; "degreesMask": { "alias": "degreesMask"; "required": false; }; "minutesMask": { "alias": "minutesMask"; "required": false; }; "secondsMask": { "alias": "secondsMask"; "required": false; }; "degreesPlaceholder": { "alias": "degreesPlaceholder"; "required": false; }; "minutesPlaceholder": { "alias": "minutesPlaceholder"; "required": false; }; "secondsPlaceholder": { "alias": "secondsPlaceholder"; "required": false; }; "lastInputMaxDecimals": { "alias": "lastInputMaxDecimals"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -1,48 +1,31 @@
-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 { AfterViewInit, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormGroupDirective, UntypedFormControl } from '@angular/forms';
+import { 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 { LatLongPattern, LatLongSign, LatLongType } from './latlong.utils';
 import { MaskitoOptions } from '@maskito/core';
+import { MatLatLongFieldInput } from './material.latlong-input';
 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 {
+export declare class MatLatLongField implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
     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<string>;
-    protected minutesControl: FormControl<string>;
-    protected secondsControl: FormControl<string>;
-    protected signControl: FormControl<LatLongSign>;
     protected showMinutes: boolean;
     protected showSeconds: boolean;
-    protected showSignControl: boolean;
+    protected showSign: boolean;
     protected degreesPlaceholder: string;
     protected minutesPlaceholder: string;
     protected secondsPlaceholder: string;
     protected degreesMask: MaskitoOptions;
     protected minutesMask: MaskitoOptions;
     protected secondsMask: MaskitoOptions;
-    protected patternMaxDecimals: number;
+    protected lastInputMaxDecimals: number;
     protected i18nErrorKeys: {
         required: string;
         min: string;
@@ -78,7 +61,7 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     required: boolean;
     floatLabel: AppFloatLabelType;
     placeholder: string;
-    defaultSign: '-' | '+';
+    defaultSign: LatLongSign;
     autofocus: boolean;
     mobile: boolean;
     degreesSymbolUnit: string;
@@ -94,54 +77,26 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     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;
+    input: MatLatLongFieldInput;
+    pendingValue: any;
+    pendingValueSet: boolean;
+    pendingDisabledState: boolean;
+    pendingOnChange: (_: any) => unknown;
+    pendingOnTouched: () => unknown;
     constructor(cd: ChangeDetectorRef, formGroupDir: FormGroupDirective, defaultOptions?: MatFormFieldDefaultOptions);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
+    writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
-    writeValue(value: number | string): void;
-    setDisabledState(isDisabled: boolean): void;
+    setDisabledState?(isDisabled: boolean): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): 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 _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<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 ɵ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; }; }, {}, 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,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.latlong-input";
+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.MatLatLongFieldInput], [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.MatLatLongFieldInput]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedMatLatLongModule>;
 }

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

@@ -23,9 +23,10 @@ import * as i20 from "@angular/router";
 import * as i21 from "../pipes/pipes.module";
 import * as i22 from "./badge/badge.module";
 import * as i23 from "@maskito/angular";
+import * as i24 from "./latlong/material.latlong.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.MatCommonTestPage, typeof i2.DateTimeTestPage, typeof i3.DateTestPage, typeof i4.DateShortTestPage, typeof i5.DurationTestPage, typeof i6.AutocompleteTestPage, typeof i7.BooleanTestPage, typeof i8.LatLongTestPage, typeof i9.TextFormTestingPage, typeof i10.SwipeTestPage, typeof i11.ChipsTestPage, typeof i12.MatBadgeTestPage, typeof i13.ObservableTestPage, typeof i14.MaskitoTestPage], [typeof i15.CommonModule, typeof i16.IonicModule, typeof i17.ReactiveFormsModule, typeof i18.SharedMaterialModule, typeof i19.TranslateModule, typeof i20.RouterModule, typeof i21.SharedPipesModule, typeof i22.SharedBadgeModule, typeof i17.FormsModule, typeof i23.MaskitoDirective], [typeof i18.SharedMaterialModule, typeof i20.RouterModule, typeof i1.MatCommonTestPage, typeof i2.DateTimeTestPage, typeof i3.DateTestPage, typeof i4.DateShortTestPage, typeof i5.DurationTestPage, typeof i6.AutocompleteTestPage, typeof i7.BooleanTestPage, typeof i8.LatLongTestPage, typeof i9.TextFormTestingPage, typeof i10.SwipeTestPage, typeof i11.ChipsTestPage, typeof i12.MatBadgeTestPage, typeof i13.ObservableTestPage, typeof i14.MaskitoTestPage]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MaterialTestingModule, [typeof i1.MatCommonTestPage, typeof i2.DateTimeTestPage, typeof i3.DateTestPage, typeof i4.DateShortTestPage, typeof i5.DurationTestPage, typeof i6.AutocompleteTestPage, typeof i7.BooleanTestPage, typeof i8.LatLongTestPage, typeof i9.TextFormTestingPage, typeof i10.SwipeTestPage, typeof i11.ChipsTestPage, typeof i12.MatBadgeTestPage, typeof i13.ObservableTestPage, typeof i14.MaskitoTestPage], [typeof i15.CommonModule, typeof i16.IonicModule, typeof i17.ReactiveFormsModule, typeof i18.SharedMaterialModule, typeof i19.TranslateModule, typeof i20.RouterModule, typeof i21.SharedPipesModule, typeof i22.SharedBadgeModule, typeof i17.FormsModule, typeof i23.MaskitoDirective, typeof i24.SharedMatLatLongModule], [typeof i18.SharedMaterialModule, typeof i20.RouterModule, typeof i1.MatCommonTestPage, typeof i2.DateTimeTestPage, typeof i3.DateTestPage, typeof i4.DateShortTestPage, typeof i5.DurationTestPage, typeof i6.AutocompleteTestPage, typeof i7.BooleanTestPage, typeof i8.LatLongTestPage, typeof i9.TextFormTestingPage, typeof i10.SwipeTestPage, typeof i11.ChipsTestPage, typeof i12.MatBadgeTestPage, typeof i13.ObservableTestPage, typeof i14.MaskitoTestPage]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MaterialTestingModule>;
 }

package/src/app/shared/material/test/test-component.d.ts

@@ -0,0 +1,75 @@
+import { OnDestroy } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NgControl } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/** @title Form field with custom telephone number input control. */
+export declare class FormFieldCustomControlExample {
+    readonly form: FormGroup<{
+        tel: FormControl<any>;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldCustomControlExample, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldCustomControlExample, "form-field-custom-control-example", never, {}, {}, never, never, true, never>;
+}
+/** Data structure for holding telephone number. */
+export declare class MyTel {
+    area: string;
+    exchange: string;
+    subscriber: string;
+    constructor(area: string, exchange: string, subscriber: string);
+}
+/** Custom `MatFormFieldControl` for telephone number input. */
+export declare class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
+    static nextId: number;
+    readonly areaInput: import("@angular/core").Signal<HTMLInputElement>;
+    readonly exchangeInput: import("@angular/core").Signal<HTMLInputElement>;
+    readonly subscriberInput: import("@angular/core").Signal<HTMLInputElement>;
+    ngControl: NgControl;
+    readonly parts: FormGroup<{
+        area: FormControl<string | null>;
+        exchange: FormControl<string | null>;
+        subscriber: FormControl<string | null>;
+    }>;
+    readonly stateChanges: Subject<void>;
+    readonly touched: import("@angular/core").WritableSignal<boolean>;
+    readonly controlType = "example-tel-input";
+    readonly id: string;
+    readonly _userAriaDescribedBy: import("@angular/core").InputSignal<string>;
+    readonly _placeholder: import("@angular/core").InputSignal<string>;
+    readonly _required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly _disabledByInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly _value: import("@angular/core").ModelSignal<MyTel>;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    protected readonly _formField: import("@angular/material/form-field").MatFormField;
+    private readonly _focused;
+    private readonly _disabledByCva;
+    private readonly _disabled;
+    private readonly _focusMonitor;
+    private readonly _elementRef;
+    get focused(): boolean;
+    get empty(): boolean;
+    get shouldLabelFloat(): boolean;
+    get userAriaDescribedBy(): string;
+    get placeholder(): string;
+    get required(): boolean;
+    get disabled(): boolean;
+    get value(): MyTel | null;
+    get errorState(): boolean;
+    constructor();
+    ngOnDestroy(): void;
+    onFocusIn(): void;
+    onFocusOut(event: FocusEvent): void;
+    autoFocusNext(control: AbstractControl, nextElement?: HTMLInputElement): void;
+    autoFocusPrev(control: AbstractControl, prevElement: HTMLInputElement): void;
+    setDescribedByIds(ids: string[]): void;
+    onContainerClick(): void;
+    writeValue(tel: MyTel | null): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    _handleInput(control: AbstractControl, nextElement?: HTMLInputElement): void;
+    private _updateValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyTelInput, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyTelInput, "example-tel-input", never, { "_userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "_placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "_required": { "alias": "required"; "required": false; "isSignal": true; }; "_disabledByInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "_value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "_value": "valueChange"; }, never, never, true, never>;
+}

package/src/theme/_material.scss

@@ -197,16 +197,9 @@ mat-icon[slot] {
 // Latitude/Longitude component
 .mat-latlong-field {
 
-  .mat-mdc-form-field-infix {
-    display: inline-flex;
-
-    .mat-mdc-select.sign {
-      max-width: 1.7em;
-
-      .mat-mdc-select-trigger {
-        align-items: baseline;
-      }
-    }
+  .mat-mdc-select-value {
+    text-align: right;
+    padding-right: 0.25em;
   }
 
 }