@smallpearl/ngx-helper 0.29.23

package/mat-select-entity/src/mat-select-entity.component.d.ts

@@ -0,0 +1,207 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { HttpClient, HttpContextToken, HttpParams } from '@angular/common/http';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import { MatSelect, MatSelectChange } from '@angular/material/select';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { SPMatSelectEntityConfig } from './providers';
+import * as i0 from "@angular/core";
+export interface SPMatSelectEntityHttpContext {
+    entityName: string;
+    entityNamePlural: string;
+    endpoint: string;
+}
+export declare const SP_MAT_SELECT_ENTITY_HTTP_CONTEXT: HttpContextToken<SPMatSelectEntityHttpContext>;
+type EntityGroup<T> = {
+    id?: PropertyKey;
+    name?: string;
+    label?: string;
+    description?: string;
+    items?: T[];
+    __items__?: T[];
+};
+export 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.
+ */
+export declare class SPMatSelectEntityComponent<TEntity extends {
+    [P in IdKey]: PropertyKey;
+}, IdKey extends string = 'id'> implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor, MatFormFieldControl<string | number | string[] | number[]> {
+    protected http: HttpClient;
+    protected cdr: ChangeDetectorRef;
+    protected _elementRef: ElementRef<HTMLElement>;
+    protected injector: Injector;
+    _formField: MatFormField;
+    ngControl: NgControl;
+    private config;
+    static _entitiesCache: Map<string, {
+        refCount: number;
+        entities: Array<any>;
+    }>;
+    matSel: MatSelect;
+    /**
+     * Entity label function. Given an entity return its natural label
+     * to display to the user.
+     */
+    entityLabelFn: (entity: TEntity) => string;
+    /**
+     * Entity filter function - return a boolean if the entity is to be included
+     * in the filtered entities list.
+     * @param entity: TEntity object to test for 'search' string.
+     * @param search - search string
+     */
+    entityFilterFn: (entity: TEntity, search: string) => boolean;
+    /**
+     * Entity idKey, if idKey is different from the default 'id'.
+     */
+    idKey: string;
+    /**
+     * URL of the remote from where entities are to be loaded.
+     * This won't be used if `loadFromRemoteFn` is specified.
+     */
+    url: string;
+    /**
+     * Parameters to be added to the HTTP request to retrieve data from
+     * remote. This won't be used if `loadFromRemoteFn` is specified.
+     */
+    httpParams: HttpParams;
+    /**
+     * Function to load entities from remote.
+     */
+    loadFromRemoteFn: (injector: Injector) => Observable<TEntity[]>;
+    inlineNew: boolean;
+    /**
+     * Entity name, that is used to form the "New { item }" menu item if
+     * inlineNew=true. This is also used as the key of the object in GET response
+     * if the reponse JSON is not an array and rather an object, where the values
+     * are stored indexed by the server model name. For eg:-
+     *
+     * {
+     *    'customers': [
+     *      {...},
+     *      {...},
+     *      {...},
+     *    ]
+     * }
+     */
+    entityName: string;
+    multiple: boolean;
+    group: boolean;
+    /**
+     * The group object key name under which options are stored. Defaults to
+     * 'items' or pluralized 'entityName'. Ideally the client class should
+     * explicitly set this property value.
+     */
+    groupOptionsKey: string;
+    /**
+     * If groupOptions = true, specify this to provide accurate label for each
+     * group. If not specified, group label will be determined by looking up one
+     * of the standard fields - name, label or description - whichever comes
+     * first.
+     */
+    groupLabelFn: (group: any) => string;
+    /**
+     * Sideload data key name.
+     */
+    sideloadDataKey: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Parser function to return the list of entities from the GET response.
+     */
+    responseParserFn: import("@angular/core").InputSignal<SPMatSelectEntityResponseParser | undefined>;
+    selectionChange: EventEmitter<TEntity | TEntity[]>;
+    createNewItemSelected: EventEmitter<void>;
+    searchText: string;
+    notFoundText: string;
+    addItemText: string;
+    _sideloadDataKey: import("@angular/core").Signal<string>;
+    private _entities;
+    private _groupedEntities;
+    stateChanges: Subject<void>;
+    focused: boolean;
+    touched: boolean;
+    selectValue: string | number | string[] | number[];
+    lastSelectValue: string | number | string[] | number[];
+    searching: boolean;
+    filterStr: string;
+    filter$: BehaviorSubject<string>;
+    onChanged: (_: any) => void;
+    onTouched: () => void;
+    matSelect: MatSelect;
+    filteredValues: Subject<TEntity[]>;
+    filteredGroupedValues: Subject<EntityGroup<TEntity>[]>;
+    destroy: Subject<void>;
+    private loaded;
+    private load$;
+    static nextId: number;
+    id: string;
+    private _placeholder;
+    ngxHelperConfig: import("@smallpearl/ngx-helper/core").SPNgxHelperConfig;
+    constructor(http: HttpClient, cdr: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, injector: Injector, _formField: MatFormField, ngControl: NgControl, config: SPMatSelectEntityConfig);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    private _initStrings;
+    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(): void;
+    setDisabledState(isDisabled: boolean): void;
+    onSelectOpened(ev: any): void;
+    onSelectionChange(ev: MatSelectChange): void;
+    filterValues(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
+     */
+    filterGroupedValues(search: string): void;
+    loadFromRemote(): Observable<TEntity[] | ((group: EntityGroup<TEntity>) => TEntity[])>;
+    groupLabel(group: EntityGroup<TEntity>): string;
+    groupEntities(group: EntityGroup<TEntity>): TEntity[];
+    groupEntitiesKey(): string;
+    private existsInCache;
+    private getCacheKey;
+    private getFromCache;
+    private addToCache;
+    private removeFromCache;
+    private getHttpReqContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatSelectEntityComponent<any, any>, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SPMatSelectEntityComponent<any, any>, "sp-mat-select-entity", never, { "entityLabelFn": { "alias": "entityLabelFn"; "required": true; }; "entityFilterFn": { "alias": "entityFilterFn"; "required": false; }; "idKey": { "alias": "idKey"; "required": false; }; "url": { "alias": "url"; "required": false; }; "httpParams": { "alias": "httpParams"; "required": false; }; "loadFromRemoteFn": { "alias": "loadFromRemoteFn"; "required": false; }; "inlineNew": { "alias": "inlineNew"; "required": false; }; "entityName": { "alias": "entityName"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "group": { "alias": "group"; "required": false; }; "groupOptionsKey": { "alias": "groupOptionsKey"; "required": false; }; "groupLabelFn": { "alias": "groupLabelFn"; "required": false; }; "sideloadDataKey": { "alias": "sideloadDataKey"; "required": false; "isSignal": true; }; "responseParserFn": { "alias": "responseParserFn"; "required": false; "isSignal": true; }; "searchText": { "alias": "searchText"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "addItemText": { "alias": "addItemText"; "required": false; }; "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 {};

package/mat-select-entity/src/providers.d.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+export interface SPMatSelectEntityConfig {
+    i18n: {
+        search: string;
+        notFound: string;
+        addItem: string;
+    };
+}
+export declare const SP_MAT_SELECT_ENTITY_CONFIG: InjectionToken<SPMatSelectEntityConfig>;

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

@@ -0,0 +1,6 @@
+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';

package/mat-side-menu-layout/src/layout.service.d.ts

@@ -0,0 +1,23 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { BehaviorSubject, Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface SideMenuLayoutProps {
+    smallScreen: boolean;
+    toolbarHeight: number;
+}
+export 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>;
+}

package/mat-side-menu-layout/src/mat-menu-layout.component.d.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+import { Subject } from 'rxjs';
+import { LayoutService, SideMenuLayoutProps } from './layout.service';
+import { NavItem } from './nav-item';
+import * as i0 from "@angular/core";
+export 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>;
+}

package/mat-side-menu-layout/src/mat-menu-layout.module.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./mat-menu-pane.component";
+import * as i2 from "./mat-menu-list-item.component";
+import * as i3 from "./mat-menu-layout.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/router";
+import * as i6 from "@angular/material/sidenav";
+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 i11 from "@angular/material/dialog";
+import * as i12 from "@angular/material/list";
+export declare class SPMatMenuLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SPMatMenuLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SPMatMenuLayoutModule, [typeof i1.SPMatMenuPaneComponent, typeof i2.SPMatMenuListItemComponent, typeof i3.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 i1.SPMatMenuPaneComponent, typeof i2.SPMatMenuListItemComponent, typeof i3.SPMatMenuLayoutComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SPMatMenuLayoutModule>;
+}

package/mat-side-menu-layout/src/mat-menu-list-item.component.d.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectorRef, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NavItem } from './nav-item';
+import * as i0 from "@angular/core";
+export 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>;
+}

package/mat-side-menu-layout/src/mat-menu-pane.component.d.ts

@@ -0,0 +1,66 @@
+import { AfterViewInit, ChangeDetectorRef, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { LayoutService, SideMenuLayoutProps } from './layout.service';
+import { SPMatMenuListItemComponent } from './mat-menu-list-item.component';
+import { NavItem } from './nav-item';
+import * as i0 from "@angular/core";
+export 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: import("@angular/core").Signal<readonly SPMatMenuListItemComponent[]>;
+    menuItemComps$: import("@angular/core").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>;
+}

package/mat-side-menu-layout/src/nav-item.d.ts

@@ -0,0 +1,10 @@
+export interface NavItem {
+    text: string;
+    disabled?: boolean;
+    icon?: string;
+    iconType?: 'mat' | 'bi' | 'fa';
+    route?: string;
+    children?: NavItem[];
+    backButton?: boolean;
+    backHref?: string;
+}

package/mat-tel-input/README.md

@@ -0,0 +1,18 @@
+# QQMatTelephoneInputComponent (qq-mat-telephone-input)
+
+A telephone number input control, which allows selecting the country code and
+entering a national number.
+
+# Dependencies
+
+* Angular, v15.x
+* Material, v15.x
+* ngx-mat-select-search, v7.x
+
+# How to use
+
+
+# Events
+This control does not raise any events.
+
+# Notes

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

@@ -0,0 +1,2 @@
+export * from './src/providers';
+export * from './src/mat-telephone.component';

package/mat-tel-input/src/country-codes.d.ts

@@ -0,0 +1,5 @@
+export declare const COUNTRY_CODES: {
+    name: string;
+    code: string;
+    callingCode: number;
+}[];

package/mat-tel-input/src/mat-telephone.component.d.ts

@@ -0,0 +1,129 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { HttpClient } from '@angular/common/http';
+import { ChangeDetectorRef, ElementRef, Injector, OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormBuilder, FormControl, FormGroup, NgControl } from '@angular/forms';
+import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs';
+import { MatSelect, MatSelectChange } from '@angular/material/select';
+import * as i0 from "@angular/core";
+interface CountryInfo {
+    name: string;
+    code: string;
+    callingCode: number;
+}
+/** Data structure for holding telephone number. */
+export declare class ISOTelNumber {
+    country: string;
+    national: string;
+    constructor(country: string, national: string);
+}
+export 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$: import("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 {};

package/mat-tel-input/src/providers.d.ts

@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+export 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;
+}
+export declare const QQMAT_TELEPHONE_INPUT_CONFIG_PROVIDER: InjectionToken<QQMatTelephoneInputConfig>;

package/ngx-helper.d.ts

@@ -0,0 +1,2 @@
+/** Version of the ngx-helper library */
+export declare const VERSION = "0.1.0";