country-data-filter 1.1.2 → 1.3.0

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

@@ -0,0 +1,224 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  AbstractControl,
+  FormControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { SelectModule } from 'primeng/select';
+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,
+  SelectProps,
+  CountryKey,
+} from '../location-picker.types';
+
+/**
+ * Location picker cascade component for PrimeNG v18+.
+ *
+ * Uses `<p-select>` from `primeng/select` — required for PrimeNG v20 which
+ * removed the old `<p-dropdown>` / `primeng/dropdown`.
+ * For PrimeNG v17–v19, use `LocationPickerComponent` from `../dropdown` instead.
+ */
+@Component({
+  selector: 'cdf-location-picker-select',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, SelectModule],
+  templateUrl: './location-picker.component.html',
+  styleUrls: ['../location-picker.component.css'],
+})
+export class LocationPickerSelectComponent 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() countrySelectProps:  SelectProps = {};
+  @Input() provinceSelectProps: SelectProps = {};
+  @Input() districtSelectProps: SelectProps = {};
+  @Input() citySelectProps:     SelectProps = {};
+
+  // ── 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 {
+    this.showCity     = !!this.cityControl;
+    this.showDistrict = !!this.districtControl || this.showCity;
+    this.showProvince = !!this.provinceControl || this.showDistrict;
+
+    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);
+
+    const mappedValueToCode = new Map<string, string>(
+      this.svc.getCountries().map(c => [
+        (c as any)[this.countryValueKey] as string,
+        c.code,
+      ])
+    );
+    const codeToMappedValue = new Map<string, string>(
+      this.svc.getCountries().map(c => [
+        c.code,
+        (c as any)[this.countryValueKey] as string,
+      ])
+    );
+
+    const rawCode = (val: string | null): string | null =>
+      val ? (mappedValueToCode.get(val) ?? val) : null;
+
+    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 });
+        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([]);
+      }),
+    );
+
+    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 });
+        if (name && !this._country.value) {
+          const code = this.svc.getCountryByProvince(name);
+          if (code) {
+            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([]);
+      }),
+    );
+
+    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([]);
+      }),
+    );
+
+    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/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" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const bamyan = {
     bamyanCity: {
       name: "Bamyan City",
       cities: [
-        { name: "Bamyan", postalCode: "", type: "Town" },
+        { name: "Bamyan", postalCode: "1701", type: "Town" },
       ],
     },
     panjab: {
       name: "Panjab",
       cities: [
-        { name: "Panjab", postalCode: "", type: "Town" },
+        { name: "Panjab", postalCode: "1703", type: "Town" },
       ],
     },
     shibar: {
       name: "Shibar",
       cities: [
-        { name: "Shibar", postalCode: "", type: "Town" },
+        { name: "Shibar", postalCode: "1707", type: "Town" },
       ],
     },
   },

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

@@ -4,13 +4,13 @@ export const daykundi = {
     kajran: {
       name: "Kajran",
       cities: [
-        { name: "Kajran", postalCode: "", type: "Town" },
+        { name: "Kajran", postalCode: "2401", type: "Town" },
       ],
     },
     nili: {
       name: "Nili",
       cities: [
-        { name: "Nili", postalCode: "", type: "Town" },
+        { name: "Nili", postalCode: "2401", type: "Town" },
       ],
     },
   },

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

@@ -4,13 +4,13 @@ export const farah = {
     balaBoluk: {
       name: "Bala Boluk",
       cities: [
-        { name: "Bala Boluk", postalCode: "", type: "Town" },
+        { name: "Bala Boluk", postalCode: "2901", type: "Town" },
       ],
     },
     farahCity: {
       name: "Farah City",
       cities: [
-        { name: "Farah", postalCode: "", type: "City" },
+        { name: "Farah", postalCode: "2901", type: "City" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const faryab = {
     almar: {
       name: "Almar",
       cities: [
-        { name: "Almar", postalCode: "", type: "Town" },
+        { name: "Almar", postalCode: "0501", type: "Town" },
       ],
     },
     andkhoy: {
       name: "Andkhoy",
       cities: [
-        { name: "Andkhoy", postalCode: "", type: "Town" },
+        { name: "Andkhoy", postalCode: "0503", type: "Town" },
       ],
     },
     maymana: {
       name: "Maymana",
       cities: [
-        { name: "Maymana", postalCode: "", type: "City" },
+        { name: "Maymana", postalCode: "0501", type: "City" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const ghazni = {
     andar: {
       name: "Andar",
       cities: [
-        { name: "Andar", postalCode: "", type: "Town" },
+        { name: "Andar", postalCode: "3101", type: "Town" },
       ],
     },
     ghazniCity: {
       name: "Ghazni City",
       cities: [
-        { name: "Ghazni", postalCode: "", type: "City" },
+        { name: "Ghazni", postalCode: "3101", type: "City" },
       ],
     },
     muqur: {
       name: "Muqur",
       cities: [
-        { name: "Muqur", postalCode: "", type: "Town" },
+        { name: "Muqur", postalCode: "2701", type: "Town" },
       ],
     },
   },

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

@@ -4,13 +4,13 @@ export const ghor = {
     ferozKoh: {
       name: "Feroz Koh",
       cities: [
-        { name: "Feroz Koh", postalCode: "", type: "City" },
+        { name: "Feroz Koh", postalCode: "4001", type: "City" },
       ],
     },
     tulak: {
       name: "Tulak",
       cities: [
-        { name: "Tulak", postalCode: "", type: "Town" },
+        { name: "Tulak", postalCode: "4005", type: "Town" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const helmand = {
     lashkarGah: {
       name: "Lashkar Gah",
       cities: [
-        { name: "Lashkar Gah", postalCode: "", type: "City" },
+        { name: "Lashkar Gah", postalCode: "3901", type: "City" },
       ],
     },
     marjah: {
       name: "Marjah",
       cities: [
-        { name: "Marjah", postalCode: "", type: "Town" },
+        { name: "Marjah", postalCode: "3905", type: "Town" },
       ],
     },
     sangin: {
       name: "Sangin",
       cities: [
-        { name: "Sangin", postalCode: "", type: "Town" },
+        { name: "Sangin", postalCode: "3909", type: "Town" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const herat = {
     guzara: {
       name: "Guzara",
       cities: [
-        { name: "Guzara", postalCode: "", type: "Town" },
+        { name: "Guzara", postalCode: "3003", type: "Town" },
       ],
     },
     heratCity: {
       name: "Herat City",
       cities: [
-        { name: "Herat", postalCode: "", type: "City" },
+        { name: "Herat", postalCode: "3001", type: "City" },
       ],
     },
     injil: {
       name: "Injil",
       cities: [
-        { name: "Injil", postalCode: "", type: "Town" },
+        { name: "Injil", postalCode: "3005", type: "Town" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const jowzjan = {
     aqcha: {
       name: "Aqcha",
       cities: [
-        { name: "Aqcha", postalCode: "", type: "Town" },
+        { name: "Aqcha", postalCode: "1905", type: "Town" },
       ],
     },
     khanaqa: {
       name: "Khanaqa",
       cities: [
-        { name: "Khanaqa", postalCode: "", type: "Town" },
+        { name: "Khanaqa", postalCode: "1907", type: "Town" },
       ],
     },
     sheberghan: {
       name: "Sheberghan",
       cities: [
-        { name: "Sheberghan", postalCode: "", type: "City" },
+        { name: "Sheberghan", postalCode: "1901", type: "City" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const kabul = {
     bagrami: {
       name: "Bagrami",
       cities: [
-        { name: "Bagrami", postalCode: "", type: "Town" },
+        { name: "Bagrami", postalCode: "1005", type: "Town" },
       ],
     },
     kabulCity: {
       name: "Kabul City",
       cities: [
-        { name: "Kabul", postalCode: "", type: "City" },
+        { name: "Kabul", postalCode: "1001", type: "City" },
       ],
     },
     paghman: {
       name: "Paghman",
       cities: [
-        { name: "Paghman", postalCode: "", type: "Town" },
+        { name: "Paghman", postalCode: "1003", type: "Town" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const kandahar = {
     daman: {
       name: "Daman",
       cities: [
-        { name: "Daman", postalCode: "", type: "Town" },
+        { name: "Daman", postalCode: "3803", type: "Town" },
       ],
     },
     kandaharCity: {
       name: "Kandahar City",
       cities: [
-        { name: "Kandahar", postalCode: "", type: "City" },
+        { name: "Kandahar", postalCode: "3801", type: "City" },
       ],
     },
     panjwai: {
       name: "Panjwai",
       cities: [
-        { name: "Panjwai", postalCode: "", type: "Town" },
+        { name: "Panjwai", postalCode: "3809", type: "Town" },
       ],
     },
   },

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

@@ -4,13 +4,13 @@ export const kapisa = {
     kohBand: {
       name: "Koh Band",
       cities: [
-        { name: "Koh Band", postalCode: "", type: "Town" },
+        { name: "Koh Band", postalCode: "1203", type: "Town" },
       ],
     },
     mahmudERaqi: {
       name: "Mahmud-e Raqi",
       cities: [
-        { name: "Mahmud-e Raqi", postalCode: "", type: "City" },
+        { name: "Mahmud-e Raqi", postalCode: "1201", type: "City" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const khost = {
     khost: {
       name: "Khost City",
       cities: [
-        { name: "Khost", postalCode: "", type: "City" },
+        { name: "Khost", postalCode: "2501", type: "City" },
       ],
     },
     sabari: {
       name: "Sabari",
       cities: [
-        { name: "Sabari", postalCode: "", type: "Town" },
+        { name: "Sabari", postalCode: "2503", type: "Town" },
       ],
     },
     tani: {
       name: "Tani",
       cities: [
-        { name: "Tani", postalCode: "", type: "Town" },
+        { name: "Tani", postalCode: "2507", type: "Town" },
       ],
     },
   },

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

@@ -4,19 +4,19 @@ export const kunar = {
     asadabad: {
       name: "Asadabad",
       cities: [
-        { name: "Asadabad", postalCode: "", type: "City" },
+        { name: "Asadabad", postalCode: "2001", type: "City" },
       ],
     },
     khasKunar: {
       name: "Khas Kunar",
       cities: [
-        { name: "Khas Kunar", postalCode: "", type: "Town" },
+        { name: "Khas Kunar", postalCode: "2005", type: "Town" },
       ],
     },
     nari: {
       name: "Nari",
       cities: [
-        { name: "Nari", postalCode: "", type: "Town" },
+        { name: "Nari", postalCode: "2007", type: "Town" },
       ],
     },
   },