@ng-formworks/core 17.2.7 → 17.3.0

package/src/lib/json-schema-form.service.ts

@@ -1,907 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-import { AbstractControl, UntypedFormArray, UntypedFormGroup } from '@angular/forms';
-import Ajv, { ErrorObject, Options } from 'ajv';
-import jsonDraft6 from 'ajv/lib/refs/json-schema-draft-06.json';
-import cloneDeep from 'lodash/cloneDeep';
-import { Subject, Subscription } from 'rxjs';
-import {
-    deValidationMessages,
-    enValidationMessages,
-    esValidationMessages,
-    frValidationMessages,
-    itValidationMessages,
-    ptValidationMessages,
-    zhValidationMessages
-} from './locale';
-import {
-    JsonPointer,
-    buildFormGroup,
-    buildFormGroupTemplate,
-    buildLayout,
-    buildSchemaFromData,
-    buildSchemaFromLayout,
-    fixTitle,
-    forEach,
-    formatFormData,
-    getControl,
-    getLayoutNode,
-    hasOwn,
-    hasValue,
-    isArray,
-    isDefined,
-    isEmpty,
-    isObject,
-    removeRecursiveReferences,
-    toTitleCase
-} from './shared';
-
-import _isEqual from 'lodash/isEqual';
-
-
-export interface TitleMapItem {
-  name?: string;
-  value?: any;
-  checked?: boolean;
-  group?: string;
-  items?: TitleMapItem[];
-}
-export interface ErrorMessages {
-  [control_name: string]: {
-    message: string | Function | Object;
-    code: string;
-  }[];
-}
-
-@Injectable()
-export class JsonSchemaFormService implements OnDestroy {
-  JsonFormCompatibility = false;
-  ReactJsonSchemaFormCompatibility = false;
-  AngularSchemaFormCompatibility = false;
-  tpldata: any = {};
-
-  ajvOptions: Options = {
-    allErrors: true,
-    validateFormats:false,
-    strict:false
-  
-  };
-  ajv:any = new Ajv(this.ajvOptions); // AJV: Another JSON Schema Validator
-  
-  validateFormData: any = null; // Compiled AJV function to validate active form's schema
-
-  formValues: any = {}; // Internal form data (may not have correct types)
-  data: any = {}; // Output form data (formValues, formatted with correct data types)
-  schema: any = {}; // Internal JSON Schema
-  layout: any[] = []; // Internal form layout
-  formGroupTemplate: any = {}; // Template used to create formGroup
-  formGroup: any = null; // Angular formGroup, which powers the reactive form
-  framework: any = null; // Active framework component
-  formOptions: any; // Active options, used to configure the form
-
-  validData: any = null; // Valid form data (or null) (=== isValid ? data : null)
-  isValid: boolean = null; // Is current form data valid?
-  ajvErrors: ErrorObject[] = null; // Ajv errors for current data
-  validationErrors: any = null; // Any validation errors for current data
-  dataErrors: any = new Map(); //
-  formValueSubscription: any = null; // Subscription to formGroup.valueChanges observable (for un- and re-subscribing)
-  dataChanges: Subject<any> = new Subject(); // Form data observable
-  isValidChanges: Subject<any> = new Subject(); // isValid observable
-  validationErrorChanges: Subject<any> = new Subject(); // validationErrors observable
-
-  arrayMap: Map<string, number> = new Map(); // Maps arrays in data object and number of tuple values
-  dataMap: Map<string, any> = new Map(); // Maps paths in form data to schema and formGroup paths
-  dataRecursiveRefMap: Map<string, string> = new Map(); // Maps recursive reference points in form data
-  schemaRecursiveRefMap: Map<string, string> = new Map(); // Maps recursive reference points in schema
-  schemaRefLibrary: any = {}; // Library of schemas for resolving schema $refs
-  layoutRefLibrary: any = { '': null }; // Library of layout nodes for adding to form
-  templateRefLibrary: any = {}; // Library of formGroup templates for adding to form
-  hasRootReference = false; // Does the form include a recursive reference to itself?
-
-  language = 'en-US'; // Does the form include a recursive reference to itself?
-
-  // Default global form options
-  defaultFormOptions: any = {
-    autocomplete: true, // Allow the web browser to remember previous form submission values as defaults
-    addSubmit: 'auto', // Add a submit button if layout does not have one?
-    // for addSubmit: true = always, false = never,
-    // 'auto' = only if layout is undefined (form is built from schema alone)
-    debug: false, // Show debugging output?
-    disableInvalidSubmit: true, // Disable submit if form invalid?
-    formDisabled: false, // Set entire form as disabled? (not editable, and disables outputs)
-    formReadonly: false, // Set entire form as read only? (not editable, but outputs still enabled)
-    fieldsRequired: false, // (set automatically) Are there any required fields in the form?
-    framework: 'no-framework', // The framework to load
-    loadExternalAssets: false, // Load external css and JavaScript for framework?
-    pristine: { errors: true, success: true },
-    supressPropertyTitles: false,
-    setSchemaDefaults: 'auto', // Set fefault values from schema?
-    // true = always set (unless overridden by layout default or formValues)
-    // false = never set
-    // 'auto' = set in addable components, and everywhere if formValues not set
-    setLayoutDefaults: 'auto', // Set fefault values from layout?
-    // true = always set (unless overridden by formValues)
-    // false = never set
-    // 'auto' = set in addable components, and everywhere if formValues not set
-    validateOnRender: 'auto', // Validate fields immediately, before they are touched?
-    // true = validate all fields immediately
-    // false = only validate fields after they are touched by user
-    // 'auto' = validate fields with values immediately, empty fields after they are touched
-    widgets: {}, // Any custom widgets to load
-    defaultWidgetOptions: {
-      // Default options for form control widgets
-      listItems: 1, // Number of list items to initially add to arrays with no default value
-      addable: true, // Allow adding items to an array or $ref point?
-      orderable: true, // Allow reordering items within an array?
-      removable: true, // Allow removing items from an array or $ref point?
-      enableErrorState: true, // Apply 'has-error' class when field fails validation?
-      // disableErrorState: false, // Don't apply 'has-error' class when field fails validation?
-      enableSuccessState: true, // Apply 'has-success' class when field validates?
-      // disableSuccessState: false, // Don't apply 'has-success' class when field validates?
-      feedback: false, // Show inline feedback icons?
-      feedbackOnRender: false, // Show errorMessage on Render?
-      notitle: false, // Hide title?
-      disabled: false, // Set control as disabled? (not editable, and excluded from output)
-      readonly: false, // Set control as read only? (not editable, but included in output)
-      returnEmptyFields: true, // return values for fields that contain no data?
-      validationMessages: {} // set by setLanguage()
-    }
-  };
-
-  fcValueChangesSubs:Subscription;
-  fcStatusChangesSubs:Subscription;
-  constructor() {
-    this.setLanguage(this.language);
-    this.ajv.addMetaSchema(jsonDraft6);
-  }
-  ngOnDestroy(): void {
-    this.fcValueChangesSubs?.unsubscribe();
-    this.fcStatusChangesSubs?.unsubscribe();
-    this.formValueSubscription?.unsubscribe();
-    this.fcValueChangesSubs=null;
-    this.fcStatusChangesSubs=null;
-    this.formValueSubscription=null;
-
-  }
-
-  setLanguage(language: string = 'en-US') {
-    this.language = language;
-    const languageValidationMessages = {
-      de: deValidationMessages,
-      en: enValidationMessages,
-      es: esValidationMessages,
-      fr: frValidationMessages,
-      it: itValidationMessages,
-      pt: ptValidationMessages,
-      zh: zhValidationMessages,
-    };
-    const languageCode = language.slice(0, 2);
-
-    const validationMessages = languageValidationMessages[languageCode];
-
-    this.defaultFormOptions.defaultWidgetOptions.validationMessages = cloneDeep(
-      validationMessages
-    );
-  }
-
-  getData() {
-    return this.data;
-  }
-
-  getSchema() {
-    return this.schema;
-  }
-
-  getLayout() {
-    return this.layout;
-  }
-
-  resetAllValues() {
-    this.JsonFormCompatibility = false;
-    this.ReactJsonSchemaFormCompatibility = false;
-    this.AngularSchemaFormCompatibility = false;
-    this.tpldata = {};
-    this.validateFormData = null;
-    this.formValues = {};
-    this.schema = {};
-    this.layout = [];
-    this.formGroupTemplate = {};
-    this.formGroup = null;
-    this.framework = null;
-    this.data = {};
-    this.validData = null;
-    this.isValid = null;
-    this.validationErrors = null;
-    this.arrayMap = new Map();
-    this.dataMap = new Map();
-    this.dataRecursiveRefMap = new Map();
-    this.schemaRecursiveRefMap = new Map();
-    this.layoutRefLibrary = {};
-    this.schemaRefLibrary = {};
-    this.templateRefLibrary = {};
-    this.formOptions = cloneDeep(this.defaultFormOptions);
-  }
-
-  /**
-   * 'buildRemoteError' function
-   *
-   * Example errors:
-   * {
-   *   last_name: [ {
-   *     message: 'Last name must by start with capital letter.',
-   *     code: 'capital_letter'
-   *   } ],
-   *   email: [ {
-   *     message: 'Email must be from example.com domain.',
-   *     code: 'special_domain'
-   *   }, {
-   *     message: 'Email must contain an @ symbol.',
-   *     code: 'at_symbol'
-   *   } ]
-   * }
-   * //{ErrorMessages} errors
-   */
-  buildRemoteError(errors: ErrorMessages) {
-    forEach(errors, (value, key) => {
-      if (key in this.formGroup.controls) {
-        for (const error of value) {
-          const err = {};
-          err[error['code']] = error['message'];
-          this.formGroup.get(key).setErrors(err, { emitEvent: true });
-        }
-      }
-    });
-  }
-
-  validateData(newValue: any, updateSubscriptions = true): void {
-    // Format raw form data to correct data types
-    this.data = formatFormData(
-      newValue,
-      this.dataMap,
-      this.dataRecursiveRefMap,
-      this.arrayMap,
-      this.formOptions.returnEmptyFields
-    );
-    this.isValid = this.validateFormData(this.data);
-    this.validData = this.isValid ? this.data : null;
-    const compileErrors = (errors:ErrorObject[]) => {
-      const compiledErrors = {};
-      (errors || []).forEach(error => {
-        //TODO review-seems to be a change in newer versions
-        //of ajv giving '' as instancePath for root objects
-        let errorPath=error.instancePath||"ROOT";
-        if (!compiledErrors[errorPath]) {
-          compiledErrors[errorPath] = [];
-        }
-        compiledErrors[errorPath].push(error.message);
-      });
-      return compiledErrors;
-    };
-    this.ajvErrors = this.validateFormData.errors;
-    this.validationErrors = compileErrors(this.validateFormData.errors);
-    if (updateSubscriptions) {
-      this.dataChanges.next(this.data);
-      this.isValidChanges.next(this.isValid);
-      this.validationErrorChanges.next(this.ajvErrors);
-    }
-  }
-
-  buildFormGroupTemplate(formValues: any = null, setValues = true) {
-    this.formGroupTemplate = buildFormGroupTemplate(
-      this,
-      formValues,
-      setValues
-    );
-  }
-
-  buildFormGroup() {
-    this.formGroup = <UntypedFormGroup>buildFormGroup(this.formGroupTemplate);
-    if (this.formGroup) {
-      this.compileAjvSchema();
-      this.validateData(this.formGroup.value);
-
-      // Set up observables to emit data and validation info when form data changes
-      if (this.formValueSubscription) {
-        this.formValueSubscription.unsubscribe();
-      }
-      this.formValueSubscription = this.formGroup.valueChanges.subscribe(
-        formValue => this.validateData(formValue)
-      );
-    }
-  }
-
-  buildLayout(widgetLibrary: any) {
-    this.layout = buildLayout(this, widgetLibrary);
-  }
-
-  setOptions(newOptions: any) {
-    if (isObject(newOptions)) {
-      const addOptions = cloneDeep(newOptions);
-      // Backward compatibility for 'defaultOptions' (renamed 'defaultWidgetOptions')
-      if (isObject(addOptions.defaultOptions)) {
-        Object.assign(
-          this.formOptions.defaultWidgetOptions,
-          addOptions.defaultOptions
-        );
-        delete addOptions.defaultOptions;
-      }
-      if (isObject(addOptions.defaultWidgetOptions)) {
-        Object.assign(
-          this.formOptions.defaultWidgetOptions,
-          addOptions.defaultWidgetOptions
-        );
-        delete addOptions.defaultWidgetOptions;
-      }
-      Object.assign(this.formOptions, addOptions);
-
-      // convert disableErrorState / disableSuccessState to enable...
-      const globalDefaults = this.formOptions.defaultWidgetOptions;
-      ['ErrorState', 'SuccessState']
-        .filter(suffix => hasOwn(globalDefaults, 'disable' + suffix))
-        .forEach(suffix => {
-          globalDefaults['enable' + suffix] = !globalDefaults[
-            'disable' + suffix
-          ];
-          delete globalDefaults['disable' + suffix];
-        });
-    }
-  }
-
-  compileAjvSchema() {
-    if (!this.validateFormData) {
-      // if 'ui:order' exists in properties, move it to root before compiling with ajv
-      if (Array.isArray(this.schema.properties['ui:order'])) {
-        this.schema['ui:order'] = this.schema.properties['ui:order'];
-        delete this.schema.properties['ui:order'];
-      }
-      this.ajv.removeSchema(this.schema);
-      this.validateFormData = this.ajv.compile(this.schema);
-    }
-  }
-
-  buildSchemaFromData(data?: any, requireAllFields = false): any {
-    if (data) {
-      return buildSchemaFromData(data, requireAllFields);
-    }
-    this.schema = buildSchemaFromData(this.formValues, requireAllFields);
-  }
-
-  buildSchemaFromLayout(layout?: any): any {
-    if (layout) {
-      return buildSchemaFromLayout(layout);
-    }
-    this.schema = buildSchemaFromLayout(this.layout);
-  }
-
-  setTpldata(newTpldata: any = {}): void {
-    this.tpldata = newTpldata;
-  }
-
-  parseText(
-    text = '',
-    value: any = {},
-    values: any = {},
-    key: number | string = null
-  ): string {
-    if (!text || !/{{.+?}}/.test(text)) {
-      return text;
-    }
-    return text.replace(/{{(.+?)}}/g, (...a) =>
-      this.parseExpression(a[1], value, values, key, this.tpldata)
-    );
-  }
-
-  parseExpression(
-    expression = '',
-    value: any = {},
-    values: any = {},
-    key: number | string = null,
-    tpldata: any = null
-  ) {
-    if (typeof expression !== 'string') {
-      return '';
-    }
-    const index = typeof key === 'number' ? key + 1 + '' : key || '';
-    expression = expression.trim();
-    if (
-      (expression[0] === "'" || expression[0] === '"') &&
-      expression[0] === expression[expression.length - 1] &&
-      expression.slice(1, expression.length - 1).indexOf(expression[0]) === -1
-    ) {
-      return expression.slice(1, expression.length - 1);
-    }
-    if (expression === 'idx' || expression === '$index') {
-      return index;
-    }
-    if (expression === 'value' && !hasOwn(values, 'value')) {
-      return value;
-    }
-    if (
-      ['"', "'", ' ', '||', '&&', '+'].every(
-        delim => expression.indexOf(delim) === -1
-      )
-    ) {
-      const pointer = JsonPointer.parseObjectPath(expression);
-      return pointer[0] === 'value' && JsonPointer.has(value, pointer.slice(1))
-        ? JsonPointer.get(value, pointer.slice(1))
-        : pointer[0] === 'values' && JsonPointer.has(values, pointer.slice(1))
-          ? JsonPointer.get(values, pointer.slice(1))
-          : pointer[0] === 'tpldata' && JsonPointer.has(tpldata, pointer.slice(1))
-            ? JsonPointer.get(tpldata, pointer.slice(1))
-            : JsonPointer.has(values, pointer)
-              ? JsonPointer.get(values, pointer)
-              : '';
-    }
-    if (expression.indexOf('[idx]') > -1) {
-      expression = expression.replace(/\[idx\]/g, <string>index);
-    }
-    if (expression.indexOf('[$index]') > -1) {
-      expression = expression.replace(/\[$index\]/g, <string>index);
-    }
-    // TODO: Improve expression evaluation by parsing quoted strings first
-    // let expressionArray = expression.match(/([^"']+|"[^"]+"|'[^']+')/g);
-    if (expression.indexOf('||') > -1) {
-      return expression
-        .split('||')
-        .reduce(
-          (all, term) =>
-            all || this.parseExpression(term, value, values, key, tpldata),
-          ''
-        );
-    }
-    if (expression.indexOf('&&') > -1) {
-      return expression
-        .split('&&')
-        .reduce(
-          (all, term) =>
-            all && this.parseExpression(term, value, values, key, tpldata),
-          ' '
-        )
-        .trim();
-    }
-    if (expression.indexOf('+') > -1) {
-      return expression
-        .split('+')
-        .map(term => this.parseExpression(term, value, values, key, tpldata))
-        .join('');
-    }
-    return '';
-  }
-
-  setArrayItemTitle(
-    parentCtx: any = {},
-    childNode: any = null,
-    index: number = null
-  ): string {
-    const parentNode = parentCtx.layoutNode;
-    const parentValues: any = this.getFormControlValue(parentCtx);
-    const isArrayItem =
-      (parentNode.type || '').slice(-5) === 'array' && isArray(parentValues);
-    const text = JsonPointer.getFirst(
-      isArrayItem && childNode.type !== '$ref'
-        ? [
-          [childNode, '/options/legend'],
-          [childNode, '/options/title'],
-          [parentNode, '/options/title'],
-          [parentNode, '/options/legend']
-        ]
-        : [
-          [childNode, '/options/title'],
-          [childNode, '/options/legend'],
-          [parentNode, '/options/title'],
-          [parentNode, '/options/legend']
-        ]
-    );
-    if (!text) {
-      return text;
-    }
-    const childValue =
-      isArray(parentValues) && index < parentValues.length
-        ? parentValues[index]
-        : parentValues;
-    return this.parseText(text, childValue, parentValues, index);
-  }
-
-  setItemTitle(ctx: any) {
-    return !ctx.options.title && /^(\d+|-)$/.test(ctx.layoutNode.name)
-      ? null
-      : this.parseText(
-        ctx.options.title || toTitleCase(ctx.layoutNode.name),
-        this.getFormControlValue(this),
-        (this.getFormControlGroup(this) || <any>{}).value,
-        ctx.dataIndex[ctx.dataIndex.length - 1]
-      );
-  }
-
-  evaluateCondition(layoutNode: any, dataIndex: number[]): boolean {
-    const arrayIndex = dataIndex && dataIndex[dataIndex.length - 1];
-    let result = true;
-    if (hasValue((layoutNode.options || {}).condition)) {
-      if (typeof layoutNode.options.condition === 'string') {
-        let pointer = layoutNode.options.condition;
-        if (hasValue(arrayIndex)) {
-          pointer = pointer.replace('[arrayIndex]', `[${arrayIndex}]`);
-        }
-        pointer = JsonPointer.parseObjectPath(pointer);
-        result = !!JsonPointer.get(this.data, pointer);
-        if (!result && pointer[0] === 'model') {
-          result = !!JsonPointer.get({ model: this.data }, pointer);
-        }
-      } else if (typeof layoutNode.options.condition === 'function') {
-        result = layoutNode.options.condition(this.data);
-      } else if (
-        typeof layoutNode.options.condition.functionBody === 'string'
-      ) {
-        try {
-          const dynFn = new Function(
-            'model',
-            'arrayIndices',
-            layoutNode.options.condition.functionBody
-          );
-          result = dynFn(this.data, dataIndex);
-        } catch (e) {
-          result = true;
-          console.error(
-            'condition functionBody errored out on evaluation: ' +
-            layoutNode.options.condition.functionBody
-          );
-        }
-      }
-    }
-    return result;
-  }
-
-  initializeControl(ctx: any, bind = true): boolean {
-    if (!isObject(ctx)) {
-      return false;
-    }
-    if (isEmpty(ctx.options)) {
-      ctx.options = !isEmpty((ctx.layoutNode || {}).options)
-        ? ctx.layoutNode.options
-        : cloneDeep(this.formOptions);
-    }
-    ctx.formControl = this.getFormControl(ctx);
-    ctx.boundControl = bind && !!ctx.formControl;
-    if (ctx.formControl) {
-      ctx.controlName = this.getFormControlName(ctx);
-      ctx.controlValue = ctx.formControl.value;
-      ctx.controlDisabled = ctx.formControl.disabled;
-      ctx.options.errorMessage =
-        ctx.formControl.status === 'VALID'
-          ? null
-          : this.formatErrors(
-            ctx.formControl.errors,
-            ctx.options.validationMessages
-          );
-      ctx.options.showErrors =
-        this.formOptions.validateOnRender === true ||
-        (this.formOptions.validateOnRender === 'auto' &&
-          hasValue(ctx.controlValue));
-      this.fcStatusChangesSubs=ctx.formControl.statusChanges.subscribe(
-        status =>
-          (ctx.options.errorMessage =
-            status === 'VALID'
-              ? null
-              : this.formatErrors(
-                ctx.formControl.errors,
-                ctx.options.validationMessages
-              ))
-      );
-      this.fcValueChangesSubs=ctx.formControl.valueChanges.subscribe(value => {
-         //commented out to revert back to previous commits
-         //as seems to be causing some issues
-         /*
-        if (!!value) {
-          ctx.controlValue = value;
-        }
-        */
-        //TODO-test,this is the original code
-        if (!_isEqual(ctx.controlValue, value)) { ctx.controlValue = value }
-      });
-    } else {
-      ctx.controlName = ctx.layoutNode.name;
-      ctx.controlValue = ctx.layoutNode.value || null;
-      const dataPointer = this.getDataPointer(ctx);
-      if (bind && dataPointer) {
-        console.error(
-          `warning: control "${dataPointer}" is not bound to the Angular FormGroup.`
-        );
-      }
-    }
-    return ctx.boundControl;
-  }
-
-  formatErrors(errors: any, validationMessages: any = {}): string {
-    if (isEmpty(errors)) {
-      return null;
-    }
-    if (!isObject(validationMessages)) {
-      validationMessages = {};
-    }
-    const addSpaces = string =>
-      string[0].toUpperCase() +
-      (string.slice(1) || '')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/_/g, ' ');
-    const formatError = error =>
-      typeof error === 'object'
-        ? Object.keys(error)
-          .map(key =>
-            error[key] === true
-              ? addSpaces(key)
-              : error[key] === false
-                ? 'Not ' + addSpaces(key)
-                : addSpaces(key) + ': ' + formatError(error[key])
-          )
-          .join(', ')
-        : addSpaces(error.toString());
-    const messages = [];
-    return (
-      Object.keys(errors)
-        // Hide 'required' error, unless it is the only one
-        .filter(
-          errorKey =>
-            errorKey !== 'required' || Object.keys(errors).length === 1
-        )
-        .map(errorKey =>
-          // If validationMessages is a string, return it
-          typeof validationMessages === 'string'
-            ? validationMessages
-            : // If custom error message is a function, return function result
-            typeof validationMessages[errorKey] === 'function'
-              ? validationMessages[errorKey](errors[errorKey])
-              : // If custom error message is a string, replace placeholders and return
-              typeof validationMessages[errorKey] === 'string'
-                ? // Does error message have any {{property}} placeholders?
-                !/{{.+?}}/.test(validationMessages[errorKey])
-                  ? validationMessages[errorKey]
-                  : // Replace {{property}} placeholders with values
-                  Object.keys(errors[errorKey]).reduce(
-                    (errorMessage, errorProperty) =>
-                      errorMessage.replace(
-                        new RegExp('{{' + errorProperty + '}}', 'g'),
-                        errors[errorKey][errorProperty]
-                      ),
-                    validationMessages[errorKey]
-                  )
-                : // If no custom error message, return formatted error data instead
-                addSpaces(errorKey) + ' Error: ' + formatError(errors[errorKey])
-        )
-        .join('<br>')
-    );
-  }
-
-  updateValue(ctx: any, value: any): void {
-    // Set value of current control
-    ctx.controlValue = value;
-    if (ctx.boundControl) {
-      ctx.formControl.setValue(value);
-      ctx.formControl.markAsDirty();
-    }
-    ctx.layoutNode.value = value;
-
-    // Set values of any related controls in copyValueTo array
-    if (isArray(ctx.options.copyValueTo)) {
-      for (const item of ctx.options.copyValueTo) {
-        const targetControl = getControl(this.formGroup, item);
-        if (
-          isObject(targetControl) &&
-          typeof targetControl.setValue === 'function'
-        ) {
-          targetControl.setValue(value);
-          targetControl.markAsDirty();
-        }
-      }
-    }
-  }
-
-  updateArrayCheckboxList(ctx: any, checkboxList: TitleMapItem[]): void {
-    const formArray = <UntypedFormArray>this.getFormControl(ctx);
-
-    // Remove all existing items
-    while (formArray.value.length) {
-      formArray.removeAt(0);
-    }
-
-    // Re-add an item for each checked box
-    const refPointer = removeRecursiveReferences(
-      ctx.layoutNode.dataPointer + '/-',
-      this.dataRecursiveRefMap,
-      this.arrayMap
-    );
-    for (const checkboxItem of checkboxList) {
-      if (checkboxItem.checked) {
-        const newFormControl = buildFormGroup(
-          this.templateRefLibrary[refPointer]
-        );
-        newFormControl.setValue(checkboxItem.value);
-        formArray.push(newFormControl);
-      }
-    }
-    formArray.markAsDirty();
-  }
-
-  getFormControl(ctx: any): AbstractControl {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.dataPointer) ||
-      ctx.layoutNode.type === '$ref'
-    ) {
-      return null;
-    }
-    return getControl(this.formGroup, this.getDataPointer(ctx));
-  }
-
-  getFormControlValue(ctx: any): AbstractControl {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.dataPointer) ||
-      ctx.layoutNode.type === '$ref'
-    ) {
-      return null;
-    }
-    const control = getControl(this.formGroup, this.getDataPointer(ctx));
-    return control ? control.value : null;
-  }
-
-  getFormControlGroup(ctx: any): UntypedFormArray | UntypedFormGroup {
-    if (!ctx.layoutNode || !isDefined(ctx.layoutNode.dataPointer)) {
-      return null;
-    }
-    return getControl(this.formGroup, this.getDataPointer(ctx), true);
-  }
-
-  getFormControlName(ctx: any): string {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.dataPointer) ||
-      !hasValue(ctx.dataIndex)
-    ) {
-      return null;
-    }
-    return JsonPointer.toKey(this.getDataPointer(ctx));
-  }
-
-  getLayoutArray(ctx: any): any[] {
-    return JsonPointer.get(this.layout, this.getLayoutPointer(ctx), 0, -1);
-  }
-
-  getParentNode(ctx: any): any {
-    return JsonPointer.get(this.layout, this.getLayoutPointer(ctx), 0, -2);
-  }
-
-  getDataPointer(ctx: any): string {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.dataPointer) ||
-      !hasValue(ctx.dataIndex)
-    ) {
-      return null;
-    }
-    return JsonPointer.toIndexedPointer(
-      ctx.layoutNode.dataPointer,
-      ctx.dataIndex,
-      this.arrayMap
-    );
-  }
-
-  getLayoutPointer(ctx: any): string {
-    if (!hasValue(ctx.layoutIndex)) {
-      return null;
-    }
-    return '/' + ctx.layoutIndex.join('/items/');
-  }
-
-  isControlBound(ctx: any): boolean {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.dataPointer) ||
-      !hasValue(ctx.dataIndex)
-    ) {
-      return false;
-    }
-    const controlGroup = this.getFormControlGroup(ctx);
-    const name = this.getFormControlName(ctx);
-    return controlGroup ? hasOwn(controlGroup.controls, name) : false;
-  }
-
-  addItem(ctx: any, name?: string): boolean {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.$ref) ||
-      !hasValue(ctx.dataIndex) ||
-      !hasValue(ctx.layoutIndex)
-    ) {
-      return false;
-    }
-
-    // Create a new Angular form control from a template in templateRefLibrary
-    const newFormGroup = buildFormGroup(
-      this.templateRefLibrary[ctx.layoutNode.$ref]
-    );
-
-    // Add the new form control to the parent formArray or formGroup
-    if (ctx.layoutNode.arrayItem) {
-      // Add new array item to formArray
-      (<UntypedFormArray>this.getFormControlGroup(ctx)).push(newFormGroup);
-    } else {
-      // Add new $ref item to formGroup
-      (<UntypedFormGroup>this.getFormControlGroup(ctx)).addControl(
-        name || this.getFormControlName(ctx),
-        newFormGroup
-      );
-    }
-
-    // Copy a new layoutNode from layoutRefLibrary
-    const newLayoutNode = getLayoutNode(ctx.layoutNode, this);
-    newLayoutNode.arrayItem = ctx.layoutNode.arrayItem;
-    if (ctx.layoutNode.arrayItemType) {
-      newLayoutNode.arrayItemType = ctx.layoutNode.arrayItemType;
-    } else {
-      delete newLayoutNode.arrayItemType;
-    }
-    if (name) {
-      newLayoutNode.name = name;
-      newLayoutNode.dataPointer += '/' + JsonPointer.escape(name);
-      newLayoutNode.options.title = fixTitle(name);
-    }
-
-    // Add the new layoutNode to the form layout
-    JsonPointer.insert(this.layout, this.getLayoutPointer(ctx), newLayoutNode);
-
-    return true;
-  }
-
-  moveArrayItem(ctx: any, oldIndex: number, newIndex: number): boolean {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.dataPointer) ||
-      !hasValue(ctx.dataIndex) ||
-      !hasValue(ctx.layoutIndex) ||
-      !isDefined(oldIndex) ||
-      !isDefined(newIndex) ||
-      oldIndex === newIndex
-    ) {
-      return false;
-    }
-
-    // Move item in the formArray
-    const formArray = <UntypedFormArray>this.getFormControlGroup(ctx);
-    const arrayItem = formArray.at(oldIndex);
-    formArray.removeAt(oldIndex);
-    formArray.insert(newIndex, arrayItem);
-    formArray.updateValueAndValidity();
-
-    // Move layout item
-    const layoutArray = this.getLayoutArray(ctx);
-    layoutArray.splice(newIndex, 0, layoutArray.splice(oldIndex, 1)[0]);
-    return true;
-  }
-
-  removeItem(ctx: any): boolean {
-    if (
-      !ctx.layoutNode ||
-      !isDefined(ctx.layoutNode.dataPointer) ||
-      !hasValue(ctx.dataIndex) ||
-      !hasValue(ctx.layoutIndex)
-    ) {
-      return false;
-    }
-
-    // Remove the Angular form control from the parent formArray or formGroup
-    if (ctx.layoutNode.arrayItem) {
-      // Remove array item from formArray
-      (<UntypedFormArray>this.getFormControlGroup(ctx)).removeAt(
-        ctx.dataIndex[ctx.dataIndex.length - 1]
-      );
-    } else {
-      // Remove $ref item from formGroup
-      (<UntypedFormGroup>this.getFormControlGroup(ctx)).removeControl(
-        this.getFormControlName(ctx)
-      );
-    }
-
-    // Remove layoutNode from layout
-    JsonPointer.remove(this.layout, this.getLayoutPointer(ctx));
-    return true;
-  }
-}