iss-ctrl 0.0.3 → 0.0.4

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

@@ -1,105 +0,0 @@
-import {Component, input, InputSignal, signal, WritableSignal} from "@angular/core";
-import {NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
-import {MatButtonToggleModule} from "@angular/material/button-toggle";
-import {Option} from "../../../shared/interfaces/option.interface";
-import {ControlBase} from "../base/control.base";
-
-@Component({
-  selector: "iss-ctrl-toggle-button",
-  imports: [MatButtonToggleModule, ReactiveFormsModule],
-  template: `
-    <mat-button-toggle-group
-      [formControl]="ctrl"
-      [multiple]=multiple()
-      [hideMultipleSelectionIndicator]="true"
-      [hideSingleSelectionIndicator]="true"
-    >
-      @for (option of options(); track option.value) {
-        <mat-button-toggle class="d-block" [value]="option.value" (change)="onToggleButtonChange($event.source.checked,option.value)">
-          {{ option.label }}
-        </mat-button-toggle>
-      }
-    </mat-button-toggle-group>
-  `,
-  styles: `
-    .mat-button-toggle-group-appearance-standard {
-      border-radius: unset !important;
-    }
-  `,
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonControl, multi: true}
-  ]
-})
-export class ToggleButtonControl extends ControlBase {
-  options: InputSignal<Option[]> = input.required();
-  selectedOptions: WritableSignal<Map<string, Option>> = signal(new Map<string, Option>());
-
-  override writeValue(value: string | null) {
-    this.#reset();
-    if (value === null || value === undefined) {
-      return;
-    }
-    const values: string[] = value.split(",").map((val: string) => val.trim());
-    const selectedOptions: Option[] = this.options().filter((option: Option) => values.includes(option.value));
-    if (!this.multiple()) {
-      if (selectedOptions.length > 1) {
-        this.emitValue(null);
-        throw new Error("You cannot set multiple values while the control is in single selection mode!");
-      }
-      this.ctrl.setValue(values[0]);
-      this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory([selectedOptions[0]]));
-      return;
-    }
-    this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOptions));
-    this.ctrl.setValue(values);
-  }
-
-  addToSelectedOptionsMap(option: Map<string, Option>) {
-    if (option) {
-      this.selectedOptions = signal(option);
-    }
-  }
-
-  onToggleButtonChange(checked: boolean, value: string) {
-    if (!this.multiple()) {
-      this.emitValue(value);
-    } else {
-      const option = this.options().find((o: Option) => o.value === value);
-      if (!option) {
-        return;
-      }
-      this.selectedOptions.update((prev) => {
-        const options = prev;
-        if (checked) options.set(option.value, option!);
-        else options.delete(option.value);
-        return options;
-      });
-      this.getEmissionValue(this.selectedOptions());
-    }
-  }
-
-  stringifySelectedOptions(): string | null {
-    if (!this.selectedOptions()?.size) {
-      return null;
-    }
-    return Array.from(this.selectedOptions(), ([value]) => value).join();
-  }
-
-  getEmissionValue(options: any) {
-    this.addToSelectedOptionsMap(options);
-    this.emitValue(this.stringifySelectedOptions());
-  }
-
-  #selectedOptionsMapFactory(selectedOptions: Option[]) {
-    const selectedOptionsMap: Map<string, Option> = new Map();
-    for (const option of selectedOptions) {
-      selectedOptionsMap.set(option.value, option);
-    }
-    return selectedOptionsMap;
-  }
-
-  #reset() {
-    this.selectedOptions().clear();
-    this.ctrl.setValue(null);
-  }
-}

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

@@ -1,15 +0,0 @@
-import {Component} from "@angular/core";
-import {ViewerBase} from "../base/viewer.base";
-
-@Component({
-  selector: "iss-vwr-toggle-button",
-  standalone: true,
-  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/toggle-button/toggle-button.wrapper.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/provider.const";
-import {WrapperBase} from "../base/wrapper.base";
-import {ToggleButtonControl} from "./toggle-button.control";
-import {ToggleButtonViewer} from "./toggle-button.viewer";
-
-@Component({
-  selector: "iss-wrp-toggle-button",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    ToggleButtonControl,
-    ToggleButtonViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @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-vwr-toggle-button [field]="field" />
-      }
-    }
-  `
-})
-export class ToggleButtonWrapper extends WrapperBase {
-  onChange($event: any) {
-    this.field.ctrlJsonValue.set($event);
-  }
-}

package/projects/iss/src/components/controls/user-picker/employee.service.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/regex.const";
-import {USER_SEARCH_URL} from "../../../shared/tokens/url.token";
-
-@Injectable({providedIn: "root"})
-export class EmployeeService {
-  loggedInUserProfile: any;
-  USER_SEARCH_URL: string = inject(USER_SEARCH_URL);
-  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.wrapper.ts

@@ -1,128 +0,0 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal} from "@angular/core";
-import {MatLabel} from "@angular/material/form-field";
-import {MatSidenav, MatSidenavContainer} from "@angular/material/sidenav";
-import {map, tap} from "rxjs";
-import {ValidationMessageComponent} from "../../shared/validation-message.component";
-import {WrapperBase} from "../base/wrapper.base";
-import {SelectControl} from "../select/select.control";
-import {EmployeeService} from "./employee.service";
-
-@Component({
-  selector: "iss-user-picker",
-  imports: [
-    MatLabel,
-    SelectControl,
-    ValidationMessageComponent,
-    MatSidenav,
-    MatSidenavContainer,
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      @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)"
-        >
-          <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 UserPickerWrapper extends WrapperBase {
-  userImageHost = "https://igateapp.stc.com.sa";
-  employeeService = inject(EmployeeService);
-  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/field-data-injector.pipe.ts

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

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

@@ -1,152 +0,0 @@
-import {AsyncPipe, NgComponentOutlet} from "@angular/common";
-import {ChangeDetectionStrategy, Component, computed, effect, EffectRef, inject, input, InputSignal, OnDestroy, output, OutputEmitterRef, signal, WritableSignal} from "@angular/core";
-import {ControlContainer, FormGroup} from "@angular/forms";
-import {first, map} from "rxjs";
-import {FormField} from "../../shared/classes/form-field";
-import {VALIDATORS} from "../../shared/indexes/validators.index";
-import {ComponentOutlet} from "../../shared/interfaces/outlet.interface";
-import {FormEngine} from "../../shared/services/form-engine.service";
-import {LoaderService} from "../../shared/services/loader.service";
-import {FieldDataInjectorPipe} from "./field-data-injector.pipe";
-
-let formStates = [];
-let componentIndex = 0;
-
-@Component({
-  selector: "iss-form-outlet",
-  imports: [
-    NgComponentOutlet,
-    FieldDataInjectorPipe,
-    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 OnDestroy {
-  onReady: OutputEmitterRef<boolean> = output();
-  formReady: WritableSignal<boolean> = signal(false);
-  fields: InputSignal<FormField[]> = input.required<FormField[]>();
-  components: WritableSignal<ComponentOutlet[] | null> = signal(null);
-  formWithMultipleSteps = computed(() => this.fields().some((f: FormField) => f.formSection?.key));
-  #controlContainer: ControlContainer = inject(ControlContainer);
-  #formEngine: FormEngine = inject(FormEngine);
-  #loader: LoaderService = inject(LoaderService);
-  #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);
-    }
-  });
-
-  ngOnInit() {
-    componentIndex++;
-    this.#listenToHostFormGroupChanges().subscribe((isReady) => {
-      if (this.formWithMultipleSteps()) {
-        formStates.push(isReady);
-        if (formStates.length === componentIndex) {
-          this.#formEngine.formReady.next(true);
-          this.formReady.set(true);
-          this.onReady.emit(true);
-        }
-      } else {
-        if (isReady) {
-          this.#formEngine.formReady.next(true);
-          this.formReady.set(true);
-          this.onReady.emit(true);
-        }
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this.#effectRef.destroy();
-  }
-
-  async #componentsFactory(fields: FormField[]): Promise<ComponentOutlet[]> {
-    const fieldsComponentPromise = fields.map(async (field: FormField): Promise<ComponentOutlet> => {
-      return {
-        self$: this.#loader.loadComponent(field),
-        data: await this.#initField(field)
-      };
-    });
-    return await Promise.all(fieldsComponentPromise);
-  }
-
-  async #initField(field: any): Promise<FormField> {
-    const f: FormField = new FormField(field, this.#loader);
-
-    await Promise.all([
-      this.#initFieldEvents(f),
-      this.#initFieldValidation(f)
-    ]);
-
-    return f;
-  }
-
-  async #initFieldEvents(f: FormField): 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 #initFieldValidation(f: FormField): 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() {
-    const hostFormGroup = this.#controlContainer.control as FormGroup;
-    return hostFormGroup.valueChanges.pipe(
-      map((values) => {
-        const controlNames = Object.keys(values);
-        const fieldNames = this.fields().map((f: FormField) => f.name);
-        const diff = fieldNames.filter((x) => !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.interface";
-
-@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.service.ts

@@ -1,47 +0,0 @@
-import {inject, Injectable} from "@angular/core";
-import {AbstractControl, FormGroup} from "@angular/forms";
-import {FieldAction} from "../shared/classes/field-action";
-import {FormField} from "../shared/classes/form-field";
-import {FieldChange, FieldEvent, FieldEventArgument} from "../shared/interfaces/field.interface";
-import {ActionTriggerManagerService} from "./triggers/action-trigger-manager.service";
-
-@Injectable({providedIn: "root"})
-export class EventHandlerService {
-  #actionTriggerManager: ActionTriggerManagerService = inject(ActionTriggerManagerService);
-
-  async fire(control: AbstractControl, form: FormGroup, field: FormField, change: FieldChange) {
-    let actions: FieldAction[] = 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: FieldEvent | 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: FieldEventArgument = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
-      evt?.fire(args);
-    }
-  }
-
-  async revert(control: AbstractControl, form: FormGroup, field: FormField, change: FieldChange) {
-    const actions: FieldAction[] = await this.#actionTriggerManager.getActionsToBeReverted(field, change);
-    for (let i = 0; i < actions.length; i++) {
-      let evt: FieldEvent | undefined = actions[i].fn;
-      if (!evt) {
-        evt = await actions[i].fnPromise;
-      }
-      const args: FieldEventArgument = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
-      evt?.revert(args);
-    }
-  }
-
-  #fieldEventArgumentFactory(control: AbstractControl, form: FormGroup, field: FormField, change: FieldChange, action: FieldAction): FieldEventArgument {
-    return {
-      action,
-      change,
-      control,
-      field,
-      form
-    };
-  }
-}