iss-ctrl 0.0.2 → 0.0.3

package/projects/iss/src/shared/constants/date.const.ts

@@ -0,0 +1,18 @@
+import {MatDateFormats} from "@angular/material/core";
+
+export const DATE_FORMAT_ADAPTER: MatDateFormats = {
+  parse: {
+    dateInput: "dd/MM/yyyy",
+    timeInput: "hh:mm:ss aa",
+  },
+  display: {
+    dateInput: "dd/MM/yyyy",
+    monthYearLabel: "MMMM yyyy",
+    dateA11yLabel: "dd/MM/yyyyTHH:mm",
+    monthYearA11yLabel: "MMMM yyyy",
+    timeInput: "hh:mm aa",
+    timeOptionLabel: "hh:mm aa",
+  },
+};
+
+export const DATETIME_FORMAT = "dd/MM/yyyy hh:mm a";

package/projects/iss/src/shared/constants/plate-letters.const.ts

@@ -0,0 +1,21 @@
+import {PlateLetter} from "../interfaces/plate-letter.interface";
+
+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"}
+];

package/projects/iss/src/shared/constants/provider.const.ts

@@ -0,0 +1,7 @@
+import {inject, StaticProvider} from "@angular/core";
+import {ControlContainer} from "@angular/forms";
+
+export const VIEW_PROVIDER: StaticProvider = {
+  provide: ControlContainer,
+  useFactory: () => inject(ControlContainer, {skipSelf: true}),
+};

package/projects/iss/src/shared/constants/regex.const.ts

@@ -0,0 +1 @@
+export const PLACEHOLDER_REGEX: RegExp = /\{((\w+).)*(\w+)}/gi;

package/projects/iss/src/shared/constants/validation.const.ts

@@ -0,0 +1,115 @@
+import {ValidationMessage} from "../interfaces/validation.interface";
+
+export const VALIDATION_MESSAGES: ValidationMessage = {
+  required: () => {
+    return {
+      en: "Mandatory Field",
+      ar: "حقل إجباري",
+    };
+  },
+  requiredTrue: () => {
+    return {
+      en: "Please Choose",
+      ar: "يُرجى الموافقة",
+    };
+  },
+  email: () => {
+    return {
+      en: "Please enter a valid email address",
+      ar: "يرجى كتابة عنوان بريد إلكتروني صحيح",
+    };
+  },
+  minlength: ({requiredLength}: { requiredLength: number }) => {
+    return {
+      en: `Please enter at least ${requiredLength} characters`,
+      ar: `يُرجى إدخال ${requiredLength} على الأقل`,
+    };
+  },
+  maxlength: ({requiredLength}: { requiredLength: number }) => {
+    return {
+      en: `Please enter at most ${requiredLength} characters`,
+      ar: `يُرجى إدخال ${requiredLength} على الأكثر`,
+    };
+  },
+  maxAllowedUsers: (max: number) => {
+    return {
+      en: `Please enter at most ${max} users`,
+      ar: `يُرجى اختيار ${max} مستخدم على الأكثر `,
+    };
+  },
+  minAllowedUsers: (min: number) => {
+    return {
+      en: `Please enter at least ${min} users`,
+      ar: `يُرجى اختيار ${min} مستخدم على الأقل `,
+    };
+  },
+  min: ({min}: { min: number }) => {
+    return {
+      en: `Please enter at least ${min}`,
+      ar: `يُرجى إدخال ${min} على الأقل`,
+    };
+  },
+  max: ({max}: { max: number }) => {
+    return {
+      en: `Please enter at most ${max}`,
+      ar: `يُرجى إدخال ${max} على الأكثر`,
+    };
+  },
+  pattern: () => {
+    return {
+      en: "Please enter a valid value",
+      ar: "يرجى إدخال قيم صحيحة",
+    };
+  },
+  wrongTimeSelected: (wrongTimeSelected: string) => {
+    return {
+      en: `Selected time should be after ${wrongTimeSelected} hours from now.`,
+      ar: `الوقت المختار يجب أن يكون بعد ${wrongTimeSelected} من الآن. `,
+    };
+  },
+  relativeTimeValidation_after: (relativeTimeValidation: string) => {
+    return {
+      en: `The selected end date should be greater than the ${relativeTimeValidation}.`,
+      ar: ` تاريخ الانتهاء يجب ان يكون اكبر من ${relativeTimeValidation}.`,
+    };
+  },
+  relativeTimeValidation_before: (relativeTimeValidation: string) => {
+    return {
+      en: `Selected time should be before ${relativeTimeValidation}.`,
+      ar: `الوقت المختار يجب أن يكون قبل ${relativeTimeValidation}.`,
+    };
+  },
+
+  relativeTimeValidation_before_noOfDays: (relativeTimeValidation: string) => {
+    return {
+      en: `Selected time should be before ${relativeTimeValidation} .`,
+      ar: `الوقت المختار يجب أن يكون قبل ${relativeTimeValidation} .`,
+    };
+  },
+  relativeTimeValidation_within: (relativeTimeValidation: string) => {
+    return {
+      en: `Selected time should be within ${relativeTimeValidation}.`,
+      ar: ` يجب أن يكون الوقت المحدد ضمن ${relativeTimeValidation}.`,
+    };
+  },
+  fileType: ({validFileExtensions, inValidFileName}: { validFileExtensions: string, inValidFileName: string }) => ({
+    en: `${inValidFileName} should be ${validFileExtensions}`,
+    ar: `يجب أن يكون ${inValidFileName} بصيغة ${validFileExtensions}`,
+  }),
+  fileSize: ({limitSize, inValidFileName}: { limitSize: string, inValidFileName: string }) => ({
+    en: `${inValidFileName} size should not exceed ${limitSize}.`,
+    ar: `يجب ألا يزيد حجم ${inValidFileName}} عن ${limitSize}`,
+  }),
+  minFileCount: ({minCount, fileCount}: { minCount: number, fileCount: number }) => {
+    return {
+      en: `At least ${minCount} file(s) required, but only ${fileCount} selected.`,
+      ar: `تتطلب العملية على الأقل ${minCount} ملف(ات)، لكن تم اختيار ${fileCount} فقط.`,
+    };
+  },
+  maxFileCount: ({maxCount, fileCount}: { maxCount: number, fileCount: number }) => {
+    return {
+      en: `You can upload a maximum of ${maxCount} file(s). You have selected ${fileCount} file(s).`,
+      ar: `يمكنك تحميل حد أقصى من ${maxCount} ملف(ات). لقد قمت باختيار ${fileCount} ملف(ات).`
+    };
+  }
+};

package/projects/iss/src/shared/indexes/components.index.ts

@@ -0,0 +1,27 @@
+import {Type} from "@angular/core";
+import {DynamicImport} from "../interfaces/import.interface";
+
+export const COMPONENTS: DynamicImport<Type<any>> = {
+  date: () => import("../../components/controls/date-picker/date-picker.wrapper").then((c) => c.DatePickerWrapper),
+  datetime: () => import("../../components/controls/datetime-picker/datetime-picker.wrapper").then((c) => c.DatetimePickerWrapper),
+  dateRange: () => import("../../components/controls/date-range-picker/date-range-picker.wrapper").then((c) => c.DateRangePickerWrapper),
+  date_range: () => import("../../components/controls/date-range-picker/date-range-picker.wrapper").then((c) => c.DateRangePickerWrapper),
+  select: () => import("../../components/controls/select/select.wrapper").then((c) => c.SelectWrapper),
+  input: () => import("../../components/controls/input/input.wrapper").then((c) => c.InputWrapper),
+  text: () => import("../../components/controls/input/input.wrapper").then((c) => c.InputWrapper),
+  checkbox: () => import("../../components/controls/checkbox/checkbox.wrapper").then((c) => c.CheckboxWrapper),
+  file: () => import("../../components/controls/file-picker/file-picker.wrapper").then((c) => c.FilePickerWrapper),
+  file2: () => import("../../components/controls/file-picker/file-picker.wrapper").then((c) => c.FilePickerWrapper),
+  radio: () => import("../../components/controls/radio/radio.wrapper").then((c) => c.RadioWrapper),
+  textarea: () => import("../../components/controls/textarea/textarea.wrapper").then((c) => c.TextareaWrapper),
+  chips: () => import("../../components/controls/chips/chips.wrapper").then((c) => c.ChipsWrapper),
+  plate: () => import("../../components/controls/plate/plate-number.wrapper").then((c) => c.PlateNumberWrapper),
+  note: () => import("../../components/controls/note/note.wrapper").then((c) => c.NoteWrapper),
+  slideToggle: () => import("../../components/controls/slide-toggle/slide-toggle.wrapper").then((c) => c.SlideToggleWrapper),
+  toggle: () => import("../../components/controls/toggle-button/toggle-button.wrapper").then((c) => c.ToggleButtonWrapper),
+  time: () => import("../../components/controls/time-picker/time-picker.wrapper").then((c) => c.TimePickerWrapper),
+  mobile: () => import("../../components/controls/mobile/mobile.wrapper").then((c) => c.MobileWrapper),
+  table: () => import("../../components/controls/table/table.wrapper").then((c) => c.TableWrapper),
+  userPicker: () => import("../../components/controls/user-picker/user-picker.wrapper").then((c) => c.UserPickerWrapper),
+  userPicker2: () => import("../../components/controls/user-picker/user-picker.wrapper").then((c) => c.UserPickerWrapper),
+};

package/projects/iss/src/shared/indexes/services.index.ts

@@ -0,0 +1,11 @@
+import {Type} from "@angular/core";
+import {DynamicImport} from "../interfaces/import.interface";
+
+export const SERVICES: DynamicImport<Type<any>> = {
+  setValue: () => import("../../events/set-value/set-value-event.service").then((s) => s.SetValueEventService),
+  show: () => import("../../events/show/show-event.service").then((s) => s.ShowEventService),
+  load: () => import("../../events/load/load-value-event.service").then((s) => s.LoadValueEventService),
+  loadOptions: () => import("../../events/load/load-options-event.service").then((s) => s.LoadOptionsEventService),
+  triggerBasedOnJsonValue: () => import("../../events/triggers/trigger-based-on-json-value.service").then((s) => s.TriggerBasedOnJsonValueService),
+  replaceApiKeyDefaultImpl: () => import("../../events/load/replace-api-keys.service").then((s) => s.ReplaceApiKeysService),
+};

package/projects/iss/src/shared/indexes/validators.index.ts

@@ -0,0 +1,21 @@
+import {DynamicImport} from "../interfaces/import.interface";
+
+export const VALIDATORS: DynamicImport<Function> = {
+  required: () => import("../../validators/core.validator").then((c) => c.IssValidators.required),
+  max: () => import("../../validators/core.validator").then((c) => c.IssValidators.max),
+  min: () => import("../../validators/core.validator").then((c) => c.IssValidators.min),
+  requiredTrue: () => import("../../validators/core.validator").then((c) => c.IssValidators.requiredTrue),
+  email: () => import("../../validators/core.validator").then((c) => c.IssValidators.email),
+  minLength: () => import("../../validators/core.validator").then((c) => c.IssValidators.minLength),
+  maxLength: () => import("../../validators/core.validator").then((c) => c.IssValidators.maxLength),
+  pattern: () => import("../../validators/core.validator").then((c) => c.IssValidators.pattern),
+  regExp: () => import("../../validators/core.validator").then((c) => c.IssValidators.pattern),
+  nullValidator: () => import("../../validators/core.validator").then((c) => c.IssValidators.null),
+  beforeDate: () => import("../../validators/time.validator").then((c) => c.TimeValidator.beforeDate),
+  afterDate: () => import("../../validators/time.validator").then((c) => c.TimeValidator.afterDate),
+  within: () => import("../../validators/time.validator").then((c) => c.TimeValidator.afterDate),
+  maxFilesCount: () => import("../../validators/file.validator").then((c) => c.FileValidators.maxCount),
+  minFilesCount: () => import("../../validators/file.validator").then((c) => c.FileValidators.minCount),
+  fileSize: () => import("../../validators/file.validator").then((c) => c.FileValidators.size),
+  fileType: () => import("../../validators/file.validator").then((c) => c.FileValidators.type),
+};

package/projects/iss/src/shared/interfaces/action.interface.ts

@@ -0,0 +1,7 @@
+import {FieldAction} from "../classes/field-action";
+import {FormField} from "../classes/form-field";
+import {FieldChange} from "./field.interface";
+
+export interface ActionTriggerFn {
+  isTriggered(field: FormField, change: FieldChange, action: FieldAction, masterField?: FormField): boolean;
+}

package/projects/iss/src/shared/interfaces/attachment.interface.ts

@@ -0,0 +1,7 @@
+export interface IssAttachment {
+  id: string,
+  type: string,
+  size: number,
+  name: string,
+  selected?: number
+}

package/projects/iss/src/shared/interfaces/country.interface.ts

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

package/projects/iss/src/shared/interfaces/date-range.interface.ts

@@ -0,0 +1,5 @@
+export interface DateRangeEmission {
+  duration: number;
+  start: string;
+  end: string;
+}

package/projects/iss/src/shared/interfaces/datetime.interface.ts

@@ -0,0 +1,4 @@
+export class Datetime {
+  date!: string;
+  time!: string;
+}

package/projects/iss/src/shared/interfaces/dto.interface.ts

@@ -0,0 +1,12 @@
+export interface Dto {
+  data: any;
+  meta?: DtoMeta;
+}
+
+export interface DtoMeta {
+  page: number,
+  size: number,
+  totalElements: number,
+  totalPages: number,
+  lastPage: boolean
+}

package/projects/iss/src/shared/interfaces/field.interface.ts

@@ -0,0 +1,27 @@
+import {AbstractControl, FormGroup} from "@angular/forms";
+import {FieldAction} from "../classes/field-action";
+import {FormField} from "../classes/form-field";
+
+export interface FieldEvent {
+  fire(args: FieldEventArgument): void;
+
+  revert(args: FieldEventArgument): void;
+}
+
+export interface FieldEventArgument {
+  control: AbstractControl;
+  form: FormGroup;
+  field: FormField;
+  action: FieldAction;
+  change: FieldChange;
+}
+
+export interface FieldActionConfigFn {
+  execute(args: FieldEventArgument): any | void;
+}
+
+export interface FieldChange {
+  trackedField: FormField;
+  trackedControl: AbstractControl;
+  value: string;
+}

package/projects/iss/src/shared/interfaces/file.interface.ts

@@ -0,0 +1,9 @@
+export interface IssFile {
+  id?: string;
+  name: string;
+  size: string | number;
+  type: string;
+  selected?: number;
+  errorMsg?: string;
+  file?: File;
+}

package/projects/iss/src/shared/interfaces/hint.interface.ts

@@ -0,0 +1,8 @@
+export type HintAlignment = "start" | "end";
+
+export interface Hint {
+  key: string;
+  label: string;
+  valid: boolean | undefined;
+  align: HintAlignment;
+}

package/projects/iss/src/shared/interfaces/i18n.interface.ts

@@ -0,0 +1,4 @@
+export interface I18n {
+  ar: string;
+  en: string;
+}

package/projects/iss/src/shared/interfaces/import.interface.ts

@@ -0,0 +1,3 @@
+export interface DynamicImport<T> {
+  [key: PropertyKey]: () => Promise<T>;
+}

package/projects/iss/src/shared/interfaces/mobile.interface.ts

@@ -0,0 +1,12 @@
+import {ISO2} from "../types/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/shared/interfaces/option.interface.ts

@@ -0,0 +1,4 @@
+export interface Option {
+  value: string;
+  label: string;
+}

package/projects/iss/src/shared/interfaces/outlet.interface.ts

@@ -0,0 +1,8 @@
+import {Type} from "@angular/core";
+import {Observable} from "rxjs";
+import {FormField} from "../classes/form-field";
+
+export interface ComponentOutlet {
+  self$: Observable<Type<any> | null>;
+  data: FormField;
+}

package/projects/iss/src/shared/interfaces/plate-letter.interface.ts

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

package/projects/iss/src/shared/interfaces/validation.interface.ts

@@ -0,0 +1,5 @@
+import {ValidationMessageFn} from "../types/validation.type";
+
+export interface ValidationMessage {
+  [key: PropertyKey]: ValidationMessageFn<any>;
+}

package/projects/iss/src/shared/pipes/arabic-number.pipe.ts

@@ -0,0 +1,14 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({name: "arabicNumber"})
+export class ArabicNumberPipe implements PipeTransform {
+  transform(n: string): string {
+    if (n === null || n === undefined) {
+      return "";
+    }
+    if (Number.isNaN(+n)) {
+      return n;
+    }
+    return new Intl.NumberFormat("ar-SA", {}).format(+n);
+  }
+}

package/projects/iss/src/shared/pipes/select-status.pipe.ts

@@ -0,0 +1,10 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {Option} from "../interfaces/option.interface";
+
+@Pipe({name: "selectStatus"})
+export class SelectStatusPipe implements PipeTransform {
+  transform(option: Option, ...args: unknown[]): boolean {
+    const selectedOptions = args[0] as Map<string, Option>;
+    return selectedOptions.has(option.value);
+  }
+}

package/projects/iss/src/shared/pipes/translate.pipe.ts

@@ -0,0 +1,20 @@
+import {inject, Pipe, PipeTransform} from "@angular/core";
+import {I18n} from "../interfaces/i18n.interface";
+import {UI_LANGUAGE} from "../tokens/language.token";
+
+@Pipe({name: "translate"})
+export class TranslatePipe implements PipeTransform {
+  currentLanguage = inject(UI_LANGUAGE);
+
+  transform(value: I18n | string, locale: string = ""): string {
+    if (typeof value === "string") {
+      return value; // Return the string as is, if it's a string
+    }
+
+    if (value && locale) {
+      return value[locale as keyof I18n];
+    }
+
+    return value?.[this.currentLanguage as keyof I18n];
+  }
+}

package/projects/iss/src/shared/services/form-engine.service.ts

@@ -0,0 +1,121 @@
+import {Injectable} from "@angular/core";
+import {AbstractControl, AsyncValidatorFn, FormGroup, ValidatorFn, Validators} from "@angular/forms";
+import {BehaviorSubject, map, merge, Observable, of} from "rxjs";
+import {FieldAction} from "../classes/field-action";
+import {FieldAsyncValidation} from "../classes/field-async-validation";
+import {FormField} from "../classes/form-field";
+import {FieldChange} from "../interfaces/field.interface";
+
+@Injectable({providedIn: "root"})
+export class FormEngine {
+  fields: FormField[] = [];
+  formReady: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  createValidators(field: FormField): ValidatorFn[] {
+    if (!this.fieldHasValidation(field)) {
+      return [Validators.nullValidator];
+    }
+    return this.#validatorsToNgValidators(field);
+  }
+
+  createAsyncValidators(field: FormField): AsyncValidatorFn[] {
+    if (!(field && field.asyncValidation)) {
+      return [];
+    }
+    return this.#asyncValidatorsToNgValidators(field) as AsyncValidatorFn[];
+  }
+
+  getFieldValue(field: FormField) {
+    let fieldValue = field.value;
+    if (field.value === undefined && field.defaultValue) {
+      fieldValue = field.defaultValue;
+    }
+    return fieldValue ?? null;
+  }
+
+  trackChangesEvents(field: FormField, form: FormGroup): Observable<FieldChange> {
+    const changes$: Observable<FieldChange>[] = [];
+    const masterNames: Set<string> = new Set();
+    field.events.forEach((action: FieldAction) => {
+      this.processTrackChanges(action.trackedFieldName, masterNames, changes$, field, form);
+    });
+    return merge(...changes$);
+  }
+
+  trackChangesValidations(field: FormField, form: FormGroup): Observable<FieldChange> {
+    const changes$: Observable<FieldChange>[] = [];
+    const masterNames: Set<string> = new Set();
+    const iterateOn = Object.entries(field.validation);
+    iterateOn.forEach((validationObj: any) => {
+      this.processTrackChanges(validationObj[1].value, masterNames, changes$, field, form);
+    });
+    return merge(...changes$);
+  }
+
+  processTrackChanges(masterName: any, masterNames: Set<string>, changes$: Observable<FieldChange>[], field: FormField, form: FormGroup) {
+    if (typeof masterName !== "string") {
+      return;
+    }
+
+    const masterCtrl: AbstractControl | null = form.get(masterName);
+    const masterField: FormField | undefined = this.fields.find((field: FormField) => field.name === masterName);
+
+    if (!masterField) {
+      return;
+    }
+
+    if (!masterCtrl) {
+      return;
+    }
+
+    if (masterNames.has(masterName)) {
+      return;
+    }
+
+    masterNames.add(masterName);
+    // if the field tracks itself, will not subscribe to value changes it avoid infinite loops
+    if (field.name === masterName) {
+      changes$.push(of({
+        trackedField: masterField,
+        trackedControl: masterCtrl,
+        value: masterCtrl.value
+      }));
+    } else {
+      changes$.push(this.#mapMasterFieldValueChangesToFieldChanges(masterField, masterCtrl));
+    }
+  }
+
+  fieldHasValidation(field: FormField): boolean {
+    return !!(field.validation && Object.values(field.validation).filter((v) => v).length);
+  }
+
+  fieldHasAsyncValidation(field: FormField): boolean {
+    return !!(field.asyncValidation && Object.values(field.asyncValidation).filter((v) => v).length);
+  }
+
+  #validatorsToNgValidators(field: FormField): ValidatorFn[] {
+    return this.#mapNgValidators(field.validation).map((validatorValue: any) => validatorValue?.fn(field));
+  }
+
+  #asyncValidatorsToNgValidators(field: FormField): AsyncValidatorFn[] {
+    return this.#mapNgValidators(field.asyncValidation).map((validatorValue: any) => validatorValue?.fn(field));
+  }
+
+  #mapNgValidators(validationObj: FieldAsyncValidation | any): ValidatorFn[] {
+    return Object.entries((validationObj ? validationObj : {}))
+      .filter((validationObj) => validationObj[1] !== undefined)
+      .map((validationObj): ValidatorFn => <ValidatorFn>validationObj[1]);
+  }
+
+  #mapMasterFieldValueChangesToFieldChanges(masterField: FormField, masterCtrl: AbstractControl): Observable<FieldChange> {
+    return masterCtrl.valueChanges.pipe(
+      map((value: string): FieldChange => {
+        return {
+          trackedField: masterField,
+          trackedControl: masterCtrl,
+          value: value,
+        };
+      })
+    );
+  }
+}

package/projects/iss/src/shared/services/loader.service.ts

@@ -0,0 +1,51 @@
+import {inject, Injectable, Injector, Type} from "@angular/core";
+import {from, Observable, of, tap} from "rxjs";
+import {FormField} from "../classes/form-field";
+import {COMPONENTS} from "../indexes/components.index";
+import {SERVICES} from "../indexes/services.index";
+
+@Injectable({providedIn: "root"})
+export class LoaderService {
+  #injector: Injector = inject(Injector);
+  #loadedComponents: Map<string, Type<any>> = new Map();
+  #loadedServices: Map<string, <T>() => Promise<T>> = new Map();
+
+  loadComponent(field: FormField): Observable<Type<any> | null> {
+    const loadedComponent: Type<any> | undefined = this.#loadedComponents.get(field.type);
+    if (loadedComponent) {
+      return of(loadedComponent);
+    }
+
+    const componentImportFn = COMPONENTS[field.type];
+    if (!componentImportFn) {
+      return of(null);
+    }
+
+    return this.#createObservableFromPromise(componentImportFn, field.type);
+  }
+
+  loadService<T>(serviceName: string): undefined | (() => Promise<T>) {
+    const loadedService: (<T>() => Promise<T>) | undefined = this.#loadedServices.get(serviceName);
+    if (loadedService) {
+      return loadedService;
+    }
+    if (!SERVICES[serviceName]) {
+      // throw new Error(`Service ${serviceName} not found`);
+      return undefined;
+    }
+    return () => SERVICES[serviceName]()
+      .then((serviceClass: Type<any>) => this.#injector.get(serviceClass))
+      .then((loadedService) => {
+        this.#loadedServices.set(serviceName, () => loadedService);
+        return loadedService;
+      });
+  }
+
+  #createObservableFromPromise(componentImportFn: () => Promise<Type<any>>, type: string): Observable<Type<any>> {
+    return from(componentImportFn()).pipe(
+      tap((component: Type<any>) => {
+        this.#loadedComponents.set(type, component);
+      })
+    );
+  }
+}

package/projects/iss/src/shared/tokens/api-response-mapper.token.ts

@@ -0,0 +1,4 @@
+import {InjectionToken} from "@angular/core";
+import {Dto} from "../interfaces/dto.interface";
+
+export const API_RESPONSE_MAPPER: InjectionToken<(res: any) => Dto> = new InjectionToken("Map backend response to required response interface.");

package/projects/iss/src/shared/tokens/attachment.token.ts

@@ -0,0 +1,6 @@
+import {InjectionToken} from "@angular/core";
+import {IssAttachment} from "../interfaces/attachment.interface";
+
+export const ATTACHMENT_UPLOAD_URL: InjectionToken<string> = new InjectionToken("ATTACHMENT UPLOAD URL");
+export const ATTACHMENT_UPLOAD_RESPONSE_MAPPER: InjectionToken<(res: any) => IssAttachment[]> = new InjectionToken("Map backend response to required response interface.");
+export const ATTACHMENT_DOWNLOAD_URL: InjectionToken<string> = new InjectionToken("Attachment download URL");

package/projects/iss/src/shared/tokens/field.token.ts

@@ -0,0 +1,4 @@
+import {InjectionToken} from "@angular/core";
+import {FormField} from "../classes/form-field";
+
+export const FIELD_DATA: InjectionToken<FormField> = new InjectionToken("Form Field Data");

package/projects/iss/src/shared/tokens/host.token.ts

@@ -0,0 +1,3 @@
+import {InjectionToken} from "@angular/core";
+
+export const HOST: InjectionToken<string> = new InjectionToken("Backend Host to call");

package/projects/iss/src/shared/tokens/language.token.ts

@@ -0,0 +1,3 @@
+import {InjectionToken} from "@angular/core";
+
+export const UI_LANGUAGE: InjectionToken<string> = new InjectionToken("UI SELECTED LANGUAGE");

package/projects/iss/src/shared/tokens/url.token.ts

@@ -0,0 +1,3 @@
+import {InjectionToken} from "@angular/core";
+
+export const USER_SEARCH_URL: InjectionToken<string> = new InjectionToken("USER SEARCH URL");