Guajiritos Phone Number

Guajiritos Phone Numer es una librería para Angular que proporciona un componente con una funcionalidad de introducir y validar números telefónicos.

Dependencias

Guajiritos Phone Number depende de libphonenumber-js, ngx-mat-intl-tel-input, @ngx-translate/core y @ngx-translate/http-loader.

Instalación

Con npm

npm i @guajiritos/phone-number libphonenumber-js ngx-mat-intl-tel-input @ngx-translate/core @ngx-translate/http-loader --save

Con yarn

yarn add @guajiritos/phone-number libphonenumber-js ngx-mat-intl-tel-input @ngx-translate/core @ngx-translate/http-loader

Con pnpm

pnpm add @guajiritos/phone-number libphonenumber-js ngx-mat-intl-tel-input @ngx-translate/core @ngx-translate/http-loader

Importar la dependencia en tu proyecto.

import { GuajiritosGeneralAutocomplete } from '@guajiritos/phone-number';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    GuajiritosPhoneNumber,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ]
})

Importar la etiqueta en el componente correspondiente.

<guajiritos-phone-number></guajiritos-phone-number>

Entrada

Como elementos opcionales se pueden introducir los siguientes campos:

• floatLabel - Corresponde a un valor FloatLabelType de @angular/material. Por defecto toma valor auto
• color - Corresponde a un valor ThemePalette de @angular/material. Por defecto toma valor accent
• appearance - Corresponde a un valor MatFormFieldAppearance de @angular/material. Por defecto toma valor outline
• subscriptSizing - Corresponde a un valor SubscriptSizing de @angular/material. Por defecto toma valor dynamic
• preferredCountries - Corresponde a un arreglo de string. Por defecto toma valor ['cu']
• enablePlaceholder - Corresponde a un arreglo de boolean. Por defecto toma valor true
• enableSearch - Corresponde a un arreglo de boolean. Por defecto toma valor true
• placeholder - Corresponde a un arreglo de string. Por defecto toma valor Teléfono
• code - Corresponde a un string que representa el código de un país seleccionado. Sin valor por defecto

<guajiritos-phone-number [floatLabel]="'always'" [color]="'accent'" [appearance]="'outline'"
                         [subscriptSizing]="'dynamic'" [formControlName]="'phone'"></guajiritos-phone-number>