iss-ctrl 0.0.2 → 0.0.3

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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,128 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,47 @@
+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
+    };
+  }
+}