iss-ctrl 0.0.5 → 0.0.7

package/projects/iss/src/components/controls/mobile/country.ts

@@ -0,0 +1,11 @@
+import { ISO2 } from "./iso2.type";
+
+export interface Country {
+  name: string;
+  code: ISO2;
+  dailCode: string;
+  areaCodes?: string[];
+  priority: number;
+  order: number;
+  placeholder: string;
+}

package/projects/iss/src/components/controls/mobile/iso2.type.ts

@@ -0,0 +1,244 @@
+export type ISO2 =
+  "AF" |
+  "AL" |
+  "DZ" |
+  "AS" |
+  "AD" |
+  "AO" |
+  "AI" |
+  "AG" |
+  "AR" |
+  "AM" |
+  "AW" |
+  "AU" |
+  "AT" |
+  "AZ" |
+  "BS" |
+  "BH" |
+  "BD" |
+  "BB" |
+  "BY" |
+  "BE" |
+  "BZ" |
+  "BJ" |
+  "BM" |
+  "BT" |
+  "BO" |
+  "BA" |
+  "BW" |
+  "BR" |
+  "IO" |
+  "VG" |
+  "BN" |
+  "BG" |
+  "BF" |
+  "BI" |
+  "KH" |
+  "CM" |
+  "CA" |
+  "CV" |
+  "BQ" |
+  "KY" |
+  "CF" |
+  "TD" |
+  "CL" |
+  "CN" |
+  "CX" |
+  "CC" |
+  "CO" |
+  "KM" |
+  "CD" |
+  "CG" |
+  "CK" |
+  "CR" |
+  "CI" |
+  "HR" |
+  "CU" |
+  "CW" |
+  "CY" |
+  "CZ" |
+  "DK" |
+  "DJ" |
+  "DM" |
+  "DO" |
+  "EC" |
+  "EG" |
+  "SV" |
+  "GQ" |
+  "ER" |
+  "EE" |
+  "ET" |
+  "FK" |
+  "FO" |
+  "FJ" |
+  "FI" |
+  "FR" |
+  "GF" |
+  "PF" |
+  "GA" |
+  "GM" |
+  "GE" |
+  "DE" |
+  "GH" |
+  "GI" |
+  "GR" |
+  "GL" |
+  "GD" |
+  "GP" |
+  "GU" |
+  "GT" |
+  "GG" |
+  "GN" |
+  "GW" |
+  "GY" |
+  "HT" |
+  "HN" |
+  "HK" |
+  "HU" |
+  "IS" |
+  "IN" |
+  "ID" |
+  "IR" |
+  "IQ" |
+  "IE" |
+  "IM" |
+  "IL" |
+  "IT" |
+  "JM" |
+  "JP" |
+  "JE" |
+  "JO" |
+  "KZ" |
+  "KE" |
+  "KI" |
+  "XK" |
+  "KW" |
+  "KG" |
+  "LA" |
+  "LV" |
+  "LB" |
+  "LS" |
+  "LR" |
+  "LY" |
+  "LI" |
+  "LT" |
+  "LU" |
+  "MO" |
+  "MK" |
+  "MG" |
+  "MW" |
+  "MY" |
+  "MV" |
+  "ML" |
+  "MT" |
+  "MH" |
+  "MQ" |
+  "MR" |
+  "MU" |
+  "YT" |
+  "MX" |
+  "FM" |
+  "MD" |
+  "MC" |
+  "MN" |
+  "ME" |
+  "MS" |
+  "MA" |
+  "MZ" |
+  "MM" |
+  "NA" |
+  "NR" |
+  "NP" |
+  "NL" |
+  "NC" |
+  "NZ" |
+  "NI" |
+  "NE" |
+  "NG" |
+  "NU" |
+  "NF" |
+  "KP" |
+  "MP" |
+  "NO" |
+  "OM" |
+  "PK" |
+  "PW" |
+  "PS" |
+  "PA" |
+  "PG" |
+  "PY" |
+  "PE" |
+  "PH" |
+  "PL" |
+  "PT" |
+  "PR" |
+  "QA" |
+  "RE" |
+  "RO" |
+  "RU" |
+  "RW" |
+  "BL" |
+  "SH" |
+  "KN" |
+  "LC" |
+  "MF" |
+  "PM" |
+  "VC" |
+  "WS" |
+  "SM" |
+  "ST" |
+  "SA" |
+  "SN" |
+  "RS" |
+  "SC" |
+  "SL" |
+  "SG" |
+  "SX" |
+  "SK" |
+  "SI" |
+  "SB" |
+  "SO" |
+  "ZA" |
+  "KR" |
+  "SS" |
+  "ES" |
+  "LK" |
+  "SD" |
+  "SR" |
+  "SJ" |
+  "SZ" |
+  "SE" |
+  "CH" |
+  "SY" |
+  "TW" |
+  "TJ" |
+  "TZ" |
+  "TH" |
+  "TL" |
+  "TG" |
+  "TK" |
+  "TO" |
+  "TT" |
+  "TN" |
+  "TR" |
+  "TM" |
+  "TC" |
+  "TV" |
+  "VI" |
+  "UG" |
+  "UA" |
+  "AE" |
+  "GB" |
+  "US" |
+  "UY" |
+  "UZ" |
+  "VU" |
+  "VA" |
+  "VE" |
+  "VN" |
+  "WF" |
+  "EH" |
+  "YE" |
+  "ZM" |
+  "ZW" |
+  "AX";

package/projects/iss/src/components/controls/mobile/mobile.control.ts

@@ -0,0 +1,222 @@
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+import { NgClass, NgOptimizedImage } from "@angular/common";
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, EffectRef, inject, input, InputSignal, OnDestroy, Signal, signal, WritableSignal } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { AbstractControl, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule, ValidationErrors, Validator } from "@angular/forms";
+import { MatFormField, MatPrefix } from "@angular/material/form-field";
+import { MatInput, MatInputModule } from "@angular/material/input";
+import { ControlBase } from "../base/control-base";
+import { COUNTRIES, DEFAULT_COUNTRY } from "./countries.const";
+import { Country } from "./country";
+import { ISO2 } from "./iso2.type";
+import { Mobile } from "./mobile";
+import { Phone } from "./phone";
+
+@Component({
+  selector: "iss-ctrl-mobile",
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    ReactiveFormsModule,
+    NgClass,
+    CdkConnectedOverlay,
+    CdkOverlayOrigin,
+    MatFormField,
+    MatInput,
+    MatPrefix,
+    NgOptimizedImage,
+    MatInputModule,
+  ],
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, useExisting: MobileControl, multi: true},
+    {provide: NG_VALIDATORS, useExisting: MobileControl, multi: true}
+  ],
+  template: `
+    <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
+        <img
+          ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
+          width="20"
+          height="20"
+          [alt]="selectedCountry().code.toLowerCase()"
+          class="country-flag--image"
+          [priority]="true"
+        >
+        <ds-icon icon="arrow-down" class="fs-12 fc-dark-gray"></ds-icon>
+      </div>
+      <input
+        matInput
+        type="tel"
+        autocomplete="off"
+        (blur)="markAsTouched()"
+        (keydown)="onInput($event)"
+        (input)="emit()"
+        [formControl]="ctrl"
+        [placeholder]="selectedCountry().placeholder"
+      />
+    </mat-form-field>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayHasBackdrop]="true"
+      (backdropClick)="closeCountryCodeMenu()"
+      [cdkConnectedOverlayGrowAfterOpen]="true"
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isOpen()"
+    >
+      <div class="country-dropdown bc-white box-shadow p-2">
+        <div class="search-container">
+          <mat-form-field>
+            <input matInput id="country-search-box" [formControl]="searchInput" (click)="$event.stopPropagation()" />
+          </mat-form-field>
+        </div>
+        <ul class="country-list">
+          @for (country of filteredCountries(); track $index) {
+            <li
+              #countryEl
+              [ngClass]="country.order > 1 ? 'preferredCounty'  : ''"
+              class="d-flex align-items-center gap-2 cursor-pointer p-2"
+              (click)="onSelectCountry(country)"
+            >
+              @defer (on viewport(countryEl)) {
+                <img ngSrc="./flags/{{country.code.toLowerCase()}}.svg" width="20" height="20" alt="" class="country-flag--image">
+              }
+              <span class="fs-12 fc-dark-gray">(+{{ country.dailCode }})</span>
+              <span class="fs-12 fc-black">{{ country.name }}</span>
+            </li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `,
+  styles: `
+    .country-flag {
+      border-inline-end: var(--input-border);
+      padding-inline-end: .5rem;
+      margin-inline-end: .5rem;
+      cursor: pointer;
+    }
+  `
+})
+export class MobileControl extends ControlBase implements OnDestroy, Validator {
+  phoneService: Phone = inject(Phone);
+  isOpen: WritableSignal<boolean> = signal(false);
+  selectedCountry: WritableSignal<Country> = signal<Country>(DEFAULT_COUNTRY);
+  preferredCountries: InputSignal<ISO2[]> = input<ISO2[]>(["SA"]);
+  searchInput: FormControl = new FormControl("");
+  filteredCountries: Signal<Country[]> = computed(() => this.#searchInCountries());
+  #ctrlChanges: Signal<string> = toSignal(this.ctrl.valueChanges);
+  #searchQuery: Signal<string> = toSignal(this.searchInput.valueChanges);
+  #disabledEffect: EffectRef = effect(() => {
+    if (this.disabled()) {
+      this.ctrl.disable();
+    } else {
+      this.ctrl.enable();
+    }
+  });
+
+  override writeValue(value: string) {
+    if (value) {
+      const mobileObject = this.phoneService.getPhoneNumberObject(value);
+      if (mobileObject) {
+        this.selectedCountry.set(mobileObject);
+        this.emitOnChangeEvent(this.selectedCountry());
+      }
+      this.ctrl.setValue(mobileObject?.nationalNumber);
+    }
+  }
+
+  emit() {
+    if (this.#ctrlChanges()) {
+      const mobileInput = `+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`;
+      const numberObject: Mobile | undefined = this.phoneService.getPhoneNumberObject(mobileInput);
+      if (numberObject) {
+        this.selectedCountry.set(numberObject);
+        this.propagateValue(`+${numberObject.dailCode}${numberObject.nationalNumber}`);
+        this.emitOnChangeEvent(this.selectedCountry());
+      } else {
+        this.propagateValue(mobileInput);
+        this.emitOnChangeEvent(this.selectedCountry());
+      }
+    } else {
+      this.propagateValue(null);
+      this.emitOnChangeEvent(null);
+    }
+  }
+
+  override validate(control: AbstractControl): ValidationErrors | null {
+    if (!control.getRawValue()) {
+      return null;
+    }
+
+    const error: any = {invalidPhoneNumber: {accepted: this.selectedCountry().placeholder, input: control.getRawValue()}};
+    const isValid: boolean = this.phoneService.validate(control.getRawValue());
+    if (isValid) {
+      return null;
+    }
+
+    return error;
+  }
+
+  ngOnDestroy() {
+    this.#disabledEffect.destroy();
+  }
+
+  protected onInput(event: KeyboardEvent) {
+    const allowedChars = /[0-9+\-()]/;
+    const allowedCtrlChars = /[axcv]/; // Allows copy-pasting
+    const allowedOtherKeys = [
+      "ArrowLeft",
+      "ArrowUp",
+      "ArrowRight",
+      "ArrowDown",
+      "Home",
+      "End",
+      "Insert",
+      "Delete",
+      "Backspace",
+    ];
+    if (!allowedChars.test(event.key) && !(event.ctrlKey && allowedCtrlChars.test(event.key)) && !allowedOtherKeys.includes(event.key)) {
+      event.preventDefault();
+    }
+  }
+
+  protected onSelectCountry(country: Country) {
+    this.selectedCountry.set(country);
+    this.searchInput.setValue("");
+    this.closeCountryCodeMenu();
+    this.propagateValue(`+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`);
+    this.emitOnChangeEvent(`+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`);
+  }
+
+  protected closeCountryCodeMenu() {
+    this.isOpen.set(false);
+  }
+
+  protected toggleCountryCodeMenu() {
+    this.isOpen.update((isOpen: boolean) => !isOpen);
+  }
+
+  #sortCountries() {
+    return COUNTRIES.map((country: Country) => {
+      if (this.preferredCountries().includes(country.code)) {
+        country.order = country.priority + (-1 * (this.preferredCountries().indexOf(country.code) - this.preferredCountries().length)) * 100;
+      }
+      return country;
+    }).sort((a, b) => b.order - a.order);
+  }
+
+  #searchInCountries(): Country[] {
+    if (this.#searchQuery()) {
+      return this.#sortCountries().filter((country: Country) => {
+        return (
+          country.code.toLowerCase().includes(this.#searchQuery())
+          || country.name.toLowerCase().includes(this.#searchQuery())
+          || country.dailCode.toLowerCase().includes(this.#searchQuery())
+        );
+      });
+    }
+    return this.#sortCountries();
+  }
+}

package/projects/iss/src/components/controls/mobile/mobile.field.ts

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
+import { FieldBase } from "../base/field-base";
+import { MobileControl } from "./mobile.control";
+import { MobileViewer } from "./mobile.viewer";
+
+@Component({
+  selector: "iss-field-mobile",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    MobileControl,
+    MobileViewer
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-mobile [formControlName]="field.name">
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-mobile>
+      } @else {
+        <iss-viewer-mobile [field]="field" />
+      }
+    }
+  `
+})
+export class MobileField extends FieldBase {}

package/projects/iss/src/components/controls/mobile/mobile.ts

@@ -0,0 +1,12 @@
+import { ISO2 } from "./iso2.type";
+
+export interface Mobile {
+  dailCode: string;
+  code: ISO2;
+  nationalNumber: string;
+  internationalNumber: string;
+  placeholder: string;
+  name: string;
+  priority: 0,
+  order: 0
+}

package/projects/iss/src/components/controls/mobile/mobile.viewer.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { ViewerBase } from "../base/viewer-base";
+
+@Component({
+  selector: "iss-viewer-mobile",
+  template: `
+    <p>{{ field().value }}</p>
+  `,
+})
+export class MobileViewer extends ViewerBase {}

package/projects/iss/src/components/controls/mobile/phone.ts

@@ -0,0 +1,96 @@
+import { Injectable } from "@angular/core";
+import { getExampleNumber, parsePhoneNumber, PhoneNumber } from "libphonenumber-js/mobile";
+import examples from "libphonenumber-js/mobile/examples";
+import { COUNTRIES } from "./countries.const";
+import { Country } from "./country";
+import { ISO2 } from "./iso2.type";
+import { Mobile } from "./mobile";
+
+@Injectable({providedIn: "root"})
+export class Phone {
+
+  parse(phoneNumber: string, countryCode?: ISO2): PhoneNumber | undefined {
+    try {
+      return parsePhoneNumber(phoneNumber, countryCode);
+    } catch (e) {
+      return undefined;
+    }
+  }
+
+  getPhoneNumberObject(number: string): Mobile | undefined {
+    const parsedNumber: PhoneNumber | undefined = this.parse(number);
+    if (parsedNumber) {
+      const dailCode: string = parsedNumber.countryCallingCode;
+      const code: ISO2 = this.getCountryIsoCode(dailCode, parsedNumber) as ISO2;
+      const nationalNumber: string = parsedNumber.nationalNumber;
+      const internationalNumber: string = parsedNumber.format("E.164");
+      const placeholder = this.getPlaceholder(code);
+      const name: string = this.getCountryByDailCode(dailCode, parsedNumber)?.name ?? "";
+      return {dailCode, code, nationalNumber, internationalNumber, placeholder, name, priority: 0, order: 0};
+    }
+    return;
+  }
+
+  format(phoneNumber: string, countryCode: ISO2, numberFormat: "E.164" | "INTERNATIONAL" | "NATIONAL"): string {
+    const number = this.parse(phoneNumber, countryCode);
+
+    if (number) {
+      return number.format(numberFormat);
+    }
+    return "";
+  }
+
+  validate(number: string): boolean {
+    try {
+      const parsedNumber = parsePhoneNumber(number);
+      // Check if it's a mobile number type
+      if (parsedNumber.getType() !== "MOBILE") {
+        return false;
+      }
+      return parsedNumber.isValid();
+    } catch (e) {
+      return false;
+    }
+  }
+
+  getPlaceholder(countryCode: ISO2): string {
+    try {
+      const exampleNumber = getExampleNumber(countryCode, examples);
+      return exampleNumber ? (countryCode === "SA" ? "050 123 4567" : exampleNumber.formatNational()) : "";
+    } catch (e) {
+      return "";
+    }
+  }
+
+  getCountryIsoCode(dailCode: string, number: PhoneNumber): string {
+    return this.getCountryByDailCode(dailCode, number)?.code ?? "";
+  }
+
+  getCountryByDailCode(dailCode: string | undefined, number: PhoneNumber): Country | undefined {
+    // Will use this to match area code from the first numbers
+    const rawNumber = number.nationalNumber;
+    // List of all countries with dailCode (can be more than one. e.x. US, CA, DO, PR all have +1 dailCode)
+    const countries: Country[] = COUNTRIES.filter((c: Country) => c.dailCode === dailCode?.toString());
+    // Main country is the country, which has no areaCodes specified in country-code.ts file.
+    const mainCountry: Country | undefined = countries.find((c: Country) => c.areaCodes === undefined);
+    // Secondary countries are all countries, which have areaCodes specified in country-code.ts file.
+    const secondaryCountries: Country[] = countries.filter((c: Country) => c.areaCodes !== undefined);
+    let matchedCountry: Country | undefined = mainCountry ? mainCountry : undefined;
+
+    /*
+      Iterate over each secondary country and check if nationalNumber starts with any of areaCodes available.
+      If no matches found, fallback to the main country.
+    */
+    secondaryCountries.forEach((country) => {
+      if (country && country.areaCodes) {
+        country.areaCodes.forEach((areaCode) => {
+          if (rawNumber.startsWith(areaCode)) {
+            matchedCountry = country;
+          }
+        });
+      }
+    });
+
+    return matchedCountry;
+  }
+}

package/projects/iss/src/components/controls/note/note.field.ts

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MatLabel } from "@angular/material/form-field";
+import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
+import { FieldBase } from "../base/field-base";
+
+@Component({
+  selector: "iss-field-note",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    MatLabel
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (!(field.config.hideLabel)) {
+        <mat-label>{{ field.label() }}</mat-label>
+      }
+      <p>
+        {{ ctrlValueChange() }}
+      </p>
+    }
+  `
+})
+export class NoteField extends FieldBase {}

package/projects/iss/src/components/controls/plate/plate-letter.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { PlateLetter } from "./plate-letter";
+import { PLATE_LETTERS } from "./plate-letters.const";
+
+@Pipe({name: "plateLetter"})
+export class PlateLetterPipe implements PipeTransform {
+  transform(value: string): unknown {
+    const letter: PlateLetter | undefined = PLATE_LETTERS.find((l: PlateLetter) => l.value === value);
+    if (letter) {
+      return letter.label.ar;
+    }
+    return value;
+  }
+}

package/projects/iss/src/components/controls/plate/plate-letter.ts

@@ -0,0 +1,7 @@
+export interface PlateLetter {
+  label: {
+    ar: string;
+    en: string;
+  },
+  value: string;
+}

package/projects/iss/src/components/controls/plate/plate-letters.const.ts

@@ -0,0 +1,21 @@
+import { PlateLetter } from "./plate-letter";
+
+export const PLATE_LETTERS: PlateLetter[] = [
+  {label: {ar: "أ", en: "A"}, value: "A"},
+  {label: {ar: "ب", en: "B"}, value: "B"},
+  {label: {ar: "ح", en: "J"}, value: "J"},
+  {label: {ar: "د", en: "D"}, value: "D"},
+  {label: {ar: "ر", en: "R"}, value: "R"},
+  {label: {ar: "س", en: "S"}, value: "S"},
+  {label: {ar: "ص", en: "X"}, value: "X"},
+  {label: {ar: "ط", en: "T"}, value: "T"},
+  {label: {ar: "ع", en: "E"}, value: "E"},
+  {label: {ar: "ق", en: "G"}, value: "G"},
+  {label: {ar: "ك", en: "K"}, value: "K"},
+  {label: {ar: "ل", en: "L"}, value: "L"},
+  {label: {ar: "م", en: "Z"}, value: "Z"},
+  {label: {ar: "ن", en: "N"}, value: "N"},
+  {label: {ar: "هـ", en: "H"}, value: "H"},
+  {label: {ar: "و", en: "U"}, value: "U"},
+  {label: {ar: "ي", en: "V"}, value: "V"}
+];