ecabs-components 1.1.15 → 1.1.16

package/lib/base/consts/country-codes.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class CountryCode {
+    allCountries: (string | number | string[])[][];
+    static ɵfac: i0.ɵɵFactoryDeclaration<CountryCode, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CountryCode>;
+}
+export declare const Examples: any;

package/lib/base/models/phone.models.d.ts

@@ -0,0 +1,10 @@
+export type PhoneNumberFormat = 'default' | 'national' | 'international';
+export type Country = {
+    name: string;
+    iso2: string;
+    dialCode: string;
+    priority: number;
+    areaCodes?: string[];
+    flagClass: string;
+    placeHolder?: string;
+};

package/lib/base/pipes/search.pipe.d.ts

@@ -0,0 +1,8 @@
+import { PipeTransform } from '@angular/core';
+import { Country } from '../models/phone.models';
+import * as i0 from "@angular/core";
+export declare class SearchPipe implements PipeTransform {
+    transform(country: Country, searchCriteria?: string): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SearchPipe, "search", true>;
+}

package/lib/base/validators/phone-number.validator.d.ts

@@ -0,0 +1,4 @@
+import { UntypedFormControl } from '@angular/forms';
+export declare const phoneNumberValidator: (control: UntypedFormControl) => {
+    validatePhoneNumber: boolean;
+};

package/lib/ecabs-base-phone-input/ecabs-base-phone.component.d.ts

@@ -0,0 +1,96 @@
+import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { CountryCode as CC, E164Number, NationalNumber, PhoneNumber } from 'libphonenumber-js';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { CanUpdateErrorState, ErrorStateMatcher, _AbstractConstructor, _Constructor } from '@angular/material/core';
+import { MatMenu } from '@angular/material/menu';
+import { Subject } from 'rxjs';
+import { CountryCode } from '../base/consts/country-codes';
+import { Country, PhoneNumberFormat } from '../base/models/phone.models';
+import * as i0 from "@angular/core";
+declare class NgxMatIntlTelInputBase {
+    _defaultErrorStateMatcher: ErrorStateMatcher;
+    _parentForm: NgForm;
+    _parentFormGroup: FormGroupDirective;
+    ngControl: NgControl;
+    readonly stateChanges: Subject<void>;
+    constructor(_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
+}
+declare type CanUpdateErrorStateCtor = _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState>;
+declare const _NgxMatIntlTelInputMixinBase: CanUpdateErrorStateCtor & typeof NgxMatIntlTelInputBase;
+export declare class EcabsBasePhoneComponent extends _NgxMatIntlTelInputMixinBase implements OnInit, OnDestroy, DoCheck, CanUpdateErrorState, MatFormFieldControl<any> {
+    private changeDetectorRef;
+    private countryCodeData;
+    private fm;
+    private elRef;
+    ngControl: NgControl;
+    preferredCountries: string[];
+    enablePlaceholder: boolean;
+    inputPlaceholder: string | undefined;
+    cssClass: string | undefined;
+    name: string | undefined;
+    onlyCountries: string[];
+    errorStateMatcher: ErrorStateMatcher;
+    enableSearch: boolean;
+    searchPlaceholder: string | undefined;
+    describedBy: string;
+    debounceTimeMs: number;
+    get format(): PhoneNumberFormat;
+    get placeholder(): string;
+    get required(): boolean;
+    get disabled(): boolean;
+    countryChanged: EventEmitter<Country>;
+    matMenu: MatMenu | undefined;
+    searchInput: ElementRef;
+    id: string;
+    get shouldLabelFloat(): boolean;
+    static nextId: number;
+    private _changeSubject;
+    private _placeholder;
+    private _required;
+    private _disabled;
+    private _previousFormattedNumber;
+    private _format;
+    stateChanges: Subject<void>;
+    focused: boolean;
+    phoneNumber: NationalNumber | string | undefined;
+    allCountries: Country[];
+    preferredCountriesInDropDown: Country[];
+    selectedCountry: Country | undefined;
+    numberInstance: PhoneNumber | undefined;
+    value: E164Number | string | undefined;
+    searchCriteria: string | undefined;
+    get empty(): boolean;
+    set format(value: PhoneNumberFormat);
+    set placeholder(value: string);
+    set required(value: boolean);
+    set disabled(value: boolean);
+    static getPhoneNumberPlaceHolder(countryISOCode: CC): string | undefined;
+    onTouched: () => void;
+    propagateChange: (_: unknown) => void;
+    constructor(changeDetectorRef: ChangeDetectorRef, countryCodeData: CountryCode, fm: FocusMonitor, elRef: ElementRef<HTMLElement>, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher);
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    onPhoneNumberChangeDebounce(): void;
+    onPhoneNumberChange(): void;
+    onCountrySelect(country: Country): void;
+    getCountry(code: string): Country;
+    onInputKeyPress(event: KeyboardEvent): void;
+    flagClass(lang: string): string;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: any): void;
+    setDescribedByIds(ids: string[]): void;
+    onContainerClick(event: MouseEvent): void;
+    reset(): void;
+    onSearchInput(): void;
+    protected fetchCountryData(): void;
+    private get formattedPhoneNumber();
+    private formatAsYouTypeIfEnabled;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBasePhoneComponent, [null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsBasePhoneComponent, "ecabs-base-phone", never, { "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "enablePlaceholder": { "alias": "enablePlaceholder"; "required": false; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "name": { "alias": "name"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "describedBy": { "alias": "describedBy"; "required": false; }; "debounceTimeMs": { "alias": "debounceTimeMs"; "required": false; }; "format": { "alias": "format"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "countryChanged": "countryChanged"; }, never, never, false, never>;
+}
+export {};

package/lib/ecabs-base-phone-input/ecabs-base-phone.module.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ecabs-base-phone.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/router";
+import * as i5 from "@angular/forms";
+import * as i6 from "@angular/material/input";
+import * as i7 from "@angular/material/menu";
+import * as i8 from "@angular/material/button";
+import * as i9 from "@angular/material/divider";
+import * as i10 from "../base/pipes/search.pipe";
+import * as i11 from "../base/element-wrapper/element-wrapper.module";
+export declare class EcabsBasePhoneModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EcabsBasePhoneModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsBasePhoneModule, [typeof i1.EcabsBasePhoneComponent], [typeof i2.CommonModule, typeof i3.MatIconModule, typeof i4.RouterModule, typeof i5.FormsModule, typeof i6.MatInputModule, typeof i7.MatMenuModule, typeof i8.MatButtonModule, typeof i9.MatDividerModule, typeof i5.ReactiveFormsModule, typeof i10.SearchPipe, typeof i11.ElementWrapperModule], [typeof i1.EcabsBasePhoneComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EcabsBasePhoneModule>;
+}

package/lib/ecabs-phone/ecabs-phone.component.d.ts

@@ -1,9 +1,9 @@
 import { AfterViewInit, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, UntypedFormGroup } from '@angular/forms';
-import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
 import EcabsElementBaseComponent from '../base/element-base';
 import { EcabsComponentsService } from '../base/services/ecabs-components.service';
 import { UnsubscribeService } from '../base/services/unsubscribe.service';
+import { EcabsBasePhoneComponent } from '../ecabs-base-phone-input/ecabs-base-phone.component';
 import * as i0 from "@angular/core";
 export declare class EcabsPhoneComponent extends EcabsElementBaseComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit, OnChanges {
     private readonly injector;
@@ -17,7 +17,7 @@ export declare class EcabsPhoneComponent extends EcabsElementBaseComponent imple
     onblur: EventEmitter<{
         value: string;
     }>;
-    phoneInput: NgxMatIntlTelInputComponent;
+    phoneInput: EcabsBasePhoneComponent;
     phoneForm: UntypedFormGroup;
     phoneSub: any;
     prohibitedCharacters: string[];

package/lib/ecabs-phone/ecabs-phone.module.d.ts

@@ -4,9 +4,9 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/input";
 import * as i4 from "../base/element-wrapper/element-wrapper.module";
 import * as i5 from "@angular/forms";
-import * as i6 from "ngx-mat-intl-tel-input";
+import * as i6 from "../ecabs-base-phone-input/ecabs-base-phone.module";
 export declare class EcabsPhoneModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsPhoneModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsPhoneModule, [typeof i1.EcabsPhoneComponent], [typeof i2.CommonModule, typeof i3.MatInputModule, typeof i4.ElementWrapperModule, typeof i5.FormsModule, typeof i6.NgxMatIntlTelInputComponent, typeof i5.ReactiveFormsModule], [typeof i1.EcabsPhoneComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EcabsPhoneModule, [typeof i1.EcabsPhoneComponent], [typeof i2.CommonModule, typeof i3.MatInputModule, typeof i4.ElementWrapperModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.EcabsBasePhoneModule], [typeof i1.EcabsPhoneComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EcabsPhoneModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "peerDependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/common": "^16.2.12",
@@ -13,7 +13,6 @@
     "date-fns": "^2.29.3",
     "date-holidays": "^3.23.3",
     "flag-icons": "^6.7.0",
-    "ngx-mat-intl-tel-input": "^5.0.0",
     "ngx-mat-select-search": "^7.0.7",
     "postcss": "^8.4.35",
     "rxjs": "~7.5.0",

package/public-api.d.ts

@@ -107,6 +107,8 @@ export * from './lib/ecabs-header/ecabs-header.component';
 export * from './lib/ecabs-header/ecabs-header.module';
 export * from './lib/ecabs-slider/ecabs-slider.component';
 export * from './lib/ecabs-slider/ecabs-slider.module';
+export * from './lib/ecabs-base-phone-input/ecabs-base-phone.component';
+export * from './lib/ecabs-base-phone-input/ecabs-base-phone.module';
 export * from './lib/base/services/unsubscribe.service';
 export * from './lib/base/pipes/truncate.pipe';
 export * from './lib/base/pipes/pipes.module';

package/src/assets/styles/material/overrides/_phone.scss

@@ -3,9 +3,9 @@
 ecabs-phone {
   @extend .ecabs-phone;
 
-  .ngx-mat-tel-input-container {
+  .ecabs-tel-input-container {
     .mat-mdc-input-element {
-      @extend .ngx-mat-tel-input-input;
+      @extend .ecabs-tel-input-input;
     }
 
     .country-selector {
@@ -18,7 +18,7 @@ ecabs-phone {
   }
 
   .form-field.form-field--invalid {
-    .ngx-mat-tel-input-container {
+    .ecabs-tel-input-container {
       &,
       .country-selector {
         @extend .form-field__input--invalid;
@@ -27,7 +27,7 @@ ecabs-phone {
   }
 
   .disabled {
-    .ngx-mat-tel-input-container {
+    .ecabs-tel-input-container {
       background-color: var(--color-white-opacity-05);
       border-color: var(--color-gray-300);
     }
@@ -42,7 +42,7 @@ ecabs-phone {
   }
 }
 
-.ngx-mat-tel-input-mat-menu-panel {
+.ecabs-tel-input-mat-menu-panel {
   .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
     @include fontSize(14px);
 

package/src/assets/styles/scss/modules/_phone.scss

@@ -1,10 +1,10 @@
 .ecabs-phone {
-  .ngx-mat-tel-input-container {
+  .ecabs-tel-input-container {
     position: relative;
     border-radius: $border-radius-base;
     border: 1px solid var(--color-gray-500);
 
-    .ngx-mat-tel-input-input {
+    .ecabs-tel-input-input {
       padding: calc-rem(8) calc-rem(8) calc-rem(8) calc-rem(105px) !important;
     }
 
@@ -21,7 +21,7 @@
   }
 
   .error {
-    .ngx-mat-tel-input-container {
+    .ecabs-tel-input-container {
       border: 1px solid var(--color-error);
     }
   }