iss-ctrl 0.0.5 → 0.0.7

package/projects/iss/src/shared/classes/iss-field.ts

@@ -0,0 +1,102 @@
+import { isSignal, signal, WritableSignal } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { Option } from "../interfaces/option";
+import { Loader } from "../services/loader";
+import { FieldAsyncValidation } from "./field-async-validation";
+import { FieldConfig } from "./field-config";
+import { FieldEvent } from "./field-event";
+
+export class IssField {
+  id: number;
+  name: string;
+  type: string;
+  base: string;
+  label: WritableSignal<string> = signal("");
+  hint: WritableSignal<string> = signal("");
+  options: WritableSignal<Option[]> = signal([]);
+  api: WritableSignal<string> = signal("");
+  mode: WritableSignal<"edit" | "view"> = signal("edit");
+  visible: WritableSignal<boolean>;
+  wasVisible: WritableSignal<boolean> = signal(true);
+  events: FieldEvent[];
+  validation: any;
+  asyncValidation: FieldAsyncValidation;
+  children: IssField[];
+  apiResponse: BehaviorSubject<any> = new BehaviorSubject(null);
+  response: WritableSignal<any> = signal(null);
+  config: FieldConfig;
+  value: string;
+  jsonValue: any;
+  defaultValue: string;
+  ctrlValue: WritableSignal<string | null> = signal(null);
+  ctrlJsonValue: WritableSignal<any> = signal(null);
+  loading: WritableSignal<boolean> = signal(false);
+
+  constructor(field: any, loader: Loader) {
+    this.id = field.id;
+    this.name = field.name;
+    this.type = field.type;
+    this.base = field.base;
+
+    if (isSignal(field.label)) {
+      this.label = field.label;
+    } else {
+      this.label = signal(field.title);
+    }
+
+    if (isSignal(field.hint)) {
+      this.hint = field.hint;
+    } else {
+      this.hint = signal(field.hint);
+    }
+
+    if (isSignal(field.options)) {
+      this.options = field.options ?? [];
+    } else {
+      this.options = signal(field.options ?? []);
+    }
+
+    if (isSignal(field.api)) {
+      this.api = field.api;
+    } else {
+      this.api = signal(field.api);
+    }
+
+    field.mode = field.mode ?? "edit";
+    if (isSignal(field.mode)) {
+      this.mode = field.mode;
+    } else {
+      this.mode = signal(field.mode);
+    }
+
+    if (!field.events) {
+      field.events = [];
+    }
+
+    this.visible = signal((!field.events.filter((obj: any) => obj.name === "show" && field.mode === "edit").length));
+    this.events = field.events.map((action: any) => new FieldEvent(action, loader));
+    this.validation = field.validation;
+    this.asyncValidation = new FieldAsyncValidation(field.asyncValidation);
+    this.children = field.children;
+    this.config = new FieldConfig(field.config);
+    this.value = field?.value;
+    this.ctrlValue.set(field.value);
+    this.ctrlJsonValue.set(field?.jsonValue);
+    this.loading.set(field?.loading ?? false);
+    this.defaultValue = field?.defaultValue;
+    this.jsonValue = field?.jsonValue;
+    this.apiResponse = new BehaviorSubject(null);
+  }
+
+  updateVisibility(value: boolean) {
+    this.visible.update((v) => {
+      if (!this.wasVisible) {
+        this.wasVisible = signal(v);
+      }
+      this.wasVisible.set(v);
+      return v;
+    });
+
+    this.visible.set(value);
+  }
+}

package/projects/iss/src/shared/constants/date-format.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/placeholder-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";
+
+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/constants/view-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/indexes/components.index.ts

@@ -0,0 +1,27 @@
+import { Type } from "@angular/core";
+import { DynamicImport } from "../interfaces/import";
+
+export const COMPONENTS: DynamicImport<Type<any>> = {
+  date: () => import("../../components/controls/date-picker/date-picker.field").then((c) => c.DatePickerField),
+  datetime: () => import("../../components/controls/datetime-picker/datetime-picker.field").then((c) => c.DatetimePickerField),
+  dateRange: () => import("../../components/controls/date-range-picker/date-range-picker.field").then((c) => c.DateRangePickerField),
+  date_range: () => import("../../components/controls/date-range-picker/date-range-picker.field").then((c) => c.DateRangePickerField),
+  select: () => import("../../components/controls/select/select.field").then((c) => c.SelectField),
+  input: () => import("../../components/controls/input/input.field").then((c) => c.InputField),
+  text: () => import("../../components/controls/input/input.field").then((c) => c.InputField),
+  checkbox: () => import("../../components/controls/checkbox/checkbox.field").then((c) => c.CheckboxField),
+  file: () => import("../../components/controls/file-picker/file-picker.field").then((c) => c.FilePickerField),
+  file2: () => import("../../components/controls/file-picker/file-picker.field").then((c) => c.FilePickerField),
+  radio: () => import("../../components/controls/radio/radio.field").then((c) => c.RadioField),
+  textarea: () => import("../../components/controls/textarea/textarea.field").then((c) => c.TextareaField),
+  chips: () => import("../../components/controls/chips/chips.field").then((c) => c.ChipsField),
+  plate: () => import("../../components/controls/plate/plate.field").then((c) => c.PlateField),
+  note: () => import("../../components/controls/note/note.field").then((c) => c.NoteField),
+  slideToggle: () => import("../../components/controls/slide-toggle/slide-toggle.field").then((c) => c.SlideToggleField),
+  toggle: () => import("../../components/controls/toggle-button/toggle-button.field").then((c) => c.ToggleButtonField),
+  time: () => import("../../components/controls/time-picker/time-picker.field").then((c) => c.TimePickerField),
+  mobile: () => import("../../components/controls/mobile/mobile.field").then((c) => c.MobileField),
+  table: () => import("../../components/controls/table/table.field").then((c) => c.TableField),
+  userPicker: () => import("../../components/controls/user-picker/user-picker.field").then((c) => c.UserPickerField),
+  userPicker2: () => import("../../components/controls/user-picker/user-picker.field").then((c) => c.UserPickerField),
+};

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

@@ -0,0 +1,11 @@
+import { Type } from "@angular/core";
+import { DynamicImport } from "../interfaces/import";
+
+export const SERVICES: DynamicImport<Type<any>> = {
+  setValue: () => import("../../events/set-value/set-value-event").then((s) => s.SetValueEvent),
+  show: () => import("../../events/show/show-event").then((s) => s.ShowEvent),
+  load: () => import("../../events/load/load-value-event").then((s) => s.LoadValueEvent),
+  loadOptions: () => import("../../events/load/load-options-event").then((s) => s.LoadOptionsEvent),
+  triggerBasedOnJsonValue: () => import("../../events/triggers/trigger-based-on-json-value").then((s) => s.TriggerBasedOnJsonValue),
+  replaceApiKeyDefaultImpl: () => import("../../events/load/replace-api-keys").then((s) => s.ReplaceApiKeys),
+};

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

@@ -0,0 +1,21 @@
+import { DynamicImport } from "../interfaces/import";
+
+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/dto.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/event-strategy.ts

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

package/projects/iss/src/shared/interfaces/event-trigger-fn.ts

@@ -0,0 +1,7 @@
+import { FieldEvent } from "../classes/field-event";
+import { IssField } from "../classes/iss-field";
+import { FieldChange } from "./event-strategy";
+
+export interface ActionTriggerFn {
+  isTriggered(field: IssField, change: FieldChange, action: FieldEvent, masterField?: IssField): boolean;
+}

package/projects/iss/src/shared/interfaces/hint.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.ts

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

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

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

package/projects/iss/src/shared/interfaces/option.ts

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

package/projects/iss/src/shared/interfaces/validation.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";
+
+@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";
+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.ts

@@ -0,0 +1,130 @@
+import { Injectable } from "@angular/core";
+import { AbstractControl, AsyncValidatorFn, FormGroup, ValidatorFn, Validators } from "@angular/forms";
+import { map, merge, Observable, of } from "rxjs";
+import { FieldAsyncValidation } from "../classes/field-async-validation";
+import { FieldEvent } from "../classes/field-event";
+import { IssField } from "../classes/iss-field";
+import { FieldChange } from "../interfaces/event-strategy";
+
+@Injectable({providedIn: "root"})
+export class FormEngine {
+  fields: IssField[] = [];
+
+  createValidators(field: IssField): ValidatorFn[] {
+    if (!this.fieldHasValidation(field)) {
+      return [Validators.nullValidator];
+    }
+    return this.#validatorsToNgValidators(field);
+  }
+
+  createAsyncValidators(field: IssField): AsyncValidatorFn[] {
+    if (!(field && field.asyncValidation)) {
+      return [];
+    }
+    return this.#asyncValidatorsToNgValidators(field) as AsyncValidatorFn[];
+  }
+
+  getFieldValue(field: IssField) {
+    let fieldValue = field.value;
+    if (field.value === undefined && field.defaultValue) {
+      fieldValue = field.defaultValue;
+    }
+    return fieldValue ?? null;
+  }
+
+  trackChangesEvents(field: IssField, form: FormGroup): Observable<FieldChange> {
+    const changes$: Observable<FieldChange>[] = [];
+    const masterNames: Set<string> = new Set();
+    field.events.forEach((action: FieldEvent) => {
+      this.processTrackChanges(action.trackedFieldName, masterNames, changes$, field, form);
+    });
+    return merge(...changes$);
+  }
+
+  trackChangesValidations(field: IssField, 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: IssField, form: FormGroup) {
+    if (typeof masterName !== "string") {
+      return;
+    }
+
+    const masterCtrl: AbstractControl | null = form.get(masterName);
+    const masterField: IssField | undefined = this.fields.find((field: IssField) => 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 avoids 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: IssField): boolean {
+    return !!(field.validation && Object.values(field.validation).filter((v) => v).length);
+  }
+
+  fieldHasAsyncValidation(field: IssField): boolean {
+    return !!(field.asyncValidation && Object.values(field.asyncValidation).filter((v) => v).length);
+  }
+
+  isFormValid(form: FormGroup, fields: IssField[]) {
+    return fields.map((childField: IssField) => {
+      const currentCtrl = form.get(childField.name);
+      if (childField.validation?.required() && childField.visible() && childField.mode() === "edit" && currentCtrl?.status !== "DISABLED") {
+        return currentCtrl?.valid;
+      }
+      return true;
+    }).every((status) => status);
+  }
+
+  #validatorsToNgValidators(field: IssField): ValidatorFn[] {
+    return this.#mapNgValidators(field.validation).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]);
+  }
+
+  #asyncValidatorsToNgValidators(field: IssField): AsyncValidatorFn[] {
+    return this.#mapNgValidators(field.asyncValidation).map((validatorValue: any) => validatorValue?.fn(field));
+  }
+
+  #mapMasterFieldValueChangesToFieldChanges(masterField: IssField, 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.ts

@@ -0,0 +1,51 @@
+import { inject, Injectable, Injector, Type } from "@angular/core";
+import { from, Observable, of, tap } from "rxjs";
+import { IssField } from "../classes/iss-field";
+import { COMPONENTS } from "../indexes/components.index";
+import { SERVICES } from "../indexes/services.index";
+
+@Injectable({providedIn: "root"})
+export class Loader {
+  #injector: Injector = inject(Injector);
+  #loadedComponents: Map<string, Type<any>> = new Map();
+  #loadedServices: Map<string, <T>() => Promise<T>> = new Map();
+
+  loadComponent(field: IssField): 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";
+
+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 "../../components/controls/file-picker/attachment";
+
+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 { IssField } from "../classes/iss-field";
+
+export const FIELD_DATA: InjectionToken<IssField> = 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/user-search-api.token.ts

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