country-data-filter 1.1.2 → 1.2.0

package/package.json

@@ -1,26 +1,115 @@
 {
   "name": "country-data-filter",
-  "version": "1.1.2",
-  "description": "A package to filter country data",
+  "version": "1.2.0",
+  "description": "Geographical data for 190 countries — provinces, districts, cities and postal codes. Includes React (Ant Design / MUI) and Angular (PrimeNG) location picker cascade components with full TypeScript support.",
   "main": "src/index.js",
   "types": "src/index.d.ts",
+  "exports": {
+    ".": "./src/index.js",
+    "./angular": "./src/angular/index.ts",
+    "./react": "./src/react/index.ts",
+    "./react/antd": "./src/react/adapters/antd.tsx",
+    "./react/mui": "./src/react/adapters/mui.tsx"
+  },
   "scripts": {
     "test": "jest"
   },
   "devDependencies": {
+    "@types/react": "^18.3.29",
+    "@types/react-dom": "^18.3.7",
     "jest": "^29.0.0",
     "typescript": "^5.0.0"
   },
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/forms": ">=17.0.0",
+    "antd": ">=5.0.0",
+    "primeng": ">=17.0.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "rxjs": ">=7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/common": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@angular/forms": {
+      "optional": true
+    },
+    "primeng": {
+      "optional": true
+    },
+    "rxjs": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "antd": {
+      "optional": true
+    }
+  },
+  "homepage": "https://github.com/knnadeera/country-data#readme",
+  "bugs": {
+    "url": "https://github.com/knnadeera/country-data/issues"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/knnadeera/country-data.git"
   },
   "keywords": [
     "country",
-    "data",
+    "country-data",
+    "country-list",
+    "country-picker",
+    "country-selector",
+    "country-dropdown",
+    "country-code",
+    "iso-3166",
     "province",
-    "filter",
-    "city"
+    "state",
+    "district",
+    "city",
+    "postal-code",
+    "zip-code",
+    "postcode",
+    "phone-code",
+    "dialing-code",
+    "currency-code",
+    "geography",
+    "geolocation",
+    "location",
+    "location-picker",
+    "location-selector",
+    "location-cascade",
+    "address",
+    "address-form",
+    "address-picker",
+    "cascade",
+    "cascade-dropdown",
+    "cascade-select",
+    "cascader",
+    "dropdown",
+    "select",
+    "autocomplete",
+    "react",
+    "react-component",
+    "antd",
+    "ant-design",
+    "mui",
+    "material-ui",
+    "angular",
+    "angular-component",
+    "primeng",
+    "typescript",
+    "worldwide"
   ],
   "author": "K N Nadeera",
   "license": "ISC",
@@ -31,6 +120,11 @@
     "src/functions/*.js",
     "src/functions/**/*.js",
     "src/countries/*.js",
-    "src/countries/**/*.js"
+    "src/countries/**/*.js",
+    "src/angular/**/*.ts",
+    "src/angular/**/*.html",
+    "src/angular/**/*.css",
+    "src/react/**/*.ts",
+    "src/react/**/*.tsx"
   ]
 }

package/src/angular/index.ts

@@ -0,0 +1,10 @@
+export { LocationPickerComponent } from './location-picker.component';
+export { LocationPickerService } from './location-picker.service';
+export type {
+  LocationOption,
+  CountryChangeEvent,
+  NameChangeEvent,
+  CityChangeEvent,
+  DropdownProps,
+  CountryKey,
+} from './location-picker.types';

package/src/angular/location-picker.component.css

@@ -0,0 +1,13 @@
+.cdf-location-picker {
+  display: flex;
+  gap: 8px;
+}
+
+.cdf-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.cdf-vertical {
+  flex-direction: column;
+}

package/src/angular/location-picker.component.html

@@ -0,0 +1,62 @@
+<div [class]="'cdf-location-picker cdf-' + layout">
+
+  <!-- Country dropdown — always shown -->
+  <p-dropdown
+    [formControl]="_country"
+    [options]="(countryOptions$ | async) ?? []"
+    [filter]="true"
+    [placeholder]="countryDropdownProps['placeholder'] || 'Select Country'"
+    [styleClass]="countryDropdownProps['styleClass']"
+    [showClear]="countryDropdownProps['showClear'] ?? true"
+    [appendTo]="countryDropdownProps['appendTo'] || 'body'"
+    [pt]="countryDropdownProps['pt']"
+    optionLabel="label"
+    optionValue="value">
+  </p-dropdown>
+
+  <!-- Province dropdown -->
+  <p-dropdown
+    *ngIf="showProvince"
+    [formControl]="_province"
+    [options]="(provinceOptions$ | async) ?? []"
+    [filter]="true"
+    [placeholder]="provinceDropdownProps['placeholder'] || _provincePlaceholder"
+    [styleClass]="provinceDropdownProps['styleClass']"
+    [showClear]="provinceDropdownProps['showClear'] ?? true"
+    [appendTo]="provinceDropdownProps['appendTo'] || 'body'"
+    [pt]="provinceDropdownProps['pt']"
+    optionLabel="label"
+    optionValue="value">
+  </p-dropdown>
+
+  <!-- District dropdown -->
+  <p-dropdown
+    *ngIf="showDistrict"
+    [formControl]="_district"
+    [options]="(districtOptions$ | async) ?? []"
+    [filter]="true"
+    [placeholder]="districtDropdownProps['placeholder'] || _districtPlaceholder"
+    [styleClass]="districtDropdownProps['styleClass']"
+    [showClear]="districtDropdownProps['showClear'] ?? true"
+    [appendTo]="districtDropdownProps['appendTo'] || 'body'"
+    [pt]="districtDropdownProps['pt']"
+    optionLabel="label"
+    optionValue="value">
+  </p-dropdown>
+
+  <!-- City dropdown -->
+  <p-dropdown
+    *ngIf="showCity"
+    [formControl]="_city"
+    [options]="(cityOptions$ | async) ?? []"
+    [filter]="true"
+    [placeholder]="cityDropdownProps['placeholder'] || 'Select City'"
+    [styleClass]="cityDropdownProps['styleClass']"
+    [showClear]="cityDropdownProps['showClear'] ?? true"
+    [appendTo]="cityDropdownProps['appendTo'] || 'body'"
+    [pt]="cityDropdownProps['pt']"
+    optionLabel="label"
+    optionValue="value">
+  </p-dropdown>
+
+</div>

package/src/angular/location-picker.component.ts

@@ -0,0 +1,229 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  AbstractControl,
+  FormControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { DropdownModule } from 'primeng/dropdown';
+import { Observable, of, Subject } from 'rxjs';
+import { startWith, switchMap, tap, takeUntil } from 'rxjs/operators';
+
+import { LocationPickerService } from './location-picker.service';
+import {
+  LocationOption,
+  CountryChangeEvent,
+  NameChangeEvent,
+  CityChangeEvent,
+  DropdownProps,
+  CountryKey,
+} from './location-picker.types';
+
+@Component({
+  selector: 'cdf-location-picker',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, DropdownModule],
+  templateUrl: './location-picker.component.html',
+  styleUrls: ['./location-picker.component.css'],
+})
+export class LocationPickerComponent implements OnInit, OnDestroy {
+  // ── External reactive-form controls (all optional) ──────────────────────────
+  @Input() countryControl?: AbstractControl;
+  @Input() provinceControl?: AbstractControl;
+  @Input() districtControl?: AbstractControl;
+  @Input() cityControl?: AbstractControl;
+
+  // ── PrimeNG prop passthrough bags ────────────────────────────────────────────
+  @Input() countryDropdownProps: DropdownProps = {};
+  @Input() provinceDropdownProps: DropdownProps = {};
+  @Input() districtDropdownProps: DropdownProps = {};
+  @Input() cityDropdownProps: DropdownProps = {};
+
+  // ── Country option key selectors ─────────────────────────────────────────────
+  /** Which field of the country record to use as the dropdown label. Default: 'name' */
+  @Input() countryLabelKey: CountryKey = 'name';
+  /** Which field of the country record to use as the option value. Default: 'code' */
+  @Input() countryValueKey: CountryKey = 'code';
+
+  // ── Layout ───────────────────────────────────────────────────────────────────
+  @Input() layout: 'horizontal' | 'vertical' = 'vertical';
+
+  // ── Event outputs (for users not using reactive forms) ───────────────────────
+  @Output() countryChange  = new EventEmitter<CountryChangeEvent>();
+  @Output() provinceChange = new EventEmitter<NameChangeEvent>();
+  @Output() districtChange = new EventEmitter<NameChangeEvent>();
+  @Output() cityChange     = new EventEmitter<CityChangeEvent>();
+
+  // ── Internal fallback controls ───────────────────────────────────────────────
+  private _internalCountry  = new FormControl<string | null>(null);
+  private _internalProvince = new FormControl<string | null>(null);
+  private _internalDistrict = new FormControl<string | null>(null);
+  private _internalCity     = new FormControl<string | null>(null);
+
+  get _country()  { return (this.countryControl  ?? this._internalCountry)  as FormControl; }
+  get _province() { return (this.provinceControl ?? this._internalProvince) as FormControl; }
+  get _district() { return (this.districtControl ?? this._internalDistrict) as FormControl; }
+  get _city()     { return (this.cityControl     ?? this._internalCity)     as FormControl; }
+
+  // ── Visibility flags ─────────────────────────────────────────────────────────
+  showProvince = false;
+  showDistrict = false;
+  showCity = false;
+
+  // ── Dynamic placeholder text (uses selected country's labels) ────────────────
+  _provincePlaceholder = 'Select Province';
+  _districtPlaceholder = 'Select District';
+
+  // ── Option streams ───────────────────────────────────────────────────────────
+  countryOptions$!:  Observable<LocationOption[]>;
+  provinceOptions$!: Observable<LocationOption[]>;
+  districtOptions$!: Observable<LocationOption[]>;
+  cityOptions$!:     Observable<LocationOption[]>;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private svc: LocationPickerService) {}
+
+  ngOnInit(): void {
+    // Compute which dropdowns to show
+    this.showCity     = !!this.cityControl;
+    this.showDistrict = !!this.districtControl || this.showCity;
+    this.showProvince = !!this.provinceControl || this.showDistrict;
+
+    // ── Countries (static, sorted A-Z) ──────────────────────────────────────
+    const allCountries = this.svc.getCountries()
+      .map(c => ({
+        label: (c as any)[this.countryLabelKey] as string,
+        value: (c as any)[this.countryValueKey] as string,
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label));
+    this.countryOptions$ = of(allCountries);
+
+    // Reverse map: mapped option value → raw country code (used for data lookups)
+    const mappedValueToCode = new Map<string, string>(
+      this.svc.getCountries().map(c => [
+        (c as any)[this.countryValueKey] as string,
+        c.code,
+      ])
+    );
+    // Forward map: raw code → mapped option value (used when auto-filling country)
+    const codeToMappedValue = new Map<string, string>(
+      this.svc.getCountries().map(c => [
+        c.code,
+        (c as any)[this.countryValueKey] as string,
+      ])
+    );
+
+    // Helper: get raw code from whatever value is stored in the country control
+    const rawCode = (val: string | null): string | null =>
+      val ? (mappedValueToCode.get(val) ?? val) : null;
+
+    // ── Province options (reload when country changes) ───────────────────────
+    this.provinceOptions$ = this._country.valueChanges.pipe(
+      takeUntil(this.destroy$),
+      startWith(this._country.value),
+      tap((val: string | null) => {
+        this._province.setValue(null, { emitEvent: false });
+        this._district.setValue(null, { emitEvent: false });
+        this._city.setValue(null, { emitEvent: false });
+        // Update placeholders from the selected country's labels
+        const code = rawCode(val);
+        if (code) {
+          const country = this.svc.getCountries().find(c => c.code === code);
+          if (country) {
+            this._provincePlaceholder = `Select ${country.provinceLabel ?? 'Province'}`;
+            this._districtPlaceholder = `Select ${country.districtLabel ?? 'District'}`;
+          }
+        } else {
+          this._provincePlaceholder = 'Select Province';
+          this._districtPlaceholder = 'Select District';
+        }
+      }),
+      switchMap((val: string | null) => {
+        const code = rawCode(val);
+        return code
+          ? of(this.svc.getProvinces(code).map(p => ({ label: p, value: p })))
+          : of([]);
+      }),
+    );
+
+    // ── District options (reload when province changes; auto-fill country) ───
+    this.districtOptions$ = this._province.valueChanges.pipe(
+      takeUntil(this.destroy$),
+      startWith(this._province.value),
+      tap((name: string | null) => {
+        this._district.setValue(null, { emitEvent: false });
+        this._city.setValue(null, { emitEvent: false });
+        // Reverse lookup: if country not set, auto-fill from province name
+        if (name && !this._country.value) {
+          const code = this.svc.getCountryByProvince(name);
+          if (code) {
+            // Set the mapped value (not the raw code) so the control stays consistent
+            this._country.setValue(codeToMappedValue.get(code) ?? code);
+          }
+        }
+      }),
+      switchMap((name: string | null) => {
+        const code = rawCode(this._country.value);
+        return name && code
+          ? of(this.svc.getDistricts(code, name).map(d => ({ label: d, value: d })))
+          : of([]);
+      }),
+    );
+
+    // ── City options (reload when district changes) ───────────────────────────
+    this.cityOptions$ = this._district.valueChanges.pipe(
+      takeUntil(this.destroy$),
+      startWith(this._district.value),
+      tap(() => this._city.setValue(null, { emitEvent: false })),
+      switchMap((dist: string | null) => {
+        const code = rawCode(this._country.value);
+        const prov = this._province.value;
+        return dist && code && prov
+          ? of(this.svc.getCities(code, prov, dist).map(c => ({ label: c, value: c })))
+          : of([]);
+      }),
+    );
+
+    // ── Emit output events ───────────────────────────────────────────────────
+    this._country.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((v: string | null) => {
+        const code = rawCode(v);
+        const country = code ? (this.svc.getCountries().find(c => c.code === code) ?? null) : null;
+        this.countryChange.emit({ formValue: v, country });
+      });
+
+    this._province.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((v: string | null) => this.provinceChange.emit({ name: v }));
+
+    this._district.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((v: string | null) => this.districtChange.emit({ name: v }));
+
+    this._city.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((v: string | null) => {
+        const code = rawCode(this._country.value);
+        const prov = this._province.value;
+        const dist = this._district.value;
+        const raw = (code && prov && dist && v)
+          ? this.svc.getCityRaw(code, prov, dist, v)
+          : null;
+        this.cityChange.emit({ name: v, postalCode: raw?.postalCode ?? '', type: raw?.type });
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/angular/location-picker.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import {
+  getCountries,
+  getDataByCountry,
+  getDataByProvince,
+  getDataByCountryProvince,
+  getDataByCountryProvinceDistrict,
+} from '../index';
+import { Country } from '../index';
+
+@Injectable({ providedIn: 'root' })
+export class LocationPickerService {
+  private _countries: Country[] | null = null;
+
+  getCountries(): Country[] {
+    if (!this._countries) {
+      this._countries = getCountries() as Country[];
+    }
+    return this._countries;
+  }
+
+  getProvinces(countryCode: string): string[] {
+    const data = getDataByCountry(countryCode);
+    return data?.provinces ?? [];
+  }
+
+  getDistricts(countryCode: string, provinceName: string): string[] {
+    const data = getDataByCountryProvince(countryCode, provinceName);
+    return data?.districts ?? [];
+  }
+
+  getCities(countryCode: string, provinceName: string, districtName: string): string[] {
+    const data = getDataByCountryProvinceDistrict(countryCode, provinceName, districtName);
+    return (data?.cities ?? []).map((c: any) => c.name ?? c);
+  }
+
+  getCityRaw(countryCode: string, provinceName: string, districtName: string, cityName: string): { name: string; postalCode: string; type?: string } | null {
+    const data = getDataByCountryProvinceDistrict(countryCode, provinceName, districtName);
+    const city = (data?.cities ?? []).find((c: any) => (c.name ?? c) === cityName);
+    if (!city) return null;
+    return typeof city === 'string'
+      ? { name: city, postalCode: '' }
+      : { name: city.name, postalCode: city.postalCode ?? '', type: city.type };
+  }
+
+  /** Reverse lookup: province name → country code (for auto-fill when province is selected first) */
+  getCountryByProvince(provinceName: string): string | null {
+    const result = getDataByProvince(provinceName);
+    return result?.countries?.[0]?.code ?? null;
+  }
+}

package/src/angular/location-picker.types.ts

@@ -0,0 +1,33 @@
+import { Country } from '../index';
+
+/** Selectable fields of a country record for use as option label or value */
+export type CountryKey = 'name' | 'code' | 'currency' | 'countryCode';
+
+export interface LocationOption<T extends string = string> {
+  label: string;
+  value: T;
+}
+
+/**
+ * Emitted by `(countryChange)`.
+ * `formValue` is what was written to the FormControl (= country[countryValueKey]).
+ * `country` is always the full Country object.
+ */
+export interface CountryChangeEvent {
+  formValue: string | null;
+  country: Country | null;
+}
+
+/** Emitted by `(provinceChange)` and `(districtChange)` — name is the full data. */
+export interface NameChangeEvent {
+  name: string | null;
+}
+
+/** Emitted by `(cityChange)` — full city data including postalCode and type. */
+export interface CityChangeEvent {
+  name: string | null;
+  postalCode: string;
+  type?: string;
+}
+
+export type DropdownProps = Record<string, unknown>;

package/src/countries/AE/district/abuDhabi.js

@@ -4,31 +4,31 @@ export const abuDhabi = {
     abuDhabiCity: {
       name: "Abu Dhabi City",
       cities: [
-        { name: "Abu Dhabi", postalCode: "", type: "City" },
+        { name: "Abu Dhabi", postalCode: "20000", type: "City" },
       ],
     },
     alAin: {
       name: "Al Ain",
       cities: [
-        { name: "Al Ain", postalCode: "", type: "City" },
+        { name: "Al Ain", postalCode: "21001", type: "City" },
       ],
     },
     alDhafra: {
       name: "Al Dhafra",
       cities: [
-        { name: "Madinat Zayed", postalCode: "", type: "Town" },
+        { name: "Madinat Zayed", postalCode: "23501", type: "Town" },
       ],
     },
     khalifaCity: {
       name: "Khalifa City",
       cities: [
-        { name: "Khalifa City", postalCode: "", type: "Town" },
+        { name: "Khalifa City", postalCode: "20009", type: "Town" },
       ],
     },
     muhammadBinZayed: {
       name: "Mohammed Bin Zayed City",
       cities: [
-        { name: "Mohammed Bin Zayed City", postalCode: "", type: "Town" },
+        { name: "Mohammed Bin Zayed City", postalCode: "20011", type: "Town" },
       ],
     },
   },

package/src/countries/AF/district/badakhshan.js

@@ -4,19 +4,19 @@ export const badakhshan = {
     fayzabad: {
       name: "Fayzabad",
       cities: [
-        { name: "Fayzabad", postalCode: "", type: "City" },
+        { name: "Fayzabad", postalCode: "3601", type: "City" },
       ],
     },
     ishkashim: {
       name: "Ishkashim",
       cities: [
-        { name: "Ishkashim", postalCode: "", type: "Town" },
+        { name: "Ishkashim", postalCode: "3611", type: "Town" },
       ],
     },
     wakhan: {
       name: "Wakhan",
       cities: [
-        { name: "Wakhan", postalCode: "", type: "Town" },
+        { name: "Wakhan", postalCode: "3615", type: "Town" },
       ],
     },
   },

package/src/countries/AF/district/badghis.js

@@ -4,13 +4,13 @@ export const badghis = {
     muqurBadghis: {
       name: "Muqur",
       cities: [
-        { name: "Muqur", postalCode: "", type: "Town" },
+        { name: "Muqur", postalCode: "2701", type: "Town" },
       ],
     },
     qalaINow: {
       name: "Qala Now",
       cities: [
-        { name: "Qala Now", postalCode: "", type: "City" },
+        { name: "Qala Now", postalCode: "2701", type: "City" },
       ],
     },
   },

package/src/countries/AF/district/baghlan.js

@@ -4,19 +4,19 @@ export const baghlan = {
     baghlanTown: {
       name: "Baghlan",
       cities: [
-        { name: "Baghlan", postalCode: "", type: "Town" },
+        { name: "Baghlan", postalCode: "3201", type: "Town" },
       ],
     },
     dohBabak: {
       name: "Doh Baba",
       cities: [
-        { name: "Doh Baba", postalCode: "", type: "Town" },
+        { name: "Doh Baba", postalCode: "3211", type: "Town" },
       ],
     },
     pulEKhumri: {
       name: "Pul-e Khumri",
       cities: [
-        { name: "Pul-e Khumri", postalCode: "", type: "City" },
+        { name: "Pul-e Khumri", postalCode: "3501", type: "City" },
       ],
     },
   },

package/src/countries/AF/district/balkh.js

@@ -4,19 +4,19 @@ export const balkh = {
     balkh: {
       name: "Balkh",
       cities: [
-        { name: "Balkh", postalCode: "", type: "Town" },
+        { name: "Balkh", postalCode: "1901", type: "Town" },
       ],
     },
     charbolak: {
       name: "Charbolak",
       cities: [
-        { name: "Charbolak", postalCode: "", type: "Town" },
+        { name: "Charbolak", postalCode: "1903", type: "Town" },
       ],
     },
     mazarISharif: {
       name: "Mazar-i-Sharif",
       cities: [
-        { name: "Mazar-i-Sharif", postalCode: "", type: "City" },
+        { name: "Mazar-i-Sharif", postalCode: "1901", type: "City" },
       ],
     },
   },