ngx-dial-input 1.0.0

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

@@ -0,0 +1,338 @@
+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]*"
+      inputmode="numeric"
+      class="phone-input"
+      [placeholder]="placeholder"
+      [(ngModel)]="phoneNumber"
+      [ngClass]="{ 'error-border': isInvalid }"
+      (input)="onPhoneInput()"
+      (keypress)="allowOnlyNumbers($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)
+    );
+  }
+
+  selectCountry(country: any) {
+    this.selectedCountry = country;
+    this.searchTerm = '';
+    this.countriesList = countries;
+    this.dropdownOpen = false;
+    this.emitPhoneChange();
+  }
+
+  onPhoneInput() {
+    this.emitPhoneChange();
+  }
+
+  private emitPhoneChange() {
+    const digitsOnly = this.phoneNumber.replace(/\D/g, '');
+    const length = digitsOnly.length;
+
+    const expectedLength = this.selectedCountry?.phoneLength;
+
+    if (expectedLength) {
+      this.isInvalid = length !== expectedLength;
+    } else {
+      // fallback validation
+      this.isInvalid = length < 7 || length > 12;
+    }
+
+    const fullPhone = this.selectedCountry.dialCode + this.phoneNumber;
+
+    const structuredValue = {
+      e164Number: fullPhone,
+      nationalNumber: this.phoneNumber,
+      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;
+  }
+  allowOnlyNumbers(event: KeyboardEvent) {
+  const charCode = event.charCode;
+
+  // Allow only digits (0–9)
+  if (charCode < 48 || charCode > 57) {
+    event.preventDefault();
+  }
+}
+
+}

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,16 @@
+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/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of phone-input
+ */
+export * from './lib/phone-input.component';
+export * from './lib/phone-input.module';

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

@@ -0,0 +1,15 @@
+{
+  "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

@@ -0,0 +1,10 @@
+/* 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

@@ -0,0 +1,14 @@
+/* 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

@@ -0,0 +1,33 @@
+/* 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"
+
+  }
+}