iss-ctrl 0.0.3 → 0.0.5

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 {COUNTRIES, DEFAULT_COUNTRY} from "../../../shared/constants/countries.const";
-import {Country} from "../../../shared/interfaces/country.interface";
-import {Mobile} from "../../../shared/interfaces/mobile.interface";
-import {ISO2} from "../../../shared/types/iso2.type";
-import {ControlBase} from "../base/control.base";
-import {PhoneService} from "./phone.service";
-
-@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: PhoneService = inject(PhoneService);
-  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.viewer.ts

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

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

@@ -1,32 +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/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {MobileControl} from "./mobile.control";
-import {MobileViewer} from "./mobile.viewer";
-
-@Component({
-  selector: "iss-wrp-mobile",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    MobileControl,
-    MobileViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
-      @if (field.mode() === "edit") {
-        <iss-ctrl-mobile [formControlName]="field.name" />
-      } @else {
-        <iss-vwr-mobile [field]="field" />
-      }
-    }
-  `
-})
-export class MobileWrapper extends WrapperBase {}

package/projects/iss/src/components/controls/mobile/phone.service.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 "../../../shared/constants/countries.const";
-import {Country} from "../../../shared/interfaces/country.interface";
-import {Mobile} from "../../../shared/interfaces/mobile.interface";
-import {ISO2} from "../../../shared/types/iso2.type";
-
-@Injectable({providedIn: "root"})
-export class PhoneService {
-
-  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.wrapper.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/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-
-@Component({
-  selector: "iss-wrp-note",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      <p>
-        {{ ctrlValueChange() }}
-      </p>
-    }
-  `
-})
-export class NoteWrapper extends WrapperBase {}

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

@@ -1,14 +0,0 @@
-import {Pipe, PipeTransform} from "@angular/core";
-import {PLATE_LETTERS} from "../../../shared/constants/plate-letters.const";
-import {PlateLetter} from "../../../shared/interfaces/plate-letter.interface";
-
-@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-number.wrapper.ts

@@ -1,36 +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/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {PlateControl} from "./plate.control";
-import {PlateViewer} from "./plate.viewer";
-
-@Component({
-  selector: "iss-wrp-plate-number",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    PlateControl,
-    MatLabel,
-    PlateViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
-      @if (field.mode() === "edit") {
-        <iss-ctrl-plate-number [formControlName]="field.name" (onChange)="updateField($event)" />
-      } @else {
-        <iss-vwr-plate [field]="field" />
-      }
-    }
-  `
-})
-export class PlateNumberWrapper extends WrapperBase {
-  updateField($event: any) {
-    this.field.ctrlJsonValue.set($event);
-  }
-}