iss-ctrl 0.0.6 → 0.0.8

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-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"}
-];