@smallpearl/ngx-helper 0.33.50 → 20.0.3

package/mat-select-entity/index.d.ts

@@ -1 +1,194 @@
-export * from './src/mat-select-entity.component';
+import * as _angular_material_form_field from '@angular/material/form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, AfterViewInit, EventEmitter, TemplateRef, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { HttpContextToken } from '@angular/common/http';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { MatSelect, MatSelectChange } from '@angular/material/select';
+import { TranslocoService } from '@jsverse/transloco';
+import { SPPagedEntityLoader } from '@smallpearl/ngx-helper/entities';
+import { Subject } from 'rxjs';
+
+interface SPMatSelectEntityHttpContext {
+    entityName: string;
+    entityNamePlural: string;
+    endpoint: string;
+}
+declare const SP_MAT_SELECT_ENTITY_HTTP_CONTEXT: HttpContextToken<SPMatSelectEntityHttpContext>;
+type EntityGroup<TEntity> = {
+    label: string;
+    entities: TEntity[];
+};
+type SPMatSelectEntityResponseParser = <TEntity extends {
+    [P in IdKey]: PropertyKey;
+}, IdKey extends string = 'id'>(response: any) => Array<TEntity>;
+/**
+ * This is a generic component to display a <mat-select> for a FK field
+ * where the select's options are dynamically loaded from the server using
+ * the given url (or URL). The objects thus retrieved should have a
+ * unique 'id' field that will be used as the value of each `option` element.
+ * Therefore upon selection of an `option` element, the `select` value will
+ * be set to the object's `id` property. By default 'id' is used as its id,
+ * but this can be customized by specifying the `idKey' property value.
+ */
+declare class SPMatSelectEntityComponent<TEntity extends {
+    [P in IdKey]: PropertyKey;
+}, IdKey extends string = 'id'> extends SPPagedEntityLoader<TEntity, IdKey> implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor, MatFormFieldControl<string | number | string[] | number[]> {
+    labelFn: _angular_core.InputSignal<((entity: TEntity) => string) | undefined>;
+    filterFn: _angular_core.InputSignal<((entity: TEntity, search: string) => boolean) | undefined>;
+    inlineNew: _angular_core.InputSignal<boolean>;
+    multiple: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * The entity key name that is used to classify entities into groups or
+     * a function that takes a TEntity and returns the group id (string).
+     * Entities with the same key value will be grouped together. If this is
+     * specified, grouping will be enabled.
+     * @see groupByFn
+     */
+    groupOptionsKey: _angular_core.InputSignal<string | ((entity: TEntity) => string) | undefined>;
+    /**
+     * A function that a group id (string/number) and returns the label (string).
+     * Defaults to a function that returns the group id as string.
+     */
+    groupLabelFn: _angular_core.InputSignal<(groupId: string | number) => string>;
+    selectionChange: EventEmitter<TEntity | TEntity[]>;
+    createNewItemSelected: EventEmitter<void>;
+    readonly searchText: _angular_core.InputSignal<string | undefined>;
+    readonly notFoundText: _angular_core.InputSignal<string | undefined>;
+    readonly createNewText: _angular_core.InputSignal<string | undefined>;
+    controlType: string;
+    /**
+     * Template for the option label. If not provided, the default label
+     * function will be used. Option label is what is placed inside the
+     * <mat-option> tag. The template gets an implicit 'entity' variable
+     * in the context, value for which is the entity object.
+     *
+     * For example:
+     * ```
+     *  <sp-mat-select-entity
+     *    [url]="'/api/v1/customers/'"
+     *    [labelFn]="entity => entity.name"
+     *    [optionLabelTemplate]="optionLabelTemplate"
+     *  ></sp-mat-select-entity>
+     *  <ng-template #optionLabelTemplate let-entity>
+     *    {{ entity.name }} - {{ entity.description }}
+     *  </ng-template>
+     * ```
+     */
+    optionLabelTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
+    protected _entityLabelFn: _angular_core.Signal<(entity: TEntity) => string>;
+    protected _group: _angular_core.Signal<boolean>;
+    stateChanges: Subject<void>;
+    focused: boolean;
+    touched: boolean;
+    selectValue: string | number | string[] | number[];
+    _initialValue: string | number | string[] | number[] | undefined;
+    lastSelectValue: string | number | string[] | number[];
+    searching: boolean;
+    filterStr: string;
+    filter$: Subject<string>;
+    onChanged: (_: any) => void;
+    onTouched: () => void;
+    matSelect: _angular_core.Signal<MatSelect | undefined>;
+    filteredValues: Subject<TEntity[]>;
+    filteredGroupedValues: Subject<EntityGroup<TEntity>[]>;
+    destroy: Subject<void>;
+    static nextId: number;
+    id: string;
+    private _placeholder;
+    protected cdr: ChangeDetectorRef;
+    protected _elementRef: ElementRef<any>;
+    protected _formField: _angular_material_form_field.MatFormField | null;
+    ngControl: NgControl | null;
+    transloco: TranslocoService;
+    constructor();
+    /**
+     * Conditions for loading entities:
+     *
+     * 1. When the select is opened, if entities have not already been loaded.
+     * 2. When the search string changes.
+     * 3. When the scroll reaches the bottom and more entities are available
+     *    to be loaded.
+     *
+     * We need to create an 'observer-loop' that can handle the above.
+     */
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    addEntity(entity: TEntity): void;
+    get selectTriggerValue(): string;
+    get selectTriggerValueAsArray(): (string | number)[];
+    entityId(entity: TEntity): any;
+    writeValue(entityId: string | number | string[] | number[]): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    get entities(): TEntity[];
+    set entities(items: TEntity[]);
+    get value(): string | number | string[] | number[];
+    set value(val: string | number | string[] | number[]);
+    get shouldLabelFloat(): boolean;
+    userAriaDescribedBy: string;
+    get placeholder(): string;
+    set placeholder(value: string);
+    get required(): boolean;
+    set required(req: boolean);
+    private _required;
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    private _disabled;
+    get empty(): boolean;
+    get errorState(): boolean;
+    onFocusIn(event: FocusEvent): void;
+    onFocusOut(event: FocusEvent): void;
+    setDescribedByIds(ids: string[]): void;
+    onContainerClick(event: MouseEvent): void;
+    setDisabledState(isDisabled: boolean): void;
+    onSelectOpened(ev: any): void;
+    onSelectionChange(ev: MatSelectChange): void;
+    /**
+     * Wrapper to filter entities based on whether grouping is enabled or not.
+     * Calls one of the two filtering methods -- filterGroupedEntities() or
+     * filterNonGroupedEntities().
+     * @param entities
+     * @param filterStr
+     * @returns
+     */
+    filterEntities(entities: TEntity[], filterStr: string): void;
+    /**
+     * Filters the entities based on the search string.
+     * @param search The search string to filter entities.
+     * @returns The number of entities in the filtered result set or undefined.
+     */
+    filterNonGroupedEntities(entities: TEntity[], search: string): void;
+    /**
+     * Filtering grouped entities logic works like this. If the search string
+     * matches a group label, the entire group is to be included in the results.
+     * However, if the search string only matches certain entities, only those
+     * groups are to be included and within those groups, only entities whose
+     * label matches the search string are to be included in the result set.
+     * @param search
+     * @returns number of groups in the filtered result set.
+     */
+    filterGroupedEntities(entities: TEntity[], search: string): void;
+    /**
+     * Helper to arrange the given array of entities into groups based on the
+     * value for `groupOptionsKey`.
+     * @param entities
+     * @returns EntityGroup<TEntity>[]
+     */
+    protected groupEntities(entities: TEntity[]): EntityGroup<TEntity>[];
+    private getHttpReqContext;
+    /**
+     * If more entities are available, load the next page of entities.
+     * This method is triggered when user scrolls to the bottom of the options
+     * list. Well almost to the bottom of the options list. :)
+     */
+    onInfiniteScroll(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SPMatSelectEntityComponent<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SPMatSelectEntityComponent<any, any>, "sp-mat-select-entity", never, { "labelFn": { "alias": "labelFn"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "inlineNew": { "alias": "inlineNew"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "groupOptionsKey": { "alias": "groupOptionsKey"; "required": false; "isSignal": true; }; "groupLabelFn": { "alias": "groupLabelFn"; "required": false; "isSignal": true; }; "searchText": { "alias": "searchText"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "createNewText": { "alias": "createNewText"; "required": false; "isSignal": true; }; "optionLabelTemplate": { "alias": "optionLabelTemplate"; "required": false; "isSignal": true; }; "entities": { "alias": "entities"; "required": false; }; "value": { "alias": "value"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "createNewItemSelected": "createNewItemSelected"; }, never, never, true, never>;
+}
+
+export { SPMatSelectEntityComponent, SP_MAT_SELECT_ENTITY_HTTP_CONTEXT };
+export type { SPMatSelectEntityHttpContext, SPMatSelectEntityResponseParser };

package/mat-select-infinite-scroll/index.d.ts

@@ -1,2 +1,45 @@
-export * from './src/mat-select-infinite-scroll.directive';
-export * from './src/mat-select-infinite-scroll.service';
+import * as i0 from '@angular/core';
+import { NgZone, OnDestroy, AfterViewInit, EventEmitter } from '@angular/core';
+import { MatSelect } from '@angular/material/select';
+
+declare class MatSelectInfiniteScrollService {
+    private ngZone;
+    private threshold;
+    private debounceTime;
+    private complete;
+    private thrPx;
+    private thrPc;
+    private destroyed$;
+    private selectItemHeightPx;
+    private panel;
+    constructor(ngZone: NgZone);
+    initialize(panel: Element, selectItemHeightPx: number, config: {
+        threshold: string;
+        debounceTime: number;
+        complete: boolean;
+    }): void;
+    evaluateThreshold(): void;
+    registerScrollListener(infiniteScrollCallback: () => void): void;
+    handleScrollEvent(event: Event, infiniteScrollCallback: () => void): void;
+    destroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatSelectInfiniteScrollService>;
+}
+
+declare class MatSelectInfiniteScrollDirective implements OnDestroy, AfterViewInit {
+    protected matSelect: MatSelect;
+    private infiniteScrollService;
+    threshold: string;
+    debounceTime: number;
+    complete: boolean;
+    infiniteScroll: EventEmitter<void>;
+    private destroyed$;
+    constructor(matSelect: MatSelect, infiniteScrollService: MatSelectInfiniteScrollService);
+    ngAfterViewInit(): void;
+    getSelectItemHeightPx(panel: Element): number;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "[msInfiniteScroll]", never, { "threshold": { "alias": "threshold"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "complete": { "alias": "complete"; "required": false; }; }, { "infiniteScroll": "infiniteScroll"; }, never, never, true, never>;
+}
+
+export { MatSelectInfiniteScrollDirective, MatSelectInfiniteScrollService };

package/mat-side-menu-layout/index.d.ts

@@ -1,6 +1,180 @@
-export * from './src/layout.service';
-export * from './src/nav-item';
-export * from './src/mat-menu-list-item.component';
-export * from './src/mat-menu-pane.component';
-export * from './src/mat-menu-layout.component';
-export * from './src/mat-menu-layout.module';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import * as i0 from '@angular/core';
+import { OnDestroy, OnInit, QueryList, ChangeDetectorRef, AfterViewInit, OnChanges, TemplateRef, Injector, SimpleChanges } from '@angular/core';
+import * as i5 from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Subject, BehaviorSubject } from 'rxjs';
+import * as i11 from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
+import * as i6 from '@angular/material/sidenav';
+import { MatSidenav } from '@angular/material/sidenav';
+import * as i4 from '@angular/common';
+import * as i7 from '@angular/material/toolbar';
+import * as i8 from '@angular/material/icon';
+import * as i9 from '@angular/material/button';
+import * as i10 from '@angular/material/menu';
+import * as i12 from '@angular/material/list';
+
+interface SideMenuLayoutProps {
+    smallScreen: boolean;
+    toolbarHeight: number;
+}
+declare class LayoutService implements OnDestroy {
+    breakpointObserver: BreakpointObserver;
+    marginTop: number;
+    toolbarHeight: number;
+    smallScreen: boolean;
+    destroy: Subject<void>;
+    _previousUrl: string;
+    layoutChanged: BehaviorSubject<SideMenuLayoutProps>;
+    constructor(breakpointObserver: BreakpointObserver, router: Router);
+    ngOnDestroy(): void;
+    get previousUrl(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LayoutService>;
+}
+
+interface NavItem {
+    text: string;
+    disabled?: boolean;
+    icon?: string;
+    iconType?: 'mat' | 'bi' | 'fa';
+    route?: string;
+    children?: NavItem[];
+    backButton?: boolean;
+    backHref?: string;
+}
+
+declare class SPMatMenuListItemComponent implements OnInit, OnDestroy {
+    route: ActivatedRoute;
+    router: Router;
+    private dialog;
+    private cdr;
+    expanded: boolean;
+    highlighted: boolean;
+    ariaExpanded: boolean;
+    item: NavItem;
+    depth: number;
+    parent: SPMatMenuListItemComponent;
+    showIcon: boolean;
+    children: QueryList<SPMatMenuListItemComponent>;
+    constructor(route: ActivatedRoute, router: Router, dialog: MatDialog, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get isHighlighted(): boolean;
+    toggleHighlight(highlight: boolean): void;
+    /**
+     * Expand a parent container menu item.
+     */
+    expand(): void;
+    /**
+     * Collapse an expanded parent container menu item.
+     */
+    collapse(): void;
+    checkChildrenForHighlight(lastUrlSegment: string): boolean;
+    onItemSelected(ev: Event, item: NavItem): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatMenuListItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatMenuListItemComponent, "ngx-mat-menu-list-item", never, { "highlighted": { "alias": "highlighted"; "required": false; }; "item": { "alias": "item"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "parent": { "alias": "parent"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class SPMatMenuPaneComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
+    cdr: ChangeDetectorRef;
+    private layoutService;
+    private router;
+    private injector;
+    menuTitle: string;
+    showBackButton: boolean;
+    defaultBackButtonHref: string;
+    backButtonText: string;
+    menuItems: NavItem[];
+    brandingText: string;
+    brandingImage: string;
+    matSideNav: MatSidenav | undefined;
+    appVersion: string;
+    menuPaneFooterContent: TemplateRef<any>;
+    showIcons: boolean;
+    baseUrl: string;
+    layout: SideMenuLayoutProps;
+    backButtonNavItem: NavItem | undefined;
+    destroy: Subject<void>;
+    menuItemComps: i0.Signal<readonly SPMatMenuListItemComponent[]>;
+    menuItemComps$: i0.EffectRef;
+    constructor(cdr: ChangeDetectorRef, layoutService: LayoutService, router: Router, injector: Injector);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    /**
+     * Highlights the menu item for the specified URL.
+     *
+     * @param url the full url of the current navigation
+     *
+     * The way this function works is like this.
+     *
+     * It first finds the NavItem matching the given URL in url arg. It does
+     * this by removing the baseUrl from the url and then comparing the
+     * NavItem.route attached to each SPMatMenuListItemComponent. This is done
+     * recursively covering all NavItem.children. When a matching NavItem is
+     * found, the function goes on to find the SPMatMenuListItemComponent which
+     * has this NavItem attached to it. This too is done recursively to find
+     * the innermost NavItem with matching URL.
+     *
+     * When a matching SPMatMenuListItemComponent is found, it first deselects
+     * the previous SPMatMenuListItemComponent selection and then goes on to
+     * select the newly matched SPMatMenuListItemComponent. If the
+     * SPMatMenuListItemComponent is a child of a parent NavItem, the parent
+     * NavItem is expanded. Similarly when deselecting the current selection,
+     * if it belongs to a parent NavItem and the parent is not shared by the
+     * currently matched SPMatMenuListItemComponent, it collapses the parent
+     * of the previously selected SPMatMenuListItemComponent. (Quite a mouthful
+     * of a sentence, but it's exactly how it works.)
+     */
+    highlightUrlMenuItem(url: string): void;
+    private _curHighlitedMenuItemComp;
+    highlightMenuItemComp(menuItemComp: SPMatMenuListItemComponent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatMenuPaneComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatMenuPaneComponent, "ngx-mat-menu-pane", never, { "menuTitle": { "alias": "menuTitle"; "required": false; }; "showBackButton": { "alias": "showBackButton"; "required": false; }; "defaultBackButtonHref": { "alias": "defaultBackButtonHref"; "required": false; }; "backButtonText": { "alias": "backButtonText"; "required": false; }; "menuItems": { "alias": "menuItems"; "required": false; }; "brandingText": { "alias": "brandingText"; "required": false; }; "brandingImage": { "alias": "brandingImage"; "required": false; }; "matSideNav": { "alias": "matSideNav"; "required": false; }; "appVersion": { "alias": "appVersion"; "required": false; }; "menuPaneFooterContent": { "alias": "menuPaneFooterContent"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; "baseUrl": { "alias": "baseUrl"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class SPMatMenuLayoutComponent implements OnInit, OnDestroy {
+    private layoutService;
+    private cdr;
+    menuNav: MatSidenav;
+    layout: SideMenuLayoutProps;
+    destroy: Subject<void>;
+    containerHeight: number;
+    topBottomPadding: number;
+    baseUrl: string;
+    showBackButton: boolean;
+    defaultBackButtonHref: string;
+    backButtonText: string;
+    brandingImage: string;
+    brandingText: string;
+    appTitle: string;
+    menuTitle: string;
+    menuItems: NavItem[];
+    menuPaneFooterContent: TemplateRef<any>;
+    toolbarEndContent: TemplateRef<any>;
+    infoPaneContent: TemplateRef<any>;
+    toolbarTitleContent: TemplateRef<any>;
+    infoPaneMinWidth: number;
+    infoPaneMaxWidth: number;
+    contentContainerClass: string;
+    showIcons: boolean;
+    readonly infoPane: MatSidenav;
+    constructor(layoutService: LayoutService, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onToggleMenuPane(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatMenuLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatMenuLayoutComponent, "sp-mat-menu-layout", never, { "baseUrl": { "alias": "baseUrl"; "required": false; }; "showBackButton": { "alias": "showBackButton"; "required": false; }; "defaultBackButtonHref": { "alias": "defaultBackButtonHref"; "required": false; }; "backButtonText": { "alias": "backButtonText"; "required": false; }; "brandingImage": { "alias": "brandingImage"; "required": false; }; "brandingText": { "alias": "brandingText"; "required": false; }; "appTitle": { "alias": "appTitle"; "required": false; }; "menuTitle": { "alias": "menuTitle"; "required": false; }; "menuItems": { "alias": "menuItems"; "required": false; }; "menuPaneFooterContent": { "alias": "menuPaneFooterContent"; "required": false; }; "toolbarEndContent": { "alias": "toolbarEndContent"; "required": false; }; "infoPaneContent": { "alias": "infoPaneContent"; "required": false; }; "toolbarTitleContent": { "alias": "toolbarTitleContent"; "required": false; }; "infoPaneMinWidth": { "alias": "infoPaneMinWidth"; "required": false; }; "infoPaneMaxWidth": { "alias": "infoPaneMaxWidth"; "required": false; }; "contentContainerClass": { "alias": "contentContainerClass"; "required": false; }; "showIcons": { "alias": "showIcons"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class SPMatMenuLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatMenuLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SPMatMenuLayoutModule, [typeof SPMatMenuPaneComponent, typeof SPMatMenuListItemComponent, typeof SPMatMenuLayoutComponent], [typeof i4.CommonModule, typeof i5.RouterOutlet, typeof i6.MatSidenavModule, typeof i7.MatToolbarModule, typeof i8.MatIconModule, typeof i9.MatButtonModule, typeof i10.MatMenuModule, typeof i11.MatDialogModule, typeof i12.MatListModule], [typeof SPMatMenuPaneComponent, typeof SPMatMenuListItemComponent, typeof SPMatMenuLayoutComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SPMatMenuLayoutModule>;
+}
+
+export { LayoutService, SPMatMenuLayoutComponent, SPMatMenuLayoutModule, SPMatMenuListItemComponent, SPMatMenuPaneComponent };
+export type { NavItem, SideMenuLayoutProps };

package/mat-tel-input/index.d.ts

@@ -1,2 +1,169 @@
-export * from './src/providers';
-export * from './src/mat-telephone.component';
+import { HttpClient } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { InjectionToken, OnInit, OnDestroy, ElementRef, Injector, ChangeDetectorRef } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { Observable, BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ControlValueAccessor, NgControl, FormGroup, FormControl, AbstractControl, FormBuilder } from '@angular/forms';
+import { MatFormFieldControl, MatFormField } from '@angular/material/form-field';
+import { MatSelect, MatSelectChange } from '@angular/material/select';
+
+interface QQMatTelephoneInputConfig {
+    /**
+     * Provider function to detect geographi location and return it
+     * to the control. If implemented, the control would call this
+     * function during initialization and auto-select the
+     * country returned.
+     * @param http
+     * @returns
+     */
+    getCountryCode?: (http: HttpClient) => Observable<{
+        ip: string;
+        countryCode: string;
+        regionCode: string;
+        city: string;
+    }>;
+    /**
+     * When user explicitly selects a country from the country
+     * drop down, this function will be called giving the client a chance
+     * to save it either to a persistent storage or a session variable.
+     */
+    saveCountrySelection?: (countryInfo: {
+        code: string;
+        name: string;
+        callingCode: number;
+    }) => Promise<void>;
+    /**
+     * Countries supported by the telephone control. The string is a
+     * regex pattern that will be used to filter supported countries.
+     * So if you specify ".*", it'll list all countries of the world.
+     * "TW|SG|MY" restricts the coutries list to Taiwan, Singapore &
+     * Malaysia.
+     */
+    countries?: string;
+}
+declare const QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER: InjectionToken<QQMatTelephoneInputConfig>;
+
+interface CountryInfo {
+    name: string;
+    code: string;
+    callingCode: number;
+}
+/** Data structure for holding telephone number. */
+declare class ISOTelNumber {
+    country: string;
+    national: string;
+    constructor(country: string, national: string);
+}
+declare class SPMatTelephoneInputComponent implements OnInit, OnDestroy, ControlValueAccessor, MatFormFieldControl<ISOTelNumber> {
+    private injector;
+    private cdr;
+    private http;
+    private _focusMonitor;
+    private _elementRef;
+    _formField: MatFormField;
+    ngControl: NgControl;
+    static nextId: number;
+    countrySelect: MatSelect;
+    nationalInput: ElementRef;
+    mobile: boolean;
+    allowedCountries: string;
+    defaultCountry: string;
+    filter$: BehaviorSubject<string>;
+    countries$: rxjs.Observable<CountryInfo[]>;
+    countries: Array<CountryInfo>;
+    filteredCountries: ReplaySubject<CountryInfo[]>;
+    isDisabled: boolean;
+    private _onChange;
+    private control;
+    private onCountrySelectFocus;
+    private onCountrySelectBlur;
+    phoneUtil: any;
+    parts: FormGroup<{
+        country: FormControl<CountryInfo | null>;
+        national: FormControl<string | null>;
+    }>;
+    stateChanges: Subject<void>;
+    focused: boolean;
+    touched: boolean;
+    controlType: string;
+    id: string;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    telForm: FormGroup<{}>;
+    /** control for the MatSelect filter keyword */
+    countryFilterCtrl: FormControl<string | null>;
+    get empty(): boolean;
+    get shouldLabelFloat(): boolean;
+    userAriaDescribedBy: string;
+    get placeholder(): string;
+    set placeholder(value: string);
+    private _placeholder;
+    get required(): boolean;
+    set required(value: BooleanInput);
+    private _required;
+    searchText: string;
+    noEntriesFoundLabel: string;
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    private _disabled;
+    destroy: Subject<void>;
+    get value(): ISOTelNumber | null;
+    set value(tel: ISOTelNumber | null);
+    get errorState(): boolean;
+    onFocusIn(event: FocusEvent): void;
+    onFocusOut(event: FocusEvent): void;
+    autoFocusNext(control: AbstractControl, nextElement?: HTMLInputElement): void;
+    autoFocusPrev(control: AbstractControl, prevElement: HTMLInputElement): void;
+    setDescribedByIds(ids: string[]): void;
+    onContainerClick(): void;
+    constructor(injector: Injector, cdr: ChangeDetectorRef, http: HttpClient, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>, _formField: MatFormField, ngControl: NgControl, formBuilder: FormBuilder);
+    ngOnInit(): void;
+    protected setInitialValue(): void;
+    private filterCountries;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Set the country code to the given code.
+     *
+     * @param code Numeric country code to set the value of the country
+     * ion-select to. Will validate the code against a built-in country
+     * code list.
+     */
+    setCountryCode(code: string): void;
+    writeValue(telNumber: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    onCountryChange(ev: MatSelectChange): void;
+    onNationalNumberChange(ev: Event): void;
+    /**
+     * Returns the telephone number in ISO8601 format.
+     * @param numberParts
+     * @returns
+     */
+    private ISOTelephoneNumber;
+    private notifyChange;
+    get placeholderText(): string;
+    get hasErrors(): boolean;
+    private disableComponents;
+    /**
+     * Returns the full telephone number, combining the selected
+     * country code with the national number.
+     *
+     * Leading zeros in the national number are removed.
+     *
+     * Validates the entered number using google-libphonenumber and if
+     * invalid, returns an empty string.
+     */
+    private getTelephoneNumberParts;
+    private getAllowedCountries;
+    private detectCountry;
+    private initCountries;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatTelephoneInputComponent, [null, null, null, null, null, { optional: true; }, { optional: true; self: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatTelephoneInputComponent, "sp-mat-telephone-input", never, { "mobile": { "alias": "mobile"; "required": false; }; "allowedCountries": { "alias": "allowedCountries"; "required": false; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "searchText": { "alias": "searchText"; "required": false; }; "noEntriesFoundLabel": { "alias": "noEntriesFoundLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { ISOTelNumber, QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER, SPMatTelephoneInputComponent };
+export type { QQMatTelephoneInputConfig };

package/package.json

@@ -6,13 +6,18 @@
       "path": "src/assets/i18n/"
     }
   ],
-  "version": "0.33.50",
+  "version": "20.0.3",
   "peerDependencies": {
-    "@angular/common": "^19.1.0",
-    "@angular/core": "^19.1.0",
-    "@angular/cdk": "^19.1.0",
-    "@angular/material": "^19.1.0",
-    "@angular/forms": "^19.1.0",
+    "@angular/animations": "20.3.16",
+    "@angular/cdk": "20.2.14",
+    "@angular/common": "20.3.16",
+    "@angular/compiler": "20.3.16",
+    "@angular/core": "20.3.16",
+    "@angular/forms": "20.3.16",
+    "@angular/material": "~20.2.14",
+    "@angular/platform-browser": "20.3.16",
+    "@angular/platform-browser-dynamic": "20.3.16",
+    "@angular/router": "20.3.16",
     "@jsverse/transloco": "7.5.1",
     "@ngneat/elf": "^2.5.1",
     "@ngneat/elf-entities": "^5.0.2",
@@ -48,10 +53,6 @@
       "types": "./entities/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-entities.mjs"
     },
-    "./hover-dropdown": {
-      "types": "./hover-dropdown/index.d.ts",
-      "default": "./fesm2022/smallpearl-ngx-helper-hover-dropdown.mjs"
-    },
     "./entity-field": {
       "types": "./entity-field/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-entity-field.mjs"
@@ -60,14 +61,18 @@
       "types": "./forms/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-forms.mjs"
     },
-    "./mat-busy-wheel": {
-      "types": "./mat-busy-wheel/index.d.ts",
-      "default": "./fesm2022/smallpearl-ngx-helper-mat-busy-wheel.mjs"
+    "./hover-dropdown": {
+      "types": "./hover-dropdown/index.d.ts",
+      "default": "./fesm2022/smallpearl-ngx-helper-hover-dropdown.mjs"
     },
     "./locale": {
       "types": "./locale/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-locale.mjs"
     },
+    "./mat-busy-wheel": {
+      "types": "./mat-busy-wheel/index.d.ts",
+      "default": "./fesm2022/smallpearl-ngx-helper-mat-busy-wheel.mjs"
+    },
     "./mat-context-menu": {
       "types": "./mat-context-menu/index.d.ts",
       "default": "./fesm2022/smallpearl-ngx-helper-mat-context-menu.mjs"