ngx-dial-input 2.0.2 → 2.0.3

package/projects/phone-input/src/lib/phone-input.component.ts

@@ -1,348 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ElementRef,
-  HostListener,
-  forwardRef
-} from '@angular/core';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-import { countries } from '../data/countries';
-import {
-  trigger,
-  state,
-  style,
-  transition,
-  animate
-} from '@angular/animations';
-
-
-
-@Component({
-  selector: 'phone-input',
-  animations: [
-    trigger('dropdownAnimation', [
-      state('open', style({
-        opacity: 1,
-        transform: 'scaleY(1)',
-        height: '*',
-        padding: '*'
-      })),
-      state('closed', style({
-        opacity: 0,
-        transform: 'scaleY(0)',
-        height: '0px',
-        padding: '0px'
-      })),
-      transition('closed => open', [
-        animate('200ms ease-out')
-      ]),
-      transition('open => closed', [
-        animate('150ms ease-in')
-      ])
-    ])
-  ],
-  template: `<div class="phone-input-wrapper">
-  <div class="input-container">
-    <!-- Country Selector (20%) -->
-    <div class="country-select" (click)="toggleDropdown()" (blur)="toggleDropdown()">
-      <img [src]="selectedCountry.flag" width="20" />
-      <span>{{selectedCountry.dialCode}}</span>
-      <span class="arrow-down">▾</span>
-    </div>
-
-    <!-- Phone Input (80%) -->
-    <input
-      type="tel"
-      pattern="[0-9\\s\\-]*"
-      inputmode="numeric"
-      class="phone-input"
-      [placeholder]="placeholder"
-      [(ngModel)]="phoneNumber"
-      [ngClass]="{ 'error-border': isInvalid }"
-      (input)="onPhoneInput()"
-      (keypress)="allowPhoneCharacters($event)"
-    />
-  </div>
-
-  <!-- Dropdown Content (full width below) -->
-  <div
-  class="dropdown-content"
-  [@dropdownAnimation]="dropdownOpen ? 'open' : 'closed'"
-  *ngIf="dropdownOpen || animating"
-  (@dropdownAnimation.done)="onAnimationDone($event)" >
-    <input
-      *ngIf="searchEnabled"
-      type="text"
-      class="search-box"
-      placeholder="Search Country"
-      [(ngModel)]="searchTerm"
-      (input)="onSearchChange()"
-    />
-    <div class="country-list">
-      <div
-        class="country-option"
-        *ngFor="let country of countriesList"
-        (click)="selectCountry(country)"
-      >
-        <img [src]="country.flag" width="20" />
-        <span class="country-name">{{ country.name }} ({{ country.native }})</span>
-        <span class="dial-code">{{ country.dialCode }}</span>
-      </div>
-    </div>
-  </div>
-</div>
-
-  `,
-  styles: [`
-    .phone-input-wrapper {
-  position: relative;
-  font-family: Arial, sans-serif;
-}
-
-.input-container {
-  display: flex;
-  width: 100%;
-  padding-bottom: 3px;
-}
-
-/* Country Select (20%) */
-.country-select {
-  width: 24%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding: 8px 8px;
-  cursor: pointer;
-  background-color: #f8f8f8;
-}
-
-.country-select img {
-  margin-right: 5px;
-}
-
-.arrow-down {
-  font-size: 13px;
-  color: #666;
-}
-.arrow-down:after {
-    display: none;
-}
-/* Phone Input (80%) */
-.phone-input {
-  width: 80%;
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 0 4px 4px 0;
-  outline: none;
-}
-
-/* Dropdown Content */
-.dropdown-content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 0 0 4px 4px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  z-index: 1000;
-  margin-top: -1px;
-}
-
-.search-box {
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  border-bottom: 1px solid #eee;
-  outline: none;
-}
-
-.country-list {
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.country-option {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.country-option:hover {
-  background-color: #f5f5f5;
-}
-
-.country-option img {
-  margin-right: 5px;
-}
-
-.country-name {
-  flex-grow: 1;
-}
-
-.dial-code {
-  color: #666;
-  font-size: 0.9em;
-}
-
-/* Error State */
-input.error-border {
-  border-color: red;
-}
-
-  `],
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => PhoneInputComponent),
-    multi: true
-  }]
-})
-export class PhoneInputComponent implements ControlValueAccessor {
-  countriesList = countries;
-  searchTerm = '';
-  @Input() defaultCountry: string = '';
-  @Input() placeholder: string = '';
-  @Input() searchEnabled: boolean = true;
-  @Input() numberFormat: 'international' | 'national' = 'international';
-  @Input() setFirstCountry: string = '';
-  @Output() phoneChange = new EventEmitter<any>();
-
-   phoneNumber: string = '';
-  isInvalid: boolean = false;
-  dropdownOpen: boolean = false;
-  animating: boolean = false;
-
-  selectedCountry = countries[0];
-
-  constructor(private eRef: ElementRef) {}
-
-  private onChange: any = () => {};
-  private onTouched: any = () => {};
-
-
-  ngOnInit() {
-    if (this.defaultCountry) {
-      const match = countries.find(c => c.iso2 === this.defaultCountry.toLowerCase());
-      if (match) this.selectedCountry = match;
-    }
-  }
-  @HostListener('document:click', ['$event'])
-  handleClickOutside(event: MouseEvent) {
-    if (!this.eRef.nativeElement.contains(event.target)) {
-      this.dropdownOpen = false;
-    }
-  }
-
-  onAnimationDone(event: any) {
-  if (!this.dropdownOpen) {
-    this.animating = false;
-  }
-  }
-
-  toggleDropdown() {
-    this.dropdownOpen = !this.dropdownOpen;
-    this.animating = true;
-  }
-
-  onClickOutside(event: MouseEvent) {
-    if (!this.eRef.nativeElement.contains(event.target)) {
-      this.dropdownOpen = false;
-    }
-  }
-
- onSearchChange() {
-    const term = this.searchTerm.toLowerCase();
-    this.countriesList = countries.filter(c =>
-      c.name.toLowerCase().includes(term) ||
-      (c.native?.toLowerCase().includes(term))
-    );
-  }
-
-
-  selectCountry(country: any) {
-    this.selectedCountry = country;
-    this.searchTerm = '';
-    this.countriesList = countries;
-    this.dropdownOpen = false;
-    this.emitPhoneChange();
-  }
-
-  onPhoneInput() {
-    this.emitPhoneChange();
-  }
-
-  private emitPhoneChange() {
-    const raw = this.phoneNumber || '';
-    const digitsOnly = raw.replace(/\D/g, '');
-    const hyphenCount = (raw.match(/-/g) || []).length;
-    const spaceCount = (raw.match(/ /g) || []).length;
-
-    const totalChars = this.phoneNumber.length;
-    const maxAllowedLength = this.selectedCountry?.phoneLength + hyphenCount + spaceCount;
-
-    if (digitsOnly.length !== this.selectedCountry?.phoneLength) {
-      this.isInvalid = true;
-    }
-    else if (totalChars > maxAllowedLength) {
-      this.isInvalid = true;
-    }
-    else {
-      this.isInvalid = false;
-    }
-    const fullPhone = this.selectedCountry.dialCode + raw;
-
-    const structuredValue = {
-      e164Number: fullPhone,
-      nationalNumber: raw,
-      dialCode: this.selectedCountry.dialCode,
-      countryCode: this.selectedCountry.iso2,
-      isValid: !this.isInvalid,
-    };
-
-    this.onChange(structuredValue);
-    this.phoneChange.emit(structuredValue);
-  }
-
-  writeValue(value: any): void {
-    if (value && value.dialCode && value.countryCode) {
-      const match = countries.find(c =>
-        c.dialCode === value.dialCode && c.iso2 === value.countryCode
-      );
-      if (match) {
-        this.selectedCountry = match;
-      } else {
-        this.selectedCountry = countries[0];
-      }
-      this.phoneNumber = value.nationalNumber || '';
-    } else {
-      this.selectedCountry = countries[0];
-      this.phoneNumber = '';
-    }
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-  allowPhoneCharacters(event: KeyboardEvent) {
-    const allowedChars = [' ', '-'];
-    const charCode = event.charCode;
-
-    // Allow digits 0–9
-    if (charCode >= 48 && charCode <= 57) return;
-
-    // Allow hyphen and space
-    if (allowedChars.includes(event.key)) return;
-
-    event.preventDefault();
-  }
-}

package/projects/phone-input/src/lib/phone-input.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PhoneInputComponent } from './phone-input.component';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
-  declarations: [PhoneInputComponent],
-  imports: [
-    CommonModule,
-    FormsModule
-  ],
-  exports: [PhoneInputComponent]
-})
-export class PhoneInputModule { }
-

package/projects/phone-input/src/lib/phone-input.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PhoneInputService } from './phone-input.service';
-
-describe('PhoneInputService', () => {
-  let service: PhoneInputService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(PhoneInputService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/projects/phone-input/tsconfig.lib.json

@@ -1,15 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "rootDir": "src",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "composite": false
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/projects/phone-input/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/projects/phone-input/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}

package/tsconfig.json

@@ -1,33 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "module": "es2020",
-    "target": "es2015",
-    "useDefineForClassFields": false,
-    "lib": ["es2020", "dom"]
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true,
-    "compilationMode": "partial"
-
-  }
-}