iss-ctrl 0.0.7 → 0.0.8

package/projects/iss/src/components/controls/toggle-button/toggle-button.field.ts

@@ -1,40 +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";
-import { ToggleButtonControl } from "./toggle-button.control";
-import { ToggleButtonViewer } from "./toggle-button.viewer";
-
-@Component({
-  selector: "iss-field-toggle-button",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    ToggleButtonControl,
-    ToggleButtonViewer
-  ],
-  template: `
-    @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      @if (field.mode() === "edit") {
-        <iss-ctrl-toggle-button
-          [formControlName]="field.name"
-          [options]="field.options()"
-          [multiple]="field.config.multiple()"
-          (onChange)="onChange($event)"
-        />
-      } @else {
-        <iss-viewer-toggle-button [field]="field" />
-      }
-    }
-  `
-})
-export class ToggleButtonField extends FieldBase {
-  onChange($event: any) {
-    this.field.ctrlJsonValue.set($event);
-  }
-}

package/projects/iss/src/components/controls/toggle-button/toggle-button.viewer.ts

@@ -1,14 +0,0 @@
-import { Component } from "@angular/core";
-import { ViewerBase } from "../base/viewer-base";
-
-@Component({
-  selector: "iss-viewer-toggle-button",
-  template: `
-    <p>
-      @for (item of field().ctrlJsonValue(); track item?.value; let last = $last) {
-        <span>{{ item.label }} {{ last ? '' : ', ' }}</span>
-      }
-    </p>
-  `,
-})
-export class ToggleButtonViewer extends ViewerBase {}

package/projects/iss/src/components/controls/user-picker/employee.ts

@@ -1,73 +0,0 @@
-import { HttpClient } from "@angular/common/http";
-import { inject, Injectable } from "@angular/core";
-import { map, Observable, tap } from "rxjs";
-import { PLACEHOLDER_REGEX } from "../../../shared/constants/placeholder-regex.const";
-import { USER_SEARCH_API } from "../../../shared/tokens/user-search-api.token";
-
-@Injectable({providedIn: "root"})
-export class Employee {
-  loggedInUserProfile: any;
-  USER_SEARCH_URL: string = inject(USER_SEARCH_API);
-  userImageHost = "https://igateapp.stc.com.sa";
-  #http: HttpClient = inject(HttpClient);
-
-  getProfile(email: string): Observable<any> {
-    const url = this.replacePlaceholders(this.USER_SEARCH_URL, {email: email});
-
-    return this.#http.get(url).pipe(
-      map((dto: any) => {
-        dto.data.profileImageUrl = this.getProfileImageUrl(dto.data);
-        return dto.data;
-      }),
-      tap((user: any) => {
-        localStorage.setItem("user", JSON.stringify(user));
-        this.loggedInUserProfile = user;
-      })
-    );
-  }
-
-  search(username: string, endpoint?: string): Observable<any[]> {
-    let url = this.replacePlaceholders(this.USER_SEARCH_URL, {username});
-    if (endpoint) {
-      if (!endpoint.includes("{username}")) {
-        throw "endpoint should have this string {username} as a placeholder to be able to replace it";
-      }
-    }
-
-    if (endpoint) {
-      url = this.replacePlaceholders(endpoint, {username});
-    }
-
-    return this.#http.get<any>(url).pipe(
-      map((employees: any) => {
-        employees.data = employees.data.map((emp: any) => {
-          emp.image = this.getProfileImageUrl(emp);
-          return emp;
-        });
-        return employees.data;
-      })
-    );
-  }
-
-  getProfileImageUrl(user: any): string {
-    if (user.image && this.#checkIfImageHasValue(user.image)) {
-      return this.userImageHost + user.image;
-    }
-    return "";
-  }
-
-  replacePlaceholders(str: string, values: any) {
-    /*TODO check if placeholders passed in values object*/
-    if (!str) {
-      return "";
-    }
-    return str.replace(PLACEHOLDER_REGEX, (match: any) => {
-      return values[match.replace("{", "").replace("}", "")] ?? match;
-    });
-  }
-
-  #checkIfImageHasValue(imageUri: any) {
-    const splitResult = imageUri.split("/");
-    return !!(splitResult[splitResult.length - 1] && splitResult[splitResult.length - 1] !== ".jpg");
-  }
-}

package/projects/iss/src/components/controls/user-picker/user-picker.field.ts

@@ -1,124 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from "@angular/core";
-import { MatSidenav, MatSidenavContainer } from "@angular/material/sidenav";
-import { map, tap } from "rxjs";
-import { ValidationMessageComponent } from "../../shared/validation-message.component";
-import { FieldBase } from "../base/field-base";
-import { SelectControl } from "../select/select.control";
-import { Employee } from "./employee";
-
-@Component({
-  selector: "iss-user-picker",
-  imports: [
-    SelectControl,
-    ValidationMessageComponent,
-    MatSidenav,
-    MatSidenavContainer,
-  ],
-  template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-select
-          [formControlName]="field.name"
-          [min]="field.config.min() ?? null"
-          [max]="field.config.max() ?? null"
-          [options]="options()"
-          [multiple]="true"
-          (onQueryChange)="search($event)"
-          (onChange)="updateField($event)"
-        >
-          <label>{{ field.label() }}</label>
-          <ng-template let-item #optionTemplate>
-            <div class="d-flex align-items-center gap-2">
-              <ds-avatar size="x-small" [attr.image]="item.image"></ds-avatar>
-              <span class="fs-14 fw-medium fc-black">{{ item.name }}</span>
-            </div>
-          </ng-template>
-          <ng-template let-item #cardViewerTemplate>
-            <div (click)="showUserData(item);drawer.open()">
-              {{ item.name }}
-            </div>
-          </ng-template>
-        </iss-ctrl-select>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
-      } @else {
-        <p>{{ field.value }}</p>
-      }
-    }
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <div class="main-sidenav">
-          <div class="sidenav-title bc-white">
-            <h3> Employee Information </h3>
-            <ds-icon icon="close" class="fc-black fs-20 p-3 cursor-pointer" (click)="drawer.close()"></ds-icon>
-          </div>
-          <div class="sidenav-body p-0">
-            <div class="d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center">
-              <ds-avatar [attr.image]="userImageHost + userData?.profileImage || userData?.profileImageUrl" [attr.label]="userData?.name"></ds-avatar>
-              @if (userData?.employeeNumber) {
-                <div class="d-flex flex-column gap-1">
-                  <h4 class="fs-16 fc-black fw-medium mb-0">{{ userData?.name }}</h4>
-                  @if (!userData?.job?.name) {
-                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.position?.name }}</h6>
-                  }
-                  @if (!userData?.position?.name) {
-                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.job?.name }}</h6>
-                  }
-                </div>
-              }
-              <div class="d-flex flex-wrap gap-2">
-                <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
-                  <ds-icon icon="mail-o" class="fc-coral fs-20"></ds-icon>
-                  <a [href]="'mailTo:' + userData?.email" class="fc-black">{{ userData?.email }}</a>
-                </div>
-                @if (userData?.contact?.mobile) {
-                  <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
-                    <ds-icon icon="phone" class="fc-coral fs-20"></ds-icon>
-                    <a [href]="'tel:' + userData?.contact?.mobile" class="fc-black">
-                      <bdi>{{ userData?.contact?.mobile }}</bdi>
-                    </a>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-      </mat-sidenav>
-    </mat-sidenav-container>
-  `,
-  styles: `
-    .mat-drawer {
-      position: fixed;
-      left: 0;
-    }`,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class UserPickerField extends FieldBase {
-  userImageHost = "https://igateapp.stc.com.sa";
-  employeeService = inject(Employee);
-  options: any = signal([]);
-  userData: any;
-
-  search(event: string) {
-    this.employeeService.search(event)
-      .pipe(
-        map((res: any) => {
-          return res.map((user: any) => {
-            user.value = user.email;
-            user.label = user.name;
-            return user;
-          });
-        }),
-        tap((res: any) => {
-          this.options.set(res);
-        })
-      ).subscribe();
-  }
-
-  updateField($event: string | FormData) {
-    this.options.set([]);
-  }
-
-  showUserData(item: any) {
-    this.userData = item;
-  }
-}

package/projects/iss/src/components/outlet/component-outlet.ts

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

package/projects/iss/src/components/outlet/field-data-injector.ts

@@ -1,20 +0,0 @@
-import { inject, Injector, Pipe, PipeTransform } from "@angular/core";
-import { IssField } from "../../shared/classes/iss-field";
-import { FIELD_DATA } from "../../shared/tokens/field.token";
-
-@Pipe({name: "FieldDataInjector"})
-export class FieldDataInjector implements PipeTransform {
-  injector: Injector = inject(Injector);
-
-  transform(field: IssField | null): Injector {
-    return Injector.create({
-      parent: this.injector,
-      providers: [
-        {
-          provide: FIELD_DATA,
-          useValue: field,
-        },
-      ],
-    });
-  }
-}

package/projects/iss/src/components/outlet/iss-form-group.ts

@@ -1,5 +0,0 @@
-import { FormGroup } from "@angular/forms";
-
-export interface IssFormGroup extends FormGroup {
-  id?: string;
-}

package/projects/iss/src/components/outlet/outlet.ts

@@ -1,154 +0,0 @@
-import { AsyncPipe, NgComponentOutlet } from "@angular/common";
-import { ChangeDetectionStrategy, Component, effect, EffectRef, inject, input, InputSignal, OnDestroy, OnInit, output, OutputEmitterRef, signal, WritableSignal } from "@angular/core";
-import { ControlContainer } from "@angular/forms";
-import { debounceTime, first, map } from "rxjs";
-import { IssField } from "../../shared/classes/iss-field";
-import { VALIDATORS } from "../../shared/indexes/validators.index";
-import { FormEngine } from "../../shared/services/form-engine";
-import { Loader } from "../../shared/services/loader";
-import { ComponentOutlet } from "./component-outlet";
-import { FieldDataInjector } from "./field-data-injector";
-import { IssFormGroup } from "./iss-form-group";
-
-const outletRegistry = new Map();
-
-@Component({
-  selector: "iss-form-outlet",
-  imports: [
-    NgComponentOutlet,
-    FieldDataInjector,
-    AsyncPipe,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    @if (components() && components()?.length) {
-      @for (component of components(); track $index) {
-        <ng-container
-          [ngComponentOutlet]="component.self$ | async"
-          [ngComponentOutletInjector]="component.data | FieldDataInjector"
-          [ngComponentOutletInputs]="{formReady: formReady(), issField: component.data | FieldDataInjector}"
-        />
-      }
-    }
-  `
-})
-export class Outlet implements OnInit, OnDestroy {
-  ready: OutputEmitterRef<boolean> = output();
-  formReady: WritableSignal<boolean> = signal(false);
-  fields: InputSignal<IssField[]> = input.required<IssField[]>();
-  components: WritableSignal<ComponentOutlet[] | null> = signal(null);
-  #controlContainer: ControlContainer = inject(ControlContainer);
-  #formEngine: FormEngine = inject(FormEngine);
-  #loader: Loader = inject(Loader);
-  #effectRef: EffectRef = effect(async () => {
-    const components = await this.#componentsFactory(this.fields());
-    this.components.set(components);
-    if (components) {
-      this.#formEngine.fields = components.map((component: ComponentOutlet) => component.data);
-    }
-  });
-
-  get hostFormGroup(): IssFormGroup {
-    return this.#controlContainer.control as IssFormGroup;
-  }
-
-  ngOnInit() {
-    if (!this.hostFormGroup.id) {
-      this.hostFormGroup.id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-    }
-
-    const existingFields = outletRegistry.get(this.hostFormGroup.id) || [];
-    const newFieldNames = this.fields().filter((f) => f.mode() === "edit" || (f.mode() === "view" && f.value)).map((f) => f.name);
-    outletRegistry.set(this.hostFormGroup.id, Array.from(new Set([...existingFields, ...newFieldNames])));
-
-    this.#listenToHostFormGroupChanges().subscribe((isReady) => {
-      if (isReady) {
-        this.formReady.set(true);
-        this.ready.emit(true);
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this.#effectRef.destroy();
-  }
-
-  async #componentsFactory(fields: IssField[]): Promise<ComponentOutlet[]> {
-    const fieldsComponentPromise = fields.map(async (field: IssField): Promise<ComponentOutlet> => {
-      return {
-        self$: this.#loader.loadComponent(field),
-        data: await this.#initField(field)
-      };
-    });
-    return await Promise.all(fieldsComponentPromise);
-  }
-
-  /*todo needs refactoring to be in the issField class*/
-
-  async #initField(field: any): Promise<IssField> {
-    const f: IssField = new IssField(field, this.#loader);
-
-    await Promise.all([
-      this.#loadFieldEvents(f),
-      this.#loadFieldValidation(f)
-    ]);
-
-    return f;
-  }
-
-  async #loadFieldEvents(f: IssField): Promise<void> {
-    if (!f.events?.length) return;
-
-    await Promise.all(
-      f.events.map(async (action) => {
-        const [fn, triggerFn, configFn] = await Promise.all([
-          action.fnPromise,
-          action.config.triggerFnPromise,
-          action.config.fnPromise
-        ]);
-
-        action.fn = fn;
-        if (triggerFn) {
-          action.config.triggerFn = triggerFn;
-        }
-        action.config.fn = configFn;
-      })
-    );
-  }
-
-  async #loadFieldValidation(f: IssField): Promise<void> {
-    if (!f.validation) return;
-
-    const validationEntries = Object.entries(f.validation).filter(
-      ([key, validation]) => {
-        if (VALIDATORS[key] === undefined) {
-          console.error(`${key} not found`);
-          return false;
-        }
-        return validation !== undefined && !validation?.hasOwnProperty("fn");
-      }
-    );
-
-    await Promise.all(
-      validationEntries.map(async ([key, validation]) => {
-        f.validation[key] = {
-          fn: await VALIDATORS[key](),
-          value: validation
-        };
-      })
-    );
-  }
-
-  #listenToHostFormGroupChanges() {
-    return this.hostFormGroup.valueChanges.pipe(
-      debounceTime(500),
-      map(() => {
-        const controlNames = Object.keys(this.hostFormGroup.getRawValue());
-        const fieldNames = outletRegistry.get(this.hostFormGroup.id);
-        const diff = fieldNames.filter((x: string) => !controlNames.includes(x));
-        return diff.length === 0;
-      }),
-      first((v) => v)
-    );
-  }
-}

package/projects/iss/src/components/shared/hints.component.ts

@@ -1,38 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, input, InputSignal } from "@angular/core";
-import { MatHint } from "@angular/material/form-field";
-import { Hint } from "../../shared/interfaces/hint";
-
-@Component({
-  selector: "iss-ctrl-hints",
-  imports: [MatHint,],
-  template: `
-    @if (hints().length) {
-      <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
-        @for (hint of hints(); track $index) {
-          @if (hint) {
-            <mat-hint [align]="hint.align" class="d-flex align-items-center gap-1 fs-12">
-              @if (hint.valid === undefined) {
-                <ds-icon icon="info" class="fs-24 fc-dark-gray"></ds-icon>
-                <span class="fc-dark-gray text-break">{{ hint.label }}</span>
-              } @else {
-                <ds-icon
-                  icon="{{ touched() ? (hint.valid ? 'check-circle-f' : 'close-circle') : 'check-circle-o' }}"
-                  class="fs-24 {{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }}"
-                >
-                </ds-icon>
-                <span
-                  class="{{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }} text-break"
-                >{{ hint.label }}</span>
-              }
-            </mat-hint>
-          }
-        }
-      </div>
-    }
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class HintsComponent {
-  hints: InputSignal<Hint[]> = input<Hint[]>([]);
-  touched: InputSignal<boolean> = input(false);
-}

package/projects/iss/src/components/shared/validation-message.component.ts

@@ -1,36 +0,0 @@
-import {KeyValuePipe} from "@angular/common";
-import {Component, input, InputSignal} from "@angular/core";
-import {ValidationErrors} from "@angular/forms";
-import {MatError} from "@angular/material/form-field";
-import {VALIDATION_MESSAGES} from "../../shared/constants/validation.const";
-import {TranslatePipe} from "../../shared/pipes/translate.pipe";
-
-@Component({
-  selector: "iss-validation-message-viewer",
-  imports: [
-    KeyValuePipe,
-    TranslatePipe,
-    MatError
-  ],
-  template: `
-    @if (errors() !== null && showMessage()) {
-      @for (error of errors() ?? {} | keyvalue; track error) {
-        <p>
-          <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
-        </p>
-      }
-    }
-  `,
-})
-export class ValidationMessageComponent {
-  errors: InputSignal<ValidationErrors | null> = input.required();
-  showMessage: InputSignal<boolean> = input.required();
-
-  getValidationMessage(error: { key: string, value: any }): any {
-    const errorMessageGenerator = VALIDATION_MESSAGES[error.key];
-    if (!errorMessageGenerator) {
-      throw new Error(`THERE IS NO VALIDATION MESSAGE FOR KEY "${error.key}"`);
-    }
-    return errorMessageGenerator(error.value);
-  }
-}

package/projects/iss/src/events/event-handler.ts

@@ -1,47 +0,0 @@
-import { inject, Injectable } from "@angular/core";
-import { AbstractControl, FormGroup } from "@angular/forms";
-import { FieldEvent } from "../shared/classes/field-event";
-import { IssField } from "../shared/classes/iss-field";
-import { EventArgument, EventStrategy, FieldChange } from "../shared/interfaces/event-strategy";
-import { EventTriggerManager } from "./triggers/event-trigger-manager";
-
-@Injectable({providedIn: "root"})
-export class EventHandler {
-  #actionTriggerManager: EventTriggerManager = inject(EventTriggerManager);
-
-  async fire(control: AbstractControl, form: FormGroup, field: IssField, change: FieldChange) {
-    let actions: FieldEvent[] = await this.#actionTriggerManager.getActionsToBeTriggered(field, change);
-    /* todo need to follow up on actions on this field (self) */
-    for (let i = 0; i < actions.length; i++) {
-      let evt: EventStrategy | undefined = actions[i].fn;
-      if (!evt) {
-        /* todo remove await from array and use allSettle instead or any other solution */
-        evt = await actions[i].fnPromise;
-      }
-      const args: EventArgument = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
-      evt?.fire(args);
-    }
-  }
-
-  async revert(control: AbstractControl, form: FormGroup, field: IssField, change: FieldChange) {
-    const actions: FieldEvent[] = await this.#actionTriggerManager.getActionsToBeReverted(field, change);
-    for (let i = 0; i < actions.length; i++) {
-      let evt: EventStrategy | undefined = actions[i].fn;
-      if (!evt) {
-        evt = await actions[i].fnPromise;
-      }
-      const args: EventArgument = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
-      evt?.revert(args);
-    }
-  }
-
-  #fieldEventArgumentFactory(control: AbstractControl, form: FormGroup, field: IssField, change: FieldChange, action: FieldEvent): EventArgument {
-    return {
-      action,
-      change,
-      control,
-      field,
-      form
-    };
-  }
-}

package/projects/iss/src/events/load/after-fetch.ts

@@ -1,29 +0,0 @@
-import { Injectable } from "@angular/core";
-import { EventArgument, EventConfigFn } from "../../shared/interfaces/event-strategy";
-import { getPropertyByPath } from "../../shared/utilities/get-property-by-path.util";
-
-@Injectable({providedIn: "root"})
-export class AfterFetch implements EventConfigFn {
-  execute(args: EventArgument) {
-    // set options from response in case of selectable fields
-    if (args.field.base === "select") {
-      args.field.options.set(args.field.response());
-    }
-
-    args.control.setValue(getPropertyByPath(args.field.response(), args.action.config.setValueFromApiResponse) || args.field.response());
-
-    // if (args.action?.config?.setValueFromApiResponse) {
-    //   // setValue using specific property from response
-    // } else {
-    //   if (args.field.base === "input") {
-    //     args.control.setValue(args.field.response.data);
-    //   }
-    // }
-
-    if (args.action.config.disableAfterFetching) {
-      args.control.disable();
-    }
-
-    args.field.loading.set(false);
-  }
-}

package/projects/iss/src/events/load/load-event.ts

@@ -1,26 +0,0 @@
-import { inject, Injectable } from "@angular/core";
-import { EventArgument } from "../../shared/interfaces/event-strategy";
-import { HOST } from "../../shared/tokens/host.token";
-import { ReplaceApiKeys } from "./replace-api-keys";
-
-@Injectable({providedIn: "root"})
-export class LoadEvent {
-  #replaceApiKeysService = inject(ReplaceApiKeys);
-  #host: string = inject(HOST);
-
-  getApi(args: EventArgument) {
-    let api;
-    if (args.action.config.fn) {
-      api = args.action.config.fn.execute(args);
-    } else {
-      api = this.#replaceApiKeysService.execute(args);
-    }
-
-    return `${this.#host}${api}`;
-  }
-
-  fetchErrorHandler(args: EventArgument, err: any) {
-    console.error(err);
-    args.field.loading.set(false);
-  }
-}

package/projects/iss/src/events/load/load-options-event.ts

@@ -1,49 +0,0 @@
-import { inject, Injectable } from "@angular/core";
-import { Dto } from "../../shared/interfaces/dto";
-import { EventArgument, EventStrategy } from "../../shared/interfaces/event-strategy";
-import { getPropertyByPath } from "../../shared/utilities/get-property-by-path.util";
-import { IssHttp } from "../../shared/utilities/http.util.service";
-import { LoadEvent } from "./load-event";
-
-@Injectable({providedIn: "root"})
-export class LoadOptionsEvent implements EventStrategy {
-  loadEvent = inject(LoadEvent);
-  #http: IssHttp = inject(IssHttp);
-
-  fire(args: EventArgument) {
-    console.log(`${args.field.name} listens to ${args.action.trackedFieldName} =>` + "%c Load Event Fired", "color: green");
-    const api = this.loadEvent.getApi(args);
-
-    args.field.loading.set(true);
-    this.#http.get(api).subscribe({
-      next: (response: Dto) => {
-        args.field.response.set(response.data);
-        args.field.apiResponse.next(response.data);
-
-        if (args.action.config.afterFetchFn) {
-          args.action.config.afterFetchFn?.execute(args);
-        } else {
-          args.field.options.set(args.field.response());
-
-          if (args.action.config.setValueFromApiResponse) {
-            args.control.setValue(getPropertyByPath(args.field.response(), args.action.config.setValueFromApiResponse));
-          }
-
-          if (args.action.config.disableAfterFetching) {
-            args.control.disable();
-          }
-        }
-        args.field.loading.set(false);
-      },
-      error: (err) => {
-        // todo handle errors
-        this.loadEvent.fetchErrorHandler(args, err);
-      },
-    });
-    args.action.triggered = true;
-  }
-
-  revert(args: EventArgument) {
-    console.log(`${args.field.name} listens to ${args.action.trackedFieldName} =>` + "%c Load Event Reverted", "color: red");
-  }
-}